qj-common 4.3.0 → 4.3.2

package/src/views/treeTemplate/index.vue

@@ -1,559 +1,559 @@
-<template>
-  <div class="template-tree auto">
-    <!--header-->
-    <div v-if="temInput" class="tem-header">
-      <div v-if="'filter' in temTree" class="filter-input new-filter-input">
-        <span>分类搜索：</span>
-        <el-input v-model="filterText" clearable placeholder="请输入分类名称" />
-      </div>
-      <ul class="clearfix">
-        <li v-for="(item, index) in temInput" :key="index">
-          <label v-if="'label' in item">{{ item.label }}：</label>
-          <div v-if="'type' in item && item.type === 'text'">
-            <el-input v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''" />
-          </div>
-          <div v-if="'type' in item && item.type === 'select'">
-            <el-select v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''">
-              <el-option v-for="item2 in item.options" v-if="'options' in item" :key="item2.value" :label="item2.label" :value="item2.value" />
-            </el-select>
-          </div>
-          <div v-if="'type' in item ? item.type === 'date' : ''">
-            <el-date-picker :v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''" size="small" type="date" value-format="yyyy-MM-dd" />
-          </div>
-          <div v-if="'type' in item ? item.type === 'daterange' : ''">
-            <el-date-picker
-              v-model="item.value"
-              :range-separator="'rangeSeparator' in item ? item.rangeSeparator || '-' : '-'"
-              :start-placeholder="'startPlaceholder' in item ? item.startPlaceholder || '开始时间' : '开始时间'"
-              :end-placeholder="'endPlaceholder' in item ? item.endPlaceholder || '结束时间' : '结束时间'"
-              size="small"
-              type="daterange"
-              value-format="yyyy-MM-dd"
-            />
-          </div>
-          <div v-if="'btnArray' in item">
-            <el-button v-for="(itemBtn, indexBtn) in item.btnArray" :key="indexBtn" :type="itemBtn.type" @click="btn(itemBtn, indexBtn)">{{ itemBtn.label }}</el-button>
-          </div>
-        </li>
-      </ul>
-    </div>
-
-    <ul v-if="'treeHeader' in temTree && temTree.treeHeader.length > 0" class="tem-tree-header">
-      <li
-        v-for="(item, index) in temTree.treeHeader"
-        :key="index"
-        :style="{
-          width: item.width ? item.width : 100 / temTree.treeHeader.length + '%',
-          float: item.type === 'button' ? 'right' : 'left',
-          'font-size': item.font ? item.font : '14px',
-          'margin-right': item.mr ? item.mr : '0px',
-          'margin-left': item.ml ? item.ml : '0px',
-          'padding-right': item.pr ? item.pr : '0px',
-          color: item.color ? item.color : '#666',
-          'text-align': item.align ? item.align : 'left',
-        }"
-        class="table-left-label"
-      >
-        {{ item.name }}
-      </li>
-      <!-- temTree里的treeHeader数组里面每个对象控制头部文字,width,type,font,mr,color控制样式 -->
-    </ul>
-    <el-tree
-      v-loading="loading"
-      ref="tree"
-      :node-key="nodeLoad.id"
-      :default-expanded-keys="defaultExpandedKeys"
-      :props="temTree.props"
-      :data="treeData"
-      :indent="temTree.indent || 36"
-      :expand-on-click-node="false"
-      :render-after-expand="true"
-      :load="loadNode"
-      :lazy="nodeLoad.lazy"
-      :filter-node-method="filterNode"
-      :render-content="renderContent"
-      @node-expand="commt"
-    />
-
-    <!--编辑-->
-    <el-dialog v-if="dialogData && dialogData.template" :title="'title' in dialogData.template ? dialogData.template.title : ''" :visible.sync="dialogFormVisible" @close="dialogClose">
-      <template-input
-        ref="child"
-        :tem-input="dialogData.template.html"
-        :rules="dialogData.template.rules"
-        :label-width="dialogData.template.labelWidth"
-        @cancel="dialogCancel"
-        @getData="getData"
-        @selChange="selChange"
-      />
-    </el-dialog>
-  </div>
-</template>
-<script>
-import request from '#/utils/request';
-import templateInput from '../templates/templateInput';
-const querystring = require('querystring');
-import { parseTime } from '#/utils/index'; // 时间格式化
-export default {
-  components: {
-    'template-input': templateInput,
-  },
-  props: ['temInput', 'queryPara', 'temTree', 'nodeLoad'],
-  data() {
-    return {
-      loading: false,
-      parseTime,
-      defaultExpandedKeys: [],
-      ruleForm: {},
-      dialogFormVisible: false, // dialog编辑是否显示
-      dialogData: {},
-      activeName: '',
-      filterText: '',
-      btnState: null, // 1表示增加，2表示编辑
-      treeData: [], // table内容
-    };
-  },
-  watch: {
-    temTree(val) {
-      console.log(val, 'temTree');
-    },
-    temInput(val) {
-      console.log(val, 'temInput');
-    },
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-    $route: function (to, form) {
-      //路由改变，重新请求页面
-      this.getDataList();
-    },
-  },
-  // beforeCreate() {
-  //   this.dialogData
-  // },
-  mounted() {
-    if (!this.nodeLoad.lazy) {
-      this.getDataList();
-    }
-  },
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true;
-      console.log(data);
-      return data[this.temTree.props.label].indexOf(value) !== -1;
-    },
-    btn(itemBtn, index) {
-      if (itemBtn.id === 'query' || itemBtn.id === 'search') {
-        // 表示查询
-        const searchUrl = 'url' in itemBtn && itemBtn.url ? itemBtn.url : '';
-        this.getDataList(searchUrl);
-      } else if (itemBtn.id === 'add') {
-        itemBtn.template.html.forEach((el) => {
-          this.$set(this.ruleForm, el.name, el.value);
-        });
-        // this.$emit("editClick", val.row, index);
-        this.dialogData = itemBtn;
-        this.dialogFormVisible = true;
-        this.btnState = 1; // 表示增加
-      }
-      this.$emit('inputBtnClick', itemBtn, index);
-    },
-
-    handleClick(item, index, val, node) {
-      // index表示btn的位置
-      console.log(val, item, index, 'eeeefff11111223232');
-      const id = item.id;
-      /* if (id === 'see') {
-        // 表示查看
-        this.$emit('tableSeeClick', val.row, index)
-        this.openAlert(val, index, 'see')
-      } else if (id === 'edit') {
-        // 编辑事件
-        item.template.html.forEach(el => {
-          if (el.name in val.row) {
-            // 判断属性是否存在
-            el.value = val.row[el.name]
-          } else {
-            el.value = '' // 没有值的时候，为空
-          }
-        })
-
-        // this.$emit("editClick", val.row, index);
-        this.dialogData = item
-        this.dialogFormVisible = true
-        this.btnState = 2 // 表示编辑
-      } else*/ if (
-        id === 'del'
-      ) {
-        console.log('删除');
-        this.delData(val, item, item.url, node);
-      }
-      this.$emit('treeBtnClick', item, val, node);
-    },
-    commt(node, data) {
-      // 点击展开的事件
-    },
-    selChange(val, item) {
-      this.$emit('selChange', val, item);
-    },
-    dialogCancel() {
-      // 取消
-      this.dialogFormVisible = false;
-    },
-    dialogClose() {
-      this.$refs.child.setReset();
-      this.dialogFormVisible = false;
-    },
-    refreshTree(node) {
-      // defaultExpandedKeys
-      if (!this.nodeLoad.lazy) {
-        this.getDataList();
-        if (node) {
-          this.defaultExpandedKeys = [node.key];
-        }
-      } else {
-        if (node.parent) {
-          node.parent.loaded = false;
-          node.parent.loading = false;
-          node.parent.expanded = false;
-          node.parent.expand();
-          this.defaultExpandedKeys = [node.key];
-        } else {
-          this.getDataList();
-        }
-      }
-    },
-    loadNode(node, resolve) {
-      console.log(node);
-      const requestUrl = this.nodeLoad.url ? this.nodeLoad.url : '';
-      if (requestUrl === '') {
-        this.$message.error('url not defined');
-        return false;
-      }
-      this.loading = true;
-      let params = {};
-      if (node.level === 0) {
-        params = { ...this.queryPara };
-      } else {
-        this.nodeLoad.params.forEach((item) => {
-          params[item.name] = node.data[item.value];
-        });
-      }
-      request({
-        url: requestUrl,
-        method: 'post',
-        data: querystring.stringify(params),
-      }).then((res) => {
-        this.loading = false;
-        if (node.level === 0) {
-          if (Array.isArray(res)) {
-            this.treeData = res;
-          } else {
-            this.treeData = res.rows;
-          }
-        } else {
-          if (Array.isArray(res)) {
-            node.data[this.temTree.props.children] = res;
-            resolve(res);
-          } else {
-            node.data[this.temTree.props.children] = res.rows; // 需要把值放进children
-            resolve(res.rows);
-          }
-        }
-      });
-    },
-    getDataList(paramsUrl) {
-      const requestUrl = this.nodeLoad.url ? this.nodeLoad.url : paramsUrl || '';
-      if (requestUrl === '') {
-        this.$message.error('url not defined');
-        return false;
-      }
-      this.loading = true;
-      const params = { ...this.queryPara };
-      // 获取参数
-      /* this.queryPara.forEach(el => {
-          params[el.name] = el.value;
-      });*/
-      // 查询列表
-
-      request({
-        url: requestUrl,
-        method: 'post',
-        data: querystring.stringify(params),
-      }).then((res) => {
-        this.loading = false;
-        if (Array.isArray(res)) {
-          this.$emit('getData', res);
-          this.treeData = res;
-        } else {
-          this.$emit('getData', res.rows);
-          this.treeData = res.rows;
-        }
-      });
-    },
-    getData(res) {
-      this.$emit('refreshTree', res);
-    },
-    dialogCancel() {
-      // 取消
-      this.dialogFormVisible = false;
-    },
-
-    delData(val, item, url, node) {
-      const json = {};
-      for (const el in item.params) {
-        if (item.params[el] === '') {
-          json[el] = val[el];
-        } else {
-          json[el] = item.params[el];
-        }
-      }
-      if (this.nodeLoad.lazy && node.expanded === false) {
-        this.$message.error('请展开当前节点，并确认节点下不存在子节点');
-        return false;
-      }
-      if (node.childNodes.length > 0) {
-        this.$message.error('该节点下存在子节点，不可删除');
-        return false;
-      }
-      this.$confirm('确认删除该分类？')
-        .then((res) => {
-          return request({
-            url: url,
-            method: 'post',
-            data: querystring.stringify(json),
-          })
-            .then((res) => {
-              if (res.success) {
-                this.$message.success(res.msg);
-                this.remove(node, val); // 删除成功后直接移除节点
-              } else {
-                this.$message.error(res.msg);
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-            });
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    remove(node, data) {
-      const parent = node.parent;
-      const children = parent.data[this.temTree.props.children] || parent.data;
-      const index = children.findIndex((d) => d[this.temTree.props.label] === data[this.temTree.props.label]);
-      children.splice(index, 1);
-    },
-    // <span>{node.label}</span>
-    renderContent(h, { node, data, store }) {
-      return (
-        <div class="template-tree-node">
-          <div class="template-tree-label">
-            {'treeHeader' in this.temTree && this.temTree.treeHeader.length > 0
-              ? this.temTree.treeHeader.map((item, index) => {
-                  if (item.type === 'first') {
-                    return <span class="first-label" style={{ width: item.width }} />;
-                  } else if (item.type === 'button') {
-                  } else {
-                    return (
-                      <span class="table-content" style={{ width: item.width }}>
-                        {item.template && item.template === 'format' ? this.parseTime(data[item.value]) : data[item.value]}
-                      </span>
-                    );
-                  }
-                })
-              : ''}
-            <div class="btn-group">
-              {this.temTree.treeBtn.map((item, index) => {
-                if ((item.level && node.level >= item.level) || (item.last == '1' && data.classtreeLast == '0')) {
-                  return (
-                    <el-button size="text" class="tree-btn-hide">
-                      {item.label}
-                    </el-button>
-                  );
-                } else {
-                  return (
-                    <el-button size="text" on-click={() => this.handleClick(item, index, data, node)}>
-                      {item.label}
-                    </el-button>
-                  );
-                }
-              })}
-            </div>
-          </div>
-        </div>
-      );
-    },
-  },
-};
-</script>
-<style rel="stylesheet/scss" lang="scss">
-.tree-table {
-  .el-tree > .el-tree-node {
-    border: 1px solid #ededed;
-    overflow: hidden;
-    margin-bottom: 4px;
-  }
-  .el-tree {
-    background: #f8f8f8;
-    .el-tree-node {
-      background: #fff;
-      .el-tree-node__content {
-        height: 48px;
-        .el-tree-node__expand-icon {
-          margin-left: 10px;
-          position: absolute;
-          left: 0px;
-        }
-      }
-      .el-button {
-        width: auto;
-      }
-    }
-  }
-}
-.template-tree {
-  .tem-tree-header {
-    width: 100%;
-    display: inline-block;
-    // background: #eee;
-    // 修改头部背景色
-    margin-top: 20px;
-    list-style: none;
-    li {
-      height: 48px;
-      line-height: 48px;
-      width: auto;
-      display: inline-block;
-      &.table-left-label {
-        float: left;
-        span {
-          width: 100px;
-          display: block;
-          float: left;
-        }
-      }
-    }
-  }
-
-  .filter-input {
-    margin-bottom: 20px;
-    width: 190px;
-    input {
-      width: 190px;
-    }
-  }
-  .new-filter-input {
-    overflow: hidden;
-    width: 400px;
-    line-height: 35px;
-    display: flex;
-    span {
-      display: inline-block;
-      float: left;
-      width: 100px;
-    }
-    .el-input {
-      display: inline-block;
-      float: left;
-      width: 190px !important;
-      .el-input__inner {
-        width: 190px;
-      }
-    }
-  }
-  .tem-header {
-    margin-bottom: 10px;
-    background: #fff;
-    padding: 20px;
-    border: 1px solid #ededed;
-  }
-  .el-tree-node {
-    position: relative;
-  }
-  .el-tree > .el-tree-node {
-    background: #fff;
-    margin-bottom: 4px;
-    & > .el-tree-node__content > .template-tree-node {
-      font-weight: bold;
-      font-size: 14px;
-    }
-
-    & > .el-tree-node__children > .el-tree-node > .el-tree-node__content {
-      font-weight: normal;
-      font-size: 14px;
-    }
-    & > .el-tree-node__children .el-tree-node__children .template-tree-node {
-      font-weight: normal;
-      font-size: 12px;
-    }
-  }
-  .el-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .template-tree-node {
-    border-top: 1px solid #f8f8f8;
-  }
-  .el-tree .el-tree-node__children .el-tree-node__children {
-    margin: 20px 0;
-    .el-tree-node__content {
-      background: #fafbfc;
-      padding-left: 0 !important;
-      margin-left: 48px;
-      margin-right: 15px;
-    }
-  }
-
-  .el-tree-node__content {
-    height: auto;
-    .el-tree-node__expand-icon {
-      z-index: 2;
-    }
-    .template-tree-node {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      height: 48px;
-      line-height: 48px;
-      .template-tree-label {
-        position: absolute;
-        right: 0;
-        box-sizing: border-box;
-        width: 100%;
-        float: right;
-        font-size: 12px;
-        color: #444;
-        font-weight: normal;
-
-        .first-label {
-          width: 25%;
-          z-index: 0;
-          float: left;
-          height: 48px;
-        }
-        .table-content {
-          width: 25%;
-          float: left;
-          overflow: hidden;
-        }
-        .table-content:nth-child(1) {
-          padding-left: 30px;
-        }
-
-        .btn-group {
-          min-width: 200px;
-          float: right;
-          text-align: left;
-          .el-button {
-            width: auto;
-            padding: 0 15px;
-          }
-          .tree-btn-hide {
-            visibility: hidden;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="template-tree auto">
+    <!--header-->
+    <div v-if="temInput" class="tem-header">
+      <div v-if="'filter' in temTree" class="filter-input new-filter-input">
+        <span>分类搜索：</span>
+        <el-input v-model="filterText" clearable placeholder="请输入分类名称" />
+      </div>
+      <ul class="clearfix">
+        <li v-for="(item, index) in temInput" :key="index">
+          <label v-if="'label' in item">{{ item.label }}：</label>
+          <div v-if="'type' in item && item.type === 'text'">
+            <el-input v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''" />
+          </div>
+          <div v-if="'type' in item && item.type === 'select'">
+            <el-select v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''">
+              <el-option v-for="item2 in item.options" v-if="'options' in item" :key="item2.value" :label="item2.label" :value="item2.value" />
+            </el-select>
+          </div>
+          <div v-if="'type' in item ? item.type === 'date' : ''">
+            <el-date-picker :v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''" size="small" type="date" value-format="yyyy-MM-dd" />
+          </div>
+          <div v-if="'type' in item ? item.type === 'daterange' : ''">
+            <el-date-picker
+              v-model="item.value"
+              :range-separator="'rangeSeparator' in item ? item.rangeSeparator || '-' : '-'"
+              :start-placeholder="'startPlaceholder' in item ? item.startPlaceholder || '开始时间' : '开始时间'"
+              :end-placeholder="'endPlaceholder' in item ? item.endPlaceholder || '结束时间' : '结束时间'"
+              size="small"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+            />
+          </div>
+          <div v-if="'btnArray' in item">
+            <el-button v-for="(itemBtn, indexBtn) in item.btnArray" :key="indexBtn" :type="itemBtn.type" @click="btn(itemBtn, indexBtn)">{{ itemBtn.label }}</el-button>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <ul v-if="'treeHeader' in temTree && temTree.treeHeader.length > 0" class="tem-tree-header">
+      <li
+        v-for="(item, index) in temTree.treeHeader"
+        :key="index"
+        :style="{
+          width: item.width ? item.width : 100 / temTree.treeHeader.length + '%',
+          float: item.type === 'button' ? 'right' : 'left',
+          'font-size': item.font ? item.font : '14px',
+          'margin-right': item.mr ? item.mr : '0px',
+          'margin-left': item.ml ? item.ml : '0px',
+          'padding-right': item.pr ? item.pr : '0px',
+          color: item.color ? item.color : '#666',
+          'text-align': item.align ? item.align : 'left',
+        }"
+        class="table-left-label"
+      >
+        {{ item.name }}
+      </li>
+      <!-- temTree里的treeHeader数组里面每个对象控制头部文字,width,type,font,mr,color控制样式 -->
+    </ul>
+    <el-tree
+      v-loading="loading"
+      ref="tree"
+      :node-key="nodeLoad.id"
+      :default-expanded-keys="defaultExpandedKeys"
+      :props="temTree.props"
+      :data="treeData"
+      :indent="temTree.indent || 36"
+      :expand-on-click-node="false"
+      :render-after-expand="true"
+      :load="loadNode"
+      :lazy="nodeLoad.lazy"
+      :filter-node-method="filterNode"
+      :render-content="renderContent"
+      @node-expand="commt"
+    />
+
+    <!--编辑-->
+    <el-dialog v-if="dialogData && dialogData.template" :title="'title' in dialogData.template ? dialogData.template.title : ''" :visible.sync="dialogFormVisible" @close="dialogClose">
+      <template-input
+        ref="child"
+        :tem-input="dialogData.template.html"
+        :rules="dialogData.template.rules"
+        :label-width="dialogData.template.labelWidth"
+        @cancel="dialogCancel"
+        @getData="getData"
+        @selChange="selChange"
+      />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import request from '#/utils/request';
+import templateInput from '../templates/templateInput';
+const querystring = require('querystring');
+import { parseTime } from '#/utils/index'; // 时间格式化
+export default {
+  components: {
+    'template-input': templateInput,
+  },
+  props: ['temInput', 'queryPara', 'temTree', 'nodeLoad'],
+  data() {
+    return {
+      loading: false,
+      parseTime,
+      defaultExpandedKeys: [],
+      ruleForm: {},
+      dialogFormVisible: false, // dialog编辑是否显示
+      dialogData: {},
+      activeName: '',
+      filterText: '',
+      btnState: null, // 1表示增加，2表示编辑
+      treeData: [], // table内容
+    };
+  },
+  watch: {
+    temTree(val) {
+      console.log(val, 'temTree');
+    },
+    temInput(val) {
+      console.log(val, 'temInput');
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+    $route: function (to, form) {
+      //路由改变，重新请求页面
+      this.getDataList();
+    },
+  },
+  // beforeCreate() {
+  //   this.dialogData
+  // },
+  mounted() {
+    if (!this.nodeLoad.lazy) {
+      this.getDataList();
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      console.log(data);
+      return data[this.temTree.props.label].indexOf(value) !== -1;
+    },
+    btn(itemBtn, index) {
+      if (itemBtn.id === 'query' || itemBtn.id === 'search') {
+        // 表示查询
+        const searchUrl = 'url' in itemBtn && itemBtn.url ? itemBtn.url : '';
+        this.getDataList(searchUrl);
+      } else if (itemBtn.id === 'add') {
+        itemBtn.template.html.forEach((el) => {
+          this.$set(this.ruleForm, el.name, el.value);
+        });
+        // this.$emit("editClick", val.row, index);
+        this.dialogData = itemBtn;
+        this.dialogFormVisible = true;
+        this.btnState = 1; // 表示增加
+      }
+      this.$emit('inputBtnClick', itemBtn, index);
+    },
+
+    handleClick(item, index, val, node) {
+      // index表示btn的位置
+      console.log(val, item, index, 'eeeefff11111223232');
+      const id = item.id;
+      /* if (id === 'see') {
+        // 表示查看
+        this.$emit('tableSeeClick', val.row, index)
+        this.openAlert(val, index, 'see')
+      } else if (id === 'edit') {
+        // 编辑事件
+        item.template.html.forEach(el => {
+          if (el.name in val.row) {
+            // 判断属性是否存在
+            el.value = val.row[el.name]
+          } else {
+            el.value = '' // 没有值的时候，为空
+          }
+        })
+
+        // this.$emit("editClick", val.row, index);
+        this.dialogData = item
+        this.dialogFormVisible = true
+        this.btnState = 2 // 表示编辑
+      } else*/ if (
+        id === 'del'
+      ) {
+        console.log('删除');
+        this.delData(val, item, item.url, node);
+      }
+      this.$emit('treeBtnClick', item, val, node);
+    },
+    commt(node, data) {
+      // 点击展开的事件
+    },
+    selChange(val, item) {
+      this.$emit('selChange', val, item);
+    },
+    dialogCancel() {
+      // 取消
+      this.dialogFormVisible = false;
+    },
+    dialogClose() {
+      this.$refs.child.setReset();
+      this.dialogFormVisible = false;
+    },
+    refreshTree(node) {
+      // defaultExpandedKeys
+      if (!this.nodeLoad.lazy) {
+        this.getDataList();
+        if (node) {
+          this.defaultExpandedKeys = [node.key];
+        }
+      } else {
+        if (node.parent) {
+          node.parent.loaded = false;
+          node.parent.loading = false;
+          node.parent.expanded = false;
+          node.parent.expand();
+          this.defaultExpandedKeys = [node.key];
+        } else {
+          this.getDataList();
+        }
+      }
+    },
+    loadNode(node, resolve) {
+      console.log(node);
+      const requestUrl = this.nodeLoad.url ? this.nodeLoad.url : '';
+      if (requestUrl === '') {
+        this.$message.error('url not defined');
+        return false;
+      }
+      this.loading = true;
+      let params = {};
+      if (node.level === 0) {
+        params = { ...this.queryPara };
+      } else {
+        this.nodeLoad.params.forEach((item) => {
+          params[item.name] = node.data[item.value];
+        });
+      }
+      request({
+        url: requestUrl,
+        method: 'post',
+        data: querystring.stringify(params),
+      }).then((res) => {
+        this.loading = false;
+        if (node.level === 0) {
+          if (Array.isArray(res)) {
+            this.treeData = res;
+          } else {
+            this.treeData = res.rows;
+          }
+        } else {
+          if (Array.isArray(res)) {
+            node.data[this.temTree.props.children] = res;
+            resolve(res);
+          } else {
+            node.data[this.temTree.props.children] = res.rows; // 需要把值放进children
+            resolve(res.rows);
+          }
+        }
+      });
+    },
+    getDataList(paramsUrl) {
+      const requestUrl = this.nodeLoad.url ? this.nodeLoad.url : paramsUrl || '';
+      if (requestUrl === '') {
+        this.$message.error('url not defined');
+        return false;
+      }
+      this.loading = true;
+      const params = { ...this.queryPara };
+      // 获取参数
+      /* this.queryPara.forEach(el => {
+          params[el.name] = el.value;
+      });*/
+      // 查询列表
+
+      request({
+        url: requestUrl,
+        method: 'post',
+        data: querystring.stringify(params),
+      }).then((res) => {
+        this.loading = false;
+        if (Array.isArray(res)) {
+          this.$emit('getData', res);
+          this.treeData = res;
+        } else {
+          this.$emit('getData', res.rows);
+          this.treeData = res.rows;
+        }
+      });
+    },
+    getData(res) {
+      this.$emit('refreshTree', res);
+    },
+    dialogCancel() {
+      // 取消
+      this.dialogFormVisible = false;
+    },
+
+    delData(val, item, url, node) {
+      const json = {};
+      for (const el in item.params) {
+        if (item.params[el] === '') {
+          json[el] = val[el];
+        } else {
+          json[el] = item.params[el];
+        }
+      }
+      if (this.nodeLoad.lazy && node.expanded === false) {
+        this.$message.error('请展开当前节点，并确认节点下不存在子节点');
+        return false;
+      }
+      if (node.childNodes.length > 0) {
+        this.$message.error('该节点下存在子节点，不可删除');
+        return false;
+      }
+      this.$confirm('确认删除该分类？')
+        .then((res) => {
+          return request({
+            url: url,
+            method: 'post',
+            data: querystring.stringify(json),
+          })
+            .then((res) => {
+              if (res.success) {
+                this.$message.success(res.msg);
+                this.remove(node, val); // 删除成功后直接移除节点
+              } else {
+                this.$message.error(res.msg);
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    remove(node, data) {
+      const parent = node.parent;
+      const children = parent.data[this.temTree.props.children] || parent.data;
+      const index = children.findIndex((d) => d[this.temTree.props.label] === data[this.temTree.props.label]);
+      children.splice(index, 1);
+    },
+    // <span>{node.label}</span>
+    renderContent(h, { node, data, store }) {
+      return (
+        <div class="template-tree-node">
+          <div class="template-tree-label">
+            {'treeHeader' in this.temTree && this.temTree.treeHeader.length > 0
+              ? this.temTree.treeHeader.map((item, index) => {
+                  if (item.type === 'first') {
+                    return <span class="first-label" style={{ width: item.width }} />;
+                  } else if (item.type === 'button') {
+                  } else {
+                    return (
+                      <span class="table-content" style={{ width: item.width }}>
+                        {item.template && item.template === 'format' ? this.parseTime(data[item.value]) : data[item.value]}
+                      </span>
+                    );
+                  }
+                })
+              : ''}
+            <div class="btn-group">
+              {this.temTree.treeBtn.map((item, index) => {
+                if ((item.level && node.level >= item.level) || (item.last == '1' && data.classtreeLast == '0')) {
+                  return (
+                    <el-button size="text" class="tree-btn-hide">
+                      {item.label}
+                    </el-button>
+                  );
+                } else {
+                  return (
+                    <el-button size="text" on-click={() => this.handleClick(item, index, data, node)}>
+                      {item.label}
+                    </el-button>
+                  );
+                }
+              })}
+            </div>
+          </div>
+        </div>
+      );
+    },
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss">
+.tree-table {
+  .el-tree > .el-tree-node {
+    border: 1px solid #ededed;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+  .el-tree {
+    background: #f8f8f8;
+    .el-tree-node {
+      background: #fff;
+      .el-tree-node__content {
+        height: 48px;
+        .el-tree-node__expand-icon {
+          margin-left: 10px;
+          position: absolute;
+          left: 0px;
+        }
+      }
+      .el-button {
+        width: auto;
+      }
+    }
+  }
+}
+.template-tree {
+  .tem-tree-header {
+    width: 100%;
+    display: inline-block;
+    // background: #eee;
+    // 修改头部背景色
+    margin-top: 20px;
+    list-style: none;
+    li {
+      height: 48px;
+      line-height: 48px;
+      width: auto;
+      display: inline-block;
+      &.table-left-label {
+        float: left;
+        span {
+          width: 100px;
+          display: block;
+          float: left;
+        }
+      }
+    }
+  }
+
+  .filter-input {
+    margin-bottom: 20px;
+    width: 190px;
+    input {
+      width: 190px;
+    }
+  }
+  .new-filter-input {
+    overflow: hidden;
+    width: 400px;
+    line-height: 35px;
+    display: flex;
+    span {
+      display: inline-block;
+      float: left;
+      width: 100px;
+    }
+    .el-input {
+      display: inline-block;
+      float: left;
+      width: 190px !important;
+      .el-input__inner {
+        width: 190px;
+      }
+    }
+  }
+  .tem-header {
+    margin-bottom: 10px;
+    background: #fff;
+    padding: 20px;
+    border: 1px solid #ededed;
+  }
+  .el-tree-node {
+    position: relative;
+  }
+  .el-tree > .el-tree-node {
+    background: #fff;
+    margin-bottom: 4px;
+    & > .el-tree-node__content > .template-tree-node {
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    & > .el-tree-node__children > .el-tree-node > .el-tree-node__content {
+      font-weight: normal;
+      font-size: 14px;
+    }
+    & > .el-tree-node__children .el-tree-node__children .template-tree-node {
+      font-weight: normal;
+      font-size: 12px;
+    }
+  }
+  .el-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .template-tree-node {
+    border-top: 1px solid #f8f8f8;
+  }
+  .el-tree .el-tree-node__children .el-tree-node__children {
+    margin: 20px 0;
+    .el-tree-node__content {
+      background: #fafbfc;
+      padding-left: 0 !important;
+      margin-left: 48px;
+      margin-right: 15px;
+    }
+  }
+
+  .el-tree-node__content {
+    height: auto;
+    .el-tree-node__expand-icon {
+      z-index: 2;
+    }
+    .template-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      height: 48px;
+      line-height: 48px;
+      .template-tree-label {
+        position: absolute;
+        right: 0;
+        box-sizing: border-box;
+        width: 100%;
+        float: right;
+        font-size: 12px;
+        color: #444;
+        font-weight: normal;
+
+        .first-label {
+          width: 25%;
+          z-index: 0;
+          float: left;
+          height: 48px;
+        }
+        .table-content {
+          width: 25%;
+          float: left;
+          overflow: hidden;
+        }
+        .table-content:nth-child(1) {
+          padding-left: 30px;
+        }
+
+        .btn-group {
+          min-width: 200px;
+          float: right;
+          text-align: left;
+          .el-button {
+            width: auto;
+            padding: 0 15px;
+          }
+          .tree-btn-hide {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+</style>