kd-aiot-frontend-eom/src/views/contractManage/contractChange/components/addOrEditDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="1000px"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <div class="switch_left" v-if="dialogType=='view'">
      <ul>
        <li
          v-for="item in tabOptions"
          :key="item.key"
          :class="{ active: activeComp == item.key }"
          @click="activeComp = item.key"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <el-form
      v-show="activeComp=='main'"
      ref="form"
      :rules="rules"
      class="el-form-box"
      :model="form"
      label-width="90px"
      style="margin-top:15px"
    >
      <el-row>
        <el-col :span="12" v-if="dialogType != 'add'">
          <el-form-item label="编码" prop="changeCode">
            <el-input v-model="form.changeCode" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="变更合同" prop="contractName">
            <el-input
              v-model="form.contractName"
              @click.native="selectContract"
              readonly
              :disabled="dialogType=='view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件" prop="file">
            <fileMain v-model="form.file" :type="dialogType=='view'?'view':'add'"></fileMain>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="变更原因" prop="reason">
            <el-input v-model="form.reason" type="textarea" :disabled="dialogType=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="变更描述" prop="remark">
            <el-input v-model="form.remark" type="remark" :disabled="dialogType=='view'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" v-if="dialogType!='view'" @click="handleSave()" v-click-once
        >保存</el-button
      >
      <el-button @click="cancel">返回</el-button>
    </div>
    <bpmDetail v-if="activeComp==='bpm'&&form.processInstanceId" :id="form.processInstanceId"></bpmDetail>
    <contractListDialog
      ref="selectContractRef"
      @changeParent="changeContract"
      :type="0"
      :isChange="true"
    ></contractListDialog>
  </ele-modal>
</template>
<script>
  import { mapGetters } from 'vuex';
  import {
    addInformation,
    UpdateInformation,
    getDetail
  } from '@/api/contractManage/contractChange.js';
  // import fileMain from '@/components/addDoc/index.vue';
  import contractListDialog from '@/views/saleManage/saleOrder/components/contractListDialog.vue';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';

  const defForm = {
    name: '',
    changeCode: '',
    file: [], //条件
    remark: '',
    type: '',
    describes: '',
    contractName: '',
    contractId: ''
  };
  export default {
    components: { 
      // fileMain,
       contractListDialog,bpmDetail },
    computed: {
      ...mapGetters(['user'])
    },
    data() {
      return {
        activeComp: 'main',
        fullscreen:false,
        tabOptions: [
          { key: 'main', name: '变更详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        addOrEditDialogFlag: false,
        dialogType: '',
        title: '',
        form: {
          ...defForm
        },

        rules: {
          name: { required: true, message: '请输入', trigger: 'change' }
        }
      };
    },
    created() {},
    methods: {
      //初始化
      async open(row = {}, type) {
        this.addOrEditDialogFlag = true;
        this.title = type == 'add' ? '新增' :type == 'view' ? '详情' : '修改';
        this.dialogType = type;
        if (type !== 'add') {
          this.getInfo(row.id);
        }
      },
      selectContract() {
        this.$nextTick(() => {
          this.$refs.selectContractRef.open();
        });
      },
      changeContract(data) {
        this.$set(this.form, 'contractName', data.contractName);
        this.$set(this.form, 'contractId', data.id);
        this.$set(this.form, 'contractNo', data.contractNo);
        this.$set(this.form, 'contractNumber', data.contractNumber);
        console.log(this.form);
      },
      //获取详情
      async getInfo(id) {
        this.form = await getDetail(id);
      },
      handleSave(type) {
        this.$refs.form.validate((valid) => {
          if (!valid) return this.$message.warning('有必填项未填，请检查');
          let api =
            this.dialogType == 'add' ? addInformation : UpdateInformation;
          api(this.form)
            .then((res) => {
              this.$message.success('操作成功');
              if (type === 'sub') {
                this.sendSubmit(res);
                return;
              }
              this.done();
              this.cancel();
            })
            .catch((e) => {});
        });
      },

      //刷新主列表数据
      done() {
        this.$emit('reload');
      },
      //关闭弹窗
      cancel() {
        this.form = {
          ...defForm
        };
        this.addOrEditDialogFlag = false;
      }
    }
  };
</script>
<style scoped lang="scss"></style>