kd-aiot-frontend-qms/src/views/inspectionWork/components/experimentReport.vue

<template>
  <el-dialog
    title="实验报工"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
    :maxable="true"
  >
    <header-title title="基础信息"> </header-title>
    <el-form
      label-width="115px"
      :model="{}"
      :rules="[]"
      ref="formRef"
      :disabled="type == 'detail'"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="质检项：" prop="inspectionName">
            {{ projectData.inspectionName }}</el-form-item
          >
        </el-col>
        <el-col :span="8">
          <el-form-item label="编码：" prop="inspectionCode">
            {{ projectData.inspectionCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批次号：" prop="batchNo">
            {{ projectData.batchNo }}
          </el-form-item>
        </el-col></el-row
      >
      <header-title title="  样品信息"> </header-title>
      <ele-pro-table
        :needPage="false"
        :columns="workColumns"
        :datasource="[projectData]"
      >
        <template v-slot:qualityResultContent="{ row }">
          <el-input
            v-model="row.qualityResultContent"
            placeholder="请输入内容"
            :disabled="type == 'detail'"
            @input="handleInput(row, row.qualityResultContent)"
          >
            <template slot="append" v-if="row.unitName">
              {{ row.unitName }}
            </template>
          </el-input>
        </template>
        <template v-slot:sampleQuantity="{ row, $index }">
          <el-input
            v-model="row.sampleQuantity"
            placeholder="请输入"
            type="number"
          >
          </el-input>
        </template>

        <template v-slot:qualifiedQuantity="{ row, $index }">
          <el-input
            v-model="row.qualifiedQuantity"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input>
        </template>
        <template v-slot:noQualifiedQuantity="{ row, $index }">
          <el-input
            v-model="row.noQualifiedQuantity"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input>
        </template>
        <template v-slot:lossNumber="{ row, $index }">
          <el-input
            v-model="row.lossNumber"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input>
        </template>
        <template v-slot:lossNumberUnqualified="{ row, $index }">
          <el-input
            v-model="row.lossNumberUnqualified"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input>
        </template>
        <template v-slot:retainedSampleQuantity="{ row, $index }">
          <el-input
            v-model="row.retainedSampleQuantity"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input>
        </template>
        <template v-slot:retainedSampleUnqualified="{ row, $index }">
          <el-input
            v-model="row.retainedSampleUnqualified"
            placeholder="请输入"
            :disabled="type == 'detail'"
            type="number"
          >
          </el-input> </template
      ></ele-pro-table>
      <header-title title="实验数据"> </header-title>
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验编号：" prop="industryType">
            <el-input
              v-model="form.retainedSampleUnqualified1"
              placeholder="请输入"
              :disabled="true"
              type="number"
            >
            </el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验时间：" prop="industryType">
            <el-date-picker
              v-model="form.retainedSampleUnqualified2"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行标准：" prop="pcode">
            <el-input
              :value="
                getDictValue('质检标准类型', projectData.qualityStandardType)
              "
              placeholder="请输入"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <header-title title="实验试/实验设备"> </header-title>
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验室：" prop="industryType">
            <el-select
              v-model="form.retainedSampleUnqualified3"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in laboratoryList"
                :key="item.workshopId"
                :label="item.workshopName"
                :value="item.workshopId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in laboratoryItemList">
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
              <el-form-item
                :label="'实验设备' + (index + 1) + '：'"
                prop="industryType"
              >
                <el-select
                  v-model="item.retainedSampleUnqualified4"
                  style="width: calc(100% - 30px)"
                  placeholder="请选择"
                >
                  <el-option :label="'测试设备1'" :value="1"> </el-option>
                  <el-option :label="'测试设备2'" :value="2"> </el-option>
                </el-select>
                <i
                  class="el-icon-delete"
                  style="
                    color: #f56c6c;
                    font-size: 16px;
                    margin-left: 10px;
                    cursor: pointer;
                  "
                  @click="delLaboratoryItemList(index)"
                ></i>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
              <el-form-item label="开始时间：" prop="industryType">
                <el-date-picker
                  v-model="item.retainedSampleUnqualified5"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%"
                >
                </el-date-picker
              ></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束时间：" prop="industryType">
                <el-date-picker
                  v-model="item.retainedSampleUnqualified6"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%"
                >
                </el-date-picker
              ></el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="16">
              <el-form-item label="运行参数：" prop="industryType">
                <el-input
                  v-model="item.retainedSampleUnqualified7"
                  placeholder="请输入"
                >
                </el-input
              ></el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label=" " prop="industryType">
            <el-button type="primary" @click="addlLaboratoryItemList">
              新增实验设备
            </el-button>
          </el-form-item>
        </el-col></el-row
      >
      <header-title title="实验过程"> </header-title>
      <el-button type="primary" size="small" @click="releaseRulesRefOpen(5)"
        >选择实验过程</el-button
      >
      <el-row>
        <el-col :span="24">
          <experimentationProcess
            ref="experimentationProcess1"
          ></experimentationProcess> </el-col
      ></el-row>
      <header-title title="工艺要求"> </header-title>
      <el-input
        type="textarea"
        :rows="1"
        placeholder="请输入内容"
        v-model="projectData.defaultValue"
      >
      </el-input>

      <el-row> <el-col :span="24"> </el-col></el-row>
      <header-title title="实验工具"> </header-title>
      <el-button type="primary" size="small" @click="handleAdd('unitList')"
        >选择实验工具</el-button
      >
      <ele-pro-table
        :needPage="false"
        :columns="unitColumns"
        :datasource="unitList"
      >
        <template v-slot:action="{ row, $index }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此条数据吗？"
            @confirm="remove($index, 'unitList')"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
      <header-title title="实验耗材"> </header-title>
      <el-button type="primary" size="small" @click="handleAdd('unitList1')"
        >选择实验耗材</el-button
      >
      <ele-pro-table
        :needPage="false"
        :columns="unitColumns1"
        :datasource="unitList1"
      >
        <template v-slot:remark="{ row, $index }">
          <el-input type="textarea" v-model="row.remark"></el-input>
        </template>
        <template v-slot:action="{ row, $index }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此条数据吗？"
            @confirm="remove($index, 'unitList1')"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
      <header-title title="实验记录"> </header-title>
      <el-button type="primary" size="small" @click="releaseRulesRefOpen(7)"
        >选择实验记录</el-button
      >
      <el-row>
        <el-col :span="24">
          <experimentationProcess
            ref="experimentationProcess3"
          ></experimentationProcess> </el-col
      ></el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="实验结果：" prop="industryType">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="projectData.textarea"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验结论：" prop="industryType">
            <el-select
              v-model="projectData.retainedSampleUnqualified9"
              placeholder="请选择"
            >
              <el-option :label="'合格'" :value="1"> </el-option>
              <el-option :label="'不合格'" :value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="实验图片：" prop="industryType"> </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件图片：" prop="industryType"> </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template v-slot:footer>
      <el-button size="small" @click="handleClose">关闭</el-button>
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button type="primary" size="small" @click="submit">提交</el-button>
    </template>
    <releaseRules
      ref="releaseRulesRef"
      @success="releaseRulesSuccess"
    ></releaseRules>
    <ProductModal ref="productRefs" @chooseModal="chooseModal" />
  </el-dialog>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import experimentationProcess from '@/components/templateDiv/experimentationProcess.vue';
  import releaseRules from '@/components/releaseRules/index.vue';
  import { getFactoryarea } from '@/api/aps/index.js';
  import ProductModal from '@/views/inspectionProject/components/ProductModal.vue';

  export default {
    components: { experimentationProcess, releaseRules, ProductModal },
    props: {},
    mixins: [dictMixins],

    data() {
      return {
        visible: false,
        projectData: {},
        unitListKey: '',
        form: {},
        laboratoryItemList: [{}],
        laboratoryList: [],
        unitList: [],
        unitList1: [],
        unitColumns: [
          {
            minWidth: 200,
            prop: 'name',
            align: 'center',
            label: '工具名称',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'modelType',
            align: 'center',
            label: '型号',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'code',
            align: 'center',
            label: '编号',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            width: 100,
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        unitColumns1: [
          {
            minWidth: 200,
            prop: 'name',
            align: 'center',
            label: '耗材名称',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'code',
            align: 'center',
            label: '编号',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'batchNo',
            align: 'center',
            label: '批次号',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'specification',
            align: 'center',
            label: '浓度',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'batchNo',
            align: 'center',
            label: '来源',
            showOverflowTooltip: true
          },
          {
            minWidth: 300,
            prop: 'remark',
            slot: 'remark',
            align: 'center',
            label: '过程',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            width: 100,
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        workColumns: [
          {
            minWidth: 120,
            prop: 'sampleQuantity',
            slot: 'sampleQuantity',
            align: 'center',
            label: '样品数',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'qualifiedQuantity',
            align: 'center',
            slot: 'qualifiedQuantity',
            label: '合格数',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'noQualifiedQuantity',
            slot: 'noQualifiedQuantity',
            align: 'center',
            label: '不合格数',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'lossNumber',
            slot: 'lossNumber',
            align: 'center',
            label: '损耗数（合格品）',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'lossNumberUnqualified',
            slot: 'lossNumberUnqualified',
            align: 'center',
            label: '损耗数（不合格品）',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'retainedSampleQuantity',
            slot: 'retainedSampleQuantity',
            align: 'center',
            label: '留样数（合格品）',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'retainedSampleUnqualified',
            slot: 'retainedSampleUnqualified',
            align: 'center',
            label: '留样数（不合格品）',
            showOverflowTooltip: true
          }
        ]
      };
    },

    watch: {},
    methods: {
      open(row) {
        this.projectData = row;
        this.getFactoryarea();
        this.visible = true;
      },
      handleAdd(type) {
        this.unitListKey = type;
        if (type == 'unitList') {
          this.$refs.productRefs.open(this.unitList);
        } else {
          this.$refs.productRefs.open(this.unitList1);
        }
      },
      remove(index, type) {
        if (type == 'unitList') {
          this.unitList.splice(index, 1);
        } else {
          this.unitList1.splice(index, 1);
        }
      },

      chooseModal(data) {
        if (this.unitListKey == 'unitList') {
          this.unitList = [...this.unitList, ...data];
        } else {
          this.unitList1 = [...this.unitList1, ...data];
        }
      },
      delLaboratoryItemList(index) {
        this.laboratoryItemList.splice(index, 1);
      },
      addlLaboratoryItemList(index) {
        this.laboratoryItemList.push({});
      },
      async getFactoryarea() {
        const data = await getFactoryarea({
          pageNum: 1,
          size: 1000,
          type: 3
        });
        this.laboratoryList = data.list;
        console.log(this.laboratoryList, 'data');
      },
      releaseRulesRefOpen(type) {
        this.releaseRulesType = type;
        this.$refs.releaseRulesRef.open(type);
      },
      releaseRulesSuccess(data) {
        if (this.releaseRulesType == 5) {
          this.$refs.experimentationProcess1.init(data.tempJson.tempJson);
        }
        if (this.releaseRulesType == 6) {
          this.$refs.experimentationProcess2.init(data.tempJson.tempJson);
        }
        if (this.releaseRulesType == 7) {
          this.$refs.experimentationProcess3.init(data.tempJson.tempJson);
        }
      },
      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped></style>