laws-sinotruk-client/src/views/workCenter/projectComplianceEvaluationProcess/components/StandardList.vue

<template>
  <div>
    <div class="process-part-title">{{ $t('workCenter.projectComplianceEvaluationProcess.rDComplianceList') }}</div>
    <div class="table-operator">
      <!--        新增-->
      <a-button icon="plus" type="primary" @click="handleAdd" :disabled="disabled">{{ $t('newlyAdded') }}</a-button>
      <!--        批量删除-->
      <a-button type="primary" icon="delete" ghost @click="batchDel" :disabled="disabled">{{ $t('delete') }}</a-button>
    </div>
    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%'}"
        ref="table"
        rowKey="tableRowKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        v-bind="$attrs"
        @change="handleTableChange">

        <!--分解单来源-->
        <template v-slot:salvageListSource="{text, record, index}">
          <a-select :placeholder="$t('pleaseSelect') + $t('workCenter.projectComplianceEvaluationProcess.salvageListSource')"
                    :value="record.decompositionOrderSource"
                    style="width: 100%"
                    :disabled="disabled"
                    @change="value => handleSourceChange(value, record, index)">
            <a-select-option v-for="item in record.dictOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </template>

      </j-table>
    </div>

    <select-standard-list-drawer ref="selectStandardDrawer" @listChange="handleOk" />
  </div>
</template>

<script>
import JTable from '../../../../components/jero/JTable'
import SelectStandardListDrawer from '../modules/SelectStandardListDrawer'

export default {
  name: 'StandardList',
  components: { JTable, SelectStandardListDrawer },
  props: {
    // 第三步选中的项目id
    projectId: {
      type: String,
      required: false,
      default: null
    },
    // 回显的数据
    echoDataSource: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      /* 分页参数 */
      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('standardNumber'),
          dataIndex: 'standardNumber',
          width: 150
        },
        // 标准名称
        {
          title: this.$t('standardName'),
          dataIndex: 'standardName',
          width: 150
        },
        // 标准状态
        {
          title: this.$t('standardSelect.textState'),
          dataIndex: 'standardState_dictText',
          width: 150
        },
        // 分解单来源
        {
          title: this.$t('workCenter.projectComplianceEvaluationProcess.salvageListSource'),
          dataIndex: 'decompositionOrderSource',
          width: 150,
          scopedSlots: { customRender: 'salvageListSource' }
        },
        // 发布日期
        {
          title: this.$t('standardSelect.releaseDate'),
          dataIndex: 'releaseDate',
          width: 120
        },
        // 新车型实施日期
        {
          dataIndex: 'newModelImplementationDate',
          title: this.$t('projectLibrary.vehicleItemLibrary.newModelImplementationDate'),
          width: 150
        },
        // 在产车实施日期
        {
          dataIndex: 'onTheProductionDate',
          title: this.$t('projectLibrary.vehicleItemLibrary.productionDate'),
          width: 150
        }
      ],
      dataSource: [],
      selectedRowKeys: [],
      rowIds: []
    }
  },
  watch: {
    echoDataSource: {
      handler () {
        if (this.echoDataSource && this.echoDataSource.length > 0) {
          const data = JSON.parse(JSON.stringify(this.echoDataSource))
          this.dataSource = data.map((item, index) => {
            item.tableRowKey = index
            return item
          })
        } else {
          this.dataSource = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleAdd () {
      this.$refs.selectStandardDrawer.selectedRowKeys = this.dataSource.map(tt => tt.standardNumber)
      this.$refs.selectStandardDrawer.open(this.projectId)
    },
    batchDel () {
      if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
        this.$message.warning(this.$t('selectOne'))
        return
      }
      this.$confirm({
        title: this.$t('confirmBatchDeletion'),
        content: this.$t('deleteAData'),
        onOk: () => {
          let data = JSON.parse(JSON.stringify(this.dataSource))
          this.dataSource = data.map(item => {
            if (this.selectedRowKeys.includes(item.tableRowKey)) {
              return null
            }
            return item
          }).filter(tt => !!tt)
          console.log(this.dataSource)
          this.selectedRowKeys = []
          this.rowIds = []
        }
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleOk (rows) {
      rows.forEach((item) => {
        if (this.dataSource.findIndex(tt => tt.id === item.id) !== -1) {
          return
        }
        // 默认选中不带入
        if (!item.decompositionOrderSource) {
          item.decompositionOrderSource = '0'
        }
        // 处理没有拆分单的来源禁用
        if (item.decompositionOrderSourceVOList && item.decompositionOrderSourceVOList.length > 0) {
          item.dictOptions = item.decompositionOrderSourceVOList.map(dictItem => {
            if (dictItem.value !== '0' && !dictItem.sarFileSplitInfoId) {
              dictItem.disabled = true
            }
            return dictItem
          })
        }
        item.tableRowKey = this.dataSource && this.dataSource.length > 0 ? this.dataSource[this.dataSource.length - 1].tableRowKey + 1 : 0
        this.dataSource.push(item)
      })
      console.log(this.dataSource)
    },
    getData () {
      return this.dataSource
    },
    /**
     * 分解单来源变化
     * @param value
     * @param record
     * @param index
     */
    handleSourceChange (value, record, index) {
      record.decompositionOrderSource = value
      record.sarFileSplitInfoId = record.dictOptions.find(tt => tt.value === value).sarFileSplitInfoId
      this.$set(this.dataSource, index, record)
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
    }
  }
}
</script>

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

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