田源
2024-09-29 7d05c69630d066c0992368423f90e440e3638f91
Source/UBCS-WEB/src/views/integration/applicationForm.vue
@@ -0,0 +1,223 @@
<template>
  <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 {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)
      }
    },
    option() {
      return {
        height: 'auto',
        calcHeight: 20,
        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)
        }
      }
    },
    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__body-wrapper::-webkit-scrollbar-thumb {
//  background-color: #ececec;
//  border-radius: 20px;
//  border: #ececec;
//}
</style>