foton-laws-system-front/src/pages/standardComparisonLibrary/components/StandardSelect.vue

<template>
  <div class="standard-select-box" style="height: 100%;background-color: #fff;position: relative;">
    <div style="height: 100%;" class="standard-select">
      <table-tools-bar>
        <div slot="left">
          <div class="search-area">
            <el-form :model="searchForm" inline class="label-input-form">
              <el-form-item :label="$t('m.standardNumAndName')" prop="standardKey" class="search-item">
                <el-input
                  v-model="searchForm.standardKey"
                  :placeholder="$t('m.standardNumAndNameTips')"
                  clearable
                  :maxlength="100"/>
              </el-form-item>
              <el-form-item class="search-item btn-box">
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="common-button-primary"
                  round
                  @click="searchBtn"
                ></el-button>
              </el-form-item>
              <el-form-item class="search-item btn-box">
                <el-button
                  class="common-button-default"
                  icon="el-icon-refresh-left"
                  round
                  @click="resetSearchForm">{{$t('m.clearQuery')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </table-tools-bar>

      <div class="content">
        <loading :loading="tableDataLoading">{{$t('m.dataProcessing')}}</loading>
        <el-table
          border
          ref="selection"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%;"
          height="100%"
          :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
         fontWeight: 'bold', height: '48px'}"
          row-key="id"
        >
          <el-table-column
            type="selection"
            width="55"
            reserve-selection
            align="center">
          </el-table-column>
          <el-table-column
            label="标准号"
          >
            <template slot-scope="scope">
              <a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
              <a v-else @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="standName"
            label="标准名称">
            <template slot-scope="scope">
              <a @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.standName }}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="standStateShow"
            label="标准状态">
          </el-table-column>
          <el-table-column
            prop="countryShow"
            label="适用区域">
          </el-table-column>
          <el-table-column
            prop="issueTime"
            label="发布日期">
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :total="total"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'StandardSelect',
  props: ['listId'],
  data () {
    return {
      tableDataLoading: false,
      total: 0,
      selectRoleId: '',
      searchForm: {
        standardKey: '',
      },
      pageNo: 1,
      pageSize: 10,
      tableList: [],
    }
  },

  methods: {

    // 根据条件查询信息
    searchBtn () {
      this.resetPageNo()
      this.queryTablePage()
    },

    /**
     * 重置搜索表单并重新加载表格数据
     */
    resetSearchForm () {
      this.searchForm.standardKey = ''
      // this.resetSearchForm()
      this.queryTablePage()
    },

    pageChange (page) {
      this.pageNo = page
      this.queryTablePage()
    },

    pageSizeChange () {
      this.queryTablePage()
    },

    resetPageNo() {
      this.pageNo = 1
    },

    // 查询、加载表格
    queryTablePage () {
      const formData = {
        page: this.pageNo,
        pageSize: this.$store.getters.userInfo.configContent,
        standNumber: this.searchForm.standardKey,
        menuId: 'nomenu',
        standType: 'ALL'
      }
      this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage',
        formData,
        {
          _this: this,
          loading: 'tableDataLoading'
        },
        res => {
          this.tableList = res.data.list
          this.total = res.data.count
        }, e => {})
    },

    // 点击查看
    handlePreview (item) {
      let routeUrl = this.$router.resolve({
        name: 'OtherStandardDetails',
        params: {
          id: item.id,
          pageType: item.standType + '_STAND'
        }
      })
      window.open(routeUrl.href, '_blank')
    },

    handleSubmit(callback) {
      const selection = this.$refs['selection'].selection
      this.postListToServer(selection).then(res => {
        // 关闭当前区域
        this.handleCancel()
        callback && callback()
      })
    },

    handleCancel() {
      this.$emit('close')
    },

    postListToServer(selection) {
      const list = selection.map(item => {
        let standNum = ''
        if (item.standYear) {
          standNum = `${item.standSortShow} ${item.standNumber}-${item.standYear}`
        } else {
          standNum = `${item.standSortShow} ${item.standNumber}`
        }

        return {
          country: item.countryShow,
          standNum: standNum,
          standName: item.standName,
          standId: item.id,
          standType: item.standType
        }
      })
      const formData = {
        compareBaseId: this.listId,
        list: list
      }
      return new Promise((resolve, reject) => {
        this.$http.postData('lawss/SarStandCompareList/save', formData, {
          _this: this
        }, res => {
          if (res.ok) {
            resolve(res)
          } else {
            this.$emit('reject')
            reject(res)
          }
        }, err => {
          reject(err)
        })
      })

    }

  },
  created() {
    this.queryTablePage()
  }
}
</script>

<style lang="less" scoped>
.standard-select-box{
  display: flex;
  flex-direction: column;
  flex: auto;
  .standard-select{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: auto;
    padding: 0 10px;
    .table-tools-bar {
      padding: 10px 0 0 5px;
    }
    .content {
      padding: 0 5px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
    }
    .pagination {
      position: static;
      width: 100% !important;
    }
  }
  .el-divider-low {
    margin: 15px 0;
  }
  .search-area {
    padding: 0;
  }
  .btn-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #ffffff;
    z-index: 999;
  }
}
</style>