添加用户删除功能

zhangzengfei

2022-08-22 f14f98a263141d2f8ec0079866a758cc7a1c38d1

 src/views/personalCenter/components/SubAccount.vue

@@ -4,19 +4,14 @@
    <div class="search">
      <div class="left">
        <div class="id">
          姓名/手机号
          <el-input v-model="inputText" placeholder="请输入"></el-input>
          用户名/姓名/手机号
          <el-input v-model="inputText" placeholder="请输入" clearable></el-input>
        </div>

        <div class="cluster">
        <div class="cluster" v-show="false">
          授权时长
          <el-select v-model="timeLength" placeholder="请选择">
            <el-option
              v-for="item in durationArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
          <el-select @change="findUserList" v-model="timeLength" placeholder="请选择">
            <el-option v-for="item in durationArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
@@ -29,62 +24,58 @@
    </div>

    <div class="btns">
      <div class="button add" @click="isShowAdd = true">
      <div class="button add" @click="addSubCount">
        <span class="iconfont">&#xe614;</span>
        <span>添加子账号</span>
      </div>
      <div class="button export" @click="isShowRelate = true">
      <!-- <div class="button export" @click="isShowRelate = true">
        <span class="iconfont">&#xe614;</span>
        <span>关联子账号</span>
      </div>
      </div> -->
    </div>

    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        :stripe="true"
      >
        <el-table-column label="序号" width="55" class-name="index">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
          <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
        </el-table-column>
        <el-table-column
          prop="trueName"
          label="姓名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="userType" label="用户类型">
        <el-table-column prop="username" label="用户名" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="trueName" label="姓名" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="phoneNum" label="手机号" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="userType" label="用户类型" >
          <template slot-scope="scope">
            <span>{{ scope.row.userType == 1 ? "个人" : "公司" }}</span>
            <span>{{ scope.row.userType == 1 ? "本地" : "OA账户" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authDuration" label="授权时长">
        </el-table-column>
        <el-table-column prop="dataNames" label="权限"> </el-table-column>

        <el-table-column label="状态">
        <!-- <el-table-column prop="authDuration" label="授权时长">
          <template slot-scope="scope">
            <span>{{ scope.row.authDuration + " 年" }} </span>
          </template>
        </el-table-column> -->

        <!-- <el-table-column prop="authDuration" label="授权时长">
        </el-table-column> -->
        <!-- <el-table-column prop="dataNames" label="公司"> </el-table-column> -->
        <el-table-column prop="companyName" label="部门" show-overflow-tooltip min-width="200px"></el-table-column>

        <!-- <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
            <div v-else class="status">未绑定</div>
          </template>
        </el-table-column>
        </el-table-column> -->

        <el-table-column label="操作">
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <span class="iconfont option" @click="editUser(scope.row)"
              >编辑</span
            >
            <span class="iconfont option" @click="editUser(scope.row)">编辑</span>
            <span class="iconfont option" style="color:red" @click="delUser(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
@@ -118,62 +109,49 @@
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
      <el-form-item label="密码" prop="password" v-show="!isEditing">
        <el-input v-model="ruleForm.password" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="重置密码" prop="isChangePwd">
      <!--  <el-form-item label="重置密码">
        <el-checkbox v-model="ruleForm.isChangePwd"
          >首次登陆修改密码</el-checkbox
        >
      </el-form-item>
      </el-form-item> -->
      <el-form-item label="用户类型" prop="userType">
        <el-radio v-model="ruleForm.userType" :label="1">个人</el-radio>
        <el-radio v-model="ruleForm.userType" :label="2">公司</el-radio>
        <el-radio v-model="ruleForm.userType" :label="1">本地</el-radio>
        <el-radio v-model="ruleForm.userType" :label="2">OA账户</el-radio>
      </el-form-item>

      <el-form-item label="姓名" prop="trueName">
        <el-input v-model="ruleForm.trueName" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" style="width: 350px"></el-input>

      <el-form-item label="手机号">
        <el-input v-model="ruleForm.phoneNum" style="width: 350px"></el-input>
      </el-form-item>

      <el-form-item label="行业" prop="industryId">
        <el-select
          v-model="ruleForm.industryId"
          placeholder="请选择行业"
          style="width: 350px"
        >
          <el-option
            v-for="(item, index) in industrys"
            :label="item.name"
            :value="item.id"
            :key="index"
          ></el-option>
      <el-form-item label="部门">
        <el-input v-model="ruleForm.companyName" style="width: 350px"></el-input>
      </el-form-item>

      <!-- <el-form-item label="行业">
        <el-select v-model="ruleForm.industryId" placeholder="请选择行业" style="width: 350px">
          <el-option v-for="(item, index) in industrys" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="address">
        <el-cascader
          v-model="ruleForm.address"
          :props="options"
          style="width: 350px"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="授权时长" prop="authDuration">
        <el-select
          v-model="ruleForm.authDuration"
          style="width: 350px"
          placeholder="请选择授权时长"
        >
      <el-form-item label="地区">
        <el-cascader v-model="ruleForm.address" :props="options" style="width: 350px"></el-cascader>
      </el-form-item> -->

      <!-- <el-form-item label="授权时长">
        <el-select v-model="ruleForm.authDuration" style="width: 350px" placeholder="请选择授权时长">
          <el-option label="一年" :value="1"></el-option>
          <el-option label="两年" :value="2"></el-option>
          <el-option label="三年" :value="3"></el-option>
        </el-select>
      </el-form-item>
      </el-form-item> -->

      <el-form-item label="用户权限" prop="menuIds" class="user-tree">
        <!-- <TreeBox :defaultProp="defaultProp" :treeData="sysMenus"></TreeBox> -->
        <!-- <TreeBox :defaultProp="defaultProp2" :treeData="data2"></TreeBox> -->
        <div class="tree-box">
          <div class="t">菜单权限</div>
          <el-tree
@@ -199,14 +177,28 @@
            :props="defaultProp"
            :default-checked-keys="checkedData"
            check-on-click-node
            @check-change="selectDevice"
          >
          </el-tree>
        </div>
        <div class="tree-box">
          <div class="t">摄像机权限</div>
          <tree-menu
            ref="ztreeMenus"
            app="Camera"
            treeName="localTree"
            :node="TreeDataPool.treeData"
            :height="treeHeight"
            :setting="treeSettings"
            style="width:330px;max-height:440px"
          />
        </div>
      </el-form-item>
    </el-form>
    <div class="right">
      <div class="button searchBtn" @click="saveSubUser">保存</div>
      <div class="button resetBtn" @click="resetUser">重置</div>
      <div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
    </div>
  </div>
  <div class="sub-account" v-else-if="isShowRelate">
@@ -214,59 +206,75 @@
      <span class="iconfont">&#xe614;</span>
      <span>关联子账户</span>
    </div>
    <Steps
      :titleList="['关联子账号信息', '权限设置', '完成']"
      :activeIndex="activeIndex"
    ></Steps>
    <Steps :titleList="['关联子账号信息', '权限设置', '完成']" :activeIndex="activeIndex"></Steps>
    <StepsCard @goback="goback" @goto="goto"></StepsCard>
  </div>
</template>

<script>
import { findUserList, saveSubUser, getMenu, getDataTree } from "@/api/user";
import { getAreas, getDic } from "@/api/login";
import { findUserList, saveSubUser, getMenu, getDataTree, deleteUser } from "@/api/user"
import { getAreas, getDic } from "@/api/login"

import Steps from "./Steps";
import StepsCard from "./StepCard";
import Steps from "./Steps"
import StepsCard from "./StepCard"
import TreeMenu from "@/components/giantTree/index"

export default {
  components: {
    Steps,
    StepsCard,
    TreeMenu
  },
  data() {
    const validateTree = (rule, value, callback) => {
      if (
        this.ruleForm.menuIds &&
        this.ruleForm.dataIds &&
        this.ruleForm.menuIds.length > 0 &&
        this.ruleForm.dataIds.length > 0
      ) {
        callback()
      } else {
        callback(new Error("请选菜单权限和数据权限"))
      }
    }
    return {
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ], //搜索时间
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")], //搜索时间
      page: 1,
      size: 10, //分页相关
      inputText: "", //输入框内容
      activeStep: 0,
      activeIndex: 0,
      industrys: [],
      total: 0, //总数
      total: 0, //总数,
      treeHeight: 750,
      treeData: [],
      treeSettings: {
        check: {
          enable: true
        }
      },
      options: {
        lazy: true,
        lazyLoad(node, resolve) {
          // 懒加载节点省市数据
          const { level } = node;
          let nodes;
          const { level } = node
          let nodes
          getAreas({ parentId: level == 0 ? 0 : node.value })
            .then((json) => {
              nodes = json.data.list;
              nodes = json.data.list
              nodes = nodes.map((item) => ({
                value: item.id,
                label: item.name,
                level: item.level,
                leaf: level >= 1,
              }));
              resolve(nodes);
                leaf: level >= 1
              }))
              resolve(nodes)
            })
            .catch((err) => {
              console.log(err);
            });
        },
              console.log(err)
            })
        }
      },
      dataList: [],
      isShowAdd: false, //是否展示新增弹窗
@@ -277,16 +285,16 @@
      durationArr: [
        {
          value: 1,
          label: "一年",
          label: "1年"
        },
        {
          value: 2,
          label: "两年",
          label: "2年"
        },
        {
          value: 3,
          label: "三年",
        },
          label: "3年"
        }
      ], //所属集群下拉框
      timeLength: null, //选中的授权时长
      showQuit: false, //展示退出集群的弹窗
@@ -300,28 +308,24 @@
        userType: "",
        password: "",
        trueName: "",
        email: "",
        companyName: "",
        phoneNum: "",
        email: "basic",
        isChangePwd: false,
        industryId: "",
        address: [],
        authDuration: "",
        authDuration: 3,
        areaId: "",
        provinceId: "",
        menuIds: [],
        dataIds: [],
        dataIds: []
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        // password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userType: [{ required: true, message: "请选择用户类型", trigger: "blur" }],
        trueName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        menuIds: [{ validator: validateTree, trigger: "blur" }]
      },
      sysMenus: [],
      DataTree: [],
@@ -329,48 +333,104 @@
      curEditId: "",
      defaultProp: {
        children: "children",
        label: "name",
      },
    };
        label: "name"
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.findUserList();
    this.getIndustrys();
    this.fetchSysMenus();
    this.fetchDataTree();
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    this.findUserList()
    this.getIndustrys()
    this.fetchSysMenus()
    this.fetchDataTree()
  },
  mounted() {
    this.TreeDataPool.reset()
    this.TreeDataPool.multiple = true
  },
  methods: {
    fetchDataTree() {
      getDataTree({ userId: this.userInfo.id }).then((res) => {
        this.DataTree = res.data.dataTree;
      });
        this.DataTree = res.data.dataTree
      })
    },
    fetchSysMenus() {
      getMenu().then((rsp) => {
        if (rsp && rsp.success) {
          this.sysMenus = rsp.data.menus;
          this.sysMenus = rsp.data.menus
          // this.userMenus = [];
        }
      });
      })
    },
    editUser(row) {
      this.isShowAdd = true;
      this.isEditing = true;
      this.ruleForm.id = row.id;
      this.ruleForm.username = row.username;
      this.ruleForm.userType = row.userType;
      this.ruleForm.password = row.password;
      this.ruleForm.trueName = row.trueName;
      this.ruleForm.email = row.email;
      this.ruleForm.isChangePwd = row.isChangePwd;
      this.ruleForm.industryId = row.industryId;
      this.ruleForm.areaId = row.areaId;
      this.ruleForm.address = [row.provinceId, row.areaId];
      this.ruleForm.provinceId = row.provinceId;
      this.ruleForm.authDuration = row.authDuration;
      this.checkedMenu = row.menuIds;
      this.checkedData = row.dataIds;
    selectDevice(node, checked, hasChildren) {
      if (checked) {
        sessionStorage.setItem("clusterId", node.id)
        this.TreeDataPool.fetchTreeData()
        this.treeData = this.TreeDataPool.treeData
      } else {
        this.treeData = []
        this.TreeDataPool.reset()
      }
    },
    addSubCount() {
      this.isShowAdd = true
      this.resetUser()
    },
    async editUser(row) {
      this.isShowAdd = true
      this.isEditing = true
      this.ruleForm.id = row.id
      this.ruleForm.username = row.username
      this.ruleForm.userType = row.userType
      this.ruleForm.password = row.password
      this.ruleForm.trueName = row.trueName
      this.ruleForm.companyName = row.companyName
      this.ruleForm.phoneNum = row.phoneNum
      this.ruleForm.email = row.email
      this.ruleForm.isChangePwd = false
      this.ruleForm.industryId = row.industryId
      this.ruleForm.areaId = row.areaId
      this.ruleForm.address = [row.provinceId, row.areaId]
      this.ruleForm.provinceId = row.provinceId
      this.ruleForm.authDuration = row.authDuration
      this.checkedMenu = row.menuIds
      this.checkedData = row.dataIds

      // 查询当前用户权限下所有可管理的摄像机
      if (row.dataIds) {
        sessionStorage.setItem("clusterId", row.dataIds[0])
        await this.TreeDataPool.fetchTreeData()
      }
      // 用email字段暂时代替摄像机集合字段
      let checkedCameras = row.email

      // basic 为子账户默认的空字段,表示可管理的摄像机目录为空
      if (checkedCameras == "basic") {
        return
      }

      // 反选摄像机
      if (checkedCameras.length) {
        let cameraIds = checkedCameras.split(",")
        this.$refs.ztreeMenus.updateNodes(cameraIds)
      }
    },
    delUser(row) {
      this.$confirm('确认要删除该用户吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let rsp = await deleteUser({id:row.id})
          if (rsp && rsp.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

          this.findUserList()          
        })
    },
    resetUser() {
      this.ruleForm = {
@@ -379,77 +439,123 @@
        userType: "",
        password: "",
        trueName: "",
        companyName: "",
        phoneNum: "",
        email: "",
        isChangePwd: false,
        address: [],
        industryId: "",
        areaId: "",
        provinceId: "",
        authDuration: "",
      };
      this.$refs.treeMenus.setCheckedKeys([]);
      this.$refs.treeData.setCheckedKeys([]);
        authDuration: 1
      }
      this.$nextTick(() => {
        this.$refs.treeMenus.setCheckedKeys([])
        this.$refs.treeData.setCheckedKeys([])
      })
    },
    async getIndustrys() {
      let res = await getDic();
      let res = await getDic()
      if (res.success) {
        this.industrys = res.data.dics;
        this.industrys = res.data.dics
      } else {
        console.log("查询行业列表失败！");
        console.log("查询行业列表失败！")
      }
    },
    saveSubUser() {
      this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys();
      this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys();
      let json = {
        id: this.isEditing ? this.ruleForm.id : "",
        username: this.ruleForm.username,
        password: this.ruleForm.password,
        isChangePwd: this.ruleForm.isChangePwd,
        userType: this.ruleForm.userType,
        trueName: this.ruleForm.trueName,
        email: this.ruleForm.email,
        industryId: this.ruleForm.industryId,
        areaId: this.ruleForm.address[1],
        authDuration: this.ruleForm.authDuration,
        menuIds: this.ruleForm.menuIds,
        dataIds: this.ruleForm.dataIds,
      };
      saveSubUser(json).then((res) => {
        if (res.success) {
          this.isShowAdd = false;
          this.isEditing = false;
          this.findUserList();
      let _this = this
      this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys()
      this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys()
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let json = {
            id: this.isEditing ? this.ruleForm.id : "",
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            isChangePwd: this.ruleForm.isChangePwd,
            userType: this.ruleForm.userType,
            trueName: this.ruleForm.trueName,
            companyName: this.ruleForm.companyName,
            phoneNum: this.ruleForm.phoneNum,
            industryId: this.ruleForm.industryId,
            areaId: this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "",
            authDuration: this.ruleForm.authDuration,
            menuIds: this.ruleForm.menuIds,
            dataIds: this.ruleForm.dataIds
          }

          // 获取子账户选中的摄像机列表
          let cameraIds = this.TreeDataPool.selectedNodes
          if (cameraIds.length == 0) {
            json.email = "basic"
          } else {
            json.email = cameraIds.join(",")
          }

          // 编辑不提交密码
          if (this.isEditing) {
            delete json.password
          }

          if (typeof json.areaId === "string") {
            delete json.areaId
          }

          if (typeof json.authDuration === "string") {
            delete json.authDuration
          }

          // return
          saveSubUser(json)
            .then((res) => {
              if (res.success) {
                this.$notify.success(res.data)
                this.isShowAdd = false
                this.isEditing = false
                this.findUserList()
              } else {
                this.$notify.error(res.msg)
              }
            })
            .catch((err) => {
              this.$notify.error(err.data.msg)
            })
        } else {
          return false
        }
      });
      })
    },
    findUserList() {
      findUserList({
        inputText: this.inputText,
        page: this.page,
        size: this.size,
      }).then((res) => {
        if (res.success) {
          this.dataList = res.data.dataList;
          this.total = res.data.total
        }else{
          this.$notify.error("加载子账户列表失败")
        }
      }).catch((e) => {
        authDuration: this.timeLength
      })
        .then((res) => {
          if (res.success) {
            this.dataList = res.data.dataList
            this.total = res.data.total
          } else {
            this.$notify.error("加载子账户列表失败")
          }
        })
        .catch((e) => {
          this.$notify.error(e.msg)
      });
        })
    },
    goback() {
      this.isShowAdd = false;
      this.isEditing = false;
      this.isShowRelate = false;
      this.activeIndex = 0;
      this.isShowAdd = false
      this.isEditing = false
      this.isShowRelate = false
      this.activeIndex = 0
    },
    goto(i) {
      this.activeIndex = i;
      this.activeIndex = i
    },
    reset() {
      this.inputText = "";
      this.timeLength = null;
      this.inputText = ""
      this.timeLength = null
    },
    // 跳到设备详情
    checkDetail(row) {
@@ -459,9 +565,9 @@
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
          ndid: row.id,
        },
      });
          ndid: row.id
        }
      })
    },

    // 跳到算法详情
@@ -471,9 +577,9 @@
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
        },
      });
          port: row.serverPort
        }
      })
    },

    // 查询列表
@@ -481,66 +587,65 @@
    save() {},
    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.size = size
      this.findUserList()
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.page = page
      this.findUserList()
    },

    //解绑按钮
    Untying(row) {
      console.log(row);
      this.unbindId = row.id;
      this.isShowUnbind = true;
      console.log(row)
      this.unbindId = row.id
      this.isShowUnbind = true
    },

    //获得默认时间
    getDateInit() {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },

    // 关闭解绑弹窗
    closeUnbindBox() {
      this.isShowUnbind = false;
      this.isShowUnbind = false
    },

    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
      this.isShowUnbind = false
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.searchTime = this.getDateInit()
      this.inputText = ""
    },

    //退出集群
    quitCluster(equipment) {
      this.activeEquipment = equipment;
      this.showQuit = true;
      this.activeEquipment = equipment
      this.showQuit = true
    },

    //加入集群
    joinCluster(equipment) {
      this.activeEquipment = equipment;
      this.showJoin = true;
    },
  },
};
      this.activeEquipment = equipment
      this.showJoin = true
    }
  }
}
</script>

<style scoped lang="scss">
@@ -577,6 +682,11 @@
      border-color: #c0c5cc;
    }
    .user-tree {
      .el-form-item__label:before {
        content: "*";
        color: #f52323;
        margin-right: 4px;
      }
      .el-form-item__content {
        display: flex;
        .tree-box {
@@ -824,7 +934,7 @@
}
</style>

<style >
<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
@@ -839,4 +949,4 @@
  color: #0065ff;
  border-color: #0065ff;
}
</style>
</style>