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

<template>
  <div>
    <div class="box-title-text">
      <!--      <div class="title-text">-->
      <!--        <span class="Required">*</span>-->
      <!--        <span :class="{'title-text-text':false}">{{query.enName}}</span><br>-->
      <!--        <span :class="{'title-text-text':false}">{{query.name}}</span>-->
      <!--      </div>-->
      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="$t('PleaseEnterOrSelect')+query.db_field_txt"/>
      <a-button type="primary" class="button-box" @click="standardClick">
        标准选择
      </a-button>
    </div>
    <a-drawer
      :title="'标准选择'"
      :maskClosable="false"
      :width="1000"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 20px">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8" style="line-height: 48px">
            <div class="box-title-text-index">
              <div class="title-text-index">
                <span>{{$t('standard')}}</span>
              </div>
              <a-input class="box-input-index" :placeholder="this.$t('PleaseEnter') +' '+ this.$t('standard')"
                       v-model="queryParam.serialNumber"></a-input>
            </div>
          </a-col>
          <a-col :md="6" :sm="8" style="line-height: 48px">
            <div class="box-title-text-index">
              <div class="title-text-index">
                <span>{{$t('title')}}</span>
              </div>
              <a-input class="box-input-index" :placeholder="this.$t('PleaseEnter') +' '+ this.$t('title')"
                       v-model="queryParam.title"></a-input>
            </div>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
      </span>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        rowKey="id"
        :data-source="dataList"
        :scroll="{ y: 540 }"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :loading="loading">

      </a-table>
      <div class="page" v-if="dataList.length > 0">
        <a-pagination
          :show-total="total => `共 ${total} 条`"
          show-quick-jumper
          show-size-changer
          :page-size.sync="pageSize"
          :total="total"
          @change="onChange"
          @showSizeChange="SizeChange"
        />
      </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'

  export default {
    name: 'index',
    props: ['query', 'value'],
    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
      }
    },
    mounted() {
      this.replacePage()
    },
    methods: {
      standardClick() {
        this.visible = true
        this.queryParam = {}
        this.replacePage()
      },
      replacePage() {
        let query = {
          ...this.queryParam,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        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
          } else {
            this.dataList = []
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit() {
        let content = []
        this.content.forEach(res => {
          content.push(res.title)
        })
        this.$emit('input', content.join(','))
        this.visible = false
      },
      indexclick(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() {
        this.replacePage()
      },
      searchReset() {
        this.queryParam = {}
        this.replacePage()
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      SizeChange(page, pageSize) {
        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>