kd-aiot-frontend/src/views/documentManagement/certificateManagement/components/add-dialog.vue

<template>
  <!-- 上传 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="type" label="证件类型">
            <DictSelection v-model="form.type" dictName="证件类型"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="code" label="证照编号">
            <el-input placeholder="请输入" v-model="form.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="等级:" prop="level">
            <el-select style="width: 100%" v-model="form.level" filterable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in levelOptions" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="status" label="状态">
            <DictSelection v-model="form.status" dictName="规则状态"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="holder" label="持证人">
            <el-input v-model="form.holder" clearable readonly placeholder="请选择"
              @click.native="openStaffSelection"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="颁发时间">
            <el-date-picker style="width: 100%" v-model="form.enactorTime" type="date"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="date" label="有效期至">
            <el-date-picker style="width: 100%" v-model="form.date" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
          <el-form-item prop="fileObj" label="证照图片">
            <fileUpload v-model="form.fileObj" module="main" :showLib="true" :limit="5" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
          <el-form-item prop="remark" label="备注">
            <el-input placeholder="请输入" v-model="form.remark" type="textarea" :rows="3" :resize="`none`"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <staffSelection ref="staffSelection" @confirm="confirmStaffSelection"></staffSelection>
    <!-- <headerTitle title="关联产品" v-show="!isUpdate"></headerTitle> -->
    <!-- <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="form.datasource" class="time-form"
      :toolkit="[]"> -->
      <!-- 表头工具栏 -->
      <!-- <template v-slot:toolbar>
        <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent('', -1)"
              v-if="!isContractId"
            >
              新增
            </el-button>
      </template> -->
      <!-- 操作列 -->
      <!-- <template v-slot:action="scope">
        <el-popconfirm v-if="!isContractId" class="ele-action" title="确定要删除吗？" @confirm="remove(scope.$index)">
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <product-list
      ref="productListRef"
      classType="1"
      :is-get-inventory-total="true"
      @changeParent="changeParent"
    ></product-list> -->
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="submit" type="primary">提 交</el-button>
      <el-button size="small" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import staffSelection from './staffSelection.vue';
  import { saveOrEdit, getPhotoInfo } from '@/api/documentManagement';
  import fileUpload from '@/components/upload/fileUpload';
  import imgUpload from '@/components/upload/imgUpload';
  import { getCode } from '@/api/ruleManagement/matter';
  import productList from './product-list.vue';
  export default {
    components: {
      fileUpload,
      imgUpload,
      staffSelection,
      productList
    },
    //注册组件
    data() {
      const defaultForm = {
        code: '',
        holder: '',
        holderId: '',
        date: [],
        fileObj: []
      };
      return {
        dialogVisible: false,
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        rules: {
          code: [
            { required: true, trigger: 'blur', message: '请输入证照编号' }
          ],
          // level: [{ required: true, trigger: 'change', message: '选择等级' }],
          type: [
            { required: true, trigger: 'change', message: '请选择证件类型' }
          ],
          date: [
            { required: true, trigger: 'change', message: '请选择有效期' }
          ],
          holder: [
            { required: true, trigger: 'change', message: '请输入持证人' }
          ],
          status: [
            { required: true, trigger: 'change', message: '请选择状态' }
          ],
          fileObj: [
            { required: true, trigger: 'change', message: '请选择证照图片' }
          ]
        },
        form: { ...defaultForm },
        title: '新增',
        columns: [{
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            headerSlot: 'headerProductName',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'left',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {},
    methods: {
      //选择负责人
      confirmStaffSelection(data) {
        console.log(data);
        this.form.holderId = data.map((item) => item.id).join(',');
        this.form.holder = data.map((item) => item.name).join(',');
        this.$forceUpdate();
        console.log(this.form);
      },
      openStaffSelection() {
        this.$refs.staffSelection.open([]);
      },
      open(row) {
        this.$refs.form && this.$refs.form.clearValidate();
        this.dialogVisible = true;
        if (row) {
          this.title = '修改';
          this.getInfo(row.id);
        } else {
          this.title = '新增';
          this.$refs.form.resetFields();
          this.form = { ...this.defaultForm };
          this.getOrderCode();
        }
      },
      async getOrderCode() {
        const data = await getCode('license_code');
        this.$set(this.form, 'code', data);
      },

      async getInfo(id) {
        const data = await getPhotoInfo(id);
        this.form = {
          ...data,
          date: [data.validityStartTime, data.validityEndTime]
        };

      },

      close() {
        this.dialogVisible = false;
        // this.$refs.form.resetFields()
      },

      submit() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          if (this.form.date?.length) {
            this.form.validityStartTime = this.form.date[0];
            this.form.validityEndTime = this.form.date[1];
          }
          // if (this.form.fileObj.length) {
          //   this.form.fileObj = this.form.fileObj[0];
          // }
          const data = {
            ...this.form,
          };
          delete data.date;
          saveOrEdit(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.dialogVisible = false;
              this.$emit('success');
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      },

      handParent() {
        this.$refs.productListRef.open(-1);
      },
    }
  };
</script>

<style lang="scss">
  .el-form-item {
    margin-bottom: 20px !important;
  }
</style>