supply-front/src/components/template/template-page-1.vue

<template>
  <div class="template-page-1">
    <zj-page-template
      ref="zjpage"
      :getTableData="getTableData"
      :optionsEvens="evens"
      :optionsEvensGroup="selBtn(optionsEvensGroup)"
      :tableAttributes="{ ...defaultTableAttributes, ...tableAttributes }"
      :tableEvents="{ ...defaultTableEvents, ...tableEvents }"
      :columnParsing="columnParsing"
      :reduction="reduction"
      :plan="[...defaultPlan, ...morePlan]"
      :operation="operationShow ? caozuojl : operation"
      :operationColumnWidth="(operation ? operationColumnWidth : 0) + (operationShow ? 70 : 0)"
      :showTable="showTable"
      :codeGather="codeGather"
      :loading="loading"
      :lowerLine="true"
      @columnWidthChange="columnWidthChange"
      @columnListChange="columnListChange"
    >
      <template slot="more-search">
        <slot name="moreSearch"></slot>
      </template>
    </zj-page-template>
    <sel-export-column-list :columnList="columnList" @determine="exportDetermine" @cancel="columnList = []" />
    <slot />
  </div>
</template>

<script>
import { zfireSave, zfireDel } from '@/api/fieldMan.js'
import { dictListDict } from '@/api/dataDictionary2.js'
import SelExportColumnList from './sel-export-column-list.vue'
import selectData from './selectData.js'
export default {
  components: {
    SelExportColumnList
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 事件组合
    optionsEvensGroup: {
      type: Array,
      default: () => []
    },
    // 表格属性
    tableAttributes: {
      type: Object,
      default: () => ({})
    },
    // 表格事件
    tableEvents: {
      type: Object,
      default: () => ({})
    },
    // 表格列解析渲染数据更改
    columnParsing: {
      type: Function
    },
    // 获取列表的方法
    getList: {
      type: Function
    },
    // 导出的方法
    exportList: {
      type: Function
    },
    // 更多方案
    morePlan: {
      type: Array,
      default: () => []
    },
    // 操作按钮
    operation: {
      type: Function
    },
    // 是否显示操作记录
    operationShow: {
      type: Boolean,
      default: true
    },
    // 获取操作记录的主键字段
    operationRecordkey: {
      type: String,
      default: ''
    },
    // 操作按钮单元格宽度
    operationColumnWidth: {
      type: Number,
      default: 140
    },
    // 自定义列
    cstomClumn: {
      type: Function
    },
    // 结构数据钩子
    fieldBeansHook: {
      type: Function
    },
    // 菜单名称
    customModuleName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 菜单id
      moduleId: this.$route.meta.moduleId,
      // 菜单名
      moduleName: this.customModuleName || this.$route.meta.title,
      // 搜索的参数
      parameter: {},
      // 按钮集合
      evens: [],
      // 表格属性
      defaultTableAttributes: {},
      // 表格事件
      defaultTableEvents: {},
      // 记录初始的id
      columnsIds: {},
      // 导出弹窗
      columnList: [],
      showTable: false,
      codeGather: {},
      frontCodes: [],
      pk: '',
      createTimeKey: ''
    }
  },
  computed: {
    userid() {
      return this.$store.getters.userid
    },
    defaultPlan() {
      if (this.createTimeKey) {
        var [y, m, d] = new Date(new Date().getTime()).toJSON().split('T').join(' ').substr(0, 10).split('-')
        return [
          {
            name: '默认方案',
            paramCallback: () => {
              return []
            }
          },
          {
            name: '今日',
            paramCallback: () => {
              return [
                { param: this.createTimeKey, compare: '>', value: `${y}-${m}-${Number(d) - 1} 23:59:59` },
                { param: this.createTimeKey, compare: '<', value: `${y}-${m}-${Number(d) + 1} 00:00:00` }
              ]
            }
          },
          {
            name: '昨日',
            paramCallback: () => {
              return [
                { param: this.createTimeKey, compare: '>', value: `${y}-${m}-${Number(d) - 2} 23:59:59` },
                { param: this.createTimeKey, compare: '<', value: `${y}-${m}-${Number(d)} 00:00:00` }
              ]
            }
          }
        ]
      }
      return [
        {
          name: '默认方案',
          paramCallback: () => {
            return []
          }
        }
      ]
    }
  },
  mounted() {
    if (this.exportList) {
      this.evens = [
        [
          {
            name: '导出',
            click: this.export,
            loading: false
          }
        ]
      ]
    }
  },
  methods: {
    caozuojl(h, { row, index, column }) {
      return (
        <div class="operation-btns">
          <el-button
            size="mini"
            type="text"
            onClick={() => {
              console.log(row[this.operationRecordkey || this.pk || 'id'])
            }}
          >
            操作记录
          </el-button>
          {this.operation ? this.operation(h, { row, index, column }) : null}
        </div>
      )
    },
    selBtn(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
          this.selBtn(arr[i])
        }
        if (!(arr[i].isRole || arr[i].isRole === undefined) || arr[i].length == 0) {
          arr.splice(i, 1)
          i--
        }
      }
      return arr
    },
    // 获取下拉对应数据
    getCodeGather() {
      let codes = this.frontCodes.filter(key => (this.codeGather[key] ? false : true))
      if (codes && codes.length) {
        var codeGather = {}
        Promise.all(
          codes.map(code => {
            if (selectData[code]) {
              return selectData[code]()
            }
            return dictListDict({ code: code })
          })
        ).then(resAll => {
          codes.map((code, index) => {
            var arr = resAll[index].data.map(item => {
              return { value: item.dictCode, label: item.dictValue }
            })
            codeGather[code] = arr
          })
          this.codeGather = { ...this.codeGather, ...codeGather }
        })
      }
    },
    // 获取列表数据函数
    async getTableData(data) {
      if (!this.getList) {
        return
      }
      try {
        this.parameter = {
          pageNum: data.page,
          pageSize: data.size,
          orderBy: data.orderBy,
          params: data.querylist,
          moduleId: this.moduleId
        }
        var res = await this.getList(this.parameter)
        if (res.code == 200) {
          if (!this.showTable) {
            this.$nextTick(() => {
              this.showTable = true
            })
          }
          if (this.fieldBeansHook) {
            res.fieldBeans = this.fieldBeansHook(res.fieldBeans) || res.fieldBeans
          }
          for (var item of res.fieldBeans) {
            if (!this.createTimeKey && item.jname === 'createTime') {
              this.createTimeKey = `${item.tbName ? item.tbName + '.' : ''}${item.colName}`
            }
            if (item.pk) {
              this.pk = item.colName
            }
            if (item.frontCode && !~this.frontCodes.indexOf(item.frontCode)) {
              this.frontCodes.push(item.frontCode)
            }
            if (this.cstomClumn && item.label === 'cstomClumn') {
              this.cstomClumn(item.jname, res.data.records, res.fieldBeans, this.parameter)
            }
          }
          this.getCodeGather()
          return res
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 监听列表显示状态与排序变化
    columnListChange(columnList) {
      zfireSave(
        this.$refs.zjpage.columnList.map((item, index) => {
          var data = {
            ...item.exportField,
            sortNum: index,
            isCopy: item.isCopy,
            isTotal: item.isTotal,
            isShow: !item.hidden,
            moduleId: this.moduleId,
            adminUserId: this.userid
          }
          return data
        }),
        this.moduleId
      )
        .then(res => {})
        .catch(err => {
          this.$message.error('保存失败')
        })
    },
    // 监听列宽度变化
    columnWidthChange({ newWidth, oldWidth, column }) {
      zfireSave(
        this.$refs.zjpage.columnList.map((item, index) => {
          if (item.exportField.jname === column.property) {
            item.exportField.width = newWidth
          }
          return {
            ...item.exportField,
            sortNum: index,
            isCopy: item.isCopy,
            isTotal: item.isTotal,
            isShow: !item.hidden,
            moduleId: this.moduleId,
            adminUserId: this.userid
          }
        }),
        this.moduleId
      )
        .then(res => {})
        .catch(err => {
          this.$message.error('保存失败')
        })
    },
    // 表格恢复初始默认状态
    reduction() {
      zfireDel({}, this.userid, this.moduleId)
        .then(res => {
          this.refreshList(true)
        })
        .catch(err => {
          this.$message.error('操作失败')
        })
    },
    // 导出
    export() {
      this.columnList = this.$refs.zjpage.columnList
    },
    exportDetermine(data) {
      if (!this.exportList) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.evens[0][0].loading = true
      this.exportList(
        {
          ...this.parameter,
          pageSize: -1,
          exportFields: data
        },
        `${this.moduleName}.xlsx`
      )
        .then(res => {
          this.$message({
            message: '导出成功',
            type: 'success'
          })
          this.columnList = []
          this.evens[0][0].loading = false
          loading.close()
        })
        .catch(err => {
          this.$message.error('导出失败')
          this.columnList = []
          this.evens[0][0].loading = false
          loading.close()
        })
    },
    refreshList(bool) {
      if (bool === true) {
        this.showTable = false
        this.$refs.zjpage.refresh()
      } else {
        this.$refs.zjpage.refresh()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.template-page-1 {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  min-width: 860px;
  overflow: auto;
}
.zj-page-template {
  position: relative;
  z-index: 0;
}
@font-face {
  font-family: 'aliyun_iconfont';
  src: url('~@/components/template/font/font_2075393_0cjq4n8ykvds.woff2') format('woff2'),
    url('~@/components/template/font/font_2075393_0cjq4n8ykvds.woff') format('woff'),
    url('~@/components/template/font/font_2075393_0cjq4n8ykvds.ttf') format('truetype');
}
::v-deep .el-table__cell {
  padding: 0 !important;
}
::v-deep .el-table--mini td,
::v-deep .el-table--mini th {
  padding: 0 !important;
}
::v-deep .el-table__column-filter-trigger {
  .el-icon-arrow-down {
    font-family: aliyun_iconfont !important;
    font-size: 13px;
    line-height: 34px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transform: translate(-2px, 1px);
    color: #c0c4cc;
    width: 20px;
    text-align: center;
  }
  .el-icon-arrow-down:before {
    content: '\e64c' !important;
  }
}
::v-deep .zj-buttons-group {
  .el-upload-list {
    display: none !important;
  }
}
::v-deep .operation-btns {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  & > *:not(:last-child) {
    margin-right: 5px;
  }
  .el-button {
    margin-left: 0 !important;
  }
}
::v-deep .is-disabled {
  .el-textarea__inner,
  .el-input__inner,
  .el-radio__label,
  .el-radio__input {
    background-color: #fff !important;
    color: #606266 !important;
    // border: none !important;
  }
}
::v-deep .el-checkbox.is-bordered.is-checked,
::v-deep .el-radio.is-bordered.is-checked {
  border-color: #409eff !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #409eff !important;
  background: #409eff !important;
}
::v-deep .el-checkbox.is-bordered {
  margin-left: 0 !important;
  margin-right: 10px !important;
}
</style>