dvcp_v2_webapp/packages/work/processManagement/mattersConfig/components/addConfig.vue

<template>
  <div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
    <ai-detail>
      <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
      <template slot="step">
        <div class="step">
          <el-steps :active="activeStep" simple>
            <el-step v-for="(step,i) in processList" :key="i" v-bind="step" :icon="getStepIcon(i)"/>
          </el-steps>
        </div>
      </template>
      <template #content v-if="refresh">
        <baseInfo ref="baseInfo" :instance="instance" :dict="dict" v-show="activeStep==0"/>
        <applyForm ref="applyForm" :value="filedList" :instance="instance" :dict="dict" v-show="activeStep==1"/>
        <attachmentMaterial ref="attachmentMaterial" :instance="instance" v-show="activeStep==2"/>
        <processApproval ref="processApproval" :approvalSteps="applyForm.approvalSteps" :instance="instance"
                         :dict="dict" v-show="activeStep==3"/>
      </template>
      <template #footer>
        <el-button class="btn" v-if="activeStep==0" @click="handleBack">取消</el-button>
        <el-button class="btn" v-else @click="preStep">上一步</el-button>
        <el-button class="btn" type="primary" v-if="[0,1,2].includes(activeStep)" @click="nextStep">下一步</el-button>
        <el-button class="btn" type="primary" v-if="activeStep==3" @click="save">保存</el-button>
      </template>
    </ai-detail>
  </div>
</template>

<script>
import {applyForm, attachmentMaterial, baseInfo, processApproval} from './index'

export default {
  name: "addConfig",
  provide() {
    return {
      config: this
    }
  },
  props: {
    instance: Function,
    dict: Object,
    row: Object,
    processType: String
  },
  components: {baseInfo, applyForm, attachmentMaterial, processApproval},
  data() {
    return {
      activeStep: 0,
      baseInfo: {},
      applyForm: {
        tableId: "",
        approvalSteps: "",
      },
      processAnnexDefs: [],
      detailObj: {
        tableInfo: {}
      },
      refresh: true,
      filedList: [],
      tableFieldInfos: []
    }
  },
  computed: {
    processList() {
      return [
        {title: '基本信息', activeIndex: 0},
        {title: '申请表单', activeIndex: 1},
        {title: '附件材料', activeIndex: 2},
        {title: '审批流程', activeIndex: 3}
      ]
    },
    detailTitle() {
      return this.detailObj?.id ? "编辑事项" : "添加事项"
    }
  },
  methods: {
    /**
     * 上一步
     * */
    preStep() {
      this.activeStep--
    },
    /**
     * 下一步
     */
    nextStep() {
      switch (this.activeStep) {
        case 0:
          this.handleBaseInfo()
          break
        case 1:
          this.$refs['applyForm'].onConfirm().then(res => {
            if (!res.length) {
              return this.$message.error('表单配置不能为空')
            }
            this.tableFieldInfos = res
            this.activeStep++
          })
          break
        case 2:
          this.$refs['attachmentMaterial'].handleAttachmentMaterial().then(res => {
            this.annexs = res
            this.activeStep++
          }).catch(err => {
            console.error(err);
          })
          break
      }
    },
    handleBaseInfo() {
      this.$refs['baseInfo'].banseInfoForm().then(res => {
        if (res) {
          // this.$refs['applyForm'].getFormList()
          this.baseInfo = res
          this.activeStep++
        }
      })
    },
    /**
     * 保存
     */
    save() {
      this.$refs['processApproval'].handleProcessApproval().then(res => {
        this.instance.post(`/app/approval-process-def/add-update`, {
          ...this.detailObj,
          ...this.baseInfo,
          processDefStatus: Number(this.baseInfo.processDefStatus),
          tableInfo: {
            ...this.detailObj.tableInfo,
            tableFieldInfos: this.tableFieldInfos
          },
          tableType: 0,
          processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
          processNodeList: res.processNodeList,
          processType: this.processType
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("保存成功")
            this.$router.push({query:{}})
          }
        })
      }).catch(err => {
        console.error(err);
      })
    },
    getDetail(id) {
      this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
        if (res?.data) {
          this.detailObj = res.data
          this.filedList = res.data.tableInfo.tableFieldInfos
          this.refreshDetail()
        }
      })
    },
    getStepIcon(rowIndex) {
      if (rowIndex < this.activeStep) return "iconfont iconSteps_Finished"
      else if (this.activeStep == rowIndex) return "iconfont iconSteps_In_Progress"
      return ""
    },
    refreshDetail() {
      this.refresh = false
      this.$nextTick(() => this.refresh = true)
    },
    handleBack() {
      this.$router.push({query: {}})
    }
  },
  created() {
    if (this.row?.id) {
      this.getDetail(this.row?.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-config {
  height: 100%;

  &.formLayout {
    :deep( .ai-detail__content--wrapper ){
      max-width: 100%;
      height: calc(100%)!important;
      padding: 0!important;
      overflow: hidden!important;
    }
  }

  .step {
    width: 100%;
    height: 72px;
    font-size: 14px;

    .el-steps {
      display: flex;
      align-items: center;
      height: 72px;
      padding: 0 calc(50% - 380px);


      :deep( .el-step ){
        font-weight: bold;

        :deep( .el-step__icon ){
          width: 24px;
          height: 24px;
          background: #fff;

          .iconfont {
            font-size: 24px;
          }
        }

        :deep( .el-step__main ){
          display: flex;
          align-items: center;

          .el-step__arrow {
            background: #D0D4DC;
            margin: 0 8px;
            height: 2px;

            &:before, &:after {
              display: none;
            }
          }
        }

        .is-process {
          color: #2266FF;
        }

        .is-wait {
          color: #666;
          border-color: #D0D4DC;
        }
      }

    }

  }

  .btn {
    width: 92px;
    height: 32px;

    &:nth-child(2) {
      margin-left: 24px;
    }
  }
}
</style>