diantou/src_product/iam/audit/riskLibrary/audit-risk-detail.vue

<template>
  <audit-form-top-banner>
    <template slot="afterbtn">
      <div :class="$style.delete">
        <a-button v-if="detailStatus" type="primary" @click="ondetailDelete">删除</a-button>
      </div>
    </template>
    <div :class="$style.detail">
      <div :class="$style.modelDetail">
        <span>模型编码：{{ modelDetail.batchCode }}</span>
        <span>模型名称：{{ modelDetail.batchName }}</span>
        <span>业务领域：{{ modelDetail.modelDomainName }}</span>
        <span>风险描述：{{ modelDetail.riskData }}</span>
      </div>
      <sd-table
        :columns="columnsDetail"
        :data-source="dataDetail"
        :row-key="(_, index) => index"
        :loading="loading"
        :scroll="{ x: 1150 }"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
      </sd-table>
    </div>
  </audit-form-top-banner>
</template>

<script>
import components from './_import-components/audit-risk-detail-import'
import AuditRiskbraryService from './riskLibrary'
import auditFormTopBanner from './audit-top-banner'
import { Modal, message } from 'ant-design-vue'

export default {
  name: 'AuditRiskDetail',
  metaInfo: {
    title: '详情',
  },
  components: {
    ...components,
    auditFormTopBanner,
  },
  props: {
    // searchData
    searchData: {
      type: Object,
      default: () => ({}),
    },
    // searchType
    searchType: {
      type: String,
      default: '', // 组件模式 component
    },
  },
  data() {
    return {
      modelDetail: {},
      columnsDetail: [],
      dataDetail: [],
      detailStatus: false,
      selectedRowKeys: [],
      loading: false,
    }
  },
  created() {
    // 阻止页面刷新
    console.log(this.$route.query)
    let queryData = this.$route.query
    if (this.searchType === 'component') {
      queryData = this.searchData
    }
    this.showModal(queryData)
  },
  methods: {
    showModal(searchParams) {
      // 审核状态
      this.loading = true

      if (searchParams.detailStatus || searchParams.detailStatus) {
        this.detailStatus = true
      }
      const params = JSON.parse(searchParams.queryJson || '{}')
      const formData = new FormData()
      Object.keys(params).forEach((key) => {
        formData.append(key, params[key])
      })
      const status = params.status

      if (status === 1 || status === '1') {
        this.detailStatus = false
      } else {
        this.detailStatus = true
      }
      this.modelDetail = JSON.parse(searchParams.modelDetail || '{}')
      const type = searchParams.type
      if (type !== 'sh') {
        this.detailStatus = false
      }
      // 下发状态
      if (type === 'sh') {
        AuditRiskbraryService.getQuestionExamineDetail(params)
          .then((res) => {
            const allField = []
            this.columnsDetail = res.data[0].detailArr.map((item) => {
              allField.push(item.commit)
              return {
                title: item.commit,
                dataIndex: item.commit,
                width: item.value === 'null' ? '100px' : '240px',
                ellipsis: true,
              }
            })
            this.columnsDetail = this.columnsDetail.filter((item) => {
              return (
                item.title !== '事件标签' && item.title !== '业务主键' && item.title !== '业务时间'
              )
            })
            this.dataDetail = res.data.map((item) => {
              const obj = {}
              allField.forEach((field) => {
                const onfield = item.detailArr.find((i) => i.commit === field).value
                obj[field] = onfield !== 'null' ? onfield : ''
              })
              obj.id = item.questionId
              return obj
            })
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        AuditRiskbraryService.getDetailInfo(params)
          .then((res) => {
            const allField = []
            this.columnsDetail = res.data[0].detailArr.map((item) => {
              allField.push(item.commit)
              return {
                title: item.commit,
                dataIndex: item.commit,
                width: item.value === 'null' ? '100px' : '240px',
                ellipsis: true,
              }
            })
            // 过滤事件标签 业务主键  业务时间 buss_key    event_type  	buss_time
            this.columnsDetail = this.columnsDetail.filter((item) => {
              return (
                item.title !== 'buss_key' &&
                item.title !== 'event_type' &&
                item.title !== 'buss_time' &&
                item.title !== '事件标签' &&
                item.title !== '业务主键' &&
                item.title !== '业务时间'
              )
            })
            this.dataDetail = res.data.map((item) => {
              const obj = {}
              allField.forEach((field) => {
                const onfield = item.detailArr.find((i) => i.commit === field).value
                obj[field] = onfield !== 'null' ? onfield : ''
              })
              obj.id = item.questionId
              return obj
            })
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    ondetailDelete() {
      Modal.confirm({
        title: '提示',
        content: '是否确认删除？',
        onOk: () => {
          const ids = this.selectedRows.map((item) => item.id).join(',')
          AuditRiskbraryService.deleteDetailInfo(ids).then((res) => {
            message.success('删除成功')
            this.selectedRowKeys = []
            this.selectedRows = []
            this.dataDetail = []
            this.columnsDetail = []
            this.showModal()
          })
        },
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}

.button-content {
  button {
    margin: 0 4px;
  }
}
.no-action {
  padding: 0 15px;
  color: $text-color-secondary;
}
.detail {
  width: 100%;
  overflow-x: auto;
}
.detail-delete {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.model-detail {
  display: flex;
  margin-bottom: 10px;

  span {
    margin-right: 20px;
  }
}
.delete {
  display: flex;
  justify-content: flex-end;
  padding: 9px 15px 0 0;
}
</style>