支出菜单的curd

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/views/payment/payment.vue

@@ -1,5 +1,40 @@
 <template>
-  <div id="output"></div>
+  <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>
@@ -9,30 +44,120 @@ 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;
-        this.setPivot();
+        var renderers = $.extend(
+          $.pivotUtilities.renderers,
+          $.pivotUtilities.c3_renderers
+        );
+        var config = { renderers: renderers };
+        this.setPivot(config);
       });
     },
-    setPivot() {
+    setPivot(config = {}, overwrite = true) {
       this.$nextTick(() => {
-        $("#output").pivotUI(this.list);
+        $("#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>
+</script>
+
+<style>
+.main {
+  padding: 20px;
+}
+</style>