xujiecloud-vue/src/views/modules/dm/DMQcMethod.vue

<template>
  <div class="mod-config">
    <!-- 条件查询 -->
    <el-form :inline="true" label-position="top" :model="searchData">
      <el-form-item label="BU">
        <el-select v-model="searchData.buDesc" placeholder="请选择" clearable style="width: 80px">
          <el-option
            v-for="i in userBuList"
            :key="i.buNo"
            :label="i.buDesc"
            :value="i.buDesc">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方法编码">
        <el-input v-model="searchData.methodNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="方法名称">
        <el-input v-model="searchData.methodName" clearable style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="检验类型">
        <el-select v-model="searchData.inspectionTypeNo" placeholder="请选择" style="width: 100px">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="i in options"
            :key="i.inspectionTypeNo"
            :label="i.inspectionTypeName"
            :value="i.inspectionTypeNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button v-if="!authSearch" type="primary" @click="getDataList()">查询</el-button>
        <el-button v-if="!authSave" type="primary" @click="addModal()">新增</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ "导出" }}
        </download-excel>
      </el-form-item>
    </el-form>

    <!-- 展示列表 -->
    <el-table
      :height="height"
      :data="dataList"
      @header-dragend="handleColumnResize"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed===''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">
            <span v-if="columnsProp.includes(item.columnProp)">{{ scope.row[`${item.columnProp}Desc`] }}</span>
            <span v-else>
              {{ scope.row[item.columnProp] }}
            </span>
          </span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="130"
        label="操作">
        <template slot-scope="scope">
          <a v-if="!authUpdate" type="text" size="small" @click="updateModal(scope.row)">修改</a>
          <a v-if="!authDelete" type="text" size="small" @click="deleteModal(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 新增和修改 -->
    <el-dialog title="检验方法" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="500px">
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="BU" prop="bu" :rules="rules.bu">
          <el-select v-model="modalData.bu" placeholder="请选择" :disabled="modalDisableFlag" style="width: 456px">
            <el-option
              v-for="i in userBuList"
              :key="i.buNo"
              :label="i.sitename"
              :value="i.buNo">
              <span style="float: left;width: 100px">{{ i.sitename }}</span>
              <span style="float: right; color: #8492a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size: 11px;width: 60px">
                {{ i.buDesc }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="方法名称:" prop="methodName" :rules="rules.methodNameType">
          <el-input v-model="modalData.methodName" style="width: 221px"></el-input>
        </el-form-item>
        <el-form-item label="检验类型:" prop="inspectionTypeNo" :rules="rules.inspectionTypeNoType">
          <el-select v-model="modalData.inspectionTypeNo" placeholder="请选择" style="width: 221px">
            <el-option
              v-for="i in options"
              :key="i.inspectionTypeNo"
              :label="i.inspectionTypeName"
              :value="i.inspectionTypeNo">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'检验方法说明:'">
          <el-input v-model="modalData.methodRemark" style="width: 456px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="saveData()">保存</el-button>
        <el-button type="primary" @click="modalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
// 请求体/响应字段与后端 DmMethodData 一致；删除前服务端检查 dm_method_item（DmMethodItemData）
import {
  qcMethodSearch,
  dmMethodSave,
  dmMethodUpdate,
  dmMethodDelete,
  inspectionTypeSearch,
  getSiteAndBuByUserName
} from "@/api/qc/dmBasic.js";
import { getTableDefaultListLanguage, getTableUserListLanguage, updateColumnSize } from "@/api/table.js";
import { userFavoriteList, saveUserFavorite, removeUserFavorite } from "@/api/userFavorite.js";

export default {
  name: "DMQcMethod",
  data() {
    return {
      columnsProp: ["createBy", "updateBy"],
      favorite: false,
      exportData: [],
      exportName: "刀模检验方法" + this.dayjs().format("YYYYMMDDHHmmss"),
      exportHeader: ["刀模检验方法"],
      exportFooter: [],
      exportList: [],
      searchData: {
        site: "",
        userName: this.$store.state.user.name,
        methodNo: "",
        methodName: "",
        inspectionTypeNo: "",
        buDesc: "RFID",
        page: 1,
        limit: 10
      },
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      height: 200,
      dataList: [],
      dataListLoading: false,
      modalFlag: false,
      modalDisableFlag: false,
      modalData: {
        site: this.$store.state.user.site,
        bu: "2_03-RFID",
        flag: "",
        methodNo: "",
        methodName: "",
        createBy: this.$store.state.user.name,
        updateBy: this.$store.state.user.name,
        methodRemark: "",
        inspectionTypeNo: "823"
      },
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableBuDesc",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "buDesc",
          headerAlign: "center",
          align: "center",
          columnLabel: "BU",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableMethodNo",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "methodNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "方法编码",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableMethodName",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "methodName",
          headerAlign: "center",
          align: "left",
          columnLabel: "方法名称",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 200
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableMethodRemark",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "methodRemark",
          headerAlign: "center",
          align: "left",
          columnLabel: "方法说明",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 200
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableInspectionTypeName",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "inspectionTypeName",
          headerAlign: "center",
          align: "center",
          columnLabel: "检验类型",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableCreateDate",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "createDate",
          headerAlign: "center",
          align: "center",
          columnLabel: "创建时间",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableCreateBy",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "createBy",
          headerAlign: "center",
          align: "center",
          columnLabel: "创建人",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableUpdateDate",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "updateDate",
          headerAlign: "center",
          align: "center",
          columnLabel: "更新时间",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 170
        },
        {
          userId: this.$store.state.user.name,
          functionId: 822001,
          serialNumber: "822001TableUpdateBy",
          tableId: "822001Table",
          tableName: "检验方法维护表",
          columnProp: "updateBy",
          headerAlign: "center",
          align: "center",
          columnLabel: "更新人",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: "",
          columnWidth: 120
        }
      ],
      rules: {
        methodNameType: [{ required: true, message: " ", trigger: ["blur", "change"] }],
        inspectionTypeNoType: [{ required: true, message: " ", trigger: ["blur", "change"] }],
        bu: [{ required: true, message: " ", trigger: ["blur", "change"] }]
      },
      options: [],
      userBuList: [],
      authSearch: false,
      authSave: false,
      authUpdate: false,
      authDelete: false,
      menuId: this.$route.meta.menuId
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180;
    });
  },
  created() {
    this.getButtonAuthData();
    this.getSiteAndBuByUserName();
    this.favoriteIsOk();
    this.inspectionTypeSearch();
    this.getTableUserColumn(this.$route.meta.menuId + "table", 1);
    if (!this.authSearch) {
      this.getDataList();
    }
  },
  methods: {
    handleColumnResize(newWidth, oldWidth, column) {
      const inData = this.columnList.filter(item => item.columnProp === column.property)[0];
      inData.columnWidth = newWidth;
      updateColumnSize(inData).then(({ data }) => {
        if (data.code === 0) {
          console.log("栏位宽度保存成功！");
        }
      });
    },
    getSiteAndBuByUserName() {
      const tempData = { username: this.$store.state.user.name };
      getSiteAndBuByUserName(tempData).then(({ data }) => {
        if (data.code === 0) {
          this.userBuList = data.rows;
        }
      });
    },
    getDataList() {
      this.searchData.limit = this.pageSize;
      this.searchData.page = this.pageIndex;
      qcMethodSearch(this.searchData).then(({ data }) => {
        if (data.code === 0) {
          this.dataList = data.page.list;
          this.pageIndex = data.page.currPage;
          this.pageSize = data.page.pageSize;
          this.totalPage = data.page.totalCount;
        }
      });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    addModal() {
      
      this.modalData = {
        flag: "1",
        site: this.$store.state.user.site,
        bu: '2_03-RFID',
        createBy: this.$store.state.user.name,
        updateBy: this.$store.state.user.name,
        methodNo: "",
        methodName: "",
        methodRemark: "",
        inspectionTypeNo: "823"
      };
      this.modalDisableFlag = false;
      this.modalFlag = true;
    },
    updateModal(row) {
      this.modalData = {
        flag: "2",
        bu: row.site + "_" + row.buNo,
        site: row.site,
        createBy: this.$store.state.user.name,
        updateBy: this.$store.state.user.name,
        methodNo: row.methodNo,
        methodName: row.methodName,
        methodRemark: row.methodRemark,
        inspectionTypeNo: row.inspectionTypeNo
      };
      this.modalDisableFlag = true;
      this.modalFlag = true;
    },
    deleteModal(row) {
      this.$confirm(`是否删除这个检验方法?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          dmMethodDelete(row).then(({ data }) => {
            if (data && data.code === 0) {
              this.getDataList();
              this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => {} });
            } else {
              this.$alert(data.msg, "错误", { confirmButtonText: "确定" });
            }
          });
        })
        .catch(() => {});
    },
    saveData() {
      if (this.modalData.bu === "" || this.modalData.bu == null) {
        this.$message.warning("请选择BU！");
        return;
      }
      if (this.modalData.methodName === "" || this.modalData.methodName == null) {
        this.$message.warning("请输入检验方法名称！");
        return;
      }
      
      if (this.modalData.flag === "1") {
        dmMethodSave(this.modalData).then(({ data }) => {
          if (data && data.code === 0) {
            this.getDataList();
            this.modalFlag = false;
            this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => {} });
          } else {
            this.$alert(data.msg, "错误", { confirmButtonText: "确定" });
          }
        });
      } else {
        dmMethodUpdate(this.modalData).then(({ data }) => {
          if (data && data.code === 0) {
            this.getDataList();
            this.modalFlag = false;
            this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => {} });
          } else {
            this.$alert(data.msg, "错误", { confirmButtonText: "确定" });
          }
        });
      }
    },
    inspectionTypeSearch() {
      const tempData = { site: this.$store.state.user.site };
      inspectionTypeSearch(tempData).then(({ data }) => {
        if (data.code === 0) {
          this.options = data.rows;
          this.modalData.inspectionTypeNo = "823";
        }
      });
    },
    favoriteIsOk() {
      const userFavorite = { userId: this.$store.state.user.id, languageCode: this.$i18n.locale };
      userFavoriteList(userFavorite).then(({ data }) => {
        for (let i = 0; i < data.list.length; i++) {
          if (this.$route.meta.menuId === data.list[i].menuId) {
            this.favorite = true;
          }
        }
      });
    },
    favoriteFunction() {
      const userFavorite = { userId: this.$store.state.user.id, functionId: this.$route.meta.menuId };
      if (this.favorite) {
        removeUserFavorite(userFavorite).then(({ data }) => {
          this.$message.success(data.msg);
          this.favorite = false;
        });
      } else {
        saveUserFavorite(userFavorite).then(({ data }) => {
          this.$message.success(data.msg);
          this.favorite = true;
        });
      }
    },
    async createExportData() {
      this.searchData.limit = -1;
      this.searchData.page = 1;
      this.searchData.inspectionTypeNo = "823";
      await qcMethodSearch(this.searchData).then(({ data }) => {
        this.exportList = data.page.list;
      });
      return this.exportList;
    },
    startDownload() {},
    finishDownload() {},
    fields() {
      let json = "{";
      this.columnList.forEach((item, index) => {
        if (index === this.columnList.length - 1) {
          json += '"' + item.columnLabel + '":"' + item.columnProp + '"';
        } else {
          json += '"' + item.columnLabel + '":"' + item.columnProp + '",';
        }
      });
      json += "}";
      // eslint-disable-next-line no-eval
      return eval("(" + json + ")");
    },
    async getTableUserColumn(tableId, columnId) {
      const queryTableUser = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId,
        status: true,
        languageCode: this.$i18n.locale
      };
      await getTableUserListLanguage(queryTableUser).then(({ data }) => {
        if (data.rows.length > 0) {
          if (columnId === 1) this.columnList = data.rows;
        } else {
          this.getColumnList(tableId, columnId);
        }
      });
    },
    async getColumnList(tableId, columnId) {
      const queryTable = { functionId: this.$route.meta.menuId, tableId, languageCode: this.$i18n.locale };
      await getTableDefaultListLanguage(queryTable).then(({ data }) => {
        if (!data.rows.length === 0) {
          if (columnId === 1) this.columnList = data.rows;
        }
      });
    },
    getButtonAuthData() {
      const searchFlag = this.isAuth(this.menuId + ":search");
      const saveFlag = this.isAuth(this.menuId + ":save");
      const updateFlag = this.isAuth(this.menuId + ":update");
      const deleteFlag = this.isAuth(this.menuId + ":delete");
      this.authSearch = !searchFlag;
      this.authSave = !saveFlag;
      this.authUpdate = !updateFlag;
      this.authDelete = !deleteFlag;
    }
  }
};
</script>

<style scoped>
.el-table /deep/ .cell{
  height: auto;
  line-height: 1.5;
}
</style>