laws_weilai/jero-web/src/components/Standardselection/index.vue

<template>
  <div>
    <div class="box-title-text">
      <a-input class="box-input" :value="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('standardSelection')}}
      </a-button>
    </div>
    <a-drawer
      :title="$t('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">
        <currencySearch
          :flag="'1'"
          :url="url"
          @searchQuery="searchQuery"
          @searchReset="searchReset"
        />
        <a-table
          :columns="columns"
          rowKey="id"
          :data-source="dataList"
          :pagination="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :loading="loading">

        </a-table>
        <div class="page" v-if="dataList.length > 0">
          <a-pagination
            :show-total="total => $t('total')+`${total}`+$t('strip')"
            show-quick-jumper
            show-size-changer
            :page-size.sync="pageSize"
            :total="total"
            @change="onChange"
            @showSizeChange="SizeChange"
          />
        </div>
      </div>

      <div class="drawer-bootom-button">
        <a-button @click="handleCancel" type="danger" 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 { getAction, postAction } from '@/api/manage'
  import currencySearch from '@/components/currencySearch/index'

  export default {
    name: 'index',
    components: {
      currencySearch
    },
    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: [],
        content: [],
        loading: false,
        queryParam: {},
        columns: [
          {
            title: this.$t('standard'),
            dataIndex: 'serial_number',
            align: 'center'
          },
          {
            title: this.$t('title'),
            dataIndex: 'title',
            align: 'center'
          },
          {
            title: this.$t('TextStatus'),
            dataIndex: 'state',
            align: 'center'
          }
        ],
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        url: {
          seachList: 'document/bussDocumentLibraryEO/queryCondition'   //搜索字段
        }
      }
    },
    mounted() {
      this.replacePage()
    },
    methods: {
      standardClick() {
        this.visible = true
        this.queryParam = {}
        this.replacePage()
      },
      replacePage() {
        let query = {
          ...this.queryParam,
          pageNo: this.pageNo,
          pageSize: this.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.total = res.result.total
            this.selectedRowKeys = this.standard[this.query.db_field_name + '_id'] ? this.standard[this.query.db_field_name + '_id'].split(',') : []
          } else {
            this.dataList = []
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit() {
        let content = []
        let replace_standard_id = []
        if (this.content && this.content.length > 0) {
          this.content.forEach(res => {
            content.push(res.serial_number)
            replace_standard_id.push(res.id)
          })
          this.$emit('input', content.join(','))
          this.$emit('change', this.query.db_field_name, replace_standard_id.join(','))
          this.visible = false
        } else {
          this.$message.warning(this.$t('selectLeastOne'))
        }
      },
      indexclick(event) {
        console.log(event)
        this.$emit('input', event.target.value)
      },
      onSelectChange(value) {
        this.selectedRowKeys = value
        this.content = []
        value.forEach(val => {
          this.dataList.forEach((res) => {
            if (res.id === val) {
              this.content.push(res)
            }
          })
        })
      },
      searchQuery(queryParam) {
        let 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()
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.replacePage()
      }
    }
  }
</script>

<style scoped>
  .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;

  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  .box-title-text-index {
    line-height: 1.4;
    display: flex;
    align-items: center;
  }

  .title-text-index {
    display: inline-block;
    min-width: 60px;
    font-weight: bold;
    font-size: 14px;
    margin-right: 16px;
  }

  .box-input-index {
    display: inline-block;
    width: 80%;
    height: 38px;
    margin-top: 2px;
  }

  .box-button {
    height: 38px;
    margin-top: 2px;
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }
</style>
<style>
  /*.ant-input-disabled{*/
  /*  background-color: #f5f5f5!important;*/
  /*}*/
</style>