qj-happy-common-zhongjian 1.0.27

package/src/views/treeTemplate/index.vue

@@ -0,0 +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>