kd-aiot-frontend-wt/src/views/bpm/handleTask/components/inspectionTemplate/edit.vue

<template>
  <div>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="80px"
      :disabled="true"
    >
      <el-row style="margin-bottom: 10px">
        <el-col :span="6"
          ><el-form-item label="类型 " prop="type">
            <DictSelection
              dictName="质检计划类型"
              v-model="dataForm.type"
              clearable
            ></DictSelection> </el-form-item
        ></el-col>
        <el-col :span="7">
          <el-form-item label="名称" prop="qualitySchemeTemplateName">
            <el-input
              v-model="dataForm.qualitySchemeTemplateName"
              placeholder="质检方案名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <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="6">
          <el-form-item label="工序" prop="taskName">
            <el-input
              v-model="dataForm.taskName"
              placeholder="请选择"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <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>
        <el-col :span="24">
          <div class="title"> 质检参数标准</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="width: 260px">
          <el-form-item label="检验方式" prop="qualityMode">
            <DictSelection
              dictName="检验方案"
              clearable
              v-model="dataForm.qualityMode"
            >
            </DictSelection>
          </el-form-item>
        </el-col>

        <el-col style="width: 360px" v-if="dataForm.qualityMode == 2">
          <el-form-item label="取样数量" prop="sampleProportion">
            <el-input
              type="number"
              v-model="dataForm.sampleProportion"
              placeholder="请输入"
              style="width: 180px"
            ></el-input>
            <DictSelection
              style="width: 95px"
              dictName="计量单位"
              placeholder=" "
              v-model="dataForm.sampleProportionUnit"
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col style="width: 430px">
          <el-form-item
            label="质检报告有效期"
            prop="validityPeriod"
            label-width="150px"
          >
            <el-input
              type="number"
              v-model="dataForm.validityPeriod"
              placeholder="请输入"
              style="width: 180px"
            ></el-input>
            <el-select
              style="width: 85px"
              v-model="dataForm.validityPeriodUnit"
              placeholder=" "
            >
              <el-option label="年" value="年" />
              <el-option label="月" value="月" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="list"
          height="400px"
          full-height="calc(100vh - 76px)"
          tool-class="ele-toolbar-form"
        >
          <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"></el-input></div>
          </template>
          <template v-slot:sort="{ row }">
            <el-input
              v-model="row.sort"
              type="number"
              @blur="handleSortBlur"
              placeholder="输入排序"
            ></el-input>
          </template>
          <template v-slot:defaultValue="{ row, $index }">
            <div style="width: 100%; display: flex">
              <DictSelection
                style="width: 85px"
                clearable
                dictName="数学字符"
                v-model="row.symbol"
                :isOne="$index === 0"
              ></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 style="width: 100%">
                <el-input v-model="row.defaultValue"></el-input>
              </div>

              <DictSelection
                dictName="工艺参数单位"
                clearable
                filterable
                v-model="row.unitName"
                style="width: 100px"
                :isOne="$index === 0"
              >
              </DictSelection>
            </div>
          </template>
          <template v-slot:executionMethod="{ row }">
            <el-select v-model="row.executionMethod" style="width: 100%">
              <el-option :value="1" label="常规检验"></el-option>
              <el-option :value="2" label="实验"></el-option>
            </el-select>
          </template>
          <template v-slot:procedureName="{ row, $index }">
            <el-input
              v-model="row.procedureName"
              readonly
              style="width: calc(100% - 60px)"
            >
            </el-input>
            <el-button
              type="primary"
              @click="viewTemplate(row.procedureJson.tempJson, 5, $index)"
              v-if="row.procedureJson.tempJson"
              style="margin-left: 8px"
              :disabled="false"
              >预览</el-button
            >
          </template>
          <template v-slot:recordName="{ row, $index }">
            <el-input
              v-model="row.recordName"
              readonly
              style="width: calc(100% - 60px)"
            >
            </el-input>
            <el-button
              type="primary"
              @click="viewTemplate(row.recordJson.tempJson, 7, $index)"
              v-if="row.recordJson.tempJson"
              style="margin-left: 8px"
              :disabled="false"
              >预览</el-button
            >
          </template>
        </ele-pro-table>
      </el-row>
      <el-row>
        <ele-pro-table
          ref="table"
          :columns="categoryColumns"
          :datasource="templateCategoryList"
          height="300px"
          full-height="calc(100vh - 76px)"
          tool-class="ele-toolbar-form"
          :need-page="false"
        >
        </ele-pro-table>
      </el-row>
    </el-form>

    <experimentationProcessDialog
      ref="experimentationProcessDialog"
      :edit="false"
      :readonly="true"
    ></experimentationProcessDialog>
  </div>
</template>

<script>
  import experimentationProcessDialog from '@/components/templateDiv/experimentationProcessDialog.vue';
  import {
    getById,
    templatecategoryPage
  } from '@/api/bpm/components/inspectionTemplate';

  import dictMixins from '@/mixins/dictMixins';

  export default {
    components: { experimentationProcessDialog },
    mixins: [dictMixins],
    props: {
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dataForm: {
          id: 0,
          type: null,
          qualitySchemeTemplateName: '',
          qualitySchemeTemplateCode: '',
          inspectionItemVOList: [],
          status: 1,
          templateRemark: '',
          sampleProportion: '',
          sampleProportionUnit: '%',
          validityPeriod: '',
          validityPeriodUnit: '',
          qualityMode: '',
          taskId: '',
          taskName: ''
        },
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            label: '排序',
            width: 100,
            align: 'center',
            slot: 'sort',
            prop: 'sort',
            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',
            minWidth: 400,
            columnKey: 'defaultValue'
          },
          {
            prop: 'executionMethod',
            slot: 'executionMethod',
            label: '执行方式',
            showOverflowTooltip: true,
            align: 'center',
            width: 150
          },
          {
            prop: 'procedureName',
            slot: 'procedureName',
            label: '实验过程',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 200
          },
          {
            prop: 'recordName',
            slot: 'recordName',
            label: '实验记录',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 200
          }
        ],
        categoryColumns: [
          {
            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
          }
        ],
        dataRule: {
          type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
          qualitySchemeTemplateName: [
            { required: true, message: '请输入质检方案名称', trigger: 'blur' }
          ],
          status: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'blur'
            }
          ]
        },
        list: [],
        templateCategoryList: []
      };
    },
    created() {
      this.init();
    },
    methods: {
      async viewTemplate(tempJson) {
        this.$refs.experimentationProcessDialog.open(tempJson);
      },

      init() {
        getById(this.businessId).then(({ data }) => {
          this.dataForm = data;
          console.log(this.dataForm, 'this.dataForm');
          this.list = data.inspectionItemVOList || [];
        });
        templatecategoryPage({
          templateId: this.businessId,
          size: -1
        }).then((data) => {
          this.templateCategoryList = data.list;
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .title {
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 20px;
  }
</style>