diantou/src_product/iam/audit/riskLibrary/audit-summarry-from.vue

<template>
  <span>
    <sd-webflow
        ref="docform"
        :key="key"
        :validate-form="validForm"
        :removed-tabs="['sdRelatedDoc']"
        @actionBtnClick="actionBtnClick"
    >
      <template v-slot:form="{ model, fields, FlowData }">
        <table v-if="initData(model)">
          <colgroup>
            <col style="width: 15%;"/>
            <col style="width: 35%;"/>
            <col style="width: 15%;"/>
            <col style="width: 35%;"/>
          </colgroup>
          <tr v-show="false">
            <!-- 标题 -->

            <sd-form-item-td name="title" :colspan="3"/>
          </tr>
          <tr>
            <td colspan="4" style="border:none">
              <audit-advanced-group
                  :expand="expandJ"
                  :expand-str="'expandJ'"
                  :group-label="'风险审计信息'"
                  @changedClick="changedClick"
              />
            </td>
          </tr>
          <tr v-show="expandJ">
            <!-- 业务编码 -->
            <sd-form-item-td name="businessCode" :input-props="{ disabled: true }"/>
            <!-- 事件标签 -->
            <sd-form-item-td
                name="eventTagName"
                label="事件标签分类"
                :input-props="{ disabled: true }"
            />
          </tr>
          <!-- 模型编码 -->
          <!-- 模型名称 -->
          <tr v-show="expandJ">
            <sd-form-item-td name="batchName" :input-props="{ disabled: true }"/>
            <sd-form-item-td name="batchCode" :input-props="{ disabled: true }"/>
          </tr>

          <tr v-show="expandJ">
            <!-- 模型类型 -->
            <sd-form-item-td name="modelTypeName" :input-props="{ disabled: true }"/>
            <!-- 整改人 -->
            <sd-form-item-td name="viewAccount" :input-props="{ disabled: true }"/>
          </tr>
          <!-- 非问题 -->
          <tr v-show="expandJ">
            <sd-form-item-td
                label="非问题标签"
                name="nonQuestionTag"
                :colspan="3"
                :input-props="{ disabled: true }"
            />
          </tr>
          <tr v-show="expandJ">
            <sd-form-item-td
                label="非问题说明"
                name="nonQuestionDesc"
                :colspan="3"
                :input-props="{ disabled: true }"
            />
          </tr>
          <tr v-show="expandJ">
            <!-- 关注风险 -->
            <sd-form-item-td
                label="关注风险"
                name="risk"
                :colspan="3"
                :input-props="{ disabled: true }"
            />
          </tr>
          <tr v-if="isViewType">
            <td
                v-if="getClassdata(model, fields)"
                :colspan="4"
                style="line-height:40px;border:none1;"
                :class="$style.maintaintable"
            >
              <audit-advanced-group
                  :expand="expandY"
                  :expand-str="'expandY'"
                  :group-label="'审计明细信息'"
                  @changedClick="changedClick"
              >
                <template>
                  <sd-table
                      v-show="expandY"
                      ref="classtable"
                      :row-key="(record, index) => index"
                      :loading="false"
                      class="maintaintable"
                      :columns="childMXColumns"
                      :data-source="classdata"
                      :pagination="false"
                  >
                    <div slot="attachment" slot-scope="text, record">
                      <span :class="$style.exportClickBtn" @click="exportClick(record)">{{
                          record.fileName
                        }}</span>
                    </div>
                    <div slot="questionNature" slot-scope="text, record">
                      <a-cascader :options="questionNatureList"  v-model="record.questionNature" change-on-select placeholder="请选择问题性质" @change="saveForm" />
<!--                      <a-select-->
<!--                          v-model="record.questionNature"-->
<!--                          placeholder="请选择问题性质"-->
<!--                          allow-clear-->
<!--                          @change="saveForm"-->
<!--                      >-->
<!--                        <a-select-option value="有业务无制度">有业务无制度</a-select-option>-->
<!--                        <a-select-option value="有制度难执行">有制度难执行</a-select-option>-->
<!--                         <a-select-option value="有制度未遵循">有制度未遵循</a-select-option>-->



<!--                        <a-select-option value="制度太宽泛缺乏操作细则"-->
<!--                        >制度太宽泛缺乏操作细则</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="制度过时不具备可操作性"-->
<!--                        >制度过时不具备可操作性</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="制度脱离实际难落地实施"-->
<!--                        >制度脱离实际难落地实施</a-select-option-->
<!--                        >-->

<!--                        <a-select-option value="特殊事项已经线下审批"-->
<!--                        >特殊事项已经线下审批</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="事项紧急重目标轻合规"-->
<!--                        >事项紧急重目标轻合规</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="制度理解存在人为偏差"-->
<!--                        >制度理解存在人为偏差</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="工作疏忽未按制度行事"-->
<!--                        >工作疏忽未按制度行事</a-select-option-->
<!--                        >-->
<!--                        <a-select-option value="人为规避制度管控要求"-->
<!--                        >人为规避制度管控要求</a-select-option-->
<!--                        >-->
<!--                      </a-select>-->
                    </div>
                    <!-- <div slot="personResponsible" slot-scope="text, record">
                      <span :class="$style.exportClickBtn" @click="selectUserClick">{{
                        record.personResponsible || '请选择'
                      }}</span>
                    </div> -->
                  </sd-table>
                </template>
              </audit-advanced-group>
              <div v-show="false">
                <sd-dep-picker
                    ref="pRelSelect"
                    v-model="mainSendPersonal"
                    :single="true"
                    :read-only="false"
                    @change="changep"
                />
              </div>
            </td>
          </tr>
        </table>

        <template v-if="!isViewType">
          <tr>
            <td colspan="4" style="border:none">
              <audit-advanced-group
                  :expand="expandDesc"
                  :expand-str="'expandDesc'"
                  :group-label="'说明'"
                  @changedClick="changedClick"
              />
            </td>
          </tr>
          <table v-if="expandDesc">
            <sd-form-item-td name="reformDesc" :colspan="4" label="说明">
              <a-textarea v-model="model.reformDesc" placeholder="请填写说明" :rows="3"/>
            </sd-form-item-td>
          </table>
          <!-- 整改说明 -->
          <tr>
            <td colspan="4" style="border:none">
              <audit-advanced-group
                  :expand="expandFiles"
                  :expand-str="'expandFiles'"
                  :group-label="'附件'"
                  @changedClick="changedClick"
              />
            </td>
          </tr>
          <table v-if="expandFiles">
            <a-form-model-item label="">
              <div :class="$style.upload">
                <a-upload-dragger
                    :class="$style.uploadData"
                    name="RectificationFile"
                    :file-list="fileListTemp"
                    :accept="actualAccept"
                    :multiple="true"
                    :custom-request="(file) => customRequest(file, 0)"
                    @change="handleChange"
                >
                  <p class="ant-upload-drag-icon"><a-icon type="inbox"/></p>
                  <p class="ant-upload-text">请上传整改附件</p>
                </a-upload-dragger>
                <div :class="$style.uploadList">
                  <li v-for="(item, i) in fileList" :key="i">
                    <span>{{ item.name }}</span>
                    <!-- 删除 -->
                    <a-icon type="delete" style="cursor: pointer;" @click="deleteFile(i)"/>
                  </li>
                </div>
              </div>
            </a-form-model-item>
          </table>
        </template>
        <!-- 整改说明 -->
      </template>
    </sd-webflow>
  </span>
</template>

<script>
import {Modal, Message} from 'ant-design-vue'
import auditAdvancedGroup from '../../components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
import components from './_import-components/audit-summarry-from-import'
import download from '@/common/services/download'
import {getUserInfo} from '@/common/store-mixin'
import moment from 'moment/moment'
import AuditRiskbraryService from './riskLibrary'
import {sdLocalStorage} from '@/common/services/storage-service'
import axios from '@/common/services/axios-instance'

// import
export default {
  name: 'AuditSummarryFrom',
  metaInfo: {
    title: '风险问题审计',
  },
  components: {
    ...components,
    auditAdvancedGroup,
  },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      key: 0,

      // 控制是否展开
      expandY: true,
      expandJ: true,
      expandDesc: true,
      expandFiles: true,
      mainSendPersonal: [],
      fileList: [],
      fileListTemp: [],
      userInfo: getUserInfo(),
      childMXColumns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        // {
        //   title: '批次号',
        //   dataIndex: 'batchCode',
        // },
        // {
        //   title: '批次名称',
        //   dataIndex: 'batchName',
        // },

        {
          // 模型名称
          title: '模型名称',
          dataIndex: 'batchName',
        },
        {
          // 模型编号
          title: '模型编号',
          dataIndex: 'batchCode',
        },
        {
          title: '整改说明',
          dataIndex: 'reformDesc',
        },
        {
          title: '附件',
          dataIndex: 'attachment',
          scopedSlots: {customRender: 'attachment'},
        },
        // {
        //   title: '问题性质',
        //   dataIndex: 'questionNature',
        //   width: '250px',
        //   scopedSlots: { customRender: 'questionNature' },
        // },
        // {
        //   title: '问题责任人',
        //   dataIndex: 'personResponsible',
        //   scopedSlots: { customRender: 'personResponsible' },
        // },
      ],
      classIndexData: [],
      maintaindata: [],
      flag: true,
      modelFlag: true,
      classtable: false,
      // 分类列表
      classdata: [],
      // 基础数据
      baseData: {},
      isViewType: true,
      infoProperties: {},
      attachments: [],
      lockId: '',
      flagIs: true,
      initType: false,

      questionNatureList: [
        {
          label: '有业务无制度',
          value: '有业务无制度',
          children: [
          ]
        },
        {
          label: '有制度难执行',
          value: '有制度难执行',
          children: [
            {
              label: '制度太宽泛缺乏操作细则',
              value: '制度太宽泛缺乏操作细则'
            },
            {
              label: '制度过时不具备可操作性',
              value: '制度过时不具备可操作性'
            },
            {
              label: '制度脱离实际难落地实施',
              value: '制度脱离实际难落地实施'
            },
          ]
        },
        {
          label: '有制度未遵循',
          value: '有制度未遵循',
          children: [{
            label:'特殊事项已经线下审批',
            value: '特殊事项已经线下审批'
          },{
            label:'事项紧急重目标轻合规',
            value: '事项紧急重目标轻合规'
          },{
            label:'制度理解存在人为偏差',
            value: '制度理解存在人为偏差'
          },{
            label:'工作疏忽未按制度行事',
            value: '工作疏忽未按制度行事'
          },{
            label:'人为规避制度管控要求',
            value: '人为规避制度管控要求'
          }]
        }
      ]
    }
  },
  computed: {
    actualAccept() {
      // 优先使用前端配置的类型限制，如未配置，则使用后端支持的类型
      return (
          this.accept || JSON.parse(sdLocalStorage.getItem('commonConfig') || '{}').attachType || ''
      )
    },
  },
  watch: {
    classdata() {
      this.saveForm()
    },
  },
  created() {
    const lock = sdLocalStorage.getItem(`Lock${this.webflow?.FlowData?.instId}`)
    this.lockId = (lock && JSON.parse(lock).sessionId) || ''
  },
  mounted() {
    this.initModelData()
  },
  methods: {
    initModelData() {
      if (!this.$route.query.extParams) return
      this.isViewType = false
      this.flagIs = false
      this.baseData = JSON.parse(this.$route.query.extParams)
      Object.keys(this.baseData).forEach((key) => {
        // 如果值是字符 null 则转换为null
        if (this.baseData[key] === 'null') {
          this.baseData[key] = null
        }
        this.$refs.docform.setFieldValue(key, this.baseData[key])
      })
      // todo 问题整改人
    },
    // 附件自定义上传
    customRequest(data, catnum = 0, item) {
      if (data.file.size === 0) {
        Message.warn(`不能上传大小为0的文件`)
        return
      }
      const file = {
        FileName: data.file.name,
        Completed: 0,
        CatNum: catnum,
      }

      this.attachments = [...this.attachments]
      const strTime = moment().format('YYYY-MM-DD HH:mm:ss')
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('FileName', data.file.name)
      formData.append('lockId', this.lockId)
      formData.append('groupId', this.groupId)
      Object.keys(this.infoProperties).forEach((key) => {
        formData.append(key, this.infoProperties[key])
      })

      formData.append(
          'querystring',
          `<file_unid></file_unid><file_name>${data.file.name}</file_name><file_size>${data.file.size}</file_size><completed>1</completed><file_create>${strTime}</file_create><file_update>${strTime}</file_update><file_editmodel>0</file_editmodel><file_lockuser>0</file_lockuser><CreateInfo>${this.userInfo.account} ${strTime}</CreateInfo><filetype></filetype><user_name>${this.userInfo.account}</user_name><UpdateInfo>${this.userInfo.account}于${strTime}创建.</UpdateInfo><TaodaInfo></TaodaInfo><CatNum>${catnum}</CatNum><Ext></Ext>`
      )
      const url = 'api/xcoa-mobile/v1/iam-attachment-extend/attachments-upload/indi'
      axios
          .post(url, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          })
          .then((_) => {
            if (_.data.startsWith('false')) {
              Message.error(`${data.file.name} 上传失败`)
            } else {
              this.fileList.push({
                name: data.file.name,
                url: _.data,
              })

              const attachment = this.fileList.map((item) => item.url).join(',')
              const nameList = this.fileList.map((item) => item.name).join(',')

              this.$refs.docform.setFieldValue('attachment', attachment)
              this.$refs.docform.setFieldValue('fileName', nameList)

              data.onSuccess(_, data.file)
            }
          })
          .catch((e) => {
            Message.error(`${data.file.name} 上传失败`)
            throw e
          })
    },
    // 附件上传
    handleChange(info) {
      const status = info.file.status

      if (status === 'done') {
        Message.success(`${info.file.name} 上传成功.`)
      } else if (status === 'error') {
        Message.error(`${info.file.name} 上传失败.`)
      }
    },
    // <!-- 删除已上传附件 -->
    deleteFile(index) {
      this.fileList.splice(index, 1)
      const attachment = this.fileList.map((item) => item.url).join(',')
      const nameList = this.fileList.map((item) => item.name).join(',')
      this.$refs.docform.setFieldValue('attachment', attachment)
      this.$refs.docform.setFieldValue('fileName', nameList)
    },
    saveForm() {
      return new Promise((resolve) => {
        if (this.isViewType) {
          this.$refs.docform.setFieldValue('questionNature', this.classdata[0].questionNature.join('|'))
          const account = getUserInfo().name
          const strTime = moment().format('YYYY-MM-DD')
          // 第一次
          if (!this.initType) {
            // 没有初审人，设置初审人
            if (!this.classdata[0].checker) {
              this.$refs.docform.setFieldValue('checker', account)
              this.$refs.docform.setFieldValue('checkDate', strTime)
            }
            // 有初审人并且没有终审人
            if (this.classdata[0].checker && !this.classdata[0].reviewer) {
              this.$refs.docform.setFieldValue('reviewer', account)
              this.$refs.docform.setFieldValue('reviewDate', strTime)
            }
          }
        }
        if (!this.isViewType) {
          const strTime = moment().format('YYYY-MM-DD')
          this.$refs.docform.setFieldValue('reformDate', strTime)

          this.$refs.docform.setFieldValue('title', getUserInfo().name + '风险审核')
        }
        resolve(true)
      })
    },
    validForm(e) {
      return Promise.resolve(true)
    },
    actionBtnClick(evt, {button, FlowData}) {
      if (button.buttonId === 'G_1_FXWTSJ.4') {
        if (
            !this.classdata[0]?.questionNature &&
            this.isViewType &&
            !this.classdata[0]?.nonQuestionDesc
        ) {
          evt.preventDefault()
          return Modal.warning({
            title: '提示',
            content: '请选择需要问题性质!',
          })
        }
      }
      if (button.fakeId === 'save' || button.fakeId === 'workflow-push') {
        // 保存前先校验计划是否已经存在
        evt.waitUntil(
            new Promise((resolve, reject) => {
              this.saveForm(button.buttonId).then((res) => {
                if (!res) {
                  evt.preventDefault()
                }
                resolve()
              })
            })
        )
      }
    },
    initData(model) {
      // 如果整改人是自己则可以上传
      if (model.viewAccount === getUserInfo().name) {
        this.isViewType = false
        if (model.attachment && this.flagIs) {
          const attachmentList = model.attachment.split(',')
          const fileNameList = model.fileName.split(',')
          this.fileList = []
          for (let i = 0; i < attachmentList.length; i++) {
            this.fileList.push({
              name: fileNameList[i],
              url: attachmentList[i],
            })
          }
          this.flagIs = false
        }
      }
      return true
    },
    getClassdata(model, fields) {
      if (this.flag) {
        this.classdata = [
          {
            batchCode: fields.batchCode.value,
            batchName: fields.batchName.value,
            reformDesc: fields.reformDesc.value,
            attachment: fields.attachment.value,
            fileName: fields.fileName.value,
            questionNature: fields.questionNature.value || undefined,
            // personResponsible: fields.personResponsible.value,
            checker: fields.checker.value,
            checkDate: fields.checkDate.value,
            reviewer: fields.reviewer.value,
            reviewDate: fields.reviewDate.value,
            viewAccount: fields.viewAccount.value,
            nonQuestionDesc: fields.nonQuestionDesc.value,
          },
        ]
        // 如果 非问题标签内有值则不显示
        if (
            !this.classdata[0].nonQuestionDesc &&
            !this.childMXColumns.find((item) => item.title === '问题性质')
        ) {
          this.childMXColumns.push({
            title: '问题性质',
            dataIndex: 'questionNature',
            width: '250px',
            scopedSlots: {customRender: 'questionNature'},
          })
        }
        if (!this.classdata[0].viewAccount) {
          this.initType = true
          this.$nextTick(() => {
            this.$refs.docform.setFieldValue('viewAccount', getUserInfo().name)
          })
        }

        this.flag = false
      }
      return true
    },
    // 下载
    exportClick(row) {
      const attachmentList = row.attachment.split(',')
      const fileNameList = row.fileName.split(',')
      for (let i = 0; i < attachmentList.length; i++) {
        const spliceIndex = attachmentList[i].lastIndexOf('|')
        const destStep = attachmentList[i].substring(spliceIndex + 1, attachmentList[i].length)
        download(
            'api/framework/v1/task-form-process/download-attachments/' + destStep,
            fileNameList[i]
        )
      }
    },
    selectUserClick() {
      setTimeout(() => {
        this.$refs.pRelSelect.openPicker()
      }, 0)
    },
    changep(values) {
      this.saveForm()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';

.btnselect {
  position: relative;
  top: 2px;
  right: 80px;
  float: right;

  .batchselect {
    z-index: 100;
    margin-left: 10px;
  }
}

.btnselectmaintain {
  position: relative;
  float: right;

  .batchselect {
    z-index: 100;
    margin-right: -10px;
    margin-left: 10px;
  }
}

.maintaintable {
  :global(.ant-table-thead > tr > th) {
    border-right: none;
  }

  :global(.ant-table-bordered.ant-table-empty .ant-table-placeholder) {
    border: none;
  }

  :global(.ant-table-body table) {
    //  border-left:none;
    border: none;
  }
}

.exportClickBtn {
  color: #1890ff;
  cursor: pointer;
}

.upload {
  display: flex;

  .upload-list {
    width: calc(30% - 10px);
    margin-left: 10px;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 30px;
      padding: 0 10px;
      margin-bottom: 10px;
      line-height: 30px;
      border-radius: 4px;

      span {
        display: inline-block;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .upload-data {
    width: 70%;
  }
}
</style>