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

<template>
  <div>
    <!--项目归档-->
    <div class="process-part-title">{{ $t('workCenter.standardCompliance.projectFiling') }}</div>
    <div>
      <j-table :columns="columns" :data-source="dataSource" :pagination="ipagination" :scroll="{x: '100%'}" @change="handleTableChange">

        <!--条文内容-->
        <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 v-if="!disabled" @click="handleEdit(record)">{{ $t('edit') }}</a>
        </template>
      </j-table>
    </div>

    <edit-project-modal ref="modalForm" @ok="modalFormOk" />
    <!--条文内容-->
    <split-clause-detail ref="clauseDetail" />
  </div>
</template>

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

export default {
  name: 'DesignEngineerWriteProject',
  components: { SplitClauseDetail, EditProjectModal, JTable },
  props: {
    // 回显的数据
    displayDataSource: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  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,
          scopedSlots: { customRender: 'evaluateDetail' }
        },
        // 标准名称/条款名称
        {
          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'
        // },
        // 评估结果
        {
          dataIndex: 'assessResults_dictText',
          title: this.$t('projectLibrary.vehicleItemLibrary.evaluationResult'),
          width: 120
        },
        // 是否立项
        {
          dataIndex: 'projectApprovalFlag_dictText',
          title: this.$t('projectLibrary.specialProjectLibrary.whetherToApproveAProjectOrNot'),
          width: 150
        },
        // 工作令编号
        {
          dataIndex: 'workNumber',
          title: this.$t('projectLibrary.workOrderNumber'),
          width: 150
        },
        // 项目名称
        {
          dataIndex: 'projectName',
          title: this.$t('projectLibrary.projectName'),
          width: 150
        },
        // 操作
        {
          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: {
    handleEdit (record) {
      this.$refs.modalForm.open(record)
    },
    modalFormOk (record) {
      const index = this.dataSource.findIndex(tt => tt.id === record.id)
      this.$set(this.dataSource, index, record)
      this.$message.success(this.$t('operationSuccessful'))
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
    },
    showContent (text) {
      this.$refs.clauseDetail.open(text)
    },
    submit (needValidator, needRemind) {
      if (!needValidator) {
        return this.dataSource
      }
      if (!this.dataSource.every(tt => tt.workNumber && tt.projectName)) {
        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>