kd-aiot-frontend-qms/src/views/inspectionTemplate/AddorUpdate.vue

<template>
  <!--  <el-dialog-->
  <!--    :title="!dataForm.id ? '新增' : '修改'"-->
  <!--    :close-on-click-modal="false"-->
  <!--    :visible.sync="visible"-->
  <!--    width="60%"-->
  <!--  >-->
  <ele-modal
    :title="!dataForm.id ? '新增' : '修改'"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
    :maxable="true"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-row style="margin-bottom: 10px">
        <el-col :span="4"
          ><el-form-item label="类型 " prop="type">
            <el-select
              clearable
              class="ele-block"
              v-model="dataForm.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :label="item.label"
                :value="+item.value"
                :key="item.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="名称" prop="qualitySchemeTemplateName">
            <el-input
              v-model="dataForm.qualitySchemeTemplateName"
              placeholder="质检方案名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编码" prop="qualitySchemeTemplateCode">
            <el-input
              v-model="dataForm.qualitySchemeTemplateCode"
              placeholder="质检方案编码"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"
          ><el-form-item label="状态 " prop="status">
            <el-select
              clearable
              class="ele-block"
              v-model="dataForm.status"
              placeholder="请选择"
            >
              <el-option label="失效" :value="0" />
              <el-option label="有效" :value="1" />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="templateRemark">
            <el-input
              type="textarea"
              v-model="dataForm.templateRemark"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="list"
          height="400px"
          tool-class="ele-toolbar-form"
          cache-key="inspectionClassify"
          row-key="qualityLevelId"
          @selection-change="selectionChange"
        >
          <template v-slot:toolbar>
            <el-button @click="handAdd(1)" size="mini" type="primary"
              >新增质检项</el-button
            >
          </template>

          <template v-slot:textType="{ row }">
            {{
              row.textType == 1
                ? '数值'
                : row.textType == 2
                ? '选择'
                : row.textType == 3
                ? '上下限'
                : row.textType == 4
                ? '规格'
                : row.textType == 5
                ? '时间'
                : row.textType == 6
                ? '范围'
                : row.textType == 7
                ? '文本'
                : ''
            }}
          </template>

          <template v-slot:type="{ row }">
            {{ getDictValue('质检标准类型', row.qualityStandardType) }}
          </template>

          <template v-slot:inspectionName="{ row }">
            <div>
              <el-input
                v-model="row.inspectionName"
                style="width: 160px"
              ></el-input
            ></div>
          </template>

          <template v-slot:defaultValue="{ row }">
            <div style="width: 100%; display: flex">
              <DictSelection
                style="width: 85px"
                clearable
                dictName="数学字符"
                v-model="row.symbol"
              ></DictSelection>
              <div v-if="row.textType == 3">
                <el-input v-model="row.minValue" style="width: 80px"></el-input
                >-
                <el-input v-model="row.maxValue" style="width: 80px">
                </el-input>
              </div>

              <div v-else>
                <el-input
                  v-model="row.defaultValue"
                  style="width: 170px"
                ></el-input>
              </div>

              <DictSelection
                dictName="工艺参数单位"
                clearable
                filterable
                v-model="row.unitName"
                style="width: 100px"
              >
              </DictSelection>
            </div>
          </template>

          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              title="确定要删除当前质检项吗？"
              @confirm="handDel($index, 1)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-row>
      <el-row v-if="dataForm.type !== 2">
        <ele-pro-table
          ref="table"
          :columns="categoryColumns"
          :datasource="templateCategoryList"
          height="300px"
          tool-class="ele-toolbar-form"
          cache-key="inspectionClassify"
          row-key="qualityLevelId"
          @selection-change="selectionChange"
          :need-page="false"
        >
          <template v-slot:toolbar>
            <el-button @click="handAdd(2)" size="mini" type="primary"
              >选择物品</el-button
            >
          </template>

          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              title="确定要删除当前物品吗？"
              @confirm="handDel($index, 2)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
    </span>
    <termPop ref="termRef" @selectChange="selectChange"></termPop>

    <!-- 选择产品 -->
    <EquipmentDialog
      ref="equipmentRefs"
      @choose="confirmChoose"
      :typeS="['1']"
      type="1"
      :disabledCode="templateCategoryList.map((item) => item.code)"
    >
    </EquipmentDialog>
  </ele-modal>
</template>

<script>
  import termPop from '@/views/inspectionTemplate/inspectionClassify/index.vue';
  import EquipmentDialog from '@/views/unqualifiedProduct/unqualifiedList/components/EquipmentDialog.vue';
  import { getByCode } from '@/api/system/dictionary-data';

  import {
    save,
    update,
    getById,
    templatecategoryPage
  } from '@/api/inspectionTemplate';
  import { getCode } from '@/api/login';
  export default {
    components: { termPop, EquipmentDialog },
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          type: null,
          qualitySchemeTemplateName: '',
          qualitySchemeTemplateCode: '',
          inspectionItemVOList: [],
          status: 1,
          templateRemark: ''
        },
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryLevelClassName',
            label: '质检类型',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'inspectionCode',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'inspectionName',
            slot: 'inspectionName',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '工艺参数',
            align: 'center',
            width: 400,
            columnKey: 'defaultValue'
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        categoryColumns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryLevelPath',
            label: '分类',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            minWidth: 150
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        dataRule: {
          type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
          qualitySchemeTemplateName: [
            { required: true, message: '请输入质检方案名称', trigger: 'blur' }
          ],
          status: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'blur'
            }
          ]
        },
        list: [],
        templateCategoryList: [],
        typeList: []
      };
    },
    methods: {
      async getTnspectionPlanType() {
        let res = await getByCode('inspection_plan_type');
        if (res?.code == 0) {
          let list = res.data.map((item) => {
            let key = Object.keys(item)[0];
            return { value: key, label: item[key] };
          });
          this.typeList = list;
        }
      },
      handAdd(type) {
        if (type == 1) {
          this.$refs.termRef.open(this.list);
        }
        if (type == 2) {
          this.$refs.equipmentRefs.open();
        }
      },
      handleClose() {
        this.visible = false;
      },
      selectionChange(selection) {
        console.log(selection, 'selection');
      },
      selectChange(list) {
        this.list = list;
      },
      handDel(index, type) {
        if (type == 1) {
          this.list.splice(index, 1);
        }
        if (type == 2) {
          this.templateCategoryList.splice(index, 1);
        }
      },
      confirmChoose(list) {
        let categoryList = list.map((item) => {
          item['name'] = item.name;
          item['categoryId'] = item.id;
          item['id'] = '';
          return item;
        });
        this.templateCategoryList.push(...categoryList);
      },
      init(id) {
        this.getTnspectionPlanType();
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(async () => {
          this.$refs['dataForm'].resetFields();
          if (this.dataForm.id) {
            getById(this.dataForm.id).then(({ data }) => {
              this.dataForm = data;
              let itemVOList = [];
              if (data.inspectionItemVOList.length > 0) {
                itemVOList = data.inspectionItemVOList.map((item) => {
                  item.inspectionItemId = this.dataForm.id;
                  // item.push({
                  //   inspectionItemId: this.dataForm.id
                  // });
                  return item;
                });
              }
              // this.list = data.inspectionItemVOList;
              this.list = itemVOList;
              console.log(this.list);
            });
            templatecategoryPage({
              templateId: this.dataForm.id,
              size: -1
            }).then((data) => {
              console.log(data, 'data');
              this.templateCategoryList = data.list;
            });
            // this.templateCategoryList=data.templateCategoryList||[];
          } else {
            const code = await getCode('template_code');
            this.dataForm.qualitySchemeTemplateCode = code;
            this.list = [];
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              delete this.dataForm.id;
            }
            const saveOrUpdate = this.dataForm.id ? update : save;
            if (this.dataForm.id) {
              this.dataForm.inspectionItemVOList = this.list.map((item) => {
                if (!item.inspectionItemId) {
                  item.inspectionItemId = this.dataForm.id;
                  item.id = '';
                }
                return item;
              });
            } else {
              this.dataForm.inspectionItemVOList = this.list.map((item) => {
                item.id = '';
                return item;
              });
            }

            this.dataForm.templateCategoryList = this.templateCategoryList;

            saveOrUpdate(this.dataForm)
              .then((msg) => {
                this.loading = false;
                this.$refs['dataForm'].resetFields();
                // this.dataForm = {};
                const info = this.dataForm.id ? '修改成功' : '新增成功';
                this.$message.success(info);
                this.visible = false;
                // this.updateVisible(false);
                this.$emit('refreshDataList');
              })
              .catch((e) => {
                this.loading = false;
              });
          }
        });
      }
    },
    watch: {
      'dataForm.type': {
        handler(val) {
          if (val == 2) {
            this.templateCategoryList = [];
          }
        }
      }
    }
  };
</script>