laws-sinotruk-client/src/components/selection/StandardSelection.vue

<template>
  <div>
    <div class="box-title-text">
      <a-input class="box-input" :value="value" :title="value" @input="indexClick($event)"
               :disabled="isDisabled"
               :placeholder="!isDisabled?$t('pleaseEnterOrSelect')+query.db_field_txt:query.db_field_txt"/>
      <a-button v-if="!isDisabled" type="primary" class="button-box" @click="standardClick">
        {{this.$t('standardSelect.standardSelection')}}
      </a-button>
    </div>
    <a-drawer
      :title="$t('standardSelect.standardSelection')"
      :maskClosable="false"
      :width="1000"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <div style="margin-bottom: 60px">
        <currency-search
          :flag="'1'"
          :url="url"
          :queryParam='queryParam'
          @searchQuery="searchQuery"
          @searchReset="searchReset"
        />
        <a-table
          :components="drag(columns,'cloumns')"
          :columns="columns"
          rowKey="serial_number"
          :scroll="{x: 1500}"
          :data-source="dataList"
          :pagination="ipagination"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :loading="loading">

        </a-table>
      </div>

      <div class="drawer-bootom-button">
        <a-button @click="handleCancel" style="margin-right: 16px">{{$t('cancel')}}</a-button>
        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import CurrencySearch from './CurrencySearch'
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
import { postAction } from '@/api/manage'

export default {
  name: 'StandardSelection',
  components: { CurrencySearch },
  mixins: [ResizeColumnProvide, ResizeHeader],
  props: ['query', 'value', 'standard'],
  computed: {
    isDisabled () {
      if (this.query.db_field_name === 'replaced_standard') {
        return true
      }
      return false
    }
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      selectedRowKeys: [],
      selectedRowList: [],
      loading: false,
      queryParam: {},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        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('number'),
          dataIndex: 'serial_number',
          ellipsis: true,
          align: 'left',
          width: 480
        },
        {
          title: this.$t('title'),
          dataIndex: 'title',
          ellipsis: true,
          align: 'left',
          width: 480
        },
        {
          title: this.$t('textStatus'),
          dataIndex: 'state',
          align: 'left',
          width: 480
        }
      ],
      dataList: [],
      url: {
        searchList: 'document/bussDocumentLibraryEO/queryCondition' // 搜索字段
      }
    }
  },
  mounted () {
    this.replacePage()
  },
  methods: {
    // 点击选择标准按钮
    standardClick () {
      this.visible = true
      this.queryParam = {}
      this.replacePage()
    },
    replacePage () {
      const query = {
        ...this.queryParam,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      }
      this.selectedRowKeys = []
      this.loading = true
      postAction('document/bussDocumentLibraryEO/replacePageInfo', query).then((res) => {
        this.loading = false
        if (res.success) {
          this.dataList = res.result.records
          this.ipagination.total = res.result.total
          this.selectedRowKeys = this.standard[this.query.db_field_name] ? this.standard[this.query.db_field_name].split(',') : []
        } else {
          this.dataList = []
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    handleSubmit () {
      const serialNumber = []
      const replaceStandardId = []
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        // let content = JSON.parse(JSON.stringify(this.selectedRowList))
        this.selectedRowList.forEach(res => {
          serialNumber.push(res.serial_number)
          replaceStandardId.push(res.id)
        })
        this.$emit('input', serialNumber.join(','))
        this.$emit('change', this.query.db_field_name, replaceStandardId.join(','))
        // this.$emit('changecontent', this.content)
        this.visible = false
      } else {
        this.$message.warning(this.$t('selectLeastOne'))
      }
    },
    indexClick (event) {
      this.$emit('input', event.target.value)
    },
    onSelectChange (value, row) {
      this.selectedRowKeys = value
      this.selectedRowList = row
    },
    searchQuery (queryParam) {
      const queryParamQuery = JSON.parse(JSON.stringify(queryParam))
      Object.keys(queryParamQuery).forEach(res => {
        if (queryParamQuery[res] instanceof Array) {
          queryParamQuery[res] = queryParamQuery[res].join(',')
        }
      })
      this.queryParam = queryParamQuery
      this.replacePage()
    },
    searchReset (queryParam) {
      this.queryParam = queryParam
      this.replacePage()
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.box-title-text {
  line-height: 1.4;
  display: flex;
  .box-input {
    display: inline-block;
    height: 38px;
    width: 100%;
  }
  .button-box {
    margin-left: 10px;
    height: 38px;
    line-height: 38px;
  }
}
</style>