基础报表管理样式

src/views/basicConfig/reportManagement/reportClassification.vue

@@ -0,0 +1,188 @@
+<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"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="80"
+        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-class-add ref="reportClass" @successSubmit="successSubmit" />
+    </base-dialog>
+  </div>
+</template>
+<script>
+import { tableHeight } from '@/utils/index'
+import ReportClassAdd from './../components/reportClassAdd.vue'
+const tableProps = [
+  {
+    prop: 'name',
+    label: '报表分类名'
+  }
+]
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: '编辑'
+  },
+  {
+    type: 'delete',
+    btnName: '删除'
+  }
+]
+export default {
+  name: 'ReportClassification',
+  components: { ReportClassAdd },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '关键字',
+          placeholder: '报表分类名',
+          param: 'name',
+          width: 300
+        },
+        {
+          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
+      },
+      centervisible: false,
+      addOrEditTitle: '' //新增编辑弹出框的title
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(265)
+    })
+    this.getList()
+  },
+  methods: {
+    getList() {
+      let arr = []
+      for (let i = 0; i < 30; i++) {
+        let obj = {}
+        obj.name = '分类名' + i
+        obj.id = i + 1
+        arr.push(obj)
+      }
+      this.tableData = arr
+      this.total = 30
+    },
+    handleClick(val) {
+      console.log(val)
+      if (val.type === 'edit') {
+        this.addOrEditTitle = '编辑'
+        this.$nextTick(() => {
+          this.$refs.reportClass.init(val.data.id)
+        })
+        this.centervisible = true
+      } else {
+        this.$confirm('确认删除报表分类名"' + val.data.name + '"吗？', {
+          type: 'warning'
+        })
+          .then(() => {
+            // maintainManageDelete({ id: val.data.id }).then((res) => {
+            //   console.log(res)
+            //   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.current = 1
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.reportClass.init()
+          })
+      }
+    },
+    handleCancel() {
+      this.$refs.reportClass.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.reportClass.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      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>