造数据

src/views/workManagement/service-items/project.vue

@@ -1,13 +1,202 @@
 <template>
-  <basic-container> </basic-container>
+  <el-row>
+    <el-col :span="4">
+      <div class="box">
+        <el-scrollbar>
+          <basic-container>
+            <avue-tree
+              :option="treeOption"
+              :data="treeData"
+              @node-click="nodeClick"
+            />
+          </basic-container>
+        </el-scrollbar>
+      </div>
+    </el-col>
+    <el-col :span="20">
+      <basic-container>
+        <avue-crud
+          ref="crud"
+          :data="data"
+          :option="tableOption"
+          :page.sync="page"
+          :table-loading="loading"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          @search-change="searchChange"
+          @refresh-change="refreshChange"
+          @row-save="rowSave"
+          @row-del="rowDel"
+          @row-update="rowUpdate"
+          @cell-dblclick="cellDblclick"
+          @on-load="getList"
+        ></avue-crud>
+      </basic-container>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { getDeptLazyTree, getDeptTree } from "@/api/basicData/basicFeesDesc";
+
 export default {
   data() {
-    return {};
+    return {
+      loading: false,
+      data: [],
+      tableOption: {
+        align: "center",
+        menuAlign: "center",
+        height: window.innerHeight - 345,
+        searchMenuSpan: 12,
+        menuWidth:'140',
+        column: [
+          {
+            label: "类别名称",
+            prop: "name",
+            search: true,
+            rules: [
+              {
+                required: true,
+                message: "请输入类别名称",
+                trigger: "blur"
+              }
+            ]
+          },
+          {
+            label: "排序",
+            prop: "sort",
+            rules: [
+              {
+                required: true,
+                message: "请输入排序",
+                trigger: "blur"
+              }
+            ]
+          },
+          {
+            label: "状态",
+            prop: "status",
+            search: true,
+            addDisplay: false,
+            editDisplay: false
+          },
+          {
+            label: "创建人",
+            prop: "user",
+            addDisplay: false,
+            editDisplay: false
+          },
+          {
+            label: "创建时间",
+            prop: "date",
+            addDisplay: false,
+            editDisplay: false
+          }
+        ]
+      },
+      page: {
+        currentPage: 1,
+        total: 0,
+        pageSize: 10
+      },
+      treeOption: {
+        nodeKey: "id",
+        lazy: true,
+        treeLoad: function(node, resolve) {
+          const parentId = node.level === 0 ? 0 : node.data.id;
+          getDeptLazyTree(parentId).then(res => {
+            resolve(
+              res.data.data.map(item => {
+                return {
+                  ...item,
+                  leaf: !item.hasChildren
+                };
+              })
+            );
+          });
+        },
+        addBtn: false,
+        menu: false,
+        size: "small",
+        props: {
+          labelText: "标题",
+          label: "title",
+          value: "value",
+          children: "children"
+        }
+      }
+    };
   },
-  methods: {}
+  methods: {
+    getList() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.data = [
+          {
+            name: "类别名称1",
+            sort: "1",
+            status: "状态",
+            user: "用户名",
+            date: "2021-07-08"
+          }
+        ];
+        this.page.total = 1;
+      }, 1000);
+    },
+    searchChange(params, done) {
+      this.getList(this.page,params);
+      done();
+    },
+    sizeChange(val) {
+      this.page.pageSize = val;
+      this.getList();
+    },
+    currentChange(val) {
+      this.page.currentPage = val;
+      this.getList();
+    },
+    refreshChange() {
+      this.page.currentPage = 1;
+      this.getList();
+    },
+    rowSave(row, done, loading) {
+      setTimeout(() => {
+        this.$message.success("保存成功");
+        loading();
+        done();
+      }, 1000);
+    },
+    rowUpdate(row, index, done, loading) {
+      setTimeout(() => {
+        this.$message.success("修改成功");
+        loading();
+        done();
+      }, 1000);
+    },
+    rowDel(row, index) {
+      this.$message.success("删除成功");
+    },
+    cellDblclick(row, column, cell, event) {
+      console.log(row, column, cell, event);
+      this.$refs.crud.rowEdit(row);
+    },
+    //展开主页左边类型
+    nodeClick(data) {
+      this.treeDeptId = data.id;
+      this.page.currentPage = 1;
+      this.getList(this.page);
+    },
+    //查询全部
+    initData() {
+      getDeptTree().then(res => {
+        console.log(this.form);
+        const column = this.findObject(this.option.column, "feesTypeId");
+        column.dicData = res.data.data;
+      });
+    },
+  }
 };
 </script>
 

src/views/workManagement/service-items/type.vue

@@ -1,14 +1,21 @@
 <template>
   <basic-container>
-    <avue-form ref="form" v-model="form" :option="option">
-      <template slot="menuForm">
-        <el-button icon="el-icon-search" type="primary" @click="handleSearch"
-          >搜 索</el-button
-        >
-        <el-button icon="el-icon-delete" @click="handleEmpty">清 空</el-button>
-      </template>
-    </avue-form>
-    <avue-crud :data="data" :option="optionTable"></avue-crud>
+    <avue-crud
+      ref="crud"
+      :data="data"
+      :option="optionTable"
+      :page.sync="page"
+      :table-loading="loading"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+      @search-change="searchChange"
+      @refresh-change="refreshChange"
+      @row-save="rowSave"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @cell-dblclick="cellDblclick"
+      @on-load="getList"
+    ></avue-crud>
   </basic-container>
 </template>
 
@@ -16,55 +23,119 @@
 export default {
   data() {
     return {
-      form: {},
-      option: {
-        emptyBtn: false,
-        submitBtn: false,
-        menuSpan: 8,
-        column: [
-          {
-            label: "名称",
-            prop: "name",
-            placeholder: "请输入",
-            span: 8
-          },
-          {
-            label: "状态",
-            prop: "status",
-            placeholder: "请输入",
-            span: 8
-          }
-        ]
-      },
-      data:[],
+      loading: false,
+      data: [],
       optionTable: {
         align: "center",
         menuAlign: "center",
+        height: window.innerHeight - 345,
+        searchMenuSpan: 12,
+        menuWidth:'140',
         column: [
           {
             label: "类别名称",
-            prop: "name"
+            prop: "name",
+            search: true,
+            rules: [
+              {
+                required: true,
+                message: "请输入类别名称",
+                trigger: "blur"
+              }
+            ]
           },
           {
             label: "排序",
-            prop: "sex"
+            prop: "sort",
+            rules: [
+              {
+                required: true,
+                message: "请输入排序",
+                trigger: "blur"
+              }
+            ]
           },
           {
             label: "状态",
-            prop: "status"
+            prop: "status",
+            search: true,
+            addDisplay: false,
+            editDisplay: false
           },
           {
             label: "创建人",
-            prop: "sex"
+            prop: "user",
+            addDisplay: false,
+            editDisplay: false
+          },
+          {
+            label: "创建时间",
+            prop: "date",
+            addDisplay: false,
+            editDisplay: false
           }
         ]
+      },
+      page: {
+        currentPage: 1,
+        total: 0,
+        pageSize: 10
       }
     };
   },
   methods: {
-    handleSearch() {},
-    handleEmpty() {
-      this.$refs.form.resetForm();
+    getList() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.data = [
+          {
+            name: "类别名称1",
+            sort: "1",
+            status: "状态",
+            user: "用户名",
+            date: "2021-07-08"
+          }
+        ];
+        this.page.total = 1;
+      }, 1000);
+    },
+    searchChange(params, done) {
+      this.getList(this.page,params);
+      done();
+    },
+    sizeChange(val) {
+      this.page.pageSize = val;
+      this.getList();
+    },
+    currentChange(val) {
+      this.page.currentPage = val;
+      this.getList();
+    },
+    refreshChange() {
+      this.page.currentPage = 1;
+      this.getList();
+    },
+    rowSave(row, done, loading) {
+      setTimeout(() => {
+        this.$message.success("保存成功");
+        loading();
+        done();
+      }, 1000);
+    },
+    rowUpdate(row, index, done, loading) {
+      setTimeout(() => {
+        this.$message.success("修改成功");
+        loading();
+        done();
+      }, 1000);
+    },
+    rowDel(row, index) {
+      this.$message.success("删除成功");
+    },
+    cellDblclick(row, column, cell, event) {
+      console.log(row, column, cell, event);
+      this.$refs.crud.rowEdit(row);
     }
   }
 };