tire-platform-ui/src/views/basicData/portinformation/index.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/mainList.json";
  import reportDialog from "@/components/report-dialog/main";
  import {getList , add ,update ,remove ,getPortTypeTree , getTypeTree} from "@/api/basicData/portinformation"

  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;
            getPortTypeTree(parentId).then(res => {
              resolve(
                res.data.map(item => {
                  return {
                    ...item,
                    leaf: !item.hasChildren
                  };
                })
              );
            });
          },
          addBtn: false,
          menu: false,
          size: "small",
          props: {
            labelText: "标题",
            label: "name",
            value: "id",
            children: "children"
          }
        }
      };
    },
    created() {

    },
    components: {
      reportDialog
    },
    mounted() {
      option.height = window.innerHeight - 235 ;
      //查询服务类别字典项
      getTypeTree().then(res => {
        this.findObject(this.tableOption.column, "typeId").dicData = res.data.data;
      });
    },
    methods: {
      //打印
      openReport() {
        this.switchDialog =! this.switchDialog;
      },
      //关闭打印
      onClose(val) {
        this.switchDialog = val;
      },
      getList(page, params = {}) {
        this.loading = true
        getList(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=='typeId'){
              this.$set(this.tableOption.column,3,{...e,value:this.treeDeptId})
            }
          })
        }
        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) {
        add(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) {
        row.createTime = '';
        update(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>