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

<!--模块负责人分发-->
<template>
  <div>
    <div class="process-part-title">{{ $t('workCenter.dispatchInformation') }}</div>
    <div class="table-operator">
      <!--批量选择人员-->
      <a-button type="primary" @click="handleSelectPerson">
        {{ $t('workCenter.projectComplianceEvaluationProcess.batchSelector') }}
      </a-button>
    </div>
    <div>
      <j-table rowKey="id"
               :columns="columns"
               :data-source="dataSource"
               :scroll="{x: '100%'}"
               :pagination="ipagination"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
               @change="handleTableChange">

        <!--选择设计工程师-->
        <template v-slot:moduleOwner="{text,record,index}">
          <user-selection :show-btn="false"
                          :value="record.designEngineer"
                          :name-str="record.designEngineer_dictText"
                          v-if="!record.notInvolved"
                          type="checkbox"
                          :placeholder="$t('pleaseSelect') + $t('workCenter.standardConsultationProcess.designEngineer')"
                          @listChange="list => handleUserChange(list, index)" />
          <div v-else>{{ global.emptyLine }}</div>
        </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}">
          <div class="action-span-cell">
            <a @click="handleUninvolved(record, index)">{{
                !record.notInvolved ? $t('projectLibrary.vehicleItemLibrary.uninvolved') : $t('workCenter.projectComplianceEvaluationProcess.noCauseInvolved')
              }}</a>
          </div>
        </template>
      </j-table>
    </div>

    <!--批量选择人员-->
    <user-select-modal ref="userSelectModal" type="checkbox" @listChange="handleBatchSelected" />
    <!--不涉及原因-->
    <uninvolved-modal ref="uninvolvedModal" @ok="handleUninvolvedOk" />
    <!--条文内容-->
    <split-clause-detail ref="clauseDetail" />
  </div>
</template>

<script>
import UserSelection from '../../../../components/selection/UserSelection'
import UserSelectModal from '../../../../components/selection/UserSelectModal'
import UninvolvedModal from '../modules/UninvolvedModal'
import JTable from '../../../../components/jero/JTable'
import SplitClauseDetail from '../../../documentTool/documentSplit/modules/SplitClauseDetail'

export default {
  name: 'ModuleOwnerIssueTable',
  components: { SplitClauseDetail, JTable, UninvolvedModal, UserSelectModal, UserSelection },
  props: {
    // 回显的数据
    displayDataSource: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      columns: [
        // 标准编号/条款号
        {
          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('workCenter.standardConsultationProcess.designEngineer'),
          dataIndex: 'designEngineer_dictText',
          width: 150,
          scopedSlots: { customRender: 'moduleOwner' }
        },
        // 操作
        {
          title: this.$t('operation'),
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      selectedRowKeys: [],
      /* 分页参数 */
      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 = []
        if (value) {
          this.dataSource = value
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 批量选择人员
     */
    handleSelectPerson () {
      // 请选择要分发的数据
      if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
        this.$message.warning(this.$t('pleaseSelectDistributeData'))
        return
      }
      this.$refs.userSelectModal.open()
    },
    handleBatchSelected (list) {
      const data = JSON.parse(JSON.stringify(this.dataSource))
      this.dataSource = data.map(item => {
        // 选中且没有填写不涉及理由
        if (this.selectedRowKeys.includes(item.id) && !item.notInvolved) {
          item.designEngineer = list.map(tt => tt.id).join(',')
          item.designEngineer_dictText = list.map(tt => tt.realname + '(' + tt.username + ')').join(',')
        }
        return item
      })
    },
    /**
     * 不涉及
     * @param record
     * @param index
     */
    handleUninvolved (record, index) {
      this.$refs.uninvolvedModal.open(record, index)
    },
    handleUninvolvedOk (record, index) {
      this.$set(this.dataSource, index, record)
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    showContent (text) {
      this.$refs.clauseDetail.open(text)
    },
    handleUserChange (list, index) {
      this.dataSource[index].designEngineer = list.map(item => item.id).join(',')
      this.dataSource[index].designEngineer_dictText = list.map(item => item.realname + '(' + item.username + ')').join(',')
    },
    /**
     * 提交数据
     * @param needValidator
     * @param needRemind
     */
    submit (needValidator, needRemind) {
      if (!needValidator) {
        return this.dataSource
      }
      if (this.dataSource.length === 0 || this.dataSource.some(tt => !tt.designEngineer && !tt.notInvolved)) {
        if (needRemind) {
          this.$message.warning(this.$t('workCenter.standardCompliance.pleaseSelectDesignEngineer'))
        }
        return false
      }
      return this.dataSource
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
    }
  }
}
</script>

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

.process-part-title:first-child {
  margin-top: 32px;
}

/deep/ .user-input {
  width: 100% !important
}
</style>