tft-fe/src/views/basicConfig/reportManagement/reportListDetail.vue

<template>
  <div class="report-classification">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
      @emitFun="categoryChange"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="180"
        label="操作"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList()"
    />
    <!-- 编辑 -->
    <base-dialog
      :dialogTitle="addOrEditTitle"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <report-name-edit ref="reportNameEdit" @successSubmit="successSubmit" />
    </base-dialog>
  </div>
</template>
<script>
import ReportNameEdit from './../components/reportNameEdit.vue'
import {
  getReportlist,
  delReportlist,
  getReportCategorylist,
  updateReportlist
} from '@/api/basicConfig'
import { tableHeight, timeFormatter } from '@/utils'
import categorySelect from './../components/categorySelect.vue'
const tableProps = [
  {
    prop: 'fileName',
    label: '报表名称'
  },
  {
    prop: 'category',
    label: '报表分类',
    subcomponent: categorySelect
  },
  {
    prop: 'createTime',
    label: '添加时间',
    filter: timeFormatter
  }
]
const tableBtn = [
  {
    type: 'view',
    btnName: '预览'
  },
  {
    type: 'design',
    btnName: '设计'
  },
  {
    type: 'edit',
    btnName: '编辑'
  },
  {
    type: 'delete',
    btnName: '删除'
  }
]
export default {
  name: 'ReportListDetail',
  components: { ReportNameEdit },
  data() {
    return {
      formConfig: [
        {
          type: 'input',
          label: '关键字',
          placeholder: '报表名称',
          param: 'name',
          width: 200
        },
        {
          type: 'select',
          label: '报表分类',
          selectOptions: [],
          param: 'category',
          labelField: 'name',
          valueField: 'id',
          defaultSelect: '',
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '新增',
          name: 'add',
          color: 'success',
          plain: true
        }
      ],
      tableProps,
      tableData: [],
      tableBtn,
      tableH: tableHeight(330),
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        name: '',
        category: ''
      },
      typeList: [],
      centervisible: false,
      addOrEditTitle: '' //新增编辑弹出框的title
    }
  },
  created() {
    this.getCategorylist()
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(265)
    })
    this.formConfig[1].defaultSelect = this.$route.params.categoryId || ''
    this.listQuery.category = this.$route.params.categoryId || ''
  },
  methods: {
    getList() {
      getReportlist({ ...this.listQuery }).then((res) => {
        if (res.code === 0 && res.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    getCategorylist() {
      getReportCategorylist({}).then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          localStorage.setItem('reportCategory', JSON.stringify(res.data))
          this.formConfig[1].selectOptions = res.data
        } else {
          localStorage.setItem('reportCategory', '')
        }
        this.getList()
      })
    },
    handleClick(val) {
      switch (val.type) {
        case 'view':
          this.$router.push({
            // path: '/basicConfig/reportManagement/reportView',
            name: 'reportView',
            params: { name: val.data.name }
          })
          break
        case 'design':
          this.$router.push({
            // path: '/basicConfig/reportManagement/reportDesign',
            name: 'reportDesign',
            params: { name: val.data.name }
          })
          break
        case 'edit':
          this.addOrEditTitle = '编辑'
          this.centervisible = true
          this.$nextTick(() => {
            this.$refs.reportNameEdit.init(val.data.id)
          })
          break
        default:
          this.$confirm('确认删除报表"' + val.data.name + '"吗？', {
            type: 'warning'
          })
            .then(() => {
              delReportlist({ id: val.data.id }).then(() => {
                this.$message({
                  message: '报表删除成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {}
                })
                this.listQuery.current = 1
                this.getList()
              })
            })
            .catch(() => {})
      }
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.name = val.name
          this.listQuery.category = val.category
          this.listQuery.current = 1
          this.getList()
          break
        default:
          this.$router.push({
            path: '/basicConfig/reportManagement/reportDesign'
          })
      }
    },
    handleCancel() {
      this.$refs.reportNameEdit.formClear()
      this.centervisible = false
      this.addOrEditTitle = ''
    },
    handleConfirm() {
      this.$refs.reportNameEdit.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    },
    categoryChange(val) {
      updateReportlist({
        fileName: val.injectData.fileName,
        id: val.injectData.id,
        category: val.categoryId
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.getList()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.report-classification {
  height: calc(100vh - 203px);
  padding: 12px 16px;
  margin: 0px 16px;
  border-radius: 8px;
  background-color: #fff;
}
</style>