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

<script>
import { getDeptLazyTree, getDeptTree } from "@/api/basicData/basicFeesDesc";

export default {
  data() {
    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"
              }
            ],
            overHidden: true
          },
          {
            label: "收费建议",
            prop: "sort",
            rules: [
              {
                required: true,
                message: "请输入排序",
                trigger: "blur"
              }
            ],
            overHidden: true
          },
          {
            label: "收费金额",
            prop: "status",
            search: true,
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "计价单位",
            prop: "user",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "备注",
            prop: "date",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "频率",
            prop: "date",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "保质期",
            prop: "date",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "标准工时",
            prop: "date",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "创建人",
            prop: "user",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "创建时间",
            prop: "date",
            addDisplay: false,
            editDisplay: false,
            overHidden: true
          }
        ]
      },
      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: {
    getList() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.data = [
          {
            name: "公司设立",
            sort: "2300",
            status: "2300",
            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);
    },
    saveColumn(row, column) {
      console.log(row, column);
    },
    //展开主页左边类型
    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>

<style></style>