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>
        <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="8"
          ><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:defaultValue="{ row }">
            <div style="width: 100%; display: flex; justify-content: center">
              {{ row.symbol }}

              <span v-if="row.textType == 3"
                >{{ row.minValue }}- {{ row.maxValue }}</span
              >

              <div v-else>
                {{ row.defaultValue }}
              </div>

              {{ row.unitName }}
            </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>
        <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']"
      :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 { save, update, getById,templatecategoryPage } from '@/api/inspectionTemplate';
  import { getCode } from '@/api/login';
  export default {
    components: { termPop, EquipmentDialog },
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          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',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '工艺参数',
            align: 'center',
            width: 400
          },

          {
            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: {
          qualitySchemeTemplateName: [
            { required: true, message: '请输入质检方案名称', trigger: 'blur' }
          ],
          status: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'blur'
            }
          ]
        },
        list: [],
        templateCategoryList: []
      };
    },
    methods: {
      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.categoryLevelName;
          item['id'] = ''
          return item;
        });
        this.templateCategoryList.push(...categoryList);
      },
      init(id) {
        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;
              this.list = data.inspectionItemVOList;

            });
            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;
            this.dataForm.inspectionItemVOList = this.list;
            this.dataForm.templateCategoryList = this.templateCategoryList;
            saveOrUpdate(this.dataForm)
              .then((msg) => {
                this.loading = false;
                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;
              });
          }
        });
      }
    }
  };
</script>