zfire-newmall-admin/src/components/template/template-page-1.vue

<template>
  <div class="template-page-1">
    <zj-page-template
      ref="zjpage"
      tableMinHeight="300px"
      :getTableData="getTableData"
      :columnParsing="columnParsing"
      :reduction="reduction"
      :showTable="showTable"
      :codeGather="codeGather"
      :loading="loading"
      :lowerLine="true"
      :onSavePlan="onSavePlan"
      :onClosePlain="onClosePlain"
      :defaultSearchData="defaultSearchData"
      :replaceOrNotMap="replaceOrNotMap"
      :optionsEvensGroup="selBtn([...optionsEvensGroup, evens])"
      :operation="operation"
      :operationColumnWidth="operationColumnWidth"
      :plan="[...defaultPlan, ...timePlan, ...paramList, ...morePlan]"
      :tableEvents="{ ...defaultTableEvents, ...tableEvents }"
      :tableAttributes="{ ...defaultTableAttributes, ...tableAttributes }"
      :ellipsis="ellipsis"
      :pageSizes="pageSizes"
      @columnWidthChange="columnWidthChange"
      @columnListChange="columnListChange"
      :screeningAnalysis="screeningAnalysis"
      :filterMethod="filterMethod"
      :sortMethod="sortMethod"
      :moreParameters="moreParameters"
    >
      <template slot="more-search">
        <slot name="moreSearch"></slot>
      </template>
    </zj-page-template>
    <sel-export-column-list :columnList="columnList" @determine="exportDetermine" @cancel="columnList = []" />
    <slot />
    <el-dialog title="定义方案名" :visible.sync="dialogVisible" width="380px" :before-close="handleClose">
      <el-input size="mini" maxlength="8" show-word-limit v-model="inputText" placeholder="请输入名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSavePlanqd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { zfireSave, zfireDel } from '@/api/fieldMan.js'
import { dictListDict } from '@/api/dataDictionary.js'
import { zfireParamList, zfireParamSave, zfireParamDelete } from '@/api/zfireParam.js'
import SelExportColumnList from './sel-export-column-list.vue'
import selectData from './selectData.js'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: {
    SelExportColumnList
  },
  mixins: [operation_mixin],
  props: {
    ellipsis: {
      type: Boolean,
      default: true
    },
    moreParameters: {
      type: Array,
      default: () => []
    },
    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
    },
    // 获取操作记录的主键字段
    operationRecordkey: {
      type: String,
      default: ''
    },
    // 操作按钮单元格宽度
    operationColumnWidth: {
      type: Number,
      default: 140
    },
    // 自定义列
    cstomClumn: {
      type: Function
    },
    // 结构数据钩子
    fieldBeansHook: {
      type: Function
    },
    // 菜单名称
    customModuleName: {
      type: String,
      default: ''
    },
    defaultSearchData: {
      type: Array,
      default: () => []
    },
    replaceOrNotMap: {
      type: Boolean,
      default: false
    },
    setModuleId: {
      type: [String, Number],
      default: null
    },
    screeningAnalysis: {
      type: Function,
      default: (jname, val) => {
        return val
      }
    },
    filterMethod: {
      type: Function,
      default: (value, row, column) => {
        return row[column['property']] === value
      }
    },
    sortMethod: {
      type: Function,
      default: undefined
    },
    pageSizes: {
      type: Array,
      default: () => [15, 30, 50, 100, 150, 200]
    },
    expCode: {
      type: String,
      default: 'exp'
    },
    // 数据钩子
    recordsHook: {
      type: Function
    }
  },
  data() {
    return {
      dialogVisible: false,
      // 搜索的参数
      parameter: {},
      // 表格属性
      defaultTableAttributes: {},
      // 表格事件
      defaultTableEvents: {},
      // 记录初始的id
      columnsIds: {},
      // 导出弹窗
      columnList: [],
      showTable: false,
      codeGather: {},
      frontCodes: [],
      planItem: null,
      inputText: '',
      defaultPlan: [
        {
          name: '默认方案',
          paramCallback: () => {
            return []
          }
        }
      ],
      paramList: [],
      timePlan: [],
      pk: ''
    }
  },
  computed: {
    userid() {
      return this.$store.getters.userid
    },
    moduleId() {
      return this.setModuleId || this.$route.meta.moduleId
    },
    moduleName() {
      return this.customModuleName || this.$route.meta.title
    },
    evens() {
      return this.exportList
        ? [
            [
              this.optionsEvensAuth(this.expCode, {
                click: this.export
              })
            ]
          ]
        : []
    }
  },
  mounted() {
    this.getZfireParamList()
  },
  methods: {
    insertionData(...p) {
      this.$refs.zjpage.insertionData(...p)
    },
    deleteRowData(...p) {
      this.$refs.zjpage.deleteRowData(...p)
    },
    tableForm() {
      return this.$refs.zjpage.$refs.tableForm
    },
    getTimeDay(num = 0) {
      var day2 = new Date()
      if (num > 0) {
        day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000 * Math.abs(num))
      } else if (num < 0) {
        day2.setTime(day2.getTime() - 24 * 60 * 60 * 1000 * Math.abs(num))
      } else {
        day2.setTime(day2.getTime())
      }
      return (
        day2.getFullYear() +
        '-' +
        (day2.getMonth() + 1 < 10 ? `0${day2.getMonth() + 1}` : day2.getMonth() + 1) +
        '-' +
        (day2.getDate() < 10 ? `0${day2.getDate()}` : day2.getDate())
      )
    },
    setDefaultPlan(createTimeKey) {
      this.$nextTick(() => {
        if (createTimeKey) {
          var day = this.getTimeDay()
          var day1 = this.getTimeDay(-1)
          this.timePlan = [
            {
              name: '今日',
              paramCallback: () => {
                return [
                  { param: createTimeKey, compare: '>=', value: `${day} 00:00:00` },
                  { param: createTimeKey, compare: '<=', value: `${day} 23:59:59` }
                ]
              }
            },
            {
              name: '昨日',
              paramCallback: () => {
                return [
                  { param: createTimeKey, compare: '>=', value: `${day1} 00:00:00` },
                  { param: createTimeKey, compare: '<=', value: `${day1} 23:59:59` }
                ]
              }
            }
          ]
        }
      })
    },
    // 关闭方案命名弹窗
    handleClose() {
      this.planItem = null
      this.inputText = ''
      this.dialogVisible = false
    },
    // 获取方案记录
    getZfireParamList() {
      zfireParamList({
        moduleId: this.moduleId
      }).then(res => {
        this.paramList = res.data.map(item => {
          return {
            name: item.name,
            id: item.id,
            closable: true,
            paramCallback: () => {
              return item.items.map(dav => {
                if (dav.value[0] == '[' && dav.value[dav.value.length - 1] == ']') {
                  return {
                    param: dav.param,
                    compare: dav.compare,
                    value: dav.value.substring(1, dav.value.length - 1).split(',')
                  }
                }
                return { param: dav.param, compare: dav.compare, value: dav.value }
              })
            }
          }
        })
      })
    },
    // 点击获取保存方案数据
    onSavePlan(p) {
      if (this.paramList.length >= 10) {
        this.$message.error('自定义方案最多支持保留10个')
        return
      }
      if (p.length) {
        this.planItem = p
        this.dialogVisible = true
      } else {
        this.$message.error('请先设置搜索条件')
      }
    },
    // 确定保存方案
    onSavePlanqd() {
      if (this.inputText) {
        zfireParamSave({
          moduleId: this.moduleId,
          name: this.inputText,
          items: this.planItem
        }).then(res => {
          this.handleClose()
          this.getZfireParamList()
        })
      } else {
        this.$message.error('请先填写方案名称')
      }
    },
    // 删除方案
    onClosePlain(p) {
      if (p.id) {
        this.$confirm('删除此方案, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            zfireParamDelete({ id: p.id }).then(res => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getZfireParamList()
            })
          })
          .catch(() => {})
      }
    },
    // 过滤按钮集合
    selBtn(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
          this.selBtn(arr[i])
        }
        if (!(arr[i].isRole === undefined ? true : this.carryOutIsRole(arr[i].isRole)) || arr[i].length == 0) {
          arr.splice(i, 1)
          i--
        }
      }
      return arr
    },
    carryOutIsRole(isRole) {
      if (typeof isRole === 'function') {
        return isRole()
      }
      return isRole
    },
    // 获取下拉对应数据
    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({ dictType: 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 {
        var { querylist, page, size, ...data_ } = data
        this.parameter = {
          ...data_,
          pageNum: page,
          pageSize: size,
          params: querylist,
          moduleId: this.moduleId
        }
        var res = await this.getList(this.parameter)
        // alert('接收到数据断点')
        if (res.code == 200) {
          if (this.recordsHook) {
            res.data.records = this.recordsHook([...(res?.data?.records || [])]) || res?.data?.records || []
          }
          if (this.fieldBeansHook) {
            res.fieldBeans = this.fieldBeansHook(res.fieldBeans) || res.fieldBeans
          }
          for (let item of res.fieldBeans) {
            if (item.jname === 'createTime') {
              this.setDefaultPlan(`${item.tbName ? item.tbName + '.' : ''}${item.colName}`)
            }
            if (item.pk) {
              this.$nextTick(() => {
                this.pk = item.colName
              })
            }
            if (item.frontCode && !~this.frontCodes.indexOf(item.frontCode)) {
              this.frontCodes.push(item.frontCode)
            }
            if (item.label === 'cstomClumn' && this.cstomClumn) {
              this.cstomClumn(item.jname, res.data.records, res.fieldBeans, this.parameter)
            }
          }
          this.getCodeGather()
          return res
        }
      } catch (error) {
        console.log(error)
      } finally {
        if (!this.showTable) {
          this.$nextTick(() => {
            this.showTable = true
          })
        }
      }
    },
    // 监听列表显示状态与排序变化
    columnListChange(columnList) {
      zfireSave(
        this.$refs.zjpage.columnList.map((item, index) => {
          var data = {
            ...item.exportField,
            sortNum: Number(item.sortNum),
            isCopy: item.isCopy,
            tiling: item.tiling,
            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('操作失败')
        })
    },
    getParams() {
      var querylist_ = this.$refs.zjpage.$refs.dynamicCondition.jiexi(
        JSON.parse(JSON.stringify(this.$refs.zjpage.$refs.dynamicCondition.queryData))
      )
      return this.$refs.zjpage.parameterAnalysis({ querylist: querylist_ })
    },
    // 导出
    export() {
      this.columnList = this.$refs.zjpage.columnList.filter(item => !item.hidden)
    },
    async exportDetermine(data) {
      if (!this.exportList) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '正在导出',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      var { querylist, ...p } = this.getParams()

      var pms = {
        ...this.parameter,
        ...p,
        pageSize: 1,
        params: querylist.map(item => {
          item.param = item.param.replace(/>=/g, '')
          item.param = item.param.replace(/<=/g, '')
          if (
            // item.compare === '=' &&
            typeof item.value === 'string' &&
            (~item.value.indexOf(',') || ~item.value.indexOf('，'))
          ) {
            // 去除换行
            var str = item.value.replace(/\\n/g, '')
            // 去除空格
            str = str.replace(/[\t\r\f\n\s]*/g, '')
            // 转中文逗号
            str = str.replace(/，/g, ',')
            // 切割为数组
            item.value = str.split(',')
          }
          return item
        })
      }
      var newPms = {}
      var res = await this.getList(pms, data => {
        newPms = data
      })
      // alert('接收到数据断点')
      if (res.code == 200) {
        if (res?.data?.records?.length) {
          this.exportList(
            {
              ...pms,
              ...newPms,
              pageSize: -1,
              exportFields: data
            },
            `${this.moduleName}.xlsx`
          )
            .then(res => {
              this.$message({
                message: '导出成功',
                type: 'success'
              })
              this.columnList = []
              loading.close()
            })
            .catch(err => {
              this.$message.error('导出失败')
              this.columnList = []
              loading.close()
            })
        } else {
          this.$message.error('导出条件没有查到任何符合条件的数据，请调整查询条件再导出。')
          this.columnList = []
          loading.close()
        }
      } else {
        this.columnList = []
        loading.close()
      }
    },
    refreshList() {
      this.$refs.zjpage.refresh()
    }
  }
}
</script>

<style lang="scss" scoped>
.template-page-1 {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  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: rgba(228, 231, 237, 0.35) !important;
    color: #606266 !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;
}

::v-deep .teshudeshangchuananniu {
  color: #fff !important;
}

::v-deep .el-table__row {
  .is-right {
    .text-view {
      text-align: right !important;
      display: flex;
      justify-content: flex-end !important;
      flex-wrap: wrap;
    }
  }

  .is-left {
    .text-view {
      text-align: left !important;
      justify-content: flex-start !important;
      flex-wrap: wrap;
    }
  }
}
</style>