laws_chery_client/src/views/workCenter/standardInterpretationProcess/modules/InterpretationLiaisonDistribute.vue

<template>
  <div>
    <a-spin :spinning="loading">
      <div class="process-part-title">{{ $t('dispatchInformation') }}</div>
      <div v-if="!disabled" class="table-operator">
        <!--  批量删除条款  -->
        <a-button icon="delete" type="danger" ghost @click="handleClauseBatchDel">
          {{ $t('batchDelete') }}
        </a-button>
      </div>
      <div class="mb-20">
        <j-table
          :can-drag="true"
          :scroll="{x: '100%'}"
          ref="table"
          rowKey="id"
          :columns="clauseColumns"
          :dataSource="clauseDataSource"
          :pagination="clauseIpagination"
          :row-selection="{ selectedRowKeys: selectedClauseRowKeys, onChange: onSelectClauseChange }"
          @change="handleClauseTableChange">
          <!--条文内容-->
          <template slot="item_content" slot-scope="{text, record}">
            <div class="table-text" style="cursor: pointer" v-if="text || text === 0" @click="showContent('item_content', text,record)">
              {{ text && text !== 'null' ? text.replace(/<.*?>/ig, ' ') : '' }}
            </div>
            <div class="table-text" v-else>{{ global.emptyLine }}</div>
          </template>

          <template v-slot:action="{text, record}">
            <a @click="handleClauseDelete(record.id)" class="table-ope-btn">{{ $t('delete') }}</a>
          </template>
        </j-table>
      </div>
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="8">
            <a-form-item :label="$t('workCenter.standardInterpretationProcess.mainInterpreter')" :colon="false">
              <!--主解读人-->
              <user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.mainInterpreter')"
                              v-decorator="['masterInterpretId', validatorRules.masterInterpretId]"
                              :disabled="disabled"
                              filedName="masterInterpretId"
                              @nameChange="userSelectNameChange"
                              :nameStr="formInline.masterInterpretId_dictText" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <!--条文内容-->
    <split-clause-detail ref="splitClauseDetail" />
  </div>
</template>

<script>
import SplitClauseDetail from '@views/documentTool/documentSplit/modules/SplitClauseDetail'
import UserSelection from '@comp/selection/UserSelection'
export default {
  name: 'InterpretationLiaisonDistribute',
  components: { UserSelection, SplitClauseDetail },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      clauseColumns: [
        { // 标准编号/条款号
          title: this.$t('standardNumber') + '/' + this.$t('clauseNo'),
          align: 'center',
          width: 180,
          dataIndex: 'itemNum',
          scopedSlots: { customRender: 'text' }
        },
        { // 标准名称/条款标题
          title: this.$t('standardName') + '/' + this.$t('clauseTitle'),
          align: 'center',
          width: 180,
          dataIndex: 'itemTitle',
          scopedSlots: { customRender: 'text' }
        },
        { // 条款内容
          title: this.$t('clauseContent'),
          align: 'center',
          width: 180,
          dataIndex: 'itemContent',
          scopedSlots: { customRender: 'item_content' }
        },
        { // 操作
          title: this.$t('operation'),
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      clauseDataSource: [],
      /* 分页参数 */
      clauseIpagination: {
        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
      },
      selectedClauseRowKeys: [],
      validatorRules: {
        // 主解读人
        masterInterpretId: {
          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('processName') }],
          validateTrigger: 'blur'
        }
      },
      // 表单的数据
      formInline: {}
    }
  },
  methods: {
    /**
     * 获取组件内的数据
     * @param isValidate - 是否需要校验
     */
    async getData (isValidate) {
      const obj = {}
      if (isValidate) {
        obj.formData = await new Promise((resolve) => {
          this.form.validateFields((err, values) => {
            if (err) { obj._flag = true }
            // 校验成功失败都返回表单数据
            resolve(values)
          })
        })
      } else {
        obj.formData = this.form.getFieldsValue()
      }
      // 条款列表
      obj.clauseData = this.clauseDataSource
      return obj
    },
    // 更新组件内的数据
    setData (data) {
      this.clauseDataSource = data.data.processStandardInterpretClauseList || []
      this.formInline = data.data.processStandardInterpret
      this.form.setFieldsValue(this.formInline)
    },
    // 条款批量删除
    handleClauseBatchDel () {
      if (this.selectedClauseRowKeys.length <= 0) {
        this.$message.warning(this.$t('selectARecord'))
      } else {
        const that = this
        this.$confirm({
          title: this.$t('confirmBatchDeletion'),
          content: this.$t('deleteAData'),
          onOk: () => {
            this.clauseDataSource = this.clauseDataSource.filter(item => !this.selectedClauseRowKeys.includes(item.id))
            this.selectedClauseRowKeys = []
            // 重新计算分页问题
            that.handleClauseReCalculatePage(that.selectedClauseRowKeys.length)
          }
        })
      }
    },
    // 条款删除
    handleClauseDelete (id) {
      const that = this
      this.$confirm({
        title: this.$t('confirmDeletion'),
        content: this.$t('areYouSure'),
        onOk: () => {
          const index = this.clauseDataSource.findIndex(item => item.id === id)
          if (index !== -1) {
            this.clauseDataSource.splice(index, 1)
          }
          if (that.clauseIpagination.current > 1 && ((that.clauseIpagination.current - 1) * that.clauseIpagination.pageSize) + 1 === that.clauseIpagination.total) {
            that.clauseIpagination.current -= 1
          }
        }
      })
    },
    // 删除后计算分页
    handleClauseReCalculatePage (count) {
      // 总数量-count
      const total = this.clauseIpagination.total - count
      // 获取删除后的分页数
      const currentIndex = Math.ceil(total / this.clauseIpagination.pageSize)
      // 删除后的分页数<所在当前页
      if (currentIndex < this.clauseIpagination.current) {
        this.clauseIpagination.current = currentIndex
      }
    },
    // 勾选条款
    onSelectClauseChange (keys) {
      this.selectedClauseRowKeys = keys
    },
    /**
     * 显示条款内容、条文解读弹框
     * @param fieldName
     * @param val
     */
    showContent (fieldName, val) {
      const title = (this.clauseColumns.find(tt => tt.dbFieldName === fieldName) || {}).dbFieldTxt
      if (title) {
        this.$refs.splitClauseDetail.title = title
      }
      this.$refs.splitClauseDetail.open(val)
    },
    handleClauseTableChange (pagination, filters, sorter) {
      this.clauseIpagination = pagination
    },
    // 选择用户回显用户名
    userSelectNameChange (value, fieldName) {
      this.formInline[fieldName + '_dictText'] = value
    }
  }
}
</script>

<style lang="less" scoped>
.mb-20 {
  margin-bottom: 20px;
}
</style>