elevator-web/src/views/elevator-sys-org/unit-mgt/components/ItemDetail.vue

<template>
  <table-row-detail-dialog
    ref="detailDialog"
    @confirm="handleConfirm"
    dialogWidth="70%"
    :noFooter="true"
    :has-form-steps-group="true"
    class="steps-dialog"
    @close="handleClose"
  >
    <div class="dialog-body">
      <form-steps-group
        ref="formGroup"
        label-width='150px'
        :list-data="newCompanyData"
        :parent-dialog-mode="dialogType"
        @change="itemChange"
        @submit="onSubmit"
        @cancel="$refs.detailDialog && $refs.detailDialog.hide()"
      >
      </form-steps-group>
    </div>
  </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from "@/components/TableRowDetailDialogNew/index";
import FormStepsGroup from "@/components/FormStepsGroup/index";
import { add, edit, detail } from "@/api/elevator-sys-org/unit-mgt";
import DetailAction from "@/views/_mixins/detail-action";
import { basePath } from "@/utils/request";
import { deepClone } from "@/utils/index";

const defaultNewCompanyData = {
        type: 'steps', // type类型为 radioGroup （单选框组按钮）、steps （步骤条）
        stepsWidth: '264px',
        disableLastStepConfirm: true,
        data: [
          {
            title: '',
            formData: {
              organizationCode: { label: '组织机构代码', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              companyName: { label: '单位名称', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              companyNameShort: { label: '单位简称', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              companyNameEnglish: { label: '英文名称', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              companyTelephone: { label: '单位电话', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              registrationDate: { label: '注册日期', value: '', placeholder: '请输入', type: 'date-picker', width: '50%', rightGap:'10px', leftGap: '10px'},
              companyNature: { label: '公司性质', value: '', placeholder: '请选择', type: 'select', dictKey: 'company_nature', width: '50%', rightGap:'10px', leftGap: '10px'},
              parentCompany: { label: '上级公司', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              registeredCapital: { label: '注册资金（万元）', value: '', placeholder: '请输入', type: 'number', min:0, width: '50%', rightGap:'10px', leftGap: '10px'},
              companyType: { label: '单位类型', value: '', placeholder: '请选择', type: 'select', dictKey:'company_type', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              registrationStatus: { label: '登记状态', value: '', placeholder: '请选择', type: 'select', dictKey:'registration_status', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              legalPerson: { label: '法人', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              leader: { label: '负责人名称', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              staffCount: { label: '员工总数', value: '', placeholder: '请输入', type: 'number', min:0, step:1, stepStrictly:true, width: '50%', rightGap:'10px', leftGap: '10px'},
              email: { label: '单位邮箱', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              postalCode: { label: '单位邮编', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              address: { label: '单位地址', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              dataStatus: { label: '单位状态', value: 1, type: 'switch', text:['启用', '禁用'], width: '50%', rightGap:'10px', leftGap: '10px'},
              website: { label: '单位官网', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px'},
              systemName: { label: '系统名称', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px', leftGap: '10px',required:true},
              companyLogo: { label: '单位Logo', value: '', actionUrl: basePath + 'common/file', type: 'singleImgUpload', width: '50%', rightGap: '10px', leftGap: '10px'},
              attachmentFileUrl: { label: '单位附件', value: '', type: 'uploadFormItem', actionUrl: "datarecord/file", width: '100%', rightGap:'10px', leftGap: '10px'},
              businessScope: { label: '经营范围', value: '', placeholder: '请输入', type: 'textarea', width: '100%', rightGap:'10px', leftGap: '10px'},
            }
          },
          {
            title: '',
            formData: {
            }
          }
        ],
      }

export default {
  name: "ItemDetail",
  mixins: [DetailAction],
  components: {
    TableRowDetailDialog,
    FormStepsGroup,
  },
  props: {},
  data() {
    return {
      companyId: "",
      fileName: "",
      newCompanyData: deepClone(defaultNewCompanyData),
      preparingData: false,
    };
  },
  watch: {
    currentCompanyType: {
      handler(val) {
        if (!this.preparingData) {
          let formData = this.getSecondFormData(val);
          this.$set(this.newCompanyData.data[1],'formData', formData);
        }
      }
    }
  },
  computed: {
    currentCompanyType() {
      return this.newCompanyData.data[0].formData.companyType.value;
    }
  },
  created() {},
  methods: {
    handleClose() {
      for (let i=0; i<this.$refs.formGroup.$refs.formGroup.length; i++) {
        this.$refs.formGroup.$refs.formGroup[i].editMode= 'add';
      }
    },
    getSecondFormData(val) {
      let formData = null;

      if (val==='mainten') {
        formData = {
          licenseNumber: { label: '许可证编号', value: '', placeholder: '请输入', type: 'input', width: '100%' },
          licenseApprovalCompany: { label: '许可证审批单位', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px' },
          licenseIssueCompany: { label: '许可证签发单位', value: '', placeholder: '请输入', type: 'input', width: '50%', leftGap: '10px'},
          licenseIssueDate: { label: '许可证签发日期', value: '', placeholder: '请输入', type: 'date-picker', width: '50%', rightGap:'10px' },
          licenseExpireDate: { label: '许可证到期日期', value: '', placeholder: '请输入', type: 'date-picker', width: '50%', leftGap: '10px'},
          description: { label: '备注', value: '', placeholder: '请输入', type: 'textarea', width: '100%' },
          platformUserName: { hasHeadDivider:true, headDividerTitle: '智慧特种设备信息', label: '平台UserName', value: '', placeholder: '请输入', type: 'text', width: '50%', rightGap:'10px' },
          platformKey: { label: '平台Key', value: '', placeholder: '请输入', type: 'input', width: '50%', leftGap: '10px' },
          platformAppCode: { label: '平台AppCode', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px' },
          platformSecret: { label: '平台Secret', value: '', placeholder: '请输入', type: 'input', width: '50%', leftGap: '10px' },
        };
      } else if (val==='insure') {
        formData = {
          description: { label: '备注', value: '', placeholder: '请输入', type: 'textarea', width: '100%' },
        }
      } else {
        formData = {
          licenseNumber: { label: '许可证编号', value: '', placeholder: '请输入', type: 'input', width: '100%' },
          licenseApprovalCompany: { label: '许可证审批单位', value: '', placeholder: '请输入', type: 'input', width: '50%', rightGap:'10px' },
          licenseIssueCompany: { label: '许可证签发单位', value: '', placeholder: '请输入', type: 'input', width: '50%', leftGap: '10px'},
          licenseIssueDate: { label: '许可证签发日期', value: '', placeholder: '请输入', type: 'date-picker', width: '50%', rightGap:'10px' },
          licenseExpireDate: { label: '许可证到期日期', value: '', placeholder: '请输入', type: 'date-picker', width: '50%', leftGap: '10px'},
          description: { label: '备注', value: '', placeholder: '请输入', type: 'textarea', width: '100%' },
        };
      }

      return formData;
    },
    //表单单项验证
    validateField(fieldName) {
      this.$refs.form.validateField(fieldName);
    },
    //初始化表单数据
    initFormData() {
      this.newCompanyData = deepClone(defaultNewCompanyData);
      this.$refs.formGroup.activeStep = 0;
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail(data) {
      this.preparingData = true;
      this.companyId = data.companyId;

      detail(this.companyId).then((res) => {
        let formData = this.getSecondFormData(res.companyType);

        this.$set(this.newCompanyData.data[1],'formData', formData);

        for (let i=0; i<this.newCompanyData.data.length; i++) {
          for(let key in this.newCompanyData.data[i].formData) {
            this.$set(this.newCompanyData.data[i].formData[key],'value', res[key] || "");
          }
        }

        for (let i=0; i<this.$refs.formGroup.$refs.formGroup.length; i++) {
          this.$refs.formGroup.$refs.formGroup[i].editMode= this.dialogType;
        }

        this.$nextTick(() => {
          this.preparingData = false;
        })
      });
    },
    /**
     * 对话框确认按钮响应
     * */
    handleConfirm() {
      let data = this.$refs.formGroup.checkValue();
      if (!data) {
        return false;
      }

      if (this.dialogType === "add") {
        this.submitAdd(data);
      } else {
        this.submitEdit(data);
      }
    },

    /**
     * 添加记录
     * 校验表单数据后，add接口
     */
    async submitAdd(data) {
      add(data).then((res) => {
        //增加成功
        this.$refs.detailDialog.hide();
        this.$message.success('新增成功！')
        this.refresh();
      });
    },
    submitEdit(data) {
      console.log('u edi:', this.companyId)
      edit(this.companyId, data).then(res => {
        this.$refs.detailDialog.hide();
        this.$message.success('编辑成功！')
        this.refresh();
      });
    },
    onSubmit(data) {
      if (this.dialogType === 'add') {
        this.submitAdd(data);
      } else {
        this.submitEdit(data);
      }
    },
    refresh() {
      this.$emit('refresh', true);
    },
    itemChange(){

    }
  },
};
</script>

<style lang="scss" scoped>
.steps-dialog {
  ::v-deep .el-dialog__footer {
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>