laws-sinotruk-client/src/views/workCenter/standardComplianceProcess/components/DepartLeaderApproveTable.vue

<!--部所主管级领导审批-->
<template>
  <div>
    <!--项目审批-->
    <div class="process-part-title">{{ $t('workCenter.standardCompliance.projectApproval') }}</div>
    <j-table :columns="columns" :data-source="dataSource" :pagination="ipagination" :scroll="{x: '100%'}" @change="handleTableChange">

      <!--是否立项-->
      <template v-slot:projectApprovalFlag="{text,record,index}">
        <j-dict-select-tag v-model="record.projectApprovalFlag" dict-code="yn" style="width: 100%" />
      </template>

      <!--条文内容-->
      <template v-slot:clauseContent="{text}">
        <div class="table-text" style="cursor: pointer" @click="showContent(text)" v-if="text">
          {{ text && text !== 'null' ? text.replace(/<.*?>/ig, ' ') : '' }}
        </div>
        <div class="table-text" v-else>{{ global.emptyLine }}</div>
      </template>

      <template v-slot:action="{text, record, index}">
        <a @click="handleView(record)">{{ $t('view') }}</a>
      </template>
    </j-table>

    <!--查看结果-->
    <depart-leader-detail-modal ref="detailModal" />
    <!--条文内容-->
    <split-clause-detail ref="clauseDetail" />
  </div>
</template>

<script>
import JTable from '../../../../components/jero/JTable'
import DepartLeaderDetailModal from '../modules/DepartLeaderDetailModal'
import SplitClauseDetail from '../../../documentTool/documentSplit/modules/SplitClauseDetail'

export default {
  name: 'DepartLeaderApproveTable',
  components: { SplitClauseDetail, JTable, DepartLeaderDetailModal },
  props: {
    // 回显的数据
    displayDataSource: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      columns: [
        // 序号
        {
          title: this.$t('serialNumber'),
          key: 'rowIndex',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        // 标准编号/条款号
        {
          dataIndex: 'termNumber',
          title: this.$t('projectLibrary.vehicleItemLibrary.standardNumberClauseNumber'),
          width: 150
        },
        // 标准名称/条款名称
        {
          dataIndex: 'termName',
          title: this.$t('workCenter.projectComplianceEvaluationProcess.standardNameClauseName'),
          width: 150
        },
        // 条款内容
        {
          dataIndex: 'termText',
          title: this.$t('workCenter.projectComplianceEvaluationProcess.terms'),
          width: 250,
          scopedSlots: { customRender: 'clauseContent' }
        },
        // 实施日期
        // {
        //   title: this.$t('dashboard.advancedSearch.materialDate'),
        //   width: 150,
        //   dataIndex: 'implementationDate'
        // },
        // 模块负责人
        {
          title: this.$t('workCenter.standardConsultationProcess.moduleOwner'),
          dataIndex: 'moduleOwner',
          width: 150
        },
        // 评估结果
        {
          dataIndex: 'assessResults_dictText',
          title: this.$t('projectLibrary.vehicleItemLibrary.evaluationResult'),
          width: 120
        },
        // 是否立项
        {
          dataIndex: 'projectApprovalFlag',
          title: this.$t('projectLibrary.specialProjectLibrary.whetherToApproveAProjectOrNot'),
          width: 120,
          scopedSlots: { customRender: 'projectApprovalFlag' }
        },
        // 操作
        {
          title: this.$t('operation'),
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      /* 分页参数 */
      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
      }
    }
  },
  watch: {
    displayDataSource: {
      handler (value) {
        this.dataSource = value || []
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleView (record) {
      this.$refs.detailModal.open(record)
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
    },
    showContent (text) {
      this.$refs.clauseDetail.open(text)
    },
    /**
     * 提交数据
     * @param needValidator 需要校验
     * @param needRemind 需要提示
     */
    submit (needValidator, needRemind) {
      if (!needValidator) {
        return this.dataSource
      }
      if (!this.dataSource.every(tt => !!tt.projectApprovalFlag)) {
        if (needRemind) {
          // 校验提醒
          this.$message.warning(this.$t('workCenter.checkTableRequired'))
        }
        return false
      }
      return this.dataSource
    }
  }
}
</script>

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

.process-part-title:first-child {
  margin-top: 32px;
}
</style>