申领单查询取消横向滑块

 Source/UBCS-WEB/src/views/integration/applicationForm.vue

@@ -1,216 +1,222 @@
<template>
    <basic-container>
        <avue-crud :table-loading="loading" :data="data" :option="option" :search.sync="searchParam" :page.sync="page" :permission="permissionList"
            ref="crud" @refresh-change="getDataList" @search-change="handleSearch" @search-reset="handleReset"
            @size-change="handleSizePage" @current-change="handleCurrentPage" @on-load="getDataList"
            @selection-change="selectionChange" @row-click="handleRowClick">
            <template slot="menuLeft">
                <el-button icon="el-icon-document" size="small" type="primary" @click="handleStatus" v-if="permissionList.status">集团申请状态
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
  <basic-container>
    <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :permission="permissionList"
               :search.sync="searchParam"
               :table-loading="loading" @refresh-change="getDataList" @search-change="handleSearch"
               @search-reset="handleReset"
               @size-change="handleSizePage" @current-change="handleCurrentPage" @on-load="getDataList"
               @selection-change="selectionChange" @row-click="handleRowClick">
      <template slot="menuLeft">
        <el-button v-if="permissionList.status" icon="el-icon-document" size="small" type="primary"
                   @click="handleStatus">集团申请状态
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, queryApplyStat } from '@/api/integration/application.js'
import { dateFormat } from '@/util/date.js'
import {getList, queryApplyStat} from '@/api/integration/application.js'
import {dateFormat} from '@/util/date.js'
import {mapGetters} from 'vuex'

export default {
    data() {
        return {
            loading: false,
            data: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            searchParam: {},
            stateParam: {},
        }
    },
    computed:{
      ...mapGetters(["permission"]),
      permissionList(){
        return{
          searchBtn:this.vaildData(this.permission.applicationForm.applicationForm_search,false),
          emptyBtn:this.vaildData(this.permission.applicationForm.applicationForm_search,false),
          status:this.vaildData(this.permission.applicationForm.applicationForm_status,false)
        }
  data() {
    return {
      loading: false,
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option(){
        return{
            height: "auto",
            tip:false,
            index: true,
            border: true,
            addBtn: false,
            columnBtn: false,
            searchBtn:this.permissionList.searchBtn,
            emptyBtn:this.permissionList.emptyBtn,
            searchMenuSpan: 8,
            highlightCurrentRow: true,
            menu: false,
            selection: true,
            column: [
              {
                label: '申请单号',
                prop: 'id',
                width: 200,
                fixed: true,
                search: true,
              }, {
                label: '集团码',
                width: 150,
                prop: 'groupCode',
                search: true,
              }, {
                label: '操作类型',
                width: 120,
                prop: 'operationType',
                type: 'select',
                search: true,
                dicData: [{
                  label: '申请',
                  value: '1'
                }, {
                  label: '更改',
                  value: '2'
                }]
              }, {
                label: '申请单数据信息',
                width: 300,
                prop: 'description'
              },
              {
                label: '创建时间',
                prop: 'createTime',
                type: 'datetime',
                search: true,
              },
              {
                label: '更改时间',
                prop: 'lastModifyTime',
                type: 'datetime',
                search: true,
              }, {
                label: '是否成功',
                width: 120,
                prop: 'code',
                html: true,
                align:'center',
                formatter : function (row) {
                  return row.code == '1' ? '<i class="el-icon-check" style="color: #32cd32;font-size: 20px;font-weight: 800"></i>' : '<i class="el-icon-close" style="color: #ff0000;font-size: 20px;font-weight: 800"></i>'
                }
              },
              {
                label: '返回信息',
                prop: 'content',
                hide: true
              },
              {
                label: '消息信息',
                width: 150,
                prop: 'msg'
              }
            ]
      searchParam: {},
      stateParam: {},
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        searchBtn: this.vaildData(this.permission.applicationForm.applicationForm_search, false),
        emptyBtn: this.vaildData(this.permission.applicationForm.applicationForm_search, false),
        status: this.vaildData(this.permission.applicationForm.applicationForm_status, false)
      }
    },
    option() {
      return {
        height: 'auto',
        tip: false,
        index: true,
        border: true,
        addBtn: false,
        columnBtn: false,
        searchBtn: this.permissionList.searchBtn,
        emptyBtn: this.permissionList.emptyBtn,
        searchMenuSpan: 8,
        highlightCurrentRow: true,
        menu: false,
        selection: true,
        column: [
          {
            label: '申请单号',
            prop: 'id',
            width: 200,
            fixed: true,
            search: true,
          }, {
            label: '集团码',
            width: 150,
            prop: 'groupCode',
            search: true,
          }, {
            label: '操作类型',
            width: 120,
            prop: 'operationType',
            type: 'select',
            search: true,
            dicData: [{
              label: '申请',
              value: '1'
            }, {
              label: '更改',
              value: '2'
            }]
          }, {
            label: '申请单数据信息',
            width: 300,
            prop: 'description'
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'datetime',
            search: true,
          },
          {
            label: '更改时间',
            prop: 'lastModifyTime',
            type: 'datetime',
            search: true,
          }, {
            label: '是否成功',
            width: 120,
            prop: 'code',
            html: true,
            align: 'center',
            formatter: function (row) {
              return row.code == '1' ? '<i class="el-icon-check" style="color: #32cd32;font-size: 20px;font-weight: 800"></i>' : '<i class="el-icon-close" style="color: #ff0000;font-size: 20px;font-weight: 800"></i>'
            }
          },
          {
            label: '返回信息',
            prop: 'content',
            hide: true
          },
          {
            label: '消息信息',
            width: 150,
            prop: 'msg'
          }
        ]
      }
    }
  },
  methods: {
    async handleStatus() {
      const {oids} = this.stateParam
      if (this.$utilFunc.isEmpty(oids)) {
        this.$message({
          type: "error",
          message: "请至少选择一条数据!"
        })
      } else {
        // console.log(this.stateParam)
        const response = await queryApplyStat(this.stateParam)
        if (response.status === 200) {
          // console.log(response)
        }
      }
    },
    methods: {
        async handleStatus() {
            const { oids } = this.stateParam
            if (this.$utilFunc.isEmpty(oids)) {
                this.$message({
                    type: "error",
                    message: "请至少选择一条数据!"
                })
            } else {
                // console.log(this.stateParam)
                const response = await queryApplyStat(this.stateParam)
                if (response.status === 200) {
                    // console.log(response)
                }
            }
        },
        async getDataList() {
            this.loading = true
            const { pageSize, currentPage, total } = this.page
            let param = { size: pageSize, current: currentPage }
            // console.log(this.searchParam)
            this.searchParam = Object.keys(this.searchParam)
                .filter((key) => this.searchParam[key] !== null && this.searchParam[key] !== undefined && this.searchParam[key] !== "")
                .reduce((acc, key) => ({ ...acc, [key]: this.searchParam[key] }), {});
            // console.log(this.searchParam)
            const response = await getList({ ...param, ...this.searchParam })
            if (response.status === 200) {
                this.loading = false
                // console.log(response)
                const data = response.data.data
                this.data = data.records
                this.page.total = data.total
            } else this.loading = false
        },
        handleSizePage(event) {
            this.page.pageSize = event
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
        handleReset() {
            this.searchParam = {}
            this.getDataList()
        },
        handleSearch(form, done) {
            // console.log(form)
            const { id, groupCode, operationType } = form
            let dataTime = { id, groupCode, operationType }
            if (form.hasOwnProperty('createTime')) {
                dataTime = { createTime: dateFormat(form.createTime), ...dataTime }
            }
            if (form.hasOwnProperty('lastModifyTime')) {
                dataTime = { lastModifyTime: dateFormat(form.lastModifyTime), ...dataTime }
            }
            this.searchParam = dataTime
            this.page.currentPage = 1
            this.getDataList()
            done()
        },
        selectionChange(list) {
            // console.log(list)
            let newData = list.map(item => {
                const { dataOid } = item
                return dataOid
            })
            this.stateParam = { oids: newData.toString() }
            // console.log(newData)
        },
        handleRowClick(row) {
            this.$refs.crud.toggleRowSelection(row, true)
        },
    }
    async getDataList() {
      this.loading = true
      const {pageSize, currentPage, total} = this.page
      let param = {size: pageSize, current: currentPage}
      // console.log(this.searchParam)
      this.searchParam = Object.keys(this.searchParam)
        .filter((key) => this.searchParam[key] !== null && this.searchParam[key] !== undefined && this.searchParam[key] !== "")
        .reduce((acc, key) => ({...acc, [key]: this.searchParam[key]}), {});
      // console.log(this.searchParam)
      const response = await getList({...param, ...this.searchParam})
      if (response.status === 200) {
        this.loading = false
        // console.log(response)
        const data = response.data.data
        this.data = data.records
        this.page.total = data.total
      } else this.loading = false
    },
    handleSizePage(event) {
      this.page.pageSize = event
    },
    handleCurrentPage(event) {
      this.page.currentPage = event
    },
    handleReset() {
      this.searchParam = {}
      this.getDataList()
    },
    handleSearch(form, done) {
      // console.log(form)
      const {id, groupCode, operationType} = form
      let dataTime = {id, groupCode, operationType}
      if (form.hasOwnProperty('createTime')) {
        dataTime = {createTime: dateFormat(form.createTime), ...dataTime}
      }
      if (form.hasOwnProperty('lastModifyTime')) {
        dataTime = {lastModifyTime: dateFormat(form.lastModifyTime), ...dataTime}
      }
      this.searchParam = dataTime
      this.page.currentPage = 1
      this.getDataList()
      done()
    },
    selectionChange(list) {
      // console.log(list)
      let newData = list.map(item => {
        const {dataOid} = item
        return dataOid
      })
      this.stateParam = {oids: newData.toString()}
      // console.log(newData)
    },
    handleRowClick(row) {
      this.$refs.crud.toggleRowSelection(row, true)
    },
  }
}
</script>
<style lang="scss" scoped>
//固定列高度
/deep/ .el-table__fixed {
  height: calc(100vh - 345px)!important;
}
// 滚动条样式修改
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 15px; // 纵向滚动条 必写
  background: white;
  border: white;
  width: 10px;
////固定列高度
///deep/ .el-table__fixed {
//  height: calc(100vh - 345px) !important;
//}

}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 20px;
  border: #ececec;
}
//// 滚动条样式修改
//// 滚动条的宽度
///deep/ .el-table__body-wrapper::-webkit-scrollbar {
//  height: 15px; // 纵向滚动条 必写
//  background: white;
//  border: white;
//  width: 10px;
//
//}
//
//// 滚动条的滑块
///deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
//  background-color: #ececec;
//  border-radius: 20px;
//  border: #ececec;
//}

</style>