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"
          v-model='form'
          :search.sync="search"
          :before-open="beforeOpen"
          @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"
          @tree-load="treeLoad"
        >
          <template slot="menuLeft">
            <el-button
              icon="el-icon-printer"
              size="small"
              type="primary"
              @click.stop="openReport()"
            >报 表
            </el-button>
          </template>
          <report-dialog
            :switchDialog="switchDialog"
            @onClose="onClose()"
          ></report-dialog>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
  import option from "./configuration/projectOption.json";
  import {getServiceProjectList, remove, submit,detail, getServiceTypeTree,getDeptTree,getDicData} from "@/api/workManagement/serviceProject";
  import reportDialog from "@/components/report-dialog/main";
export default {
  data() {
    return {
      switchDialog:false,//报表
      loading: true,
      data: [],
      tableOption: option,
      form:{},
      search:{},
      treeDeptId:"",
      treeDeptName:'',
      height: window.innerHeight - 350,
      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;
          getServiceTypeTree(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: "id",
          children: "children"
        }
      }
    };
  },
  created() {

  },
  components: {
    reportDialog
  },
  mounted() {
    option.height = window.innerHeight - 350 ;
    //查询服务类别字典项
    getDeptTree().then(res => {
      this.findObject(this.tableOption.column, "goodsTypeId").dicData = res.data.data;
    });
  },
  methods: {
    //打印
    openReport() {
      this.switchDialog =! this.switchDialog;
    },
    //关闭打印
    onClose(val) {
      this.switchDialog = val;
    },
    getList(page, params = {}) {
      this.loading = true
      getServiceProjectList(page.currentPage, page.pageSize, params, this.treeDeptId).then(res => {
        this.data = res.data.data.records
        this.page.total = res.data.data.total
        this.loading = false
      })

    },
    //点击新增打开的窗口 取消时触发
    // beforeClose(){

    // },
    //点击新增或修改时
    beforeOpen(done, type){
      if (["add"].includes(type)) {
        this.tableOption.column.forEach(e=>{
          if(e.prop=='goodsTypeId'){
            this.$set(this.tableOption.column,2,{...e,value:this.treeDeptId})
          }
        })
      }
      if (["edit"].includes(type)) {
        detail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    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.getList(this.page,this.search);
    },
    rowSave(row, done, loading) {
      row.sort = 1;
      row.goodsTypeId = Array.isArray(row.goodsTypeId) ? row.goodsTypeId.join(',') :  row.goodsTypeId;
      submit(row).then(() => {
        this.page.currentPage = 1;
        this.getList(this.page);
        this.$message.success("保存成功");
        done()
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate(row, index, done, loading) {
      submit(row).then(() => {
        this.getList(this.page);
        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: "操作成功!"
        });
        this.getList(this.page);
        done(row);
      });
    },
    cellDblclick(row, column, cell, event) {
      this.$refs.crud.rowEdit(row);
    },
    saveColumn(row, column) {
      console.log(row, column);
    },
    //展开主页左边类型
    nodeClick(data) {
      this.treeDeptName = data.cname;
      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 scoped lang="scss">
</style>