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

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOpen"
    title="合格证"
    :close-on-click-modal="false"
    width="85%"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="certificateForm" :model="form" class="certificate_form">
      <ele-pro-table
        :columns="columns"
        :datasource="form.tableList"
        ref="table"
        :need-page="false"
        class="el-form-box"
        :toolkit="[]"
      >
        <template v-slot:toolbar>
          <el-button :loading="loading" type="primary" @click="addBank"
            >添加</el-button
          >
        </template>
        <template v-slot:headerNumber="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:certificateNumber="{ row, $index }">
          <el-form-item
            :prop="`tableList.${$index}.certificateNumber`"
            :rules="{
              required: true,
              message: '请输入合格证号',
              trigger: 'change'
            }"
          >
            <el-input
              v-model="row.certificateNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <template v-slot:remark="{ row }">
          <el-form-item>
            <el-input v-model="row.remark" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-slot:certificateAttachments="{ row }">
          <fileMain v-model="row.certificateAttachments"></fileMain>
        </template>
        <template v-slot:action="{ $index }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除当前数据吗？"
            @confirm="delSon($index)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-form>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitAdd">保存</el-button>
      <el-button @click="handleClose">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    updateCertificateNumber,
    qualityWorkOrderCertificate
  } from '@/api/inspectionWork';
  import fileMain from '@/components/addDoc/index.vue';
  export default {
    data() {
      return {
        form: {
          tableList: []
        },
        loading: false
      };
    },
    components: { fileMain },
    props: {
      addOpen: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      columns() {
        return [
          {
            type: 'index',
            label: '序号',
            align: 'center',
            width: 60
          },
          {
            label: '合格证号',
            prop: 'certificateNumber',
            slot: 'certificateNumber',
            headerSlot: 'headerNumber',
            align: 'center',
            width: 250
          },
          {
            prop: 'remark',
            slot: 'remark',
            label: '备注',
            align: 'center'
          },
          {
            prop: 'certificateAttachments',
            slot: 'certificateAttachments',
            label: '合格证附件',
            align: 'center',
            width: 120
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action'
          }
        ];
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      handleClose() {
        this.$emit('closeModel');
      },
      getList() {
        let params = {
          pageNum: 1,
          qualityWorkOrderId: this.rowData.id,
          size: 1000
        };
        this.loading = true;
        qualityWorkOrderCertificate(params)
          .then((res) => {
            this.loading = false;
            if (res.list.length > 0) {
              this.form.tableList = res.list;
            }
          })
          .catch((err) => {
            this.loading = true;
          });
      },
      addBank() {
        this.form.tableList.push({
          certificateNumber: '',
          remark: ''
        });
      },
      delSon(index) {
        this.form.tableList.splice(index, 1);
      },
      submitAdd() {
        if (this.form.tableList.length == 0) {
          return this.$message.warning('至少需要保留一条数据');
        }
        this.$refs.certificateForm.validate((valid) => {
          if (valid) {
            let certificates = this.form.tableList.map((el) => {
              return {
                ...el,
                qualityWorkOrderCode: this.rowData.code,
                qualityWorkOrderId: this.rowData.id,
                qualityWorkOrderName: this.rowData.name
              };
            });
            let data = {
              certificates,
              id: this.rowData.id
            };
            updateCertificateNumber(data).then((res) => {
              if (res) {
                this.$message.success('操作成功');
                this.handleClose();
                this.$emit('search');
              }
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .certificate_form {
    min-height: 500px;

    :deep(.el-form-item) {
      margin: 16px 0;
    }
  }</style
>>