修改测试计划及组织架构

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@vant/touch-emulator": "^1.4.0",
     "axios": "^0.19.0",
+    "bi-vue-mindmap": "^0.7.8",
     "core-js": "^2.6.5",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.2",
@@ -18,9 +19,12 @@
     "exif-js": "^2.3.0",
     "js-base64": "^2.5.2",
     "jsencrypt": "^3.0.0-rc.1",
+    "jsmind": "^0.8.5",
     "md5": "^2.3.0",
     "vant": "^2.8.4",
     "vue": "^2.6.10",
+    "vue-jsmind": "^1.5.0",
+    "vue-power-tree": "0.0.6",
     "vue-qr": "^4.0.9",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"

src/components/PlanRegister.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <!---lxh-修改密码-->
+    <div class="dig_update">
+      <el-dialog
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        width="40%"
+        style="border-radius: 40px"
+      >
+        <div slot="title">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            :inline="true"
+            ref="ruleForm"
+            label-width="150px"
+            class="demo-ruleForm"
+          >
+            <p v-if="isView" class="dig_title">添加计划</p>
+            <p v-if="!isView" class="dig_title">编辑计划</p>
+            <div slot=""></div>
+            <div slot="footer"></div>
+
+            <el-form-item label="计划名称" prop="planName">
+              <el-input v-model="ruleForm.planName"></el-input>
+            </el-form-item>
+            <el-form-item label="开始时间" prop="endTime">
+              <el-input v-model="ruleForm.endTime"></el-input>
+            </el-form-item>
+
+            <div class="dig_button">
+              <el-button type="info" round @click="resetForm('ruleForm')">重置</el-button>
+              <!-- <el-button type="success" round @click="submitForm('ruleForm')"
+                >提交</el-button
+              > -->
+              <el-button type="success" round @click="submitCom()">提交</el-button>
+            </div>
+          </el-form>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+// import { oSessionStorage } from "../../utils/utils";
+import { oSessionStorage } from "../utils/utils";
+import md5 from "md5";
+export default {
+  data() {
+    return {
+      //编辑返回的值
+      userDetailData: {},
+      //组织架构名字
+      groupName: "",
+
+      disableFlag: false,
+      phoneFlag: false,
+      flag: 3,
+      dialogVisible: false,
+      //渠道列表
+
+      ruleForm: {
+        //所属组织架构
+        planName: "",
+        endTime: "",
+      },
+      isView: true,
+      rules: {
+        planName: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
+        endTime: [{ required: true, message: "请输结束时间", trigger: "blur" }],
+      },
+    };
+  },
+  mounted() {
+    let userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
+    this.ruleForm.parentCode = userInfo.invitationCode;
+
+    //获取渠道信息
+
+    // this.ruleForm.type = "3";
+  },
+  methods: {
+    timeChange(val) {
+      if (val !== null) {
+        //根据时间得到格式化的数据
+        this.ruleForm.birthDate = this.formatterTime(val);
+      }
+    },
+    formatterTime(val) {
+      let date = new Date(val);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      month = this.formatterMon(month);
+      let day = date.getDate();
+      day = this.formatterMon(day);
+      return year + "-" + month + "-" + day;
+    },
+    formatterMon(val) {
+      if (val < 10) {
+        return "0" + val;
+      } else {
+        return val;
+      }
+    },
+    open(val) {
+      this.cancle();
+
+      this.dialogVisible = true;
+      this.isView = val;
+
+      this.$nextTick(() => {
+        this.$refs.ruleForm.clearValidate();
+      });
+    },
+    edit(val) {
+      this.dialogVisible = true;
+      this.isView = false;
+      this.userDetailData=val
+      //调用查询详情的接口
+    },
+    //调用查询详情的接口
+
+    cancle() {
+      this.$refs["ruleForm"].clearValidate();
+      //清空表单
+      this.ruleForm.planName = "";
+      this.ruleForm.endTime = "";
+      this.dialogVisible = false;
+    },
+    disableFlagStatus() {
+      setTimeout(() => {
+        this.disableFlag = false;
+      }, 1500);
+    },
+    submitCom() {
+      if (this.disableFlag) {
+        return;
+      }
+      this.disableFlag = true;
+      let validSp = [];
+      if (this.isView) {
+        validSp = ["planName", "endTime"];
+      } else {
+        validSp = ["planName", "endTime"];
+      }
+      let aa = [];
+      this.$refs["ruleForm"].validateField(validSp, (valid) => {
+        if (!valid) {
+          aa.push(valid);
+          //判断是编辑还是新增
+          if (this.isView) {
+            if (aa.length == 2) {
+              this.register();
+            } else {
+              this.disableFlagStatus();
+            }
+          } else {
+            if (aa.length == 2) {
+              this.editUserFun();
+            } else {
+              this.disableFlagStatus();
+            }
+          }
+
+          //都校验通过后可以触发注册接口了
+          //调用方法进行入参
+        } else {
+          this.disableFlagStatus();
+        }
+      });
+    },
+    register() {
+      let that = this;
+      // this.ruleForm.password = md5(this.ruleForm.password);
+      this.$http.post(
+        `/plan/addOrUpdate`,
+        {
+          planName: this.ruleForm.planName,
+          taskEndTime: this.ruleForm.taskEndTime,
+        },
+        (res) => {
+          this.disableFlagStatus();
+          // this.disableFlag = false;
+          if (res && res.code == 200) {
+            this.dialogVisible = false;
+
+            // this.$toast.success({ message: "成功" });
+            //调用父组件的查询方法
+            that.$emit("search");
+          } else {
+            // this.$toast.fail({ message: res.msg });
+            this.$message.error(res.msg);
+          }
+          //清空缓存
+          this.cancle();
+        }
+      );
+    },
+    editUserFun() {
+      let that = this;
+
+      this.userDetailData.orgNo = this.ruleForm.group[this.ruleForm.group.length - 1];
+      this.userDetailData.orgName = this.groupName;
+      this.$http.post(
+        `/plan/addOrUpdate`,
+        {
+          ...this.userDetailData,
+        },
+        (res) => {
+          this.disableFlagStatus();
+          if (res && res.code == 200) {
+            this.dialogVisible = false;
+            // this.$toast.success({ message: "成功" });
+            //调用父组件的查询方法
+            that.$emit("search");
+            this.$message.success("修改成功");
+          } else {
+            // this.$toast.fail({ message: res.msg });
+            this.$message.error(res.msg);
+          }
+
+          //清空缓存
+
+          //清空缓存
+        }
+      );
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.dig_update /deep/.el-cascader {
+  position: relative;
+  font-size: 14px;
+  line-height: 40px;
+  width: 100%;
+}
+.dig_update /deep/.el-dialog {
+  box-shadow: none !important;
+  background: transparent !important;
+}
+.demo-ruleForm /deep/ .el-form-item {
+  margin-right: 10px;
+  vertical-align: top;
+  display: flex !important;
+  flex-direction: column;
+}
+.demo-ruleForm /deep/.el-form-item__label {
+  text-align: left;
+  vertical-align: middle;
+  float: left;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.demo-ruleForm /deep/.el-input {
+  width: 100% !important;
+}
+
+.demo-ruleForm /deep/.el-input__inner {
+  width: 100% !important;
+  background-color: #f7f7f7;
+  border: 0px;
+}
+
+.dig_button {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.demo-ruleForm {
+  background-color: #ffffff;
+  // border-radius: 20px;
+  margin-right: -10px;
+  margin-top: -10px;
+  padding-right: 100px;
+  padding-left: 100px;
+  border-radius: 20px;
+  padding-top: 20px;
+  padding-bottom: 40px;
+  .dig_title {
+    margin-bottom: 30px;
+    text-align: center;
+    font-weight: 700;
+  }
+}
+</style>

src/components/TreeData.vue

@@ -0,0 +1,391 @@
+<template>
+  <table v-if="treeData && treeData.orgName">
+    <tr>
+      <td
+        :colspan="treeData.children ? treeData.children.length * 2 : 1"
+        :class="{
+          parentLevel: treeData.children,
+          extend: treeData.children && treeData.children.length && treeData.extend,
+        }"
+      >
+        <div :class="{ node: true, hasMate: treeData.mate }">
+          <div class="person" @click="$emit('click-node', treeData)">
+            <el-popover v-if="!isDetail" placement="top" width="180" trigger="hover">
+              <div style="margin: 0">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="addStock(0)"
+                  v-if="treeData.level!==3"
+                  >添加</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click="addStock(1)"
+             
+                  >编辑</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click="deleteStock"
+              
+                  >删除</el-button
+                >
+              </div>
+              <div
+                class="avat"
+                :class="{
+                  parent: !treeData.level,
+                  company: Number(treeData.level) === 1,
+                 
+                }"
+                slot="reference"
+              >
+              <!-- other: Number(treeData.level) === 3, -->
+                <img v-show="Number(treeData.level) === 1" style="margin-bottom: 10px;" src="../assets/img/group/gen.png" />
+                <img v-show="Number(treeData.level) === 2" style="margin-bottom: 10px;" src="../assets/img/group/er.png" />
+                <span style="background-color: #EDF7F2;padding:10px;border-radius: 10px;display:flex;line-height:30px;justify-content: center;">
+                    {{ treeData.orgName }}
+                </span>
+                
+              </div>
+            </el-popover>
+          </div>
+        </div>
+        <div
+          class="extend_handle"
+          v-if="treeData.children && treeData.children.length"
+          @click="toggleExtend(treeData)"
+        ></div>
+      </td>
+    </tr>
+    <!-- 这是一个递归组件,注意,这里还要调用,需要传递的数据这里也要传递,否则操作时拿不到子级的数据 -->
+    <tr v-if="treeData.children && treeData.children.length && treeData.extend">
+      <td
+        v-for="(children, index) in treeData.children"
+        :key="index"
+        colspan="2"
+        class="childLevel"
+      >
+        <TreeChart
+          :json="children"
+          :isDetail="isDetail"
+          @add="$emit('add', $event)"
+          @delete="$emit('delete', $event)"
+          @click-node="$emit('click-node', $event)"
+        />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+export default {
+  name: "TreeChart",
+  props: {
+    json: {}, // 渲染数据
+    isDetail: {
+      default: false, // 是否是详情
+    },
+  },
+
+  data() {
+    return {
+      treeData: {},
+    };
+  },
+
+  created() {
+    // console.log(this.json)
+  },
+
+  watch: {
+    isDetail: function (val) {
+      // 是否是详情,详情不能添加编辑
+      this.isDetail = val;
+    },
+    json: {
+      // 遍历当前的数据
+      handler: function (Props) {
+        let extendKey = function (jsonData) {
+          jsonData.extend = jsonData.extend === void 0 ? true : !!jsonData.extend;
+          // if (Array.isArray(jsonData.children) && jsonData.children.length) {
+          //   jsonData.children.forEach(c => {
+          //     extendKey(c);
+          //   });
+          // }
+          return jsonData;
+        };
+        if (Props) {
+          this.treeData = extendKey(Props);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    toggleExtend(treeData) {
+      treeData.extend = !treeData.extend;
+      this.$forceUpdate();
+    },
+
+    // 新增编辑股东,val: 0 新增, 1 编辑
+    addStock(val) {
+      // console.log(this.treeData)
+      this.$emit("add", { val: val, data: this.treeData });
+    },
+
+    // 删除股东
+    deleteStock() {
+      this.$emit("delete", this.treeData);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+table {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+}
+td {
+  position: relative;
+  vertical-align: top;
+  padding: 0 0 50px 0;
+  text-align: center;
+}
+
+.parent {
+  background: #199ed8 !important;
+  font-weight: bold;
+}
+.extend_handle {
+  position: absolute;
+  left: 50%;
+  bottom: 27px;
+  width: 10px;
+  height: 10px;
+  padding: 10px;
+  transform: translate3d(-15px, 0, 0);
+  cursor: pointer;
+}
+.extend_handle:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 2px solid;
+  border-color: #ccc #ccc transparent transparent;
+  transform: rotateZ(135deg);
+  transform-origin: 50% 50% 0;
+  transition: transform ease 300ms;
+}
+.extend_handle:hover:before {
+  border-color: #333 #333 transparent transparent;
+}
+.extend .extend_handle:before {
+  transform: rotateZ(-45deg);
+}
+
+.extend::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 15px;
+  height: 15px;
+  border-left: 2px solid #ccc;
+  transform: translate3d(-1px, 0, 0);
+}
+.childLevel::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  height: 15px;
+  border-left: 2px solid #ccc;
+  transform: translate3d(-1px, 0, 0);
+}
+.childLevel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -15px;
+  border-top: 2px solid #ccc;
+}
+.childLevel:first-child:before,
+.childLevel:last-child:before {
+  display: none;
+}
+.childLevel:first-child:after {
+  left: 50%;
+  height: 15px;
+  border: 2px solid;
+  border-color: #ccc transparent transparent #ccc;
+  border-radius: 6px 0 0 0;
+  transform: translate3d(1px, 0, 0);
+}
+.childLevel:last-child:after {
+  right: 50%;
+  height: 15px;
+  border: 2px solid;
+  border-color: #ccc #ccc transparent transparent;
+  border-radius: 0 6px 0 0;
+  transform: translate3d(-1px, 0, 0);
+}
+.childLevel:first-child.childLevel:last-child::after {
+  left: auto;
+  border-radius: 0;
+  border-color: transparent #ccc transparent transparent;
+  transform: translate3d(1px, 0, 0);
+}
+
+.node {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  padding: 0 5px;
+}
+.node .person {
+  padding-top: 15px;
+  position: relative;
+  display: inline-block;
+  z-index: 2;
+  width: 120px;
+  overflow: hidden;
+}
+.node .person .avat {
+  padding: 5px;
+  padding-top: 10px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  word-break: break-all;
+  background: transparent;
+  box-sizing: border-box;
+  border-radius: 4px;
+  .opreate_icon {
+    display: none;
+  }
+  &:hover {
+    .opreate_icon {
+      display: block;
+      position: absolute;
+      top: -3px;
+      right: -3px;
+      padding: 5px;
+    }
+  }
+
+  &.company {
+    // background: #199ed8;
+    background: transparent;
+    font-weight: 700;
+  }
+  &.other {
+    background: #ccc;
+  }
+}
+.node .person .avat img {
+  cursor: pointer;
+}
+.node .person .name {
+  height: 2em;
+  line-height: 2em;
+  overflow: hidden;
+  width: 100%;
+}
+.node.hasMate::after {
+  content: "";
+  position: absolute;
+  left: 2em;
+  right: 2em;
+  top: 15px;
+  border-top: 2px solid #ccc;
+  z-index: 1;
+}
+.node.hasMate .person:last-child {
+  margin-left: 1em;
+}
+
+.el-dialog__header {
+  padding: 0;
+  padding-top: 30px;
+  margin: 0 30px;
+  border-bottom: 1px solid #f1f1f1;
+  text-align: left;
+  .el-dialog__title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #464c5b;
+    line-height: 20px;
+  }
+}
+.tips {
+  padding: 0 20px;
+  .el-select {
+    width: 100%;
+  }
+  .blue {
+    color: #00b5ef;
+  }
+  .check {
+    margin-left: 100px;
+  }
+  .inquiry {
+    font-weight: bold;
+  }
+  .el-form-item__label {
+    display: block;
+    float: none;
+    text-align: left;
+  }
+  .el-form-item__content {
+    margin-left: 0;
+  }
+}
+.el-dialog__body {
+  padding: 30px 25px;
+  p {
+    margin-bottom: 15px;
+  }
+}
+.el-dialog__headerbtn {
+  top: 30px;
+  right: 30px;
+}
+
+// 竖向
+.landscape {
+  transform: translate(-100%, 0) rotate(-90deg);
+  transform-origin: 100% 0;
+  .node {
+    text-align: left;
+    height: 8em;
+    width: 8em;
+  }
+  .person {
+    position: relative;
+    transform: rotate(90deg);
+    // padding-left: 4.5em;
+    // height: 4em;
+    top: 35px;
+    left: 12px;
+    width: 110px;
+  }
+}
+
+.el-popover {
+  .el-button {
+    padding: 8px !important;
+    margin-left: 5px !important;
+    float: left;
+  }
+}
+</style>

src/jsmind/jsmind.css

@@ -0,0 +1,408 @@
+/**
+ * @license BSD
+ * @copyright 2014-2023 hizzgdev@163.com
+ * 
+ * Project Home:
+ *   https://github.com/hizzgdev/jsmind/
+ */
+
+/* important section */
+.jsmind-inner {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    outline: none;
+} /*box-shadow:0 0 2px #000;*/
+.jsmind-inner {
+    moz-user-select: -moz-none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.jsmind-inner canvas {
+    position: absolute;
+}
+
+/* z-index:1 */
+svg.jsmind {
+    position: absolute;
+    z-index: 1;
+}
+canvas.jsmind {
+    position: absolute;
+    z-index: 1;
+}
+
+/* z-index:2 */
+jmnodes {
+    position: absolute;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0);
+} /*background color is necessary*/
+jmnode {
+    position: absolute;
+    cursor: default;
+    max-width: 400px;
+}
+jmexpander {
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    display: block;
+    overflow: hidden;
+    line-height: 12px;
+    font-size: 10px;
+    text-align: center;
+    border-radius: 6px;
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+}
+
+.jmnode-overflow-wrap jmnodes {
+    min-width: 420px;
+}
+
+.jmnode-overflow-hidden jmnode {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* default theme */
+jmnode {
+    padding: 10px;
+    background-color: #fff;
+    color: #333;
+    border-radius: 5px;
+    box-shadow: 1px 1px 1px #666;
+    font: 16px/1.125 Verdana, Arial, Helvetica, sans-serif;
+}
+jmnode:hover {
+    box-shadow: 2px 2px 8px #000;
+    background-color: #ebebeb;
+    color: #333;
+}
+jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+    box-shadow: 2px 2px 8px #000;
+}
+jmnode.root {
+    font-size: 24px;
+}
+jmexpander {
+    border-color: gray;
+}
+jmexpander:hover {
+    border-color: #000;
+}
+
+@media screen and (max-device-width: 1024px) {
+    jmnode {
+        padding: 5px;
+        border-radius: 3px;
+        font-size: 14px;
+    }
+    jmnode.root {
+        font-size: 21px;
+    }
+}
+/* primary theme */
+jmnodes.theme-primary jmnode {
+    background-color: #428bca;
+    color: #fff;
+    border-color: #357ebd;
+}
+jmnodes.theme-primary jmnode:hover {
+    background-color: #3276b1;
+    border-color: #285e8e;
+}
+jmnodes.theme-primary jmnode.selected {
+    background-color: #f1c40f;
+    color: #fff;
+}
+jmnodes.theme-primary jmnode.root {
+}
+jmnodes.theme-primary jmexpander {
+}
+jmnodes.theme-primary jmexpander:hover {
+}
+
+/* warning theme */
+jmnodes.theme-warning jmnode {
+    background-color: #f0ad4e;
+    border-color: #eea236;
+    color: #fff;
+}
+jmnodes.theme-warning jmnode:hover {
+    background-color: #ed9c28;
+    border-color: #d58512;
+}
+jmnodes.theme-warning jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-warning jmnode.root {
+}
+jmnodes.theme-warning jmexpander {
+}
+jmnodes.theme-warning jmexpander:hover {
+}
+
+/* danger theme */
+jmnodes.theme-danger jmnode {
+    background-color: #d9534f;
+    border-color: #d43f3a;
+    color: #fff;
+}
+jmnodes.theme-danger jmnode:hover {
+    background-color: #d2322d;
+    border-color: #ac2925;
+}
+jmnodes.theme-danger jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-danger jmnode.root {
+}
+jmnodes.theme-danger jmexpander {
+}
+jmnodes.theme-danger jmexpander:hover {
+}
+
+/* success theme */
+jmnodes.theme-success jmnode {
+    background-color: #5cb85c;
+    border-color: #4cae4c;
+    color: #fff;
+}
+jmnodes.theme-success jmnode:hover {
+    background-color: #47a447;
+    border-color: #398439;
+}
+jmnodes.theme-success jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-success jmnode.root {
+}
+jmnodes.theme-success jmexpander {
+}
+jmnodes.theme-success jmexpander:hover {
+}
+
+/* info theme */
+jmnodes.theme-info jmnode {
+    background-color: #5dc0de;
+    border-color: #46b8da;
+    color: #fff;
+}
+jmnodes.theme-info jmnode:hover {
+    background-color: #39b3d7;
+    border-color: #269abc;
+}
+jmnodes.theme-info jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-info jmnode.root {
+}
+jmnodes.theme-info jmexpander {
+}
+jmnodes.theme-info jmexpander:hover {
+}
+
+/* greensea theme */
+jmnodes.theme-greensea jmnode {
+    background-color: #1abc9c;
+    color: #fff;
+}
+jmnodes.theme-greensea jmnode:hover {
+    background-color: #16a085;
+}
+jmnodes.theme-greensea jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-greensea jmnode.root {
+}
+jmnodes.theme-greensea jmexpander {
+}
+jmnodes.theme-greensea jmexpander:hover {
+}
+
+/* nephrite theme */
+jmnodes.theme-nephrite jmnode {
+    background-color: #2ecc71;
+    color: #fff;
+}
+jmnodes.theme-nephrite jmnode:hover {
+    background-color: #27ae60;
+}
+jmnodes.theme-nephrite jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-nephrite jmnode.root {
+}
+jmnodes.theme-nephrite jmexpander {
+}
+jmnodes.theme-nephrite jmexpander:hover {
+}
+
+/* belizehole theme */
+jmnodes.theme-belizehole jmnode {
+    background-color: #3498db;
+    color: #fff;
+}
+jmnodes.theme-belizehole jmnode:hover {
+    background-color: #2980b9;
+}
+jmnodes.theme-belizehole jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-belizehole jmnode.root {
+}
+jmnodes.theme-belizehole jmexpander {
+}
+jmnodes.theme-belizehole jmexpander:hover {
+}
+
+/* wisteria theme */
+jmnodes.theme-wisteria jmnode {
+    background-color: #9b59b6;
+    color: #fff;
+}
+jmnodes.theme-wisteria jmnode:hover {
+    background-color: #8e44ad;
+}
+jmnodes.theme-wisteria jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-wisteria jmnode.root {
+}
+jmnodes.theme-wisteria jmexpander {
+}
+jmnodes.theme-wisteria jmexpander:hover {
+}
+
+/* asphalt theme */
+jmnodes.theme-asphalt jmnode {
+    background-color: #34495e;
+    color: #fff;
+}
+jmnodes.theme-asphalt jmnode:hover {
+    background-color: #2c3e50;
+}
+jmnodes.theme-asphalt jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-asphalt jmnode.root {
+}
+jmnodes.theme-asphalt jmexpander {
+}
+jmnodes.theme-asphalt jmexpander:hover {
+}
+
+/* orange theme */
+jmnodes.theme-orange jmnode {
+    background-color: #f1c40f;
+    color: #fff;
+}
+jmnodes.theme-orange jmnode:hover {
+    background-color: #f39c12;
+}
+jmnodes.theme-orange jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-orange jmnode.root {
+}
+jmnodes.theme-orange jmexpander {
+}
+jmnodes.theme-orange jmexpander:hover {
+}
+
+/* pumpkin theme */
+jmnodes.theme-pumpkin jmnode {
+    background-color: #e67e22;
+    color: #fff;
+}
+jmnodes.theme-pumpkin jmnode:hover {
+    background-color: #d35400;
+}
+jmnodes.theme-pumpkin jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-pumpkin jmnode.root {
+}
+jmnodes.theme-pumpkin jmexpander {
+}
+jmnodes.theme-pumpkin jmexpander:hover {
+}
+
+/* pomegranate theme */
+jmnodes.theme-pomegranate jmnode {
+    background-color: #e74c3c;
+    color: #fff;
+}
+jmnodes.theme-pomegranate jmnode:hover {
+    background-color: #c0392b;
+}
+jmnodes.theme-pomegranate jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-pomegranate jmnode.root {
+}
+jmnodes.theme-pomegranate jmexpander {
+}
+jmnodes.theme-pomegranate jmexpander:hover {
+}
+
+/* clouds theme */
+jmnodes.theme-clouds jmnode {
+    background-color: #ecf0f1;
+    color: #333;
+}
+jmnodes.theme-clouds jmnode:hover {
+    background-color: #bdc3c7;
+}
+jmnodes.theme-clouds jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-clouds jmnode.root {
+}
+jmnodes.theme-clouds jmexpander {
+}
+jmnodes.theme-clouds jmexpander:hover {
+}
+
+/* asbestos theme */
+jmnodes.theme-asbestos jmnode {
+    background-color: #95a5a6;
+    color: #fff;
+}
+jmnodes.theme-asbestos jmnode:hover {
+    background-color: #7f8c8d;
+}
+jmnodes.theme-asbestos jmnode.selected {
+    background-color: #11f;
+    color: #fff;
+}
+jmnodes.theme-asbestos jmnode.root {
+}
+jmnodes.theme-asbestos jmexpander {
+}
+jmnodes.theme-asbestos jmexpander:hover {
+}

src/main.js

@@ -9,6 +9,15 @@ import "./styles/public.css"
 import http from "@/utils/http";
 import ElementUI from 'element-ui';
 import * as echarts from "echarts"
+import jm from 'vue-jsmind'
+Vue.use(jm)
+
+if (window.jsMind) {
+  console.log('wind')
+  Vue.prototype.jsMind = window.jsMind
+}
+
+
 Vue.prototype.$echarts = echarts
 ElementUI.Dialog.props.lockScroll.default = false;
 Vue.use(ElementUI);

src/views/manage/channelInfo/invite.vue

@@ -1,212 +1,222 @@
 <template>
   <div class="record-warp">
     <div class="record-main">
-      <!-- <el-row>
-          <el-col :span="24">
-            <div class="search-head">
-              <span>渠道：</span>
-              <el-select v-model="channel" placeholder="请选择渠道">
-                <el-option
-                  :label="item.name"
-                  :value="item.id"
-                  v-for="item in channelList"
-                  :key="item.id"
-                ></el-option> </el-select
-              >&nbsp;&nbsp;&nbsp;&nbsp;
-              <el-button type="primary" icon="el-icon-search" @click="searchTarget"
-                >搜索</el-button
-              >
-              <el-button type="primary" icon="el-icon-delete-solid" @click="clearSearch"
-                >清空</el-button
-              >
-            </div>
-          </el-col>
-        </el-row> -->
-      <!-- <el-row class="add_user_class">
-          <el-col :span="24">
-            <div class="search-head">
-              <el-button type="primary" icon="el-icon-plus" @click="addUser"
-                >新增</el-button
+      <el-row>
+        <el-col :span="24">
+          <div class="search-head">
+            <el-input v-model="name" clearable placeholder="请输入名称"></el-input
+            >&nbsp;&nbsp;&nbsp;&nbsp;
+
+            <el-select v-model="planStatus" clearable placeholder="请选择状态">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
-            </div>
-          </el-col>
-        </el-row> -->
+              </el-option>
+            </el-select>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+
+            <!-- <el-select v-model="channel" placeholder="请选择所属组织架构">
+              <el-option
+                :label="item.name"
+                :value="item.id"
+                v-for="item in channelList"
+                :key="item.id"
+              ></el-option> 
+            </el-select> -->
+   
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <el-button type="primary" round icon="el-icon-search" @click="searchTarget"
+              >搜索</el-button
+            >
+            <el-button type="info" round @click="clearSearch">清空</el-button>
+          
+            <el-button type="success"  round class="add_class" icon="el-icon-plus"  @click="addPlan">添加计划</el-button>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row class="add_user_class">
+        <el-col :span="24">
+          <div class="search-head"></div>
+        </el-col>
+      </el-row>
 
       <div class="table-content">
         <el-table
           :data="tableData"
           :row-style="{ height: '0px' }"
           :cell-style="{ padding: '5px' }"
+          :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
         >
-          <!-- <el-table-column prop="channelName" label="渠道" align="center" width="">
-            </el-table-column> -->
-          <el-table-column prop="staffName" label="员工" align="center" width="">
-          </el-table-column>
-          <el-table-column prop="title" label="标题" align="center" width="">
-          </el-table-column>
+          <!-- <el-table-column prop="name" label="姓名" align="center" width=""  show-overflow-tooltip>
+          </el-table-column> -->
           <el-table-column
-            prop="orderNo"
-            label="订单号"
+            show-overflow-tooltip
+            prop="userName"
+            label="姓名"
             align="center"
             width=""
           >
           </el-table-column>
-          <el-table-column prop="effectiveDays" label="有效期：天" align="center" width="">
+          <el-table-column prop="userNo" label="学号" align="center" width="">
           </el-table-column>
           <el-table-column
-            prop="times"
-            label="次数"
-            align="center"
-            width=""
-          >
-          </el-table-column>
-          <el-table-column prop="amount" label="金额" align="center" width="">
-          </el-table-column>
-          
-         
-
-          <el-table-column
-            prop="status"
-            label="状态"
+            prop="gender"
+            label="性别"
             align="center"
-            :formatter="formatterStatus"
             width=""
+            :formatter="genderFun"
           >
           </el-table-column>
-          <el-table-column prop="createDate" label="生成时间" align="center" width="">
+          <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
           </el-table-column>
-          <!-- <el-table-column
-              prop="selfPage"
-              label="自定义首尾页"
-              align="center"
-              :formatter="formatterSelfPage"
-              width=""
-            >
-            </el-table-column> -->
-          <!-- <el-table-column prop="isDelete" label="删除状态" align="center" :formatter="formatterDelete" width="">
-                        </el-table-column> -->
-          <el-table-column label="操作" width="200px" align="center" fixed="right">
+          <el-table-column label="操作" width="510px" align="center">
             <template slot-scope="scope">
-              <el-button
-                @click="viewUser(scope.row)"
-                v-if="scope.row.state != 0"
-                type="text"
-                size="small"
-                >查看</el-button
-              >
-              <el-button
-                @click="viewRecord(scope.row)"
-                v-if="scope.row.state != 0"
-                type="text"
-                size="small"
-                >查看记录</el-button
-              >
-              <!-- <el-button
-                type="text"
-                size="small"
-                v-if="scope.row.state != 0"
-                @click="editUser(scope.row)"
-                >编辑</el-button
-              >
-              <el-button
-                type="text"
-                size="small"
-                v-if="scope.row.state != 0"
-                @click="viewPoster(scope.row)"
-                >查看海报</el-button
-              > -->
+              <div class="detail_button_out">
+                <div class="detail_button" @click="viewUser(scope.row)">
+                  <img src="../../../assets/img/table/search.png" />
+                  <span> 查看个人详情 </span>
+                </div>
+                <div class="detail_button" @click="editUser(scope.row)">
+                  <img src="../../../assets/img/table/edit.png" />
+                  <span> 编辑编辑个人详情 </span>
+                </div>
+                <!-- 弹出提示框 提示是否确认重置-->
+                <div class="detail_button" @click="resetUser(false, scope.row)">
+                  <img src="../../../assets/img/table/reset.png" />
+                  <span> 重置密码 </span>
+                </div>
+                <!-- 弹出提示框 提示是否确认删除-->
+
+                <div class="detail_button" @click="resetUser(true, scope.row)">
+                  <img src="../../../assets/img/table/delete.png" />
+                  <span> 删除 </span>
+                </div>
+              </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
-
+      <!-- small -->
       <el-pagination
-        small
+        class="pag_class"
         background
+        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page.sync="pageNum"
-        layout="total, prev, pager, next"
+        layout="total, sizes, prev, pager, next"
         :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
         :total="total"
       >
       </el-pagination>
       <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
-            </el-pagination> -->
+      </el-pagination> -->
     </div>
-    <ContractChannelRegister ref="register" @search="searchTarget" />
-    <ContractPoster ref="poster" @search="searchTarget" />
-    <ContractTopUp ref="topUp" @search="searchTarget" />
-
-    <el-dialog title="查看" :visible.sync="centerDialogVisible" width="60%" center>
-      <div>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">员工</div>
-              <div class="user_out_subNext">
-                {{ detailObj.staffName }}
-              </div>
+    <PlanRegister ref="register" @search="searchTarget" />
+    <el-dialog
+      class="dig_update"
+      :visible.sync="centerDialogVisible"
+      width="40%"
+      center
+      style="border-radius: 40px"
+    >
+      <div slot="title">
+        <div class="demo-ruleForm">
+          <p class="dig_title">详情</p>
+          <div class="user_out">
+            <div class="user_out_sub">姓名</div>
+            <div class="user_out_subNext">
+              {{ view.name }}
             </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">标题</div>
-              <div class="user_out_subNext">
-                {{ detailObj.title }}
-              </div>
+          </div>
+          <div class="user_out">
+            <div class="user_out_sub">学号</div>
+            <div class="user_out_subNext">
+              {{ view.studentNumber }}
             </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">订单号</div>
-              <div class="user_out_subNext">
-                {{ detailObj.orderNo }}
-              </div>
+          </div>
+          <div class="user_out">
+            <div class="user_out_sub">性别</div>
+            <div class="user_out_subNext">
+              {{ view.sex }}
             </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">有效期：天</div>
-              <div class="user_out_subNext">
-                {{ detailObj.effectiveDays }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.times }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">金额</div>
-              <div class="user_out_subNext">
-                {{ detailObj.amount }}
-              </div>
-            </div>
-          </el-col>
-       
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">状态</div>
-              <div class="user_out_subNext">
-                {{ detailObj.status == "1" ? "已完成" : "待使用" }}
-              </div>
+          </div>
+          <div class="user_out">
+            <div class="user_out_sub">组织架构</div>
+            <div class="user_out_subNext">
+              {{ view.orgName }}
             </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">生成时间</div>
-              <div class="user_out_subNext">
-                {{ detailObj.createDate }}
-              </div>
-            </div>
-          </el-col>
-  
-        </el-row>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      class="dig_update"
+      :visible.sync="resetVisible"
+      width="30%"
+      center
+      style="border-radius: 40px"
+    >
+      <div slot="title">
+        <div class="demo-ruleForm">
+          <p v-show="!isDelete" class="dig_title">重置密码</p>
+          <p v-show="isDelete" class="dig_title">删除用户</p>
+          <p v-show="!isDelete">重置密码后密码为123456</p>
+          <p v-show="isDelete">确认将删除{{ userName }}用户?</p>
+          <div class="dig_button">
+            <el-button type="info" round @click="cancle()">取消</el-button>
+            <!-- <el-button type="success" round @click="submitForm('ruleForm')"
+                >提交</el-button
+              > -->
+            <el-button type="success" round @click="submitCom()">确定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+      class="dig_update"
+      :visible.sync="fileVisible"
+      width="40%"
+      center
+      style="border-radius: 40px"
+    >
+      <div slot="title">
+        <div class="demo-ruleForm">
+          <p v-show="!isDelete" class="dig_title">批量导入</p>
+
+          <el-upload
+            class="upload-demo"
+            drag
+            :action="basePath + '/user/userImport'"
+            :on-success="fileSuccess"
+            :on-error="fileError"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">建议文件不超过500kb</div>
+          </el-upload>
+          <a
+            style="
+              display: flex;
+              margin-top: 20px;
+              margin-bottom: 20px;
+              color: #409eff;
+              cursor: pointer;
+            "
+            :href="basePath + '/user/templateDownload'"
+          >
+            下载模版
+          </a>
+          <!-- <div class="dig_button">
+            <el-button type="info" round @click="cancle()">取消</el-button>
+     
+            <el-button type="success" round @click="submitCom()">确定</el-button>
+          </div> -->
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -214,18 +224,39 @@
 
 <script>
 import { oSessionStorage } from "../../../utils/utils";
-import contractChannelRegister from "../../../components/ContractChannelRegister.vue";
-
-import contractPoster from "../../../components/ContractPoster.vue";
-import contractTopUp from "../../../components/ContractTopUp.vue";
+import planRegister from "../../../components/PlanRegister.vue";
+import { basePath } from "../../../utils/http";
 export default {
-  name: "channelManagement",
+  name: "userManage",
   components: {
-    ContractChannelRegister: contractChannelRegister,
-    ContractPoster: contractPoster,
+    PlanRegister: planRegister,
   },
   data() {
     return {
+      basePath: basePath,
+      //上传文件的弹出款的标志
+      fileVisible: false,
+      //判断点击的是重置密码还是点击删除
+      isDelete: false,
+      //重置密码需要调用个userId
+      userId: "",
+      //充值密码使用userName
+      userName: "",
+      //重置密码弹出框
+      resetVisible: false,
+      //根据名称搜索
+      name: "",
+      //搜索的用户编号
+      studentNumber: "",
+      //搜索的组织架构
+      // 搜索需要的性别
+      sex: "",
+
+      group: "",
+      ppData: [],
+      groupData: [],
+
+
       centerDialogVisible: false,
       editUserFlag: false,
       startTime: "",
@@ -237,51 +268,36 @@ export default {
       keyword: "",
       tableData: [],
       userInfo: {}, //用户信息
-      userId: "", //用户id
-      name: "", //根据名称搜索
-      userName: "", //根据昵称搜索
-      hospitalOrDepartment: "", //医院科室
 
       invitationCode: "",
       roleType: "0",
       type: 0,
       view: {
         name: "",
-        userName: "",
-        channelId: "",
-        role: "",
+        studentNumber: "",
+        sex: "",
+        orgName: "",
       },
-      detailObj: {},
       channel: "",
       channelList: [{ name: "渠道天成", id: "1" }],
+      options: [{
+          value: '1',
+          label: '未开始'
+        }, {
+          value: '2',
+          label: '进行中'
+        }, {
+          value: '3',
+          label: '已完成'
+        }],
+        planStatus:''
     };
   },
   created() {},
   mounted() {
     this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
-    console.log(this.userInfo);
 
-    if (this.userInfo.type == "1") {
-      this.channel = "";
-    } else if (this.userInfo.type == "0") {
-      this.channel = this.userInfo.channelId;
-    }
-    this.invitationCode = this.userInfo.invitationCode;
     this.getChannel();
-    //判断是超级管理员吗
-    if (this.userInfo.roleType == "1") {
-      this.type = 0;
-    } else if (this.userInfo.roleType == "3") {
-      //如果登录的是代理用户
-      this.type = 4;
-    } else if (this.userInfo.roleType == "2") {
-      this.type = 5;
-    }
-
-    if (this.$route.query.invitationCode) {
-      this.invitationCode = this.$route.query.invitationCode;
-      this.type = this.$route.query.type;
-    }
     if (!this.userInfo) {
       //如果用户信息不存在跳转登陆页
       this.$router.push({ path: "/" });
@@ -289,114 +305,179 @@ export default {
     this.searchTarget();
   },
   methods: {
-    //查看记录
-    viewRecord(row){
-        this.$router.push({path:'/manage/recordList',query:{id:row.id}})
-
+    //文件上传成功
+    fileSuccess(res) {
+      if (res.code == 200) {
+        this.searchTarget();
+        this.$message({
+          message: res.msg,
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: res.msg,
+          type: "error",
+        });
+      }
+      //查询列表
     },
-    //充值次数
-    topUpCount(row) {
-      // console.log(this.$refs.topUp)
-      this.$refs.topUp.open(row.id);
+    //文件上传失败
+    fileError() {
+      this.$message({
+        message: "上传失败",
+        type: "error",
+      });
     },
-    //查看海报
-    viewPoster(row) {
-      this.$refs.poster.open(row);
+    cancle() {
+      this.resetVisible = false;
     },
-    //格式化自定义首尾页
-    formatterSelfPage(row) {
-      if (row.selfPage == "0") {
-        return "否";
+    //提交文本
+    submitCom() {
+      //判断当前是否是
+      if (this.isDelete) {
+        this.deleteUser();
+        //调用删除方法
       } else {
-        return "是";
+        this.resetFun();
+        // 调用重置密码方法
       }
     },
-    //获取渠道信息
+    //性别---
+    genderFun(val) {
+      let sex = val.gender;
+      if (sex == "1") {
+        return "男";
+      } else if (sex == "0") {
+        return "女";
+      } else {
+        return sex;
+      }
+    },
+    //每页多少条
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      //将首页重置为1时---且总条数变化
+      //设置为当前总条数
+    },
+    //获取组织架构方法--------------------开始-----------------------
     getChannel() {
-      this.$http.get(`/channel/findAll`, {}, (res) => {
+      this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
         //  this.$toast.success({message:'成功'});
         if (res && res.code == 200) {
           //将值赋值给list
-          this.channelList = res.data;
+          if (res.data.length > 0) {
+            let resAdd = this.addPro(res.data);
+            this.ppData = JSON.parse(JSON.stringify(resAdd));
+            let forRes = this.arrToTree(resAdd);
+            // console.log('格式化的结构')
+            // console.log(forRes)
+            let resultRes = this.deleteChildren(forRes);
+            console.log("格式化的结构且去掉children");
+            console.log(resultRes);
+            this.groupData = resultRes;
+          } else {
+            this.groupData = [];
+          }
+          // this.channelList = res.data;
         } else {
           this.$message.error(res.msg);
         }
       });
     },
-    //员工管理
-    userManage(row) {
-      this.$router.push({ path: "/manage/staff", query: { channelId: row.id } });
+    //z增加
+    addPro(val) {
+      let data = JSON.parse(JSON.stringify(val));
+      for (let i = 0; i < val.length; i++) {
+        data[i].value = val[i].orgNo;
+        data[i].label = val[i].orgName;
+      }
+      return data;
     },
-    //格式化状态
-    formatterStatus(row) {
-      if (row.status == "1") {
-        return "已完成";
-      } else if (row.status == "0") {
-        return "未使用";
-      } else {
-        return "";
+    //非递归方式：将平铺数据转换为树形结构数据
+    arrToTree(arr) {
+      let data = arr.filter((item) => {
+        item.children = arr.filter((e) => {
+          return item.orgNo === e.parentOrgNo;
+        });
+        return !item.parentOrgNo;
+      });
+      return data;
+    },
+    //去除转换树形结构数据后存在的空children
+    deleteChildren(arr) {
+      let childs = arr;
+      for (let i = childs.length; i--; i > 0) {
+        if (childs[i].children) {
+          if (childs[i].children.length) {
+            this.deleteChildren(childs[i].children);
+          } else {
+            delete childs[i].children;
+          }
+        }
       }
+      return arr;
     },
+    //获取组织架构方法--------------------结束-----------------------
     formatterDelete(row) {
-      if (row.isDelete == 0) {
-        return "正常";
-      } else {
+      if (row.state == 0) {
         return "已删除";
+      } else {
+        return "正常";
       }
     },
-    resetUser(index, val) {
-      console.log(val);
-      this.$http.get(`/user/reset/${val.id}`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          this.$message.success("重置成功");
-          this.searchTarget();
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
+    resetUser(flag, val) {
+      this.resetVisible = true;
+      this.isDelete = flag;
+      this.userId = val.id;
+      this.userName = val.userName;
+      //当前用户id
+
       //重置密码
     },
     editUser(row) {
       this.editRegisterUser(row);
     },
     viewUser(row) {
-      this.detailObj = row;
+      this.view.name = row.userName;
+      this.view.studentNumber = row.userNo;
+      this.view.sex = row.gender == "0" ? "女" : "男";
+      this.view.orgName = row.orgName;
       this.centerDialogVisible = true;
     },
-    addUser() {
+    addPlan() {
       this.addRegisterUser(true);
     },
     clearSearch() {
-      this.channel = "";
+      this.planName = "";
+      //搜索的用户编号
+      this.planStatus = "";
       this.searchTarget();
     },
-    formatterRole(val) {
-      if (val.type == "1") {
-        return "超级管理员";
-      } else {
-        return "渠道用户";
-      }
-    },
 
-    forma(val) {
-      if (val.gender == "0") {
-        return "男";
-      } else {
-        return "女";
-      }
-    },
     addRegisterUser(val) {
       this.$refs.register.open(val);
     },
     editRegisterUser(val) {
       this.$refs.register.edit(val);
     },
-    deleteChannel(index, row) {
-      this.$http.delete(`/sign/delete/${row.id}`, {}, (res) => {
+    resetFun() {
+      this.$http.get(`/user/resetPassword?userId=${this.userId}`, {}, (res) => {
+        //  this.$toast.success({message:'成功'});
+        if (res && res.code == 200) {
+          this.resetVisible = false;
+          this.$message.success("重置成功");
+          this.searchTarget();
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    deleteUser() {
+      this.$http.get(`/user/delete?userId=${this.userId}`, {}, (res) => {
         //  this.$toast.success({message:'成功'});
         if (res && res.code == 200) {
           this.$message.success("删除成功");
+          this.resetVisible = false;
           this.searchTarget();
         } else {
           this.$message.error("删除失败");
@@ -410,26 +491,15 @@ export default {
     },
     //根据现有情况进行搜索
     searchList() {
-      //  let url =``
-      let data = {};
-      if (this.channel == "" || this.channel == null) {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-        };
-      } else {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-          channelId: this.channel,
-        };
-      }
-      this.$http.post(`/link/find`, data, (res) => {
-        // console.log(res,'用户测试记录')
+      let url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${
+        this.pageNum
+      }${this.name == "" ? "" : `&userName=${this.name}`}${
+        this.planStatus == "" ? "" : `&planStatus=${this.planStatus}`
+      }`;
+      this.$http.get(url, {}, (res) => {
+        console.log(res);
         if (res && res.code == 200) {
-           
           this.tableData = res.data.content;
-          console.log(this.tableData)
           this.total = res.data.totalElements;
         } else {
           // this.$toast.fail(res.msg);
@@ -455,36 +525,28 @@ export default {
       oSessionStorage.removeItem("token");
       this.$router.push({ path: "/" });
     },
-    //点击日历获取日期
-    getDate(param) {
-      // console.log(param,"日期。。。")
-      this.userRecord(param.dateStr);
-    },
+
     //点击获取月出勤次数
     getTimes(param) {
       this.monthTimes = param;
     },
-    // 用户测试记录显示
-    userRecord(date) {
-      this.$http.get(
-        `gameRecord/findListByUserIdAndDate/${this.userId}/${date}`,
-        {},
-        (res) => {
-          // console.log(res,'用户测试记录')
-          if (res && res.code == 200) {
-            this.listData = res.data;
-          } else {
-            this.$toast.fail(res.msg);
-          }
-        }
-      );
-    },
   },
 };
 </script>
 
 <style lang="less" scoped>
 @import "../../../styles/theme.less";
+.pag_class {
+  text-align: end;
+}
+
+.pag_class /deep/.el-input__inner {
+  width: 100% !important;
+}
+.pag_class /deep/.el-pagination--small span:not([class*="suffix"]) {
+  height: 22px;
+  line-height: 28px !important;
+}
 
 .record-warp {
   width: 100%;
@@ -542,4 +604,90 @@ export default {
   padding-left: 10px;
   flex: 3;
 }
+.detail_button_out {
+  display: flex;
+  justify-content: space-around;
+  .detail_button {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    letter-spacing: 2px;
+    img {
+      width: 15px;
+      margin-right: 5px;
+    }
+    span {
+      color: #00bf78;
+      // font-weight: 600;
+    }
+  }
+}
+
+//弹出框样式
+
+.dig_update /deep/.el-cascader {
+  position: relative;
+  font-size: 14px;
+  line-height: 40px;
+  width: 100%;
+}
+.dig_update /deep/.el-dialog {
+  box-shadow: none !important;
+  background: transparent !important;
+}
+.demo-ruleForm /deep/ .el-form-item {
+  margin-right: 10px;
+  vertical-align: top;
+  display: flex !important;
+  flex-direction: column;
+}
+.demo-ruleForm /deep/.el-dialog__header {
+  background-color: #ffffff;
+  padding-left: 140px !important;
+}
+.demo-ruleForm /deep/.el-form-item__label {
+  text-align: left;
+  vertical-align: middle;
+  float: left;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.demo-ruleForm /deep/.el-input {
+  width: 100% !important;
+}
+
+.demo-ruleForm /deep/.el-input__inner {
+  width: 100% !important;
+  background-color: #f7f7f7;
+  border: 0px;
+}
+
+.dig_button {
+  margin-top: 40px;
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.demo-ruleForm {
+  background-color: #ffffff;
+  // border-radius: 20px;
+  margin-right: -10px;
+  margin-top: -10px;
+  padding-right: 100px;
+  padding-left: 100px;
+  border-radius: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  .dig_title {
+    margin-bottom: 30px;
+    text-align: center;
+    font-weight: 700;
+  }
+}
 </style>

src/views/manage/channelInfo/orderSettlement.vue

@@ -1,595 +1,317 @@
 <template>
-  <div class="record-warp">
-    <div class="record-main">
-      <!-- <el-row>
-          <el-col :span="24">
-            <div class="search-head">
-              <span>渠道：</span>
-              <el-select v-model="channel" placeholder="请选择渠道">
-                <el-option
-                  :label="item.name"
-                  :value="item.id"
-                  v-for="item in channelList"
-                  :key="item.id"
-                ></el-option> </el-select
-              >&nbsp;&nbsp;&nbsp;&nbsp;
-              <el-button type="primary" icon="el-icon-search" @click="searchTarget"
-                >搜索</el-button
-              >
-              <el-button type="primary" icon="el-icon-delete-solid" @click="clearSearch"
-                >清空</el-button
-              >
-            </div>
-          </el-col>
-        </el-row> -->
-      <!-- <el-row class="add_user_class">
-          <el-col :span="24">
-            <div class="search-head">
-              <el-button type="primary" icon="el-icon-plus" @click="addUser"
-                >新增</el-button
-              >
-            </div>
-          </el-col>
-        </el-row> -->
-
-      <div class="table-content">
-        <el-table
-          :data="tableData"
-          :row-style="{ height: '0px' }"
-          :cell-style="{ padding: '5px' }"
-        >
-          <el-table-column prop="channelName" label="渠道" align="center" width="">
-          </el-table-column>
-          <el-table-column prop="title" label="标题" align="center" width="">
-          </el-table-column>
-          <el-table-column prop="amount" label="金额" align="center" width="">
-          </el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            align="center"
-            width=""
-            :formatter="formatterOrder"
-          >
-          </el-table-column>
-          <!-- <el-table-column
-            prop="rechargeCount"
-            label="累计充值次数"
-            align="center"
-            width=""
-          >
-          </el-table-column> -->
-          <el-table-column
-            prop="type"
-            label="类型"
-            align="center"
-            width=""
-            :formatter="formatterType"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="effectiveDate"
-            label="订单日期起"
-            align="center"
-            width=""
-          >
-          </el-table-column>
-          <el-table-column
-            prop="expirationDate"
-            label="订单日期止"
-            align="center"
-            width=""
-          >
-          </el-table-column>
-
-          <el-table-column prop="createDate" label="创建时间" align="center" width="">
-          </el-table-column>
-
-          <!-- <el-table-column
-            prop="status"
-            label="状态"
-            align="center"
-            :formatter="formatterStatus"
-            width=""
-          >
-          </el-table-column>
-          <el-table-column prop="remarks" label="备注" align="center" width="">
-          </el-table-column> -->
-          <!-- <el-table-column
-              prop="selfPage"
-              label="自定义首尾页"
-              align="center"
-              :formatter="formatterSelfPage"
-              width=""
-            >
-            </el-table-column> -->
-          <!-- <el-table-column prop="isDelete" label="删除状态" align="center" :formatter="formatterDelete" width="">
-                        </el-table-column> -->
-          <!-- <el-table-column label="操作" width="200px" align="center" fixed="right">
-            <template slot-scope="scope">
-              <el-button
-                @click="viewUser(scope.row)"
-                v-if="scope.row.state != 0"
-                type="text"
-                size="small"
-                >查看</el-button
-              >
-              <el-button
-                type="text"
-                size="small"
-                v-if="scope.row.state != 0"
-                @click="editUser(scope.row)"
-                >编辑</el-button
-              >
-              <el-button
-                type="text"
-                size="small"
-                v-if="scope.row.state != 0"
-                @click="viewPoster(scope.row)"
-                >查看海报</el-button
-              >
-            </template>
-          </el-table-column> -->
-        </el-table>
+  <div style="overflow: auto; width: 100%">
+    <TreeChart
+      :json="treeData"
+      :class="{ landscape: isVertical }"
+      :isDetail="isDetail"
+      @add="addStock"
+      @delete="deleteStock"
+    />
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      width="500px"
+    >
+      <div class="tips">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+          <el-form-item label="组织名称" prop="orgName">
+            <el-input
+              placeholder="输入组织名称"
+              :maxlength="32"
+              v-model="ruleForm.orgName"
+            ></el-input>
+          </el-form-item>
+        </el-form>
       </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="tip-left">
+          <el-button type="info" @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirm">确定</el-button>
+        </div>
+      </span>
+    </el-dialog>
 
-      <el-pagination
-        small
-        background
-        @current-change="handleCurrentChange"
-        :current-page.sync="pageNum"
-        layout="total, prev, pager, next"
-        :page-size="pageSize"
-        :total="total"
-      >
-      </el-pagination>
-      <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
-            </el-pagination> -->
-    </div>
-    <ContractChannelRegister ref="register" @search="searchTarget" />
-    <ContractPoster ref="poster" @search="searchTarget" />
-    <ContractTopUp ref="topUp" @search="searchTarget" />
-
-    <el-dialog title="查看" :visible.sync="centerDialogVisible" width="60%" center>
-      <div>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">已使用次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.used }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">单次价格</div>
-              <div class="user_out_subNext">
-                {{ detailObj.singlePrice }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">充值使用次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.rechargeUsed }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">剩余次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.unuse }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">累计充值次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.rechargeCount }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">签约单次金额</div>
-              <div class="user_out_subNext">
-                {{ detailObj.signAmount }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">有效时间起</div>
-              <div class="user_out_subNext">
-                {{ detailObj.effectiveDate }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">有效时间止</div>
-              <div class="user_out_subNext">
-                {{ detailObj.expirationDate }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">状态</div>
-              <div class="user_out_subNext">
-                {{ detailObj.status == "1" ? "签约" : "解约" }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">备注</div>
-              <div class="user_out_subNext">
-                {{ detailObj.remarks }}
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub" style="height: 200px">海报背景图</div>
-              <div class="user_out_subNext">
-                <el-image
-                  :src="detailObj.background"
-                  style="width: 150px; height: 150px"
-                />
-              </div>
-            </div>
-          </el-col>
-        </el-row>
+    <!-- 删除提示弹框 -->
+    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
+      <div class="tips">
+        <p style="text-align: left">确定删除该组织信息?</p>
       </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="tip-left">
+          <el-button type="info" @click="dialogVisible2 = false">取消</el-button>
+          <el-button type="primary" @click="confimdelete">确定</el-button>
+        </div>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { oSessionStorage } from "../../../utils/utils";
-import contractChannelRegister from "../../../components/ContractChannelRegister.vue";
+import TreeChart from "@/components/TreeData";
+import { Loading } from "element-ui";
 
-import contractPoster from "../../../components/ContractPoster.vue";
-import contractTopUp from "../../../components/ContractTopUp.vue";
 export default {
-  name: "channelManagement",
+  name: "tree",
   components: {
-    ContractChannelRegister: contractChannelRegister,
-    ContractPoster: contractPoster,
+    TreeChart,
   },
   data() {
     return {
-      centerDialogVisible: false,
-      editUserFlag: false,
-      startTime: "",
-      endTime: "",
-      value1: null,
-      total: 0,
-      pageSize: 10,
-      pageNum: 1,
-      keyword: "",
-      tableData: [],
-      userInfo: {}, //用户信息
-      userId: "", //用户id
-      name: "", //根据名称搜索
-      userName: "", //根据昵称搜索
-      hospitalOrDepartment: "", //医院科室
+      group: "",
+      ppData: [],
+      groupData: [],
 
-      invitationCode: "",
-      roleType: "0",
-      type: 0,
-      view: {
-        name: "",
-        userName: "",
-        channelId: "",
-        role: "",
+      treeData: {
+        //公司名称
+        orgName: "大米科技公司",
+        proportionShares: "100",
+        //公司层级
+        level: 2,
+        //公司编号
+        orgNo: 1,
+      },
+      isVertical: false, // 是否是竖方向,只给最外层的添加
+      isDetail: false, // 是否是详情,不可编辑操作
+      dialogVisible: false, // 添加股东弹框
+      dialogVisible2: false, // 删除提示弹框
+      //当前取到的对象
+      currentSelectObj: {},
+      //输入表单的对象
+      ruleForm: {
+        orgName: "",
       },
-      detailObj: {},
-      channel: "",
-      channelList: [{ name: "渠道天成", id: "1" }],
+      rules: {
+        orgName: [{ required: true, message: "请输入组织名称", trigger: "blur" }],
+      },
+      shareholderTypeOptions: [
+        {
+          labelEn: "Individual",
+          labelZh: "个人",
+          value: 1,
+        },
+        {
+          labelEn: "Company",
+          labelZh: "公司",
+          value: 2,
+        },
+        {
+          labelEn: "Other",
+          labelZh: "其他",
+          value: 3,
+        },
+      ], // 股东类型
+      lastId: 11, // 最后一级id
+      currentTreeData: {},
     };
   },
-  created() {},
   mounted() {
-    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
-    console.log(this.userInfo);
-
-    if (this.userInfo.type == "1") {
-      this.channel = "";
-    } else if (this.userInfo.type == "0") {
-      this.channel = this.userInfo.channelId;
-    }
-    // this.invitationCode = this.userInfo.invitationCode;
     this.getChannel();
-    //判断是超级管理员吗
-    // if (this.userInfo.roleType == "1") {
-    //   this.type = 0;
-    // } else if (this.userInfo.roleType == "3") {
-    //   //如果登录的是代理用户
-    //   this.type = 4;
-    // } else if (this.userInfo.roleType == "2") {
-    //   this.type = 5;
-    // }
-
-    // if (this.$route.query.invitationCode) {
-    //   this.invitationCode = this.$route.query.invitationCode;
-    //   this.type = this.$route.query.type;
-    // }
-    if (!this.userInfo) {
-      //如果用户信息不存在跳转登陆页
-      this.$router.push({ path: "/" });
-    }
-    this.searchTarget();
   },
   methods: {
-    //格式化类型
-    formatterType(row) {
-      if (row.type == "1") {
-        return "次卡支付";
-      } else if (row.type == "2") {
-        return "时效卡";
-      } else if (row.type == "3") {
-        return "渠道推荐支付";
-      }
-    },
-    formatterOrder(row) {
-      if (row.status == "1") {
-        return "已结算";
-      } else {
-        return "待结算";
-      }
-    },
-    //充值次数
-    topUpCount(row) {
-      // console.log(this.$refs.topUp)
-      this.$refs.topUp.open(row.id);
-    },
-    //查看海报
-    viewPoster(row) {
-      this.$refs.poster.open(row);
-    },
-    //格式化自定义首尾页
-    formatterSelfPage(row) {
-      if (row.selfPage == "0") {
-        return "否";
-      } else {
-        return "是";
-      }
-    },
-    //获取渠道信息
+    //获取组织架构方法--------------------开始-----------------------
     getChannel() {
-      this.$http.get(`/channel/findAll`, {}, (res) => {
+      this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
         //  this.$toast.success({message:'成功'});
         if (res && res.code == 200) {
           //将值赋值给list
-          this.channelList = res.data;
+          if (res.data.length > 0) {
+            let resAdd = this.addPro(res.data);
+            this.ppData = JSON.parse(JSON.stringify(resAdd));
+            let forRes = this.arrToTree(resAdd);
+            // console.log('格式化的结构')
+            // console.log(forRes)
+            let resultRes = this.deleteChildren(forRes);
+
+            let levelList = this.markersFun(resultRes, 1);
+            console.log("格式化的结构且去掉children");
+            // console.log(JSON.stringify(levelList));
+            this.treeData = levelList[0];
+            console.log(levelList[0]);
+          } else {
+            this.groupData = [];
+          }
+          // this.channelList = res.data;
         } else {
           this.$message.error(res.msg);
         }
       });
     },
-    //员工管理
-    userManage(row) {
-      this.$router.push({ path: "/manage/staff", query: { channelId: row.id } });
-    },
-    //格式化状态
-    formatterStatus(row) {
-      if (row.status == "1") {
-        return "签约";
-      } else if (row.status == "0") {
-        return "解约";
-      } else {
-        return "";
-      }
-    },
-    formatterDelete(row) {
-      if (row.isDelete == 0) {
-        return "正常";
-      } else {
-        return "已删除";
+    //z增加
+    addPro(val) {
+      let data = JSON.parse(JSON.stringify(val));
+      for (let i = 0; i < val.length; i++) {
+        data[i].value = val[i].orgNo;
+        data[i].label = val[i].orgName;
       }
+      return data;
     },
-    resetUser(index, val) {
-      console.log(val);
-      this.$http.get(`/user/reset/${val.id}`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          this.$message.success("重置成功");
-          this.searchTarget();
-        } else {
-          this.$message.error(res.msg);
-        }
+    //非递归方式：将平铺数据转换为树形结构数据
+    arrToTree(arr) {
+      let data = arr.filter((item) => {
+        item.children = arr.filter((e) => {
+          return item.orgNo === e.parentOrgNo;
+        });
+        return !item.parentOrgNo;
       });
-      //重置密码
+      return data;
     },
-    editUser(row) {
-      this.editRegisterUser(row);
-    },
-    viewUser(row) {
-      this.detailObj = row;
-      this.centerDialogVisible = true;
-    },
-    addUser() {
-      this.addRegisterUser(true);
-    },
-    clearSearch() {
-      this.channel = "";
-      this.searchTarget();
-    },
-    formatterRole(val) {
-      if (val.type == "1") {
-        return "超级管理员";
-      } else {
-        return "渠道用户";
+    //去除转换树形结构数据后存在的空children
+    deleteChildren(arr) {
+      let childs = arr;
+      for (let i = childs.length; i--; i > 0) {
+        if (childs[i].children) {
+          if (childs[i].children.length) {
+            this.deleteChildren(childs[i].children);
+          } else {
+            delete childs[i].children;
+          }
+        }
       }
+      return arr;
     },
 
-    forma(val) {
-      if (val.gender == "0") {
-        return "男";
-      } else {
-        return "女";
+    //标记层级
+    markersFun(arr, level) {
+      if (!arr || !arr.length) {
+        return;
       }
+      arr.forEach((item) => {
+        item.level = level;
+        if (item.children && item.children.length) {
+          //
+          this.markersFun(item.children, level + 1);
+        }
+      });
+      return arr;
     },
-    addRegisterUser(val) {
-      this.$refs.register.open(val);
+    //获取组织架构方法--------------------结束-----------------------
+
+    // 新增编辑股东,val: 0 新增, 1 编辑
+    addStock(data) {
+      console.log(data);
+      this.currentSelectObj = data.data;
+      // console.log(this.currentSelectObj);
+      if (data.val) {
+        // 不使用=赋值,内存相同,改变后,treeData数据也会改变
+        // this.ruleForm = data.data;
+        // this.ruleForm = Object.assign(this.ruleForm, data.data);
+        // this.ruleForm.type = data.data.level;
+      }
+      this.isEdit = data.val;
+      // 使用=赋值,编辑时改变currentTreeData, 源数据treeData也会改变
+      this.currentTreeData = data.data;
+      this.dialogVisible = true;
     },
-    editRegisterUser(val) {
-      this.$refs.register.edit(val);
+    // 删除
+    deleteStock(data) {
+      this.currentSelectObj = data;
+      console.log(this.currentSelectObj);
+      debugger;
+
+      this.dialogVisible2 = true;
     },
-    deleteChannel(index, row) {
-      this.$http.delete(`/sign/delete/${row.id}`, {}, (res) => {
+    // 确定删除
+    confimdelete() {
+      // 前端删除 遍历原数据,删除匹配id数据
+      this.$http.get(`/org/deleteOrgById?id=${this.currentSelectObj.id}`, {}, (res) => {
         //  this.$toast.success({message:'成功'});
         if (res && res.code == 200) {
-          this.$message.success("删除成功");
-          this.searchTarget();
+          //将值赋值给list
+          //调用查询全部的
+          this.getChannel();
+          this.$message.success(res.msg);
+          // this.channelList = res.data;
         } else {
-          this.$message.error("删除失败");
+          this.$message.error(res.msg);
         }
       });
+      this.dialogVisible2 = false;
     },
 
-    handleCurrentChange(val) {
-      this.pageNum = val;
-      this.searchList();
-    },
-    //根据现有情况进行搜索
-    searchList() {
-      //  let url =``
-      let data = {};
-      if (this.channel == "" || this.channel == null) {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-        };
-      } else {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-          channelId: this.channel,
-        };
-      }
-      this.$http.post(`/order/find`, data, (res) => {
-        // console.log(res,'用户测试记录')
-        if (res && res.code == 200) {
-          this.tableData = res.data.data;
-          this.total = res.data.totalElements;
+    // 保存添加股东
+    confirm() {
+      // let loading = Loading.service();
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.sendData();
         } else {
-          // this.$toast.fail(res.msg);
-          this.$message.error(res.msg);
+          // loading.close();
         }
       });
     },
-    searchTarget() {
-      this.pageNum = 1;
-      this.searchList();
-    },
-    //跳转首页
-    goHome() {
-      this.$router.push({ path: "/home" });
-    },
-    //跳转记录页
-    goRecord() {
-      this.$router.push({ path: "/record" });
-    },
-    //退出登陆
-    logout() {
-      oSessionStorage.removeItem("userInfo");
-      oSessionStorage.removeItem("token");
-      this.$router.push({ path: "/" });
-    },
-    //点击日历获取日期
-    getDate(param) {
-      // console.log(param,"日期。。。")
-      this.userRecord(param.dateStr);
-    },
-    //点击获取月出勤次数
-    getTimes(param) {
-      this.monthTimes = param;
-    },
-    // 用户测试记录显示
-    userRecord(date) {
-      this.$http.get(
-        `gameRecord/findListByUserIdAndDate/${this.userId}/${date}`,
-        {},
-        (res) => {
-          // console.log(res,'用户测试记录')
+
+    // 发送添加股东数据
+    sendData() {
+      // let loading = Loading.service();
+
+      if (this.isEdit) {
+        // 编辑
+        // data.id = this.treeData.id;
+        //将参数调用接口
+        this.currentSelectObj.orgName = this.ruleForm.orgName;
+        this.$http.post(`/org/addOrUpdateOrg`, this.currentSelectObj, (res) => {
+          //  this.$toast.success({message:'成功'});
           if (res && res.code == 200) {
-            this.listData = res.data;
+            //将值赋值给list
+            //调用查询全部的
+            this.getChannel();
+            this.$message.success(res.msg);
+            // this.channelList = res.data;
           } else {
-            this.$toast.fail(res.msg);
+            this.$message.error(res.msg);
           }
-        }
-      );
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-@import "../../../styles/theme.less";
+        });
 
-.record-warp {
-  width: 100%;
-  height: 80vh;
-  //background: url(../../assets/img/index/19.png) no-repeat center;
-  //background-size: 100% 100%;
-  position: relative;
-
-  .record-main {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    overflow-y: auto;
+        // this.clearDialog();
+        // loading.close();
+      } else {
+        let data = {
+          parentOrgNo: this.currentSelectObj.orgNo,
+          orgName: this.ruleForm.orgName,
+        };
+        //将参数调用接口
+        this.$http.post(`/org/addOrUpdateOrg`, data, (res) => {
+          //  this.$toast.success({message:'成功'});
+          if (res && res.code == 200) {
+            //将值赋值给list
+            //调用查询全部的
+            this.getChannel();
+            this.$message.success(res.msg);
+            // this.channelList = res.data;
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+        //新增后接着查询就行了
 
-    .search-head {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
+        // 添加
+        // 前端添加数据,需要自己生成子级id,可以传数据的时候把最后一级id传过来,进行累加
+        // data.id = this.lastId++;
+        // data.partnerCode = this.currentTreeData.id;
+        // data.extend = true;
+        // const render = (formData) => {
+        //   formData.some((item) => {
+        //     if (item.id === this.currentTreeData.id) {
+        //       if (item.children) {
+        //         item.children.push(data);
+        //       } else {
+        //         this.$set(item, "children", [data]);
+        //       }
+        //       return;
+        //     } else if (item.children) {
+        //       render(item.children);
+        //     }
+        //   });
+        // };
+        // let arr = [this.treeData];
+        // render(arr);
+        // this.treeData = arr[0];
 
-      .zc-title {
-        color: #606266;
-        font-size: 14px;
+        // this.clearDialog();
+        // loading.close();
       }
-    }
-
-    .table-content {
-      margin: 10px 0;
-    }
-  }
-}
-
-.add_user_class {
-  margin-top: 10px;
-}
-
-.user_out {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  border: 1px solid #eeeeef;
-  line-height: 50px;
-  margin-top: 10px;
-}
-
-.user_out_sub {
-  flex: 1;
-  background-color: #fafafa;
-  text-align: center;
-  // color:#ffffff
-}
-
-.user_out_subNext {
-  padding-left: 10px;
-  flex: 3;
-}
-</style>
+    },
+  },
+};
+</script>

src/views/manage/manageMain.vue

@@ -78,11 +78,7 @@
         <el-row class="admin-header-content">
           <el-col :span="12">
             <el-row>
-              <!-- <el-col :span="1">
-                  <div class="menu-hide" @click="changeMenu">
-                    <i class="el-icon-s-fold" style="color: #000; font-size: 20px"></i>
-                  </div>
-                </el-col> -->
+
               <el-col :span="10">
                 <div class="main_top_1">
                   <div class="blue">&nbsp;&nbsp;</div>
@@ -109,24 +105,6 @@
               </div>
             </div>
 
-            <!-- <el-menu
-              :default-active="activeIndex"
-              class="el-menu-demo"
-              mode="horizontal"
-              background-color="transparent"
-              text-color="#000"
-              active-text-color="#000"
-            >
-              <el-submenu index="2" class="rightExit">
-                <template slot="title" :size="size" :src="circleUrl">{{
-                  userInfo.userName
-                }}</template>
-
-                <el-menu-item index="2-1" @click="escape()">退出</el-menu-item>
-                <el-menu-item index="2-1" @click="changePwd()">修改密码</el-menu-item>
-              </el-submenu>
-            </el-menu> -->
-
             <vue-qr
               v-show="false"
               :ref="userInfo.name + '-' + userInfo.userNumber"
@@ -207,12 +185,10 @@ import vueQr from "vue-qr";
 import { mapGetters, mapActions } from "vuex";
 import { oSessionStorage } from "@/utils/utils";
 import register from "@/components/Register";
-import Footer from "@/components/Footer";
 export default {
   name: "manageMain",
   components: {
     vueQr,
-    Footer,
   },
   computed: {
     // ...mapGetters(['sacleListName']),
@@ -320,7 +296,7 @@ export default {
           name: "报告分析",
           icon: require("../../assets/menu/plan.png"),
           showItem: true,
-          // path: "/manage/recordListAll",
+          path: "/manage/recordListAll",
           child: [
             {
               id: "41",

src/views/manage/orderManage/orderSettlementManage.vue

@@ -1,585 +1,378 @@
 <template>
-  <div class="record-warp">
-    <!-- <div>正确认结算流程，正在努力开发</div> -->
-    <div class="record-main" v-show="true">
-      <el-row>
-        <el-col :span="24">
-          <div class="search-head">
-            <span>渠道：</span>
-            <el-select @change="changeChannel" v-model="channel" placeholder="请选择渠道">
-              <el-option
-                :label="item.name"
-                :value="item.id"
-                v-for="item in channelList"
-                :key="item.id"
-              ></el-option> </el-select
-            >&nbsp;&nbsp;&nbsp;&nbsp;
-           
-        <span class="margin_search">渠道结清状态：</span>
-        <el-select class="margin_search" v-model="status" placeholder="请选择结清状态">
-          <el-option
-            :label="item.name"
-            :value="item.id"
-            v-for="item in statusList"
-            :key="item.id"
-          ></el-option> </el-select
-        > &nbsp;&nbsp;&nbsp;&nbsp;
-            <el-button type="primary" round icon="el-icon-search" @click="searchTarget"
-              >搜索</el-button
-            >
-            <el-button type="info" style="text-align:right" round icon="el-icon-delete-solid" @click="clearSearch"
-              >清空</el-button
-            >
-            <el-button
-              type="success"
-              class="add_class"
-              icon="el-icon-document-checked"
-              round
-              :disabled="multipleSelection.length==0"
-              @click="squareFun"
-              >结清</el-button
-            >
-          </div>
-        </el-col>
-      </el-row>
-      <div class="table-content">
-        <el-table
-          :data="tableData"
-          :row-style="{ height: '0px' }"
-          :cell-style="{ padding: '5px' }"
-              @selection-change="handleSelectionChange"
-        >
-        <el-table-column type="selection" align="center" width="" show-overflow-tooltip>
-        </el-table-column>
-          <el-table-column prop="channelName" label="渠道" align="center" width="">
-          </el-table-column>
-          <el-table-column prop="title" label="标题" align="center" width="">
-          </el-table-column>
-          <el-table-column prop="amount" label="金额" align="center" width="">
-          </el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            align="center"
-            width=""
-            :formatter="formatterOrder"
-          >
-          </el-table-column>
-          <el-table-column prop="effectiveDate" label="类型" align="center" width="">
-          </el-table-column>
-          <el-table-column
-            prop="expirationDate"
-            label="订单日期起"
-            align="center"
-            width=""
-          >
-          </el-table-column>
-          <el-table-column
-            prop="expirationDate"
-            label="订单日期止"
-            align="center"
-            width=""
-          >
-          </el-table-column>
-
-          <el-table-column prop="createDate" label="创建时间" align="center" width="">
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <el-pagination
-        small
-        background
-        @current-change="handleCurrentChange"
-        :current-page.sync="pageNum"
-        layout="total, prev, pager, next"
-        :page-size="pageSize"
-        :total="total"
-      >
-      </el-pagination>
-      <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
-              </el-pagination> -->
-    </div>
-    <ContractChannelRegister ref="register" @search="searchTarget" />
-    <ContractPoster ref="poster" @search="searchTarget" />
-    <ContractTopUp ref="topUp" @search="searchTarget" />
-
-    <el-dialog title="查看" :visible.sync="centerDialogVisible" width="60%" center>
-      <div>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">已使用次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.used }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">单次价格</div>
-              <div class="user_out_subNext">
-                {{ detailObj.singlePrice }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">充值使用次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.rechargeUsed }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">剩余次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.unuse }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">累计充值次数</div>
-              <div class="user_out_subNext">
-                {{ detailObj.rechargeCount }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">签约单次金额</div>
-              <div class="user_out_subNext">
-                {{ detailObj.signAmount }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">有效时间起</div>
-              <div class="user_out_subNext">
-                {{ detailObj.effectiveDate }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">有效时间止</div>
-              <div class="user_out_subNext">
-                {{ detailObj.expirationDate }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">状态</div>
-              <div class="user_out_subNext">
-                {{ detailObj.status == "1" ? "签约" : "解约" }}
-              </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub">备注</div>
-              <div class="user_out_subNext">
-                {{ detailObj.remarks }}
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="user_out">
-              <div class="user_out_sub" style="height: 200px">海报背景图</div>
-              <div class="user_out_subNext">
-                <el-image
-                  :src="detailObj.background"
-                  style="width: 150px; height: 150px"
-                />
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </el-dialog>
+  <!-- 普通菜单 -->
+  <div class="jsmind_layout">111111
+    <js-mind :values="mind" :options="options" ref="jsMind" height="1000px"></js-mind>
   </div>
 </template>
-
 <script>
-import { oSessionStorage } from "../../../utils/utils";
-import contractChannelRegister from "../../../components/ContractChannelRegister.vue";
+import Vue from 'vue'
+import jm from 'vue-jsmind'
 
-import contractPoster from "../../../components/ContractPoster.vue";
-import contractTopUp from "../../../components/ContractTopUp.vue";
+// require('jsmind/js/jsmind.draggable.js')
+// require('jsmind/js/jsmind.screenshot.js')
 export default {
-  name: "channelManagement",
-  components: {
-    ContractChannelRegister: contractChannelRegister,
-    ContractPoster: contractPoster,
+  props: {
+    showBar: { // 是否显示工具栏，显示启用编辑
+      type: Boolean,
+      default: true
+    },
+    theme: { // 主题
+      type: String,
+      default: 'info'
+    },
+    lineColor: { // 线条颜色
+      type: String,
+      default: 'skyblue'
+    }
   },
   data() {
     return {
-      status:'',
-      centerDialogVisible: false,
-      editUserFlag: false,
-      startTime: "",
-      endTime: "",
-      value1: null,
-      total: 0,
-      pageSize: 10,
-      pageNum: 1,
-      keyword: "",
-      tableData: [],
-      userInfo: {}, //用户信息
-      userId: "", //用户id
-      name: "", //根据名称搜索
-      userName: "", //根据昵称搜索
-      hospitalOrDepartment: "", //医院科室
-
-      invitationCode: "",
-      roleType: "0",
-      type: 0,
-      view: {
-        name: "",
-        userName: "",
-        channelId: "",
-        role: "",
-      },
-      detailObj: {},
-      channel: "",
-      channelList: [{ name: "渠道天成", id: "1" }],
-      multipleSelection:[],
-      statusList: [
-        { name: "已结算", id: "1" },
-        { name: "待结算", id: "0" },
+      mind: {},
+      jm: null,
+      isZoomIn: false,
+      isZoomOut: false,
+      level: 0,
+      nodeOptions: [
+        { value: 1, label: '展开到一级节点' },
+        { value: 2, label: '展开到二级节点' },
+        { value: 3, label: '展开到三级节点' },
+        { value: 0, label: '展开全部节点' },
+        { value: -1, label: '隐藏全部节点' }
+      ],
+      themeOptions: [
+        { value: 'default', label: 'default' },
+        { value: 'primary', label: 'primary' },
+        { value: 'warning', label: 'warning' },
+        { value: 'danger', label: 'danger' },
+        { value: 'success', label: 'success' },
+        { value: 'info', label: 'info' },
+        { value: 'greensea', label: 'greensea' },
+        { value: 'nephrite', label: 'nephrite' },
+        { value: 'belizehole', label: 'belizehole' },
+        { value: 'wisteria', label: 'wisteria' },
+        { value: 'asphalt', label: 'asphalt' },
+        { value: 'orange', label: 'orange' },
+        { value: 'pumpkin', label: 'pumpkin' },
+        { value: 'pomegranate', label: 'pomegranate' },
+        { value: 'clouds', label: 'clouds' },
+        { value: 'asbestos', label: 'asbestos' }
       ],
-    };
+      localTheme: this.theme,
+      dialogVisible: false,
+      nodeOption: {
+        content: '',
+        bgColor: '',
+        fontColor: '',
+        fontSize: '',
+        fontWeight: '',
+        fontStyle: ''
+      }
+    }
+  },
+  created() {
   },
-  created() {},
   mounted() {
-    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
-
-    if (this.userInfo.type == "1") {
-      this.channel = "";
-    } else if (this.userInfo.type == "0") {
-      this.channel = this.userInfo.channelId;
-    }
-    // this.invitationCode = this.userInfo.invitationCode;
-    this.getChannel();
-    //判断是超级管理员吗
-    // if (this.userInfo.roleType == "1") {
-    //   this.type = 0;
-    // } else if (this.userInfo.roleType == "3") {
-    //   //如果登录的是代理用户
-    //   this.type = 4;
-    // } else if (this.userInfo.roleType == "2") {
-    //   this.type = 5;
-    // }
-
-    // if (this.$route.query.invitationCode) {
-    //   this.invitationCode = this.$route.query.invitationCode;
-    //   this.type = this.$route.query.type;
-    // }
-    if (!this.userInfo) {
-      //如果用户信息不存在跳转登陆页
-      this.$router.push({ path: "/" });
-    }
-    this.searchTarget();
+    this.getData()
+    this.mouseWheel()
   },
   methods: {
-    //结算
-    squareFun() {
-      let that = this;
-      let ids = [];
-      
-      for (let i = 0; i < this.multipleSelection.length; i++) {
-        ids.push(this.multipleSelection[i].id);
-      }
-
-      this.$confirm("此操作将结算, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          that.squarePrice(ids);
+    beforeUpload (file) { // 上传文件之前钩子
+      if (file) {
+        jsMind.util.file.read(file, (jsmindData) => {
+          const mind = jsMind.util.json.string2json(jsmindData)
+          if (mind) {
+            this.jm.show(mind)
+            this.$message({ type: 'success', message: '打开成功' })
+          } else {
+            this.prompt_info('不能打开mindmap文件')
+          }
         })
-        .catch(() => {
-          //   this.$message({
-          //     type: 'info',
-          //     message: '已取消删除'
-          //   });
-        });
-
-    },
-    squarePrice(ids) {
-      this.$http.post(`/order/settle`, ids, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          this.$message.success("结算成功");
-          this.searchTarget();
-        } else {
-          this.$message.error("结算失败");
-        }
-      });
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    formatterOrder(row) {
-      if (row.status == "1") {
-        return "已结算";
-      } else {
-        return "待结算";
-      }
-    },
-    //充值次数
-    topUpCount(row) {
-      // console.log(this.$refs.topUp)
-      this.$refs.topUp.open(row.id);
-    },
-    //查看海报
-    viewPoster(row) {
-      this.$refs.poster.open(row);
-    },
-    //格式化自定义首尾页
-    formatterSelfPage(row) {
-      if (row.selfPage == "0") {
-        return "否";
       } else {
-        return "是";
+        this.prompt_info('请先选择文件')
+        return false
       }
     },
-    //获取渠道信息
-    getChannel() {
-      this.$http.get(`/channel/findAll`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          //将值赋值给list
-          this.channelList = res.data;
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
-    },
-    //员工管理
-    userManage(row) {
-      this.$router.push({ path: "/manage/staff", query: { channelId: row.id } });
+    upload() {},
+    getData() {
+      this.$API({
+        name: 'getMind'
+      }).then(res => {
+        this.mind = res.data
+        this.open_empty()
+      }).catch(error => {
+        this.$message.error(error)
+      })
     },
-    //格式化状态
-    formatterStatus(row) {
-      if (row.status == "1") {
-        return "签约";
-      } else if (row.status == "0") {
-        return "解约";
-      } else {
-        return "";
+    open_empty() {
+      const options = {
+        container: 'jsmind_container', // 必选，容器ID
+        editable: this.showBar, // 可选，是否启用编辑
+        theme: this.localTheme, // 可选，主题
+        view: {
+          line_width: 2, // 思维导图线条的粗细
+          line_color: this.lineColor // 思维导图线条的颜色
+        },
+        shortcut: {
+          enable: true // 禁用快捷键
+        },
+        layout: {
+          hspace: 50, // 节点之间的水平间距
+          vspace: 20, // 节点之间的垂直间距
+          pspace: 13 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
+        },
+        mode: 'side' // 显示模式，子节点只分布在根节点右侧
       }
-    },
-    formatterDelete(row) {
-      if (row.isDelete == 0) {
-        return "正常";
-      } else {
-        return "已删除";
+      this.jm = jsMind.show(options, this.mind)
+      // 改变窗口大小重置画布
+      window.onresize = () => {
+        this.jm.resize()
       }
     },
-    resetUser(index, val) {
-      this.$http.get(`/user/reset/${val.id}`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          this.$message.success("重置成功");
-          this.searchTarget();
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
-      //重置密码
+    save_nodearray_file() {
+      const mindData = this.jm.get_data('node_array')
+      const mindName = mindData.meta.name
+      const mindStr = jsMind.util.json.json2string(mindData)
+      jsMind.util.file.save(mindStr, 'text/jsmind', mindName + '.jm')
     },
-    editUser(row) {
-      this.editRegisterUser(row);
+    screen_shot() {
+      this.jm.screenshot.shootDownload()
     },
-    viewUser(row) {
-      this.detailObj = row;
-      this.centerDialogVisible = true;
+    expand_all() {
+      this.jm.expand_all()
     },
-    addUser() {
-      this.addRegisterUser(true);
+    collapse_all() {
+      this.jm.collapse_all()
     },
-    clearSearch() {
-      this.channel = "";
-      this.status = "";
-      this.searchTarget();
+    expand_to_level(num) {
+      switch (num) {
+        case -1:
+          this.collapse_all()
+          break
+        case 0:
+          this.expand_all()
+          break
+        default:
+          this.jm.expand_to_depth(num)
+          break
+      }
     },
-    formatterRole(val) {
-      if (val.type == "1") {
-        return "超级管理员";
+    zoomIn() {
+      if (this.jm.view.zoomIn()) {
+        this.isZoomOut = false
       } else {
-        return "渠道用户";
+        this.isZoomIn = true
       }
     },
-
-    forma(val) {
-      if (val.gender == "0") {
-        return "男";
+    zoomOut() {
+      if (this.jm.view.zoomOut()) {
+        this.isZoomIn = false
       } else {
-        return "女";
+        this.isZoomOut = true
       }
     },
-    addRegisterUser(val) {
-      this.$refs.register.open(val);
+    prompt_info(msg) {
+      this.$message({ type: 'warning', message: msg})
+    },
+    get_nodearray_data() {
+      const mindData = this.jm.get_data('node_array')
+      const mindString = jsMind.util.json.json2string(mindData)
+      this.$message({ type: 'info', message: mindString})
     },
-    editRegisterUser(val) {
-      this.$refs.register.edit(val);
+    set_theme(themeName) {
+      this.jm.set_theme(themeName)
     },
-    deleteChannel(index, row) {
-      this.$http.delete(`/sign/delete/${row.id}`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          this.$message.success("删除成功");
-          this.searchTarget();
+    scrollFunc(e) {
+      e = e || window.event
+      if (e.wheelDelta) {
+        if (e.wheelDelta > 0) {
+          this.zoomIn()
         } else {
-          this.$message.error("删除失败");
+          this.zoomOut()
         }
-      });
-    },
-
-    handleCurrentChange(val) {
-      this.pageNum = val;
-      this.searchList();
-    },
-    //根据现有情况进行搜索
-    searchList() {
-      //  let url =``
-      let data = {};
-      if (this.channel == "" || this.channel == null) {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-          status:this.status,
-        };
-      } else {
-        data = {
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-          channelId: this.channel,
-          status:this.status
-        };
-      }
-      this.$http.post(`/order/find`, data, (res) => {
-        // console.log(res,'用户测试记录')
-        if (res && res.code == 200) {
-          this.tableData = res.data.data;
-          this.total = res.data.totalElements;
+      } else if (e.detail) {
+        if (e.detail > 0) {
+          this.zoomIn()
         } else {
-          // this.$toast.fail(res.msg);
-          this.$message.error(res.msg);
+          this.zoomOut()
         }
-      });
-    },
-    searchTarget() {
-      this.pageNum = 1;
-      this.searchList();
+      }
+      this.jm.resize()
     },
-    //跳转首页
-    goHome() {
-      this.$router.push({ path: "/home" });
+    // 鼠标滚轮放大缩小
+    mouseWheel() {
+      if (document.addEventListener) {
+        document.addEventListener('domMouseScroll', this.scrollFunc, false)
+      }
+      this.$refs.container.onmousewheel = this.scrollFunc
     },
-    //跳转记录页
-    goRecord() {
-      this.$router.push({ path: "/record" });
+    // 新增节点
+    addNode() {
+      let selectedNode = this.jm.get_selected_node()
+      if (!selectedNode) {
+        this.$message({ type: 'warning', message: '请先选择一个节点!'})
+        return
+      }
+      let nodeid = jsMind.util.uuid.newid()
+      let topic = 'new Node'
+      let newNode = this.jm.add_node(selectedNode, nodeid, topic)
+      if (newNode) {
+        this.jm.select_node(nodeid)
+        this.jm.begin_edit(nodeid)
+      }
     },
-    //退出登陆
-    logout() {
-      oSessionStorage.removeItem("userInfo");
-      oSessionStorage.removeItem("token");
-      this.$router.push({ path: "/" });
+    // 新增兄弟节点
+    addBrotherNode() {
+      let selectedNode = this.jm.get_selected_node()
+      if (!selectedNode) {
+        this.$message({ type: 'warning', message: '请先选择一个节点!'})
+        return
+      } else if (selectedNode.isroot) {
+        this.$message({ type: 'warning', message: '不能在根节点添加，请重新选择节点!'})
+        return
+      }
+      let nodeid = jsMind.util.uuid.newid()
+      let topic = 'new Node'
+      let newNode = this.jm.insert_node_after(selectedNode, nodeid, topic)
+      if (newNode) {
+        this.jm.select_node(nodeid)
+        this.jm.begin_edit(nodeid)
+      }
     },
-    //点击日历获取日期
-    getDate(param) {
-      // console.log(param,"日期。。。")
-      this.userRecord(param.dateStr);
+    // 获取选中标签的 ID
+    get_selected_nodeid () {
+      let selectedNode = this.jm.get_selected_node()
+      if (selectedNode) {
+        return selectedNode.id
+      } else {
+        return null
+      }
     },
-    //点击获取月出勤次数
-    getTimes(param) {
-      this.monthTimes = param;
+    // 删除节点
+    removeNode() {
+      let selectedId = this.get_selected_nodeid()
+      if (!selectedId) {
+        this.$message({
+          type: 'warning',
+          message: '请先选择一个节点!'
+        })
+        return
+      }
+      this.jm.remove_node(selectedId)
     },
-    // 用户测试记录显示
-    userRecord(date) {
-      this.$http.get(
-        `gameRecord/findListByUserIdAndDate/${this.userId}/${date}`,
-        {},
-        (res) => {
-          // console.log(res,'用户测试记录')
-          if (res && res.code == 200) {
-            this.listData = res.data;
-          } else {
-            this.$toast.fail(res.msg);
-          }
-        }
-      );
+    // 编辑节点
+    editNode () {
+      let selectedId = this.get_selected_nodeid()
+      if (!selectedId) {
+        this.$message({ type: 'warning', message: '请先选择一个节点!'})
+        return
+      }
+      let nodeObj = this.jm.get_node(selectedId)
+      this.nodeOption.content = nodeObj.topic
+      this.nodeOption.bgColor = nodeObj.data['background-color']
+      this.nodeOption.fontColor = nodeObj.data['foreground-color']
+      this.nodeOption.fontSize = nodeObj.data['font-size']
+      this.nodeOption.fontWeight = nodeObj.data['font-weight']
+      this.nodeOption.fontStyle = nodeObj.data['font-style']
+      this.dialogVisible = true
     },
+    sureEditNode () {
+      let selectedId = this.get_selected_nodeid()
+      this.jm.update_node(selectedId, this.nodeOption.content)
+      this.jm.set_node_font_style(selectedId, this.nodeOption.fontSize, this.nodeOption.fontWeight, this.nodeOption.fontStyle)
+      this.jm.set_node_color(selectedId, this.nodeOption.bgColor, this.nodeOption.fontColor)
+      this.nodeOption = {
+        content: '',
+        bgColor: '',
+        fontColor: '',
+        fontSize: '',
+        fontWeight: '',
+        fontStyle: ''
+      }
+      this.dialogVisible = false
+    }
   },
-};
+  beforeDestroy() {
+    document.removeEventListener('domMouseScroll', this.scrollFunc, false)
+  }
+}
 </script>
 
-<style lang="less" scoped>
-@import "../../../styles/theme.less";
 
-.record-warp {
-  width: 100%;
-  height: 80vh;
-  //background: url(../../assets/img/index/19.png) no-repeat center;
-  //background-size: 100% 100%;
+<style lang="less">
+.jsmind_layout {
   position: relative;
-
-  .record-main {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    overflow-y: auto;
-
-    .search-head {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-
-      .zc-title {
-        color: #606266;
-        font-size: 14px;
-      }
-    }
-
-    .table-content {
-      margin: 10px 0;
-    }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100% - 40px);
+  overflow: hidden;
+  /deep/ .el-button--medium, /deep/ .el-input--medium {
+    margin-top: 10px;
   }
 }
-
-.add_user_class {
-  margin-top: 10px;
+jmnode.selected {
+  background-color: #b9b9b9 !important;
+  box-shadow: 2px 2px 8px #777 !important;
 }
-
-.user_out {
-  display: flex;
+jmnode:hover {
+  box-shadow: 2px 2px 8px #777 !important;
+}
+.jsmind_toolbar {
   width: 100%;
+  padding: 10px;
+  height: auto;
+  flex-shrink: 0;
+  display: flex;
   align-items: center;
-  border: 1px solid #eeeeef;
-  line-height: 50px;
-  margin-top: 10px;
+  flex-wrap: wrap;
+  background-color: #f8f9fa;
+  box-shadow: 0 0 4px #b8b8b8;
 }
-
-.user_out_sub {
-  flex: 1;
-  background-color: #fafafa;
-  text-align: center;
-  // color:#ffffff
+#jsmind_container {
+  flex: 1 1 auto;
+  position: relative;
 }
-
-.user_out_subNext {
-  padding-left: 10px;
-  flex: 3;
+.jsmind-inner {
+  overflow: hidden auto !important;
+}
+.el-upload-list {
+  display: none !important;
+}
+.zoom_in_out {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 5px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 2px 2px 4px #e0e0e0;
+  border: 1px solid #f5f5f5;
+  z-index: 999;
+}
+.zoom-icon {
+  cursor: pointer;
+  font-size: 20px;
+  padding: 6px 5px;
+}
+.disabled {
+  color: #bdbcbc;
+  cursor: not-allowed;
+}
+.el-icon-plus {
+  border-bottom: 1px solid #9f9f9f;
+}
+/* 隐藏滚动条 */
+.jsmind-inner::-webkit-scrollbar {
+  display: none;
+}
+.pad {
+  margin-right: 10px;
+}
+.pad-left {
+  margin-left: 10px;
 }
 </style>