laws-sinotruk-client/src/views/workCenter/standardComplianceProcess/modules/DepartLeaderDetailModal.vue

<template>
  <j-modal
    :title="$t('view')"
    :maskClosable="false"
    :width="1000"
    :closable="true"
    @ok="handleOk"
    @cancel="handleCancel"
    switchFullscreen
    :visible="visible">
    <div class="detail-page-part-form">
      <!--标准编号/条款号-->
      <div class="detail-page-part-form-item">
        <label>{{ $t('projectLibrary.vehicleItemLibrary.standardNumberClauseNumber') }}</label>
        <span>{{ model.termNumber }}</span>
      </div>
      <!--标准名称/条款名称-->
      <div class="detail-page-part-form-item">
        <label>{{ $t('workCenter.projectComplianceEvaluationProcess.standardNameClauseName') }}</label>
        <span>{{ model.termName }}</span>
      </div>
    </div>

    <div>
      <j-table :loading="loading"
               :columns="columns"
               :data-source="dataSource"
               :pagination="ipagination"
               :scroll="{x: '100%'}"
               @change="handleTableChange">
        <!--佐证材料-->
        <template v-slot:file="{text}">
          <a-button class="table-text" v-if="!!text" type="primary" ghost @click="displayFile(text)">{{ $t('view') }}</a-button>
          <div class="table-text" v-else>{{ global.emptyLine }}</div>
        </template>
      </j-table>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel">{{ $t('close') }}</a-button>
    </template>

    <!--佐证材料回显-->
    <upload-file ref="fileDisplayModal" disabled />
  </j-modal>
</template>

<script>
import JTable from '../../../../components/jero/JTable'
import { queryStandardComplianceResult } from '../../../../api/workCenter'
import UploadFile from '../../../../components/UploadFile'
import SplitClauseDetail from '../../../documentTool/documentSplit/modules/SplitClauseDetail'

export default {
  name: 'DepartLeaderDetailModal',
  components: { SplitClauseDetail, UploadFile, JTable },
  props: {
    // 标准编号
    standardNumber: {
      type: String,
      required: false,
      default: ''
    },
    // 标准名称
    standardName: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      model: {},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        // 序号
        {
          title: this.$t('serialNumber'),
          key: 'rowIndex',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        // 模块负责人
        {
          title: this.$t('workCenter.standardConsultationProcess.moduleOwner'),
          dataIndex: 'moduleOwner_dictText',
          width: 150
        },
        // 设计工程师
        {
          title: this.$t('workCenter.standardConsultationProcess.designEngineer'),
          dataIndex: 'designEngineer_dictText',
          width: 150
        },
        // 评估结果
        {
          dataIndex: 'assessResults_dictText',
          title: this.$t('projectLibrary.vehicleItemLibrary.evaluationResult'),
          width: 120
        },
        // 车型
        {
          dataIndex: 'modelSeries_dictText',
          title: this.$t('projectLibrary.specialProjectLibrary.vehicleModel'),
          width: 150
        },
        // 依据描述
        {
          dataIndex: 'description',
          title: this.$t('projectLibrary.specialProjectLibrary.basisDescription'),
          width: 150
        },
        // 佐证材料
        {
          dataIndex: 'fileId',
          title: this.$t('projectLibrary.specialProjectLibrary.supportingMaterial'),
          width: 100,
          scopedSlots: { customRender: 'file' }
        }
      ],
      dataSource: [],
      loading: false
    }
  },
  methods: {
    open (record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.loadData(1)
    },
    loadData (arg) {
      this.loading = true
      if (arg) {
        this.ipagination.current = 1
      }
      const params = {
        taskId: this.$route.query.taskId,
        id: this.model.id,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      }
      queryStandardComplianceResult(params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records || []
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleOk () {
      this.close()
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
      this.model = {}
      this.dataSource = []
      Object.assign(this.$data, this.$options.data())
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    displayFile (text) {
      this.$refs.fileDisplayModal.open(text)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

.detail-page-part-form-item {
  width: calc((100% - 16px) / 2) !important;

  label {
    width: 9rem !important;
  }
}

.detail-page-part-form-item:nth-child(2n) {
  margin-right: 0 !important;
}
</style>