tire-platform-ui/src/views/workManagement/service-items/project.vue

<template>
  <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"
          @tree-load="treeLoad"
          @saveColumn="saveColumn">
          <template slot="menuLeft">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-upload2"
                       plain
                       @click="">导 出
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
  import option from "./configuration/mainList.json";
  import {
    getList,
    remove,
    update,
    add,
    getServerTree
  } from "@/api/basicData/commodityType";

export default {
  data() {
    return {
      loading: false,
      data: [],
      tableOption: option,
      treeDeptId:"",
      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;
          getServerTree(parentId).then(res => {
            resolve(
              res.data.data.records.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "cname",
          value: "id",
          children: "children"
        }
      }
    };
  },
  methods: {
    getList(page, params = {}) {
      getList(page.currentPage, page.pageSize, params, this.treeDeptId).then(res => {
        this.data = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    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) {
      row.sort = 1;
      add(row).then(res => {
        this.page.currentPage = 1;
        this.getList(this.page);
        this.$message.success("保存成功");
        done()
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        // 数据回调进行刷新
        done(row);
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel(row, index,done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return remove(row.id);
      }).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        // 数据回调进行刷新
        done(row);
      });
    },
    cellDblclick(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.$refs.crud.rowEdit(row);
    },
    saveColumn(row, column) {
      console.log(row, column);
    },
    //展开主页左边类型
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      getList({parentId:parentId}).then(res => {
        resolve(res.data.data.records);
      });
    },
  }
};
</script>

<style></style>