aiccs/src/views/forceNotice/inclusion/handle.vue

<template>
  <div class="page">
    <easy-form
      ref="EasyForm"
      v-model="data"
      :fields="fields"
      :form-config="formConfig"
      :buttons="buttons"
    >
      <template v-slot:divider="scope">
        <div class="divider">
          <span class="text">{{ scope.getPropValue(scope.field.label) }}</span>
        </div>
      </template>
      <template v-slot:noticeContent="scope">
        <div class="notice-content-wrapper">
          <div v-if="!scope.isView" class="button-group">
            <el-button
              type="primary"
              size="small"
              :loading="generatingContent"
              @click="generateNoticeContent(scope)"
            >
              生成公告内容
            </el-button>
          </div>
          <el-input
            v-model="scope.formData[scope.field.prop]"
            type="textarea"
            :placeholder="scope.field.placeholder"
            :readonly="scope.isView"
            :rows="6"
            :trim="false"
          />
        </div>
      </template>
      <template v-slot:uploader="scope">
        <div class="uploader">
          <el-upload
            :action="action"
            :data="{
              attachType: '1',
              bizSeqNo: scope.formData.bizSeqNo
            }"
            accept=".jpg,.png,.pdf,.doc,.docx,.xls,.xlsx,.rar,.zip,.7z"
            multiple
            :disabled="scope.isView"
            :file-list="scope.formData[scope.field.prop]"
            :before-remove="removeFile"
            :on-preview="previewFile"
            :limit="10"
            :on-exceed="handleExceed"
          >
            <el-button v-if="!scope.isView" size="small" plain type="primary">
              <svg-icon icon-class="download" />
              点击上传
            </el-button>
            <div v-if="!scope.isView" slot="tip" class="el-upload__tip">只能上传jpg/png/pdf/doc/docx/xls/xlsx/rar/zip/7z文件，且单个文件不能超过20M</div>
          </el-upload>
        </div>
      </template>
      <template v-slot:steps="scope">
        <div class="steps">
          <el-steps v-if="scope.formData[scope.field.prop].length > 0" :active="0" finish-status="success">
            <el-step v-for="step in scope.formData[scope.field.prop]" :key="step.key">
              <template v-slot:description>
                <div class="step-description">
                  <div>
                    <span class="step-description-label">{{ step.opinionType }}内容：</span>
                    <span class="step-description-value">{{ step.opinionContent }}</span>
                  </div>
                  <div>
                    <span class="step-description-label">{{ step.opinionType }}人：</span>
                    <span class="step-description-value">{{ step.handler }}</span>
                  </div>
                  <div>
                    <span class="step-description-label">{{ step.opinionType }}日期：</span>
                    <span class="step-description-value">{{ parseTime(step.createTime, 'yyyy-MM-dd hh:mm') }}</span>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
          <div v-else class="empty-tips">暂无历史信息</div>
        </div>
      </template>
      <template v-slot:opinion="scope">
        <div class="opinion-selector">
          <span class="opinion-selector-text">常用语</span>
          <el-select
            v-model="scope.field.opinion"
            size="medium"
            placeholder="请选择常用语"
            @change="(val)=>{
              scope.formData[scope.field.prop] = val
              scope.easyFormItemBindData.componentScope.formInstance.clearValidate(scope.field.prop)
            }"
          >
            <el-option
              v-for="item in scope.field.options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </template>
      <template v-slot:upperDept="scope">
        <div class="opinion-selector">
          <el-radio-group
            v-model="localSelection"
            @change="() => {
              // 调用方法并传入 isUpper 参数
              getUsersWithPermission(localSelection === '上级部门处理人' ? 1 : 0);
              scope.easyFormItemBindData.componentScope.formInstance.clearValidate(scope.field.prop);
            }"
          >
            <el-radio label="当前部门处理人">当前部门处理人</el-radio>
            <el-radio label="上级部门处理人">上级部门处理人</el-radio>
          </el-radio-group>
        </div>
      </template>
      <template v-slot:entListTable>
        <easy-table
          ref="EntListTable"
          v-model="entListTableData"
          :fields="entListFields"
          :table-config="entListTableConfig"
          :emit-load-on-create="true"
          :on-load="loadEntListData"
        />
      </template>
    </easy-form>
  </div>
</template>

<script>
import { getUsersWithPermission } from '@/api/user'
import { createGlobalLoading, parseTime } from '@/utils'
import { findCurrentNode, findNextSequenceFlowList, taskInfo } from '@/api'
import {
  getForceDeregisterContent,
  xrForceDeregisterSpeListByBizSeqNo,
  xrForceDeregisterSpeProcessControl,
  getOrgunits,
  xrAttachmentDelLawFile,
  xrAttachmentListByBizSepNo,
  xrOpinionListByBizSeqNo
} from '@/api/force'
export default {
  data() {
    return {
      authItemMap: [],
      parseTime,
      action: process.env.VUE_APP_BASE_API + '/attachment/uploadFileByBizseq',
      nextPerformerMap: [],
      generatingContent: false,
      data: {},
      status: '',
      taskLikeId: '',
      showFakeProgress: false,
      type: this.$route.meta.type,
      flowModel: [],
      currentNodeID: '',
      localSelection: '当前部门处理人', // 默认值
      entListTableData: [],
      userIsRegOrg: false,
      entListFields: [
        {
          type: 'input',
          label: '统一社会信用代码/注册号',
          prop: 'uniscId',
          tableProps: {
            showOverflowTooltip: true,
            width: '220px',
            formatter: (row, column, cellValue, index) => {
              return `${row.uniscId || row.regNo || ''}`
            }
          }
        },
        {
          type: 'input',
          label: '主体名称',
          prop: 'entName',
          tableProps: {
            showOverflowTooltip: true,
            width: '300px',
            formatter: (row, column, cellValue, index) => {
              return `${row.entName || ''}`
            }
          }
        },
        {
          type: 'input',
          label: '登记机关',
          prop: 'regOrgCn',
          tableProps: {
            showOverflowTooltip: true
          }
        },
        {
          type: 'input',
          label: '法定代表人',
          prop: 'leRep',
          tableProps: {
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              return `${row.leRep || ''}`
            }
          }
        },
        {
          type: 'select',
          label: '主体状态',
          prop: 'opState',
          optionsBaseCode: 'TY01',
          tableProps: {
            showOverflowTooltip: true
          }
        }
      ],
      entListTableConfig: {
        selection: false,
        showIndex: true,
        indexWidth: '100px',
        showPagination: true,
        tableProps: {
          headerCellStyle: { background: '#F5F5F5!important', color: '#333333!important', padding: '0px' },
          headerRowStyle: { height: '48px' },
          rowStyle: { height: '48px' },
          cellStyle: { padding: '16px 0', color: '#333' }
        }
      },
      formConfig: {
        labelPosition: 'right',
        buttonPosition: 'right',
        gutter: 0,
        isView: () => {
          return this.readonly
        }
      },
      fields: [
        {
          type: 'divider',
          label: '拟强制注销公告信息'
        },
        {
          type: 'input',
          label: '业务名称',
          prop: 'busName',
          required: true,
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'select',
          label: '拟强制注销登记法定事由',
          prop: 'forceRra',
          optionsBaseCode: 'C13042',
          required: true,
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'date-picker',
          label: '公告期自',
          prop: 'noticeFrom',
          required: true,
          formProps: {
            valueFormat: 'yyyy-MM-dd'
          },
          span: 12,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'date-picker',
          label: '公告期至',
          prop: 'noticeTo',
          required: true,
          formProps: {
            valueFormat: 'yyyy-MM-dd'
          },
          span: 12,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'select',
          label: '拟强制注销结果',
          prop: 'forceRes',
          optionsBaseCode: 'C13044',
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          },
          showInForm: () => {
            return this.readonly
          }
        },
        {
          type: 'date-picker',
          label: '拟强制注销结果日期',
          prop: 'forceResDate',
          required: true,
          formProps: {
            valueFormat: 'yyyy-MM-dd'
          },
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'input',
          label: '公告标题',
          prop: 'noticeTitle',
          required: true,
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'slot',
          slotName: 'noticeContent',
          label: '公告内容 ',
          prop: 'noticeContent',
          required: true,
          span: 24,
          isView: ({ formData }) => {
            return formData.status !== '0'
          }
        },
        {
          type: 'slot',
          slotName: 'uploader',
          label: '材料列表',
          prop: 'fileList',
          defaultValue: () => {
            return []
          },
          span: 24
        },
        {
          type: 'divider',
          label: '拟强制注销主体列表'
        },
        {
          type: 'slot',
          slotName: 'entListTable',
          label: '拟强制注销主体列表',
          hiddenLabel: true,
          prop: 'entList',
          span: 24
        },
        {
          type: 'divider',
          label: '历史处理信息'
        },
        {
          type: 'slot',
          slotName: 'steps',
          label: '历史处理信息',
          hiddenLabel: true,
          prop: 'steps',
          defaultValue: () => {
            return []
          },
          span: 24
        },
        {
          type: 'divider',
          label: ({ formData }) => {
            return ({
              '0': '经办意见',
              '1': '审核意见',
              '2': '审批意见',
              '7': '执法负责意见'
            })[formData.status]
          },
          showInForm: () => {
            return !this.readonly
          }
        },
        {
          type: 'radio',
          label: '选择操作',
          prop: 'isAgree',
          required: true,
          span: 24,
          options: ({ formData }) => {
            return this.flowModel || []
          },
          showInForm: () => {
            return !this.readonly
          },
          onChange: (scope, value, isFromUser) => {
            if (isFromUser) {
              scope.formData.opinionContent = ''
            }
          }
        },
        {
          type: 'select',
          beforeSlotName: 'upperDept',
          label: '下一步处理人',
          prop: 'nextPerformerIds',
          span: 12,
          required: true,
          options: () => {
            return this.nextPerformerMap.map((item) => {
              return {
                ...item,
                label: item.name,
                value: item.primaryKey
              }
            })
          },
          showInForm: ({ formData }) => {
            return !this.readonly && ['0', '1', '7'].includes(formData.status) && !['nullify', 'transfer', 'examineFinish', 'approveFinish', 'lawFinish', 'handleReturn', 'examineReturn', 'end', 'upApproveFinish'].includes(formData.isAgree)
          }
        },
        {
          type: 'textarea',
          afterSlotName: 'opinion',
          label: ({ formData }) => {
            return ({
              '0': '经办意见',
              '1': '审核意见',
              '2': '审批意见',
              '7': '执法负责意见'
            })[formData.status]
          },
          prop: 'opinionContent',
          required: true,
          span: 24,
          opinion: '',
          options: [
            '同意',
            '不同意'
          ],
          showInForm: ({ formData }) => {
            return !this.readonly && formData.isAgree !== 'transfer'
          }
        },
        {
          type: 'cascader',
          label: '转办机关',
          prop: 'nextOrgID',
          required: true,
          span: 24,
          showInForm: ({ formData }) => {
            return formData.isAgree === 'transfer' && formData.status === '0'
          },
          isView: ({ formData }) => {
            return ['1', '2'].includes(formData.status) || this.readonly
          },
          formProps: {
            props: { checkStrictly: true }
          },
          optionConfig: {
            labelKeyName: 'label',
            valueKeyName: 'orgUnitId'
          },
          options: () => {
            return this.authItemMap
          },
          onCreated: ({ setOptionLoading }) => {
            if (this.authItemMap.length === 0) {
              setOptionLoading('authItem', getOrgunits().then((data) => {
                this.authItemMap = data
              }))
            }
          }
        },
        {
          type: 'input',
          label: '转办原因',
          prop: 'transferReason',
          required: true,
          span: 24,
          showInForm: ({ formData }) => {
            return formData.isAgree === 'transfer' && formData.status === '0'
          },
          isView: ({ formData }) => {
            return ['1', '2'].includes(formData.status) || this.readonly
          }
        }
      ],
      buttons: [
        {
          label: '返回',
          type: 'primary',
          show: true,
          buttonProps: {
            plain: true
          },
          handler: (scope) => {
            this.$router.back()
          }
        },
        {
          label: '提交',
          type: 'primary',
          show: () => {
            return !this.readonly
          },
          handler: ({ formInstance, getOptionValue }) => {
            return formInstance.submitForm().then((formData) => {
              this.$confirm('是否继续提交', '提示', {
                type: 'info',
                customClass: 'type-1',
                confirmHandlerPromise: () => {
                  // 判断当前环节是否是审批状态
                  const isApprovalStatus = this.data.status === '1' // 审核状态
                  // 当前用户的单位不是登记机关
                  const notReOrg = !this.userIsRegOrg
                  // 判断是否选择了上级部门处理人
                  const isUpperDeptSelected = this.localSelection === '上级部门处理人'
                  // 判断审批环节，如果当前用户的单位不是登记机关，但是没有选择上级部门去审批，则给出提示
                  if (isApprovalStatus && notReOrg && !isUpperDeptSelected) {
                    // 给出提示
                    this.$message.warning('需要提交至登记机关进行审批')
                    // 关闭确认框
                    return Promise.reject(new Error('需要提交至登记机关进行审批'))
                  }
                  const nextPerformer = getOptionValue('nextPerformerIds') ? [getOptionValue('nextPerformerIds')] : []
                  return xrForceDeregisterSpeProcessControl({
                    ...formData,
                    forceType: '1',
                    bizSeqNo: formData.bizSeqNo,
                    nextNodeID: formData.isAgree,
                    nextPerformerIds: nextPerformer.map((item) => {
                      return item.value
                    }),
                    nextPerformerNames: nextPerformer?.label,
                    opinion: {
                      opinionContent: formData.opinionContent
                    },
                    currentNodeID: this.currentNodeID
                  }).then((data) => {
                    this.$message.success(`已完成对“${formData.entname}”的业务办理!`)
                    this.$router.push({
                      path: `/forceNotice/inclusion/${this.$route.meta.type}`
                    })
                  })
                }
              })
            })
          }
        }
      ]
    }
  },
  computed: {
    readonly() {
      return this.type === 'history'
    }
  },
  created() {
    createGlobalLoading(() => {
      return Promise.all([
        xrOpinionListByBizSeqNo({
          bizSeqNo: this.$route.query.bizSeqNo
        }).then((data) => {
          this.data = {
            ...this.data,
            steps: data.reverse()
          }
        }),
        xrAttachmentListByBizSepNo({
          bizSeqNo: this.$route.query.bizSeqNo,
          attachType: '1'
        }).then((data) => {
          this.data.fileList = data.map((item) => {
            return {
              ...item,
              name: item.fileName
            }
          })
        }),
        xrForceDeregisterSpeListByBizSeqNo({
          bizSeqNo: this.$route.query.bizSeqNo,
          forceType: '1'
        }).then((busInfo) => {
          const busName = this.data.busName
          this.data.status = busInfo[0].status
          this.data = busInfo[0]
          if (busName) {
            this.data.busName = busName
          }
          this.userIsRegOrg = busInfo[0].userIsRegOrg
          const permission = ({
            '0': 'xrExamine',
            '1': 'xrApprove'
          })[busInfo[0].status]
          const ps = []
          if (permission) {
            ps.push(getUsersWithPermission(
              permission,
              this.$store.getters.orgId
            ).then((data) => {
              this.nextPerformerMap = data.data
            }))
          }
          return Promise.all(ps)
        }),
        taskInfo({
          bizSeqNo: this.$route.query.bizSeqNo
        }).then((data) => {
          this.taskLikeId = data.taskLikeId
          const busName = this.data.busName
          this.data = {
            ...this.data,
            ...data,
            taskId: data.taskLikeId
          }
          if (busName) {
            this.data.busName = busName
          }
          findNextSequenceFlowList({
            taskId: data.taskLikeId
          }).then((data) => {
            this.flowModel = data.map((item) => {
              return {
                label: item.name, value: item.nextNode.id
              }
            })
          })
          findCurrentNode({
            taskId: data.taskLikeId
          }).then((activity) => {
            this.currentNodeID = activity.linkType
          })
        })
      ])
    })
  },
  methods: {
    generateNoticeContent(scope) {
      this.generatingContent = true
      getForceDeregisterContent(
        scope.formData
      ).then((data) => {
        scope.formData[scope.field.prop] = data
        this.generatingContent = false
      }).catch(() => {
        this.generatingContent = false
      })
    },
    stepStatus2CN(opinionType, approve) {
      return `${approve === '1' ? '上级' : ''}` + ({
        'handle': '经办',
        'examine': '审核',
        'approve': '审批'
      })[opinionType]
    },
    removeFile(file) {
      return xrAttachmentDelLawFile({
        id: file.attachmentId
      })
    },
    previewFile(file) {
      window.open(`${process.env.VUE_APP_BASE_API}/xrAttachment/getMaterial?id=${file.attachmentId || file?.response?.data?.attachmentId}&bizSeqNo=${file.bizSeqNo}&attachType=${file.attachType}`, '_blank')
    },
    getUsersWithPermission(isUpper) {
      const ps = []
      const status = this.data.status || '0'
      const permission = ({
        '0': 'xrExamine',
        '1': 'xrApprove'
      })[status]
      if (permission) {
        ps.push(getUsersWithPermission(
          permission,
          this.$store.getters.orgId,
          isUpper
        ).then((data) => {
          this.nextPerformerMap = data.data
        }))
      }
      return Promise.all(ps)
    },
    loadEntListData(pageParam) {
      return xrForceDeregisterSpeListByBizSeqNo({
        size: pageParam.size,
        current: pageParam.current,
        bizSeqNo: this.$route.query.bizSeqNo,
        forceType: '1'
      }).then((data) => {
        return {
          tableData: data,
          total: data.length
        }
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`系统限制单次只能选择10个文件，本次选择了${files.length}个文件`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/abnormal-handle";
.opinion-selector{
  margin-top: 18px;
  display: flex;
  .opinion-selector-text{
    margin-right: 16px;
  }
}
.steps{
  padding: 20px 24px;
  overflow: auto;
  .el-steps{
    position: relative;
    width: max-content;
    min-width: 100%;
    &::before{
      content: "";
      position: absolute;
      border: 2px solid #F5F5F5;
      width: 100%;
      top: 18px;
    }
    .el-step{
      flex-basis: unset!important;
      margin-right: 56px!important;
      flex-shrink: 0;
      /deep/ .el-step__head{
        margin-bottom: 16px;
        .el-step__line{
          display: none;
        }
        .el-step__icon{
          width: 36px;
          height: 36px;
          border-color: #2A8CE3;
          color: #2A8CE3;
        }
      }
      /deep/ .el-step__description{
        padding-right: 0;
      }
      .step-description{
        font-size: 14px;
        max-width: 235px;
        &>div{
          margin-bottom: 8px;
        }
        .step-description-label{
          color: #666666;
        }
        .step-description-value{
          color: #333333;
        }
      }
    }
  }
  .empty-tips{
    text-align: center;
    color: #999999;
  }
  .notice-content-wrapper {
    .button-group {
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>