diantou/src_product/iam/risk/riskCriteria/risk-criteria-form.vue

<template>
  <span>
    <audit-form-top-banner
      :handel-save-form="saveForm"
      :form-data="mode"
      @handelSaveForm="saveForm"
    >
      <sd-detail-form
        ref="docform"
        page-id="risk/criteria/riskCriteria"
        :record-id="this.$route.query.record ? parseInt(this.$route.query.record) : null"
        :class="$style.form"
        :read-only="false"
        @close="close(true)"
        @saved="saved"
      >
        <template v-slot="{ model, fields }">
          <table>
            <tr>
              <td style="border: none">
                <audit-advanced-group
                  :expand="expand"
                  expand-str="expand"
                  :group-label="'基本信息'"
                  tablestyle="''"
                  @changedClick="changedClick"
                ></audit-advanced-group>
              </td>
            </tr>
          </table>

          <table v-show="expand">
            <tr>
              <!-- 准则版本编号 -->
              <sd-form-item-td v-show="fnIni(model)" name="criteriaCode">
                <template v-slot:read-and-edit="{ editable }">
                  {{ model.criteriaCode }}
                </template>
              </sd-form-item-td>
              <!-- id -->
              <sd-form-item-td name="id" :hidden="true"> </sd-form-item-td>
              <!-- 准则适用范围 -->
              <sd-form-item-td name="criteriaDeptOpt">
                <template v-slot:read-and-edit="{ editable }">
                  <sd-group-picker
                    v-if="editable"
                    v-model="model.criteriaDeptOpt"
                    :root-node="rootNode"
                    @change="depChange"
                  ></sd-group-picker>
                  <div v-else>{{ model.criteriaDeptName }}</div>
                </template>
              </sd-form-item-td>
              <sd-form-item-td name="criteriaDeptId" :hidden="true"> </sd-form-item-td>
              <sd-form-item-td name="criteriaDeptCode" :hidden="true"> </sd-form-item-td>
              <sd-form-item-td name="criteriaDeptName" :hidden="true"> </sd-form-item-td>
            </tr>
            <tr>
              <!-- 状态 -->
              <sd-form-item-td name="state" :colspan="3"> </sd-form-item-td>
            </tr>
            <tr>
              <!-- 说明 -->
              <sd-form-item-td name="signify" :colspan="3">
                <template v-slot:read-and-edit="{ editable }">
                  <a-textarea
                    v-if="editable"
                    v-model="model.signify"
                    :auto-size="{ maxRows: 3, minRows: 3 }"
                  ></a-textarea>
                  <div v-else>
                    {{ model.signify }}
                  </div>
                </template>
              </sd-form-item-td>
            </tr>
            <tr>
              <!-- 创建人 -->
              <sd-form-item-td name="creatorName" label="创建人员" />
              <!-- 创建日期 -->
              <sd-form-item-td name="creationTime" label="创建日期" />
            </tr>
          </table>

          <table>
            <tr
              ><td :colspan="4">
                <sd-form-item name="riskPossibilityEntitys" :label="null">
                  <template v-slot:read-and-edit="{ editable }">
                    <audit-advanced-group
                      :expand="possExpand"
                      expand-str="possExpand"
                      group-label="发生可能性（P）"
                      @changedClick="changedClick"
                    >
                      <template>
                        <xm-child-table
                          ref="possTable"
                          v-model="model.riskPossibilityEntitys"
                          :class="$style.possChild"
                          :label="null"
                          :read-only="true"
                          :addbuttonvisiable="false"
                          :fields="
                            [
                              {
                                caption: '序号',
                                name: 'sortNum',
                                dataType: 'number',
                              },
                            ].concat(Array.from(fields.riskPossibilityEntitys.attr.dync))
                          "
                          :columns="possColumns"
                        >
                          <!-- 定义 -->
                          <template v-slot:definition="{ text, record, field, value, index }">
                            <a-input v-if="editable" v-model="record.definition"></a-input>
                            <div v-else>
                              {{ record.definition }}
                            </div>
                          </template>
                          <!-- 评率/可能性 -->
                          <template v-slot:frequency="{ text, record, field, value, index }">
                            <a-input v-if="editable" v-model="record.frequency"></a-input>
                            <div v-else>
                              {{ record.frequency }}
                            </div>
                          </template>
                        </xm-child-table>
                      </template>
                    </audit-advanced-group>
                  </template>
                </sd-form-item>
              </td>
            </tr>
          </table>

          <table>
            <tr
              ><td :colspan="4">
                <sd-form-item name="riskDegreeEntitys" :label="null">
                  <template v-slot:read-and-edit="{ editable }">
                    <audit-advanced-group
                      :expand="degreeExpand"
                      expand-str="degreeExpand"
                      group-label="风险影响程度（C）"
                      @changedClick="changedClick"
                    >
                      <template>
                        <risk-criteria-child-table
                          ref="dgreeTable"
                          v-model="degreeData"
                          :select-columns="selectColumnsLength"
                          :class="$style.dgreeChild"
                          :label="null"
                          :read-only="!editable"
                          :fields="degreeFields"
                          :columns="degreeColumns"
                          @addData="addData"
                          @deleteData="deleteData"
                        >
                          <template
                            v-for="fieldNum in 100"
                            :slot="'field' + fieldNum"
                            slot-scope="{ text, record, field, value, index }"
                          >
                            <span v-if="index === 0 && field.name === 'field1'" :key="fieldNum">
                              {{ text }}
                            </span>
                            <span v-else :key="fieldNum" :class="$style.titleSpan">
                              <a-checkbox
                                v-if="index === 0"
                                v-model="selectColumns[field.name]"
                                :class="$style.titleCheckbox"
                              />

                              <a-input
                                v-model="record['field' + fieldNum]"
                                :class="{
                                  [$style.requireInputXm]:
                                    errorField['field' + fieldNum + '-' + index],
                                }"
                                @blur="inputChange($event, 'field' + fieldNum + '-' + index)"
                                @change="inputChange($event, 'field' + fieldNum + '-' + index)"
                              ></a-input>
                            </span>
                          </template>
                        </risk-criteria-child-table>
                        <div
                          class="ant-form-explain"
                          :class="{
                            [$style.requireDivXm]: !canSumibt,
                            [$style.requireDivNoneXm]: canSumibt,
                          }"
                          >风险影响程度内容不能为空</div
                        >
                      </template>
                    </audit-advanced-group>
                  </template>
                </sd-form-item>
              </td>
            </tr>
          </table>

          <table>
            <tr
              ><td :colspan="4">
                <sd-form-item name="riskLevelEntitys" :label="null">
                  <template v-slot:read-and-edit="{ editable }">
                    <audit-advanced-group
                      :expand="levelExpand"
                      expand-str="levelExpand"
                      group-label="风险等级"
                      @changedClick="changedClick"
                    >
                      <template>
                        <xm-child-table
                          ref="levelTable"
                          v-model="model.riskLevelEntitys"
                          :class="$style.levelChild"
                          :label="null"
                          :read-only="true"
                          :fields="
                            [
                              {
                                caption: '序号',
                                name: 'sortNum',
                                dataType: 'number',
                              },
                            ].concat(Array.from(fields.riskLevelEntitys.attr.dync))
                          "
                          :columns="levelColumns"
                        >
                          <!-- 最小值 -->
                          <template v-slot:minNum="{ text, record, field, value, index }">
                            <a-input-number
                              v-if="editable"
                              v-model="record.minNum"
                              :min="0"
                              :precision="1"
                            ></a-input-number>
                            <div v-else>
                              {{ record.minNum }}
                            </div>
                          </template>
                          <!-- 最大值 -->
                          <template v-slot:maxNum="{ text, record, field, value, index }">
                            <a-input-number
                              v-if="editable"
                              v-model="record.maxNum"
                              :min="0"
                              :precision="1"
                            ></a-input-number>
                            <div v-else>
                              {{ record.maxNum }}
                            </div>
                          </template>
                        </xm-child-table>
                      </template>
                    </audit-advanced-group>
                  </template>
                </sd-form-item>
              </td>
            </tr>
          </table>
        </template>
      </sd-detail-form>
    </audit-form-top-banner>
  </span>
</template>

<script>
import { getUserInfo } from '@/common/store-mixin'
import { message, Modal } from '@/common/one-ui'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import auditFormTopBanner from '@product/iam/components/audit-form-top-banner'
import auditAdvancedGroup from '@product/iam/components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '@product/iam/components/audit-advanced-group-mixins'
import riskCriteriaChildTable from './components/risk-criteria-child-table.vue'
import riskCriteriaService from './risk-criteria-service'
import components from './_import-components/risk-criteria-form-import'
// 修改主子表的首行title名
export default {
  name: 'RiskCriteriaForm',
  metaInfo: {
    title: '风险准则',
  },
  components: {
    ...components,
    auditAdvancedGroup,
    auditFormTopBanner,
    riskCriteriaChildTable,
  },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      rootNode: {},
      errorField: {},
      canSumibt: true,
      infoDataKey: 0,
      selectColumns: {},
      mode: null,
      childTableKey: 0, // 刷新子表组件
      inited: false,
      degreeExpand: true,
      possExpand: true,
      levelExpand: true,
      expand: true,
      planId: null,
      possColumns: [
        {
          title: '分值',
          dataIndex: 'sortNum',
          width: '100px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          dataIndex: 'definition',
          title: '定义',
        },
        { dataIndex: 'frequency', title: '频率/可能性' },
        { dataIndex: 'criteriaId', title: '风险准则ID', sdHidden: true },
      ],
      possData: [
        {
          definition: '很低',
          frequency: '每年发生一次或者几乎不发生，只特定时期发生',
        },
        {
          definition: '低',
          frequency: '每季度发生一次',
        },
        {
          definition: '一般',
          frequency: '每月发生一次',
        },
        {
          definition: '高',
          frequency: '每周发生一次',
        },
        {
          definition: '很高',
          frequency: '每天发生一次',
        },
      ],
      childTableId: {},
      degreeIndex: 2,
      degreeColumns: [
        {
          dataIndex: 'sortNum',
          title: '分值',
          width: '100px',
          customRender: (text, record, index) => {
            if (index === 0) return '分值'
            return index
          },
        },
        { dataIndex: 'field1', title: 'field1' },
      ],
      degreeFields: [
        {
          name: 'sortNum',
          caption: '序号',
        },
        {
          dataType: 'string',
          caption: 'field1',
          name: 'field1',
        },
      ],
      degreeData: [
        {
          field1: '影响',
        },
        {
          field1: '轻微',
        },
        {
          field1: '中等',
        },
        {
          field1: '重要',
        },
        {
          field1: '重大',
        },
        {
          field1: '灾难性',
        },
      ],
      levelColumns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          width: '100px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          dataIndex: 'riskLevel',
          title: '风险等级',
        },
        { dataIndex: 'maxNum', title: '最大值（含等于）' },
        { dataIndex: 'minNum', title: '最小值（含等于）' },
        { dataIndex: 'criteriaId', title: '风险准则ID', sdHidden: true },
      ],
      levelData: [
        {
          riskLevel: '高风险',
          minNum: null,
          maxNum: null,
        },
        {
          riskLevel: '中风险',
          minNum: null,
          maxNum: null,
        },
        {
          riskLevel: '低风险',
          minNum: null,
          maxNum: null,
        },
      ],
      expressions: [],
      isIni: false,
    }
  },
  computed: {
    selectColumnsLength() {
      let length = 0
      for (const checked in this.selectColumns) {
        if (this.selectColumns[checked]) {
          length++
        }
      }
      return length
    },
  },
  mounted() {
    this.getUserRootNode()
    // 重画表格表头
    const setHeader = setInterval(() => {
      if (document.querySelector('.level-child_risk-criteria-form_product table thead')) {
        clearInterval(setHeader)
        this.fnSetLevelTableHeader()
      }
    }, 200)
  },
  methods: {
    // 获取用户默认根节点机构
    getUserRootNode() {
      const userInfo = getUserInfo()
      const deptId = userInfo.deptId
      riskCriteriaService.getUserHavePermissionOrg().then((res) => {
        riskCriteriaService.findIamOrgId(deptId).then((data) => {
          const node = res.data.editNodes.find((item) => {
            return item.id === data.data
          })
          if (node) {
            this.rootNode = {
              code: node.props.orgId + '',
              name: node.text,
            }
          }
        })
      })
    },
    depChange(deptList) {
      const ids = []
      const codes = []
      const names = []
      deptList.forEach((item) => {
        ids.push(item.id)
        codes.push(item.code)
        names.push(item.name)
      })
      this.$refs.docform.setFieldValue('criteriaDeptId', ids.join(','))
      this.$refs.docform.setFieldValue('criteriaDeptCode', codes.join(','))
      this.$refs.docform.setFieldValue('criteriaDeptName', names.join(','))
    },
    // 动态增加列
    addData() {
      this.degreeColumns.push({
        dataIndex: 'field' + this.degreeIndex,
        title: 'field' + this.degreeIndex,
      })
      this.degreeFields.push({
        dataType: 'string',
        caption: 'field' + this.degreeIndex,
        name: 'field' + this.degreeIndex,
        required: true,
      })
      this.degreeData.forEach((item) => {
        item['field' + this.degreeIndex] = ''
      })
      this.degreeIndex++
      this.$refs.dgreeTable.fnupdate(this.degreeData)
    },
    // 删除列
    deleteData() {
      for (const fieldKey in this.selectColumns) {
        if (this.selectColumns[fieldKey]) {
          let colIndex
          this.degreeColumns.forEach((item, index) => {
            if (item.dataIndex === fieldKey) colIndex = index
          })
          this.degreeColumns.splice(colIndex, 1)
          let fieldIndex
          this.degreeFields.forEach((item, index) => {
            if (item.name === fieldKey) fieldIndex = index
          })
          this.degreeFields.splice(fieldIndex, 1)
          this.degreeData.forEach((item) => {
            delete item[fieldKey]
          })
        }
      }
      this.selectColumns = {}
    },
    fnIni(model) {
      if (this.isIni) return true
      this.isIni = true
      if (this.$route.query.record) {
        // 获取风险影响程度数据
        this.fnGetDegreeTableData(model)
      } else {
        // 发生可能行（P）
        model.riskPossibilityEntitys = this.possData
        // 风险影响程度
        model.riskDegreeEntitys = this.degreeData
        // 风险等级
        model.riskLevelEntitys = this.levelData
      }

      return true
    },

    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.fullPath, flag)
      window.close()
    },
    saved() {
      message.success({ content: '保存成功！' }, 1).then(() => {
        this.close(true)
      })
    },
    // 保存
    saveForm() {
      // 保存前先将动态表格拆分为正常数据
      this.fnSetDegreeTableData()
      this.checkDegreeTableData()
      setTimeout(() => {
        this.$refs.docform.validateFields().then((valid) => {
          // 检查分值不能冲突
          if (valid && this.canSumibt && this.checkRiskLevelEntitys()) {
            // 如果是作废状态，则不判断是否有启用的文件
            // const isStart = this.$refs.docform.getFieldValue('state')
            // if (isStart === '1') {
            // 先注释掉判断重复启用的代码,以防后边还需要使用,暂时先不判断
            this.$refs.docform.saveBtnClick()
            // return
            // }
            // // 启用状态才继续判断是否有其他启用的准则
            // const errDep = []
            // // 判断组织是否存在启用的准则
            // const deptList = this.$refs.docform.getFieldValue('criteriaDeptOpt')
            // const promiseAll = []
            // const deptName = []
            // const id = this.$route.query.record || ''
            // deptList.forEach((item) => {
            //   promiseAll.push(
            //     riskCriteriaServices.checkDept({
            //       criteriaDeptCode: item.code,
            //       id: id,
            //     })
            //   )
            //   deptName.push(item.name)
            // })
            // // 全部一起请求
            // let isErr = false
            // Promise.all(promiseAll)
            //   .then((resAll) => {
            //     for (let index = 0; index < resAll.length; index++) {
            //       if (!resAll[index].data) {
            //         errDep.push(deptName[index])
            //       }
            //     }
            //   })
            //   .catch((err) => {
            //     isErr = true
            //     message.error('判断启用准则接口请求错误，请联系管理员')
            //     console.log(err)
            //   })
            //   .finally(() => {
            //     // 如果存在已启动的
            //     if (errDep.length > 0) {
            //       message.warning(errDep.join('，') + '(单位)的风险准则已启用，请重新选择', 1)
            //     } else {
            //       if (!isErr) {
            //         this.$refs.docform.saveBtnClick()
            //       }
            //     }
            //   })
          }
        })
      }, 0)
    },
    checkDegreeTableData() {
      this.canSumibt = true
      this.errorField = []
      // 判断是否有未填项目
      this.degreeData.forEach((item, index) => {
        for (const key in item) {
          if (!item[key]) {
            this.errorField[key + '-' + index] = true
          } else {
            this.errorField[key + '-' + index] = false
          }
        }
      })
      for (const key in this.errorField) {
        if (this.errorField[key]) {
          this.canSumibt = false
        }
      }
    },
    // 检查分值不能冲突
    checkRiskLevelEntitys() {
      const levelData = this.$refs.docform.getFieldValue('riskLevelEntitys')
      const errorStr = []
      const firstMin = parseFloat(levelData[0].minNum)
      const firstMax = parseFloat(levelData[0].maxNum)
      const secondMin = parseFloat(levelData[1].minNum)
      const secondMax = parseFloat(levelData[1].maxNum)
      const threeMin = parseFloat(levelData[2].minNum)
      const threeMax = parseFloat(levelData[2].maxNum)
      if (firstMin > firstMax) {
        errorStr.push('高风险最小值不能大于最大值')
      }
      if (secondMin > secondMax) {
        errorStr.push('中风险最小值不能大于最大值')
      }
      if (threeMin > threeMax) {
        errorStr.push('低风险最小值不能大于最大值')
      }
      if (firstMin <= secondMax) {
        errorStr.push('高风险最小值不能小于或等于中风险最大值')
      }
      if (secondMin <= threeMax) {
        errorStr.push('中风险最小值不能小于或等于低风险最大值')
      }
      if (errorStr.length > 0) {
        Modal.warning({
          title: '风险等级分值',
          content: (h) => {
            const info = []
            errorStr.forEach((item, index) => {
              info.push(index + 1 + '.' + item)
              info.push(h('br'))
            })
            return h('div', null, info)
          },
        })
        return false
      }
      return true
    },
    inputChange(e, fieldName) {
      // 输入框变化时
      if ((e.currentTarget.value === '') | !e.currentTarget.value) {
        this.errorField[fieldName] = true
      } else {
        this.errorField[fieldName] = false
      }
      // this.checkDegreeTableData()
    },
    // 获取风险影响程度数据
    fnGetDegreeTableData(model) {
      const [sequence, score1, score2, score3, score4, score5] = this.degreeData
      const tableData = model.riskDegreeEntitys || []
      if (tableData.length > 0) {
        this.degreeIndex = 1
      }
      tableData.forEach((item) => {
        if (this.degreeIndex !== 1) {
          // 增加下标
          this.degreeColumns.push({
            dataIndex: 'field' + this.degreeIndex,
            title: 'field' + this.degreeIndex,
          })
          this.degreeFields.push({
            dataType: 'string',
            caption: 'field' + this.degreeIndex,
            name: 'field' + this.degreeIndex,
            required: true,
          })
        }

        this.childTableId['field' + this.degreeIndex] = item.id
        sequence['field' + this.degreeIndex] = item.sequence
        score1['field' + this.degreeIndex] = item.score1
        score2['field' + this.degreeIndex] = item.score2
        score3['field' + this.degreeIndex] = item.score3
        score4['field' + this.degreeIndex] = item.score4
        score5['field' + this.degreeIndex] = item.score5
        this.degreeIndex++
      })
    },
    // 设置风险影响程度数据
    fnSetDegreeTableData() {
      const [sequence, score1, score2, score3, score4, score5] = this.degreeData
      const submitTableData = []
      this.degreeColumns.forEach((item, index) => {
        if (index < 1) return
        submitTableData.push({
          sequence: sequence[item.dataIndex] ? sequence[item.dataIndex] : '',
          score1: score1[item.dataIndex] ? score1[item.dataIndex] : '',
          score2: score2[item.dataIndex] ? score2[item.dataIndex] : '',
          score3: score3[item.dataIndex] ? score3[item.dataIndex] : '',
          score4: score4[item.dataIndex] ? score4[item.dataIndex] : '',
          score5: score5[item.dataIndex] ? score5[item.dataIndex] : '',
          id: this.childTableId[item.dataIndex] ? this.childTableId[item.dataIndex] : null,
          criteriaId: this.$refs.docform.getFieldValue('id'),
        })
      })
      if (submitTableData.length > 0) {
        this.$refs.docform.setFieldValue('riskDegreeEntitys', submitTableData)
      } else {
        this.$refs.docform.setFieldValue('riskDegreeEntitys', [])
      }
    },
    // 重画表格表头
    fnSetLevelTableHeader() {
      document.querySelector('.level-child_risk-criteria-form_product table thead').innerHTML = `
      <tr>
          <th class="header-cell_sd-resizable-th_common ant-table-row-cell-break-word" rowspan="2" style="width:100px" key="score">序号</th>
          <th class="header-cell_sd-resizable-th_common ant-table-row-cell-break-word" rowspan="2" key="riskLevel">风险等级</th>
          <th class="header-cell_sd-resizable-th_common ant-table-row-cell-break-word" colspan="2">评估区间</th>
      </tr>
      <tr>
          <th class="header-cell_sd-resizable-th_common ant-table-row-cell-break-word"><label class="ant-form-item-required">最小值（含等于）</label></th>
          <th class="header-cell_sd-resizable-th_common ant-table-row-cell-break-word"><label class="ant-form-item-required">最大值（含等于）</label></th>
      </tr>
      `
      document.querySelector(
        '.level-child_risk-criteria-form_product table colgroup'
      ).innerHTML = `<col style="width: 100px; min-width: 100px;"><col style=""><col style=""><col style="">`
    },
  },
}
</script>

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

.btnselect {
  position: relative;
  top: 4px;
  right: 200px;
  float: right;
  .batchselect {
    z-index: 100;
    margin-left: 10px;
  }
}
.tablexm tr td {
  border: none !important;
}
.poss-child {
  :global(.header_xm-child-table_product) {
    display: none;
  }
  :global(.menu_sd-table-header_common) {
    display: none;
  }
}
.level-child {
  :global(.ant-input-number) {
    width: 100%;
  }
}
.dgree-child {
  tr:first-child {
    background: #fafafa;
    font-weight: bold;
    color: #000;
    td {
      border-top: none !important;
      border-right: none !important;
      border-left: none !important;
    }
  }
  .title-span {
    display: flex;
    .title-checkbox {
      margin-right: 10px;
    }
  }
  .require_input_xm {
    border: 1px solid #e02020;
  }
}
.require_div_xm {
  color: #e02020;
}
.require_div_none_xm {
  display: none;
}
</style>