bugxiufu

ZZJ

2022-07-15 5c0c6ad7ac6f28e970532af9936de638830f1161

 src/views/personalCenter/components/SubAccount.vue

@@ -10,7 +10,11 @@

        <div class="cluster">
          授权时长
          <el-select v-model="timeLength" placeholder="请选择">
          <el-select
            @change="findUserList"
            v-model="timeLength"
            placeholder="请选择"
          >
            <el-option
              v-for="item in durationArr"
              :key="item.value"
@@ -29,39 +33,42 @@
    </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>
        </el-table-column>
        <el-table-column
        <!--  <el-table-column
          prop="trueName"
          label="姓名"
          show-overflow-tooltip
        ></el-table-column>
        ></el-table-column> -->
        <el-table-column
          prop="username"
          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="用户类型">
@@ -69,10 +76,16 @@
            <span>{{ scope.row.userType == 1 ? "个人" : "公司" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authDuration" label="授权时长" > </el-table-column>
        <el-table-column prop="dataNames" 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 label="状态">
          <template slot-scope="scope">
@@ -83,14 +96,9 @@

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <span class="iconfont option" @click="editUser(scope.row)"
              >编辑</span
            >
            <!-- 解绑 -->
            <!-- <span class="iconfont option" @click="Untying(scope.row)"
              >解绑</span
            > -->
          </template>
        </el-table-column>
      </el-table>
@@ -127,11 +135,11 @@
      <el-form-item label="密码" prop="password">
        <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>
@@ -139,11 +147,11 @@
      <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-form-item label="邮箱">
        <el-input v-model="ruleForm.email" style="width: 350px"></el-input>
      </el-form-item>

      <el-form-item label="行业" prop="industryId">
      <el-form-item label="行业">
        <el-select
          v-model="ruleForm.industryId"
          placeholder="请选择行业"
@@ -157,28 +165,26 @@
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="address">
      <el-form-item label="地区">
        <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-form-item label="授权时长">
        <el-select
          v-model="ruleForm.authDuration"
          style="width: 350px"
          placeholder="请选择授权时长"
        >
          <el-option label="一年" value="一年"></el-option>
          <el-option label="两年" value="两年"></el-option>
          <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 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
@@ -233,14 +239,24 @@

import Steps from "./Steps";
import StepsCard from "./StepCard";
import TreeBox from "./TreeBox";
export default {
  components: {
    Steps,
    StepsCard,
    TreeBox,
  },
  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"),
@@ -278,24 +294,29 @@
      dataList: [],
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      isShowRelate: false,isEditing: false,
      isShowRelate: false,
      isEditing: false,
      unbindId: "",
      durationArr: [
        {
          value: "一年",
          label: "一年",
          value: 1,
          label: "1年",
        },
        {
          value: "两年",
          label: "两年",
          value: 2,
          label: "2年",
        },
        {
          value: 3,
          label: "3年",
        },
      ], //所属集群下拉框
      timeLength: null, //选中的授权时长
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
      checkedData:[],
      checkedMenu:[],
      checkedData: [],
      checkedMenu: [],
      ruleForm: {
        id: "",
        username: "",
@@ -306,24 +327,22 @@
        isChangePwd: false,
        industryId: "",
        address: [],
        authDuration: "",
        authDuration: 1,
        areaId: "",
        provinceId: "",
        menuIds: [],
        dataIds: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "blur" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        trueName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        menuIds: [{ validator: validateTree, trigger: "blur" }],
      },
      sysMenus: [],
      DataTree: [],
@@ -356,9 +375,13 @@
        }
      });
    },
    addSubCount() {
      this.isShowAdd = true;
      this.resetUser();
    },
    editUser(row) {
      this.isShowAdd = true;
      this.isEditing = true
      this.isEditing = true;
      this.ruleForm.id = row.id;
      this.ruleForm.username = row.username;
      this.ruleForm.userType = row.userType;
@@ -367,9 +390,8 @@
      this.ruleForm.email = row.email;
      this.ruleForm.isChangePwd = row.isChangePwd;
      this.ruleForm.industryId = row.industryId;
      this.ruleForm.areaId =row.areaId ;
      debugger
      this.ruleForm.address  = [ row.provinceId,row.areaId]
      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;
@@ -384,13 +406,16 @@
        trueName: "",
        email: "",
        isChangePwd: false,
        address: [],
        industryId: "",
        areaId: "",
        provinceId: "",
        authDuration: "",
        authDuration: 1,
      };
      this.$refs.treeMenus.setCheckedKeys([]);
      this.$refs.treeData.setCheckedKeys([]);
      this.$nextTick(() => {
        this.$refs.treeMenus.setCheckedKeys([]);
        this.$refs.treeData.setCheckedKeys([]);
      });
    },
    async getIndustrys() {
      let res = await getDic();
@@ -403,23 +428,49 @@
    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,
      };
      debugger
      saveSubUser(json).then((res) => {
        debugger;
      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,
            email: this.ruleForm.email,
            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,
          };

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

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

          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() {
@@ -427,15 +478,23 @@
        inputText: this.inputText,
        page: this.page,
        size: this.size,
      }).then((res) => {
        if (res.success) {
          this.dataList = res.data.dataList;
        }
      });
        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.isEditing = false;
      this.isShowRelate = false;
      this.activeIndex = 0;
    },
@@ -477,10 +536,12 @@
    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.findUserList();
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.findUserList();
    },

    //解绑按钮
@@ -572,6 +633,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 {
@@ -773,7 +839,7 @@

    .option {
      margin-right: 10px;
         font-size: 14px;
      font-size: 14px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
@@ -834,4 +900,4 @@
  color: #0065ff;
  border-color: #0065ff;
}
</style>
</style>