package.json

@@ -8,10 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "c3": "^0.7.17",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "jquery": "^3.5.1",
+    "jquery-ui": "^1.12.1",
+    "pivottable": "^2.23.0",
     "vue": "^2.6.11",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "webpack-jquery-ui": "^2.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.0",

src/api/basic.js

@@ -0,0 +1,36 @@
+import request from '@/utils/axios'
+
+// 获取支出的菜单
+export function getMenu(params) {
+    return request({
+        url: '/basic/menu/',
+        method: 'get',
+        params
+    })
+}
+
+// 新增支出的菜单
+export function postMenu(data) {
+    return request({
+        url: '/basic/menu/',
+        method: 'post',
+        data
+    })
+}
+
+// 更新支出菜单的内容
+export function putMenu(data) {
+    return request({
+        url: `/basic/menu/${data.id}/`,
+        method: 'put',
+        data
+    })
+}
+
+// 删除支出菜单
+export function deleteMenu(id) {
+    return request({
+        url: `/basic/menu/${id}/`,
+        method: 'delete',
+    })
+}

src/api/payment.js

@@ -0,0 +1,9 @@
+import request from '@/utils/axios'
+
+export function getPayment(params) {
+    return request({
+        url: '/payment/payment/',
+        method: 'get',
+        params
+    })
+}

src/router/index.js

@@ -29,7 +29,14 @@ export const constantRoutes = [
         name: 'treeAndTable',
         title: '7-22作业',
         component: () => import('@/views/treeAndTable/tree_and_table')
+    }, {
+        path: '/payment',
+        name: 'payment',
+        title: '支出',
+        component: () => import('@/views/payment/payment')
     }
+
+
 ]
 
 export default new Router({

src/views/payment/payment.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="main">
+    <el-row>
+      <el-col :span="4">
+        <el-tabs
+          tab-position="left"
+          @tab-click="loadConfig"
+          v-model="currentTab"
+          @tab-remove="deleteConfig"
+          closable
+        >
+          <el-tab-pane v-for="(item,index) in menu" :key="index" :label="item.name" :name="index" />
+        </el-tabs>
+      </el-col>
+
+      <el-col :span="20">
+        <el-button type="primary" round @click="handleCreate(true)">新增</el-button>
+        <el-button v-if="this.thisTab!=-1" type="success" round @click="handleCreate(false)">更新</el-button>
+        <div id="output"></div>
+      </el-col>
+    </el-row>
+
+    <el-dialog title="报表" :visible="dialogVisible">
+      <div>
+        <el-form ref="registerForm" :model="temp" size="small">
+          <el-form-item label="菜单名称：">
+            <el-input v-model="temp.name" />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="createMenu">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import $ from "jquery";
+import "pivottable";
+import "pivottable/dist/pivot.min.css";
+import "webpack-jquery-ui";
+import "pivottable/dist/c3_renderers";
+import { getPayment } from "@/api/payment";
+import { getMenu, postMenu, putMenu, deleteMenu } from "@/api/basic";
+
+export default {
+  name: "Payment",
+  data() {
+    return {
+      list: [],
+      root: null,
+      menu: [],
+      currentTab: "",
+      dialogVisible: false,
+      temp: {
+        name: "",
+        code: "",
+        config: "",
+        parent: null,
+      },
+      thisTab: 0,
+      //判断是新增还是更新
+      dialogStart: true,
+    };
+  },
+  created() {},
+  mounted() {
+    this.getRootPayment();
+    this.getData();
+  },
+  methods: {
+    getRootPayment() {
+      getMenu({}).then((res) => {
+        console.log(res.data);
+        if (res.data.length > 0) {
+          console.log("getMenu");
+          console.log(res.data);
+          this.menu = res.data;
+        }
+      });
+    },
+    // getMenuData() {
+    //   getMenu({
+    //     parent: this.root.id,
+    //   }).then((res) => {
+    //     this.menu = res;
+    //   });
+    // },
+    getData() {
+      getPayment().then((res) => {
+        this.list = res.data;
+        var renderers = $.extend(
+          $.pivotUtilities.renderers,
+          $.pivotUtilities.c3_renderers
+        );
+        var config = { renderers: renderers };
+        this.setPivot(config);
+      });
+    },
+    setPivot(config = {}, overwrite = true) {
+      this.$nextTick(() => {
+        $("#output").pivotUI(this.list, config, overwrite);
+      });
+    },
+    loadConfig() {
+      this.setPivot(JSON.parse(this.menu[this.currentTab].config));
+    },
+    handleRemove() {},
+    saveConfig() {},
+    handleCreate(state) {
+      this.dialogVisible = true;
+      //更改状态
+      this.dialogStart = state;
+      if (state) {
+        console.log("alksjflkasjdfa");
+        this.temp = {
+          name: "",
+          code: "code",
+          config: "",
+          parent: this.root.id,
+        };
+      } else {
+        this.temp = this.menu[this.thisTab];
+      }
+    },
+    createMenu(state) {
+      this.temp.config = $("#output").data("pivotUIOptions");
+      delete this.temp.config["aggregators"];
+      delete this.temp.config["renderers"];
+      this.temp.config = JSON.stringify(this.temp.config);
+
+      if (state) {
+        console.log(123123);
+        console.log(this.temp);
+        this.temp.code = "code";
+        postMenu(this.temp).then((res) => {
+          //将新建的菜单添加到变量menu里
+          this.menu.push(res.data);
+        });
+      } else {
+        putMenu(this.temp);
+        this.dialogVisible = false;
+      }
+    },
+    deleteConfig(name) {
+      console.log(name);
+      // eslint-disable-next-line no-unused-vars
+      deleteMenu(this.menu[name].id).then((res) => {
+        this.menu.splice(name, 1);
+      });
+    },
+  },
+};
+</script>
+
+<style>
+.main {
+  padding: 20px;
+}
+</style>