laws_weilai/jero-web/src/views/projectManagement/components/versionStatistics.vue

<template>
  <a-drawer
    :title="$t('versionStatistics')"
    :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">
      <!--      <div class="table-page-search-wrapper">-->
      <!--        <a-form layout="inline" @keyup.enter.native="searchQuery">-->
      <!--          <a-row :gutter="24">-->
      <!--            <a-col :md="12" :sm="8">-->
      <!--              <div class="box-title-text">-->
      <!--                <div class="title-text" :title="$t('standard')">-->
      <!--                  <span>{{$t('standard')}}</span>-->
      <!--                </div>-->
      <!--                <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"-->
      <!--                         v-model="queryParam.serial_number"></a-input>-->
      <!--              </div>-->
      <!--            </a-col>-->
      <!--            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">-->
      <!--               <a-col :md="12" :sm="24">-->
      <!--                  <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>-->
      <!--               </a-col>-->
      <!--            </span>-->
      <!--          </a-row>-->
      <!--        </a-form>-->
      <!--      </div>-->
      <a-table
        :components="drag(columns,'columns')"
        :columns="columns"
        :rowKey="(record)=>JSON.stringify(record)"
        :scroll="{x: '100%',y:'calc(100vh - 280px)'}"
        :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"
          :current="pageNo"
          @change="onChange"
          @showSizeChange="SizeChange"
        />
      </div>
    </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>
</template>

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

  export default {
    name: 'versionStatistics',
    mixins:[ResizeHeader, ResizeColumnProvide],
    data() {
      return {
        visible: false,
        queryParam: {},
        confirmLoading: false,
        selectedRowKeys: [],
        columns: [
          {
            title: this.$t('VersionNumber'),
            dataIndex: 'projectVersion',
            align: 'left',
            ellipsis: true,
            width: 200
          },
          {
            title: this.$t('describe'),
            dataIndex: 'explanation',
            align: 'left',
            ellipsis: true,
            width: 500
          }
        ],
        dataList: [],
        loading: false,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        url: {
          list: '/project/projectLibraryBase/versionStatistics'
        }
      }
    },
    mounted() {

    },
    methods: {
      addModel(value) {
        this.visible = true
        this.queryParam = {}
        this.selectedRowKeys = JSON.parse(JSON.stringify(value))
        this.replacePage()
      },
      searchQuery() {
        this.pageNo = 1
        this.replacePage()
      },
      searchReset() {
        this.pageNo = 1
        this.queryParam = {}
        this.replacePage()
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.replacePage()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.replacePage()
      },
      replacePage() {
        let query = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          id:this.$route.query.id,
          ...this.queryParam
        }
        this.loading = true
        postAction(this.url.list, query).then((res) => {
          if (res.success) {
            this.dataList = res.result.records || []
            this.total = res.result.total
            this.loading = false
          } else {
            this.dataList = []
            this.total = 0
            this.loading = false
          }
        })
      },
      onSelectChange(value) {
        this.selectedRowKeys = value
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit() {
        this.$emit('versionStatisticsForm', this.selectedRowKeys)
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .page {
    text-align: right;
    margin-top: 20px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 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 {
    line-height: 1.4;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .title-text {
    width: 33px;
    color: #000F16;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    margin-top: 3px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box-input {
    display: inline-block;
    width: 100%;
    height: 38px;
  }

  .box-button {
    height: 38px;
  }
</style>