spc/src/views/spc-basic/components/productList-four-content.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-10 15:44:28
 * @Description:
-->
<template>
  <div class="baseTable">
    <div v-if="workingProcedure.length && productFeaturesOptions.length">
      <el-tabs @tab-click="tabClick">
        <el-tab-pane
          v-loading="loading"
          element-loading-text="保存中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          label="控制矩阵"
        >
          <el-button style="float:right" size="small" type="primary" @click="deleteFeatures()">
            <svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
            保存
          </el-button>
          <el-table
            :data="productFeaturesList"
            v-loading="dataListLoading"
            border
            style="width: 50%;"
          >
            <el-table-column prop="name" align="center"> </el-table-column>
            <el-table-column
              v-for="(item, index) in workingProcedure"
              :key="item.id"
              :label="item.workingProcedureName"
            >
              <template slot-scope="scope">
                <el-checkbox
                  @change="
                    (checked) => CheckboxChange(checked, scope.row.id, item.workingProcedureId)
                  "
                  :checked="scope.row['checked' + index]"
                >
                </el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="特性列表" align="center">
          <el-table
            :data="dataList"
            :header-cell-style="{
              background: '#F2F4F9',
              color: '#606266',
            }"
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              header-align="center"
              align="center"
              label="序号"
              width="50"
            >
            </el-table-column>
            <el-table-column prop="code" align="center" label="编号"> </el-table-column>
            <el-table-column prop="name" align="center" label="名称"></el-table-column>
            <el-table-column prop="type" align="center" label="特性类型">
              <template slot-scope="scope">
                <span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="defectLevel" align="center" label="缺陷等级">
              <template slot-scope="scope">
                <span>{{
                  scope.row.defectLevel === 1
                    ? "致命缺陷"
                    : scope.row.defectLevel === 2
                    ? "严重缺陷"
                    : "轻微缺陷"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="measureToolName" align="center" label="量具"></el-table-column>
            <el-table-column prop="isSpc" align="center" label="SPC">
              <template slot-scope="scope">
                <span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="controlGraphName"
              align="center"
              label="分析图形"
            ></el-table-column>
            <el-table-column prop="sampleSize" align="center" label="样本大小"></el-table-column>
            <el-table-column
              prop="samplingFrequency"
              align="center"
              label="抽样频率"
            ></el-table-column>
            <el-table-column prop="unitName" align="center" label="单位"></el-table-column>
            <el-table-column prop="decimalPlaces" align="center" label="小数位数"></el-table-column>
            <el-table-column prop="specifications" align="center" label="规格"></el-table-column>
            <el-table-column prop="lsl" align="center" label="LSL"></el-table-column>
            <el-table-column prop="sl" align="center" label="SL"></el-table-column>
            <el-table-column prop="usl" align="center" label="USL"></el-table-column>
            <el-table-column prop="targetCpk" align="center" label="目标CPK"></el-table-column>
            <el-table-column prop="targetPpk" align="center" label="目标PPK"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注"></el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              :label="$t('handle')"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
                  <el-tooltip class="item" effect="dark" content="修改" placement="top">
                    <svg class="icon-svg aui-sidebar__menu-icon">
                      <use xlink:href="#icon-编辑"></use>
                    </svg>
                  </el-tooltip>
                </el-button>
                <el-button type="text" size="small" @click="productFeaturesHis(scope.row.id)">
                  <el-tooltip class="item" effect="dark" content="历史记录" placement="top">
                    <svg class="icon-svg aui-sidebar__menu-icon">
                      <use xlink:href="#历史记录"></use>
                    </svg>
                  </el-tooltip>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-empty
      v-else
      description="该产品没有配置产品特性或工序，暂时不能分配过程控制特性"
    ></el-empty>
    <four-add-or-update
      v-if="fourAddOrUpdateVisible"
      ref="fourAddOrUpdate"
      @refreshFourDataList="getFourDataList"
    ></four-add-or-update>
    <four-history v-if="productFeaturesHisVisible" ref="productFeaturesHisRef"></four-history>
  </div>
</template>

<script>
import fourAddOrUpdate from "./productList-four-add";
import fourHistory from "./productList-four-history";
export default {
  props: {
    productFeaturesOptions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    workingProcedure: {
      type: Array,
      default: () => {
        return [];
      },
    },
    productId: {
      type: String,
    },
  },
  data() {
    return {
      fourAddOrUpdateVisible: false,
      productFeaturesList: [],
      dataList: [],
      setBatchInsert: [],
      inspectionStage: 0,
      dataListLoading: false,
      loading: false,
      productFeaturesHisVisible: false,
    };
  },
  components: {
    fourAddOrUpdate,
    fourHistory,
  },
  methods: {
    init(index) {
      this.dataListLoading = false;
      this.loading = false;
      this.inspectionStage = parseInt(index);
      this.productFeaturesList.splice(0, this.productFeaturesList.length);
      this.$nextTick(() => {
        this.getSelection();
        if (this.productId) {
        }
      });
    },
    getSelection() {
      this.setBatchInsert.splice(0, this.setBatchInsert.length);
      this.dataListLoading = true;
      this.$http
        .post(
          `/basic/productFeatures/getFeaturesByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.productFeaturesList = this.productFeaturesOptions.map((item) => {
            const obj = Object.assign({}, item);
            this.workingProcedure.forEach((item1, index) => {
              res.data.forEach((item2) => {
                if (item2.productFeaturesId === item.id) {
                  if (item2.workingProcedureId === item1.workingProcedureId) {
                    Object.assign(obj, { ["checked" + index]: true });
                    this.CheckboxChange(true, item2.productFeaturesId, item2.workingProcedureId);
                  }
                }
              });
            });
            return obj;
          });
          this.dataListLoading = false;
        })
        .catch((e) => {
          console.log(e);
          this.dataListLoading = false;
        });
    },
    tabClick(val) {
      if (val.label === "特性列表") {
        this.getFourDataList();
      }
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.fourAddOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.fourAddOrUpdate.init(id, this.productId);
      });
    },
    deleteFeatures() {
      this.loading = true;
      this.workingProcedure.forEach((item, index) => {
        this.$http
          .delete(
            `/basic/featuresStageProcedureRelation/deleteByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}&workingProcedureId=${item.workingProcedureId}`
          )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            if (index === this.workingProcedure.length - 1) {
              this.addFeatures();
            }
          })
          .catch(() => {});
      });
    },
    addFeatures() {
      this.$http
        .post("/basic/featuresStageProcedureRelation/batchInsert", [...this.setBatchInsert])
        .then(({ data: res }) => {
          this.loading = false;
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    CheckboxChange(checked, productFeaturesId, workingProcedureId) {
      this.setBatchInsert = [...this.setBatchInsert];
      if (checked) {
        const obj = {
          inspectionStage: parseInt(this.inspectionStage),
          productFeaturesId: productFeaturesId,
          workingProcedureId: workingProcedureId,
        };
        this.setBatchInsert.push(obj);
      } else {
        const id1 = this.setBatchInsert.findIndex((item) => {
          if (
            item.productFeaturesId === productFeaturesId &&
            item.workingProcedureId === workingProcedureId
          ) {
            return true;
          }
        });
        this.setBatchInsert.splice(id1, 1);
      }
    },
    getFourDataList() {
      this.$http
        .post(
          `/basic/productFeatures/getFeaturesList?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.dataList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data;
          this.tabClick();
        })
        .catch(() => {});
    },
    productFeaturesHis(id) {
      this.productFeaturesHisVisible = true;
      this.$nextTick(() => {
        this.$refs.productFeaturesHisRef.init(id);
      });
    },
    // 表单提交
    dataFormSubmit() {},
  },
};
</script>

<style>
.baseTable .el-table__body tr.current-row > td.el-table__cell {
  background-color: #eaf1fc;
}
.baseTable .el-table .el-table__cell {
  padding: 0;
  height: 35px;
}
</style>