kd-aiot-frontend-qms/src/views/inspectionPoint/components/newEdit.vue

<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    :title="type == 'add' ? '新增' : type == 'edit' ? '编辑' : '详情'"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="70%"
    append-to-body
    class="ele-dialog-form"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称:" prop="pointName">
            <el-input
              :disabled="type == 'detail'"
              clearable
              v-model="form.pointName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域:" prop="areaName">
            <el-input
              :disabled="type == 'detail'"
              clearable
              v-model="form.areaName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="附件:" prop="files">
            <fileUpload
              v-model="form.files"
              module="main"
              :showLib="false"
              :limit="1"
              :disabled="type == 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <inspectionProjectList
          @openAdd="openAdd"
          :inspectList="inspectList"
        ></inspectionProjectList>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>

      <el-button
        type="primary"
        :loading="loading"
        @click="save"
        :disabled="type == 'detail'"
      >
        保存
      </el-button>
    </template>

    <EquipmentDialog
      v-if="showEquipment"
      @chooseModal="chooseModal"
      @closeDialog="closeDialog"
    ></EquipmentDialog>
  </el-dialog>
</template>

<script>
  import { save, update } from '@/api/inspectionPoint';
  import fileUpload from '@/components/upload/fileUpload';
  import EquipmentDialog from './newEquipmentDialog';
  import inspectionProjectList from './newInspectionProjectList';

  export default {
    components: {
      fileUpload,
      EquipmentDialog,
      inspectionProjectList
    },

    props: {
      type: {},

      editObj: {
        type: Object,
        default: () => {}
      }
    },

    data() {
      return {
        form: {
          pointName: '',
          areaName: '',
          files: [],
          qualityLevelList: []
        },

        rules: {
          pointName: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        visible: true,
        loading: false,

        showEquipment: false,
        inspectList: []
      };
    },

    created() {
      if (this.type == 'edit') {
        this.form = this.editObj;
      }
    },
    methods: {
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }

          let param = {
            ...this.form,
            qualityLevelList: this.inspectList.map((item) => item.id)
          };

          let URL = this.type == 'add' ? save : update;
          URL(param)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      },

      handleClose() {
        this.$emit('close');
      },

      openAdd() {
        this.showEquipment = true;
      },

      closeDialog() {
        this.showEquipment = false;
      },

      chooseModal(list) {
        this.inspectList = list || [];
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(
      .el-dialog:not(.ele-dialog-form)
        .el-dialog__body
        .el-form
        .el-form-item:last-child
    ) {
    margin-bottom: 22px;
  }
</style>