子账户管理新

heyujie

2022-04-11 999f9a47da7783388d0214b9f8d987ea2d9f2916

 src/views/personalCenter/components/BasicInfo.vue

@@ -1,9 +1,9 @@
<template>
  <div class="basic-info">
    <div class="head-name">子账户管理</div>
    <div class="head-name">基本资料</div>

    <el-form
      :model="ruleForm"
      :model="userInfo"
      :rules="rules"
      :label-position="'left'"
      ref="ruleForm"
@@ -11,60 +11,59 @@
      class="add-ruleForm"
    >
      <div class="area-title">基本信息</div>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userInfo.username" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="注册类型" prop="type">
        <el-radio v-model="ruleForm.type" label="1">个人</el-radio>
        <el-radio v-model="ruleForm.type" label="2">公司</el-radio>
        <el-radio-group v-model="userInfo.userType">
          <el-radio :label="1">个人</el-radio>
          <el-radio :label="2">公司</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
      <el-form-item label="姓名" prop="trueName">
        <el-input v-model="userInfo.trueName" style="width: 200px"></el-input>
      </el-form-item>

      <div class="area-title" style="margin-top: 60px">业务信息</div>
      <div class="area-title" style="margin-top: 50px">业务信息</div>

      <el-form-item label="行业应用" prop="region">
      <el-form-item label="行业应用" prop="industryId">
        <el-select
          v-model="ruleForm.region"
          placeholder="请选择行业应用"
          v-model="userInfo.industryId"
          placeholder="行业"
          style="width: 410px"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
          <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="region">
        <el-input v-model="ruleForm.name" style="width: 410px"></el-input>
      <el-form-item label="公司名称" prop="companyName">
        <el-input
          v-model="userInfo.companyName"
          style="width: 410px"
        ></el-input>
      </el-form-item>

      <div class="area-title" style="margin-top: 60px">联系信息</div>
      <div class="area-title" style="margin-top: 50px">联系信息</div>

      <el-form-item label="所在地区" prop="region">
        <el-select
          v-model="ruleForm.region"
          placeholder="请选择城市"
          style="width: 200px; margin-right: 10px"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select
          v-model="ruleForm.region"
          placeholder="请选择区"
          style="width: 200px"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      <el-form-item label="所在地区" prop="areaId">
        <el-cascader
          v-model="userInfo.address"
          :props="options"
          style="width: 410px"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="手机号" prop="name">
        <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
      <el-form-item label="手机号" prop="phoneNum">
        <el-input v-model="userInfo.phoneNum" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="name">
        <el-input v-model="ruleForm.password" style="width: 410px"></el-input>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userInfo.email" style="width: 410px"></el-input>
      </el-form-item>
    </el-form>
    <div class="btns">
@@ -74,6 +73,8 @@
</template>

<script>
import { getUserInfo, getAreas, getDic, entireUserInfo } from "@/api/login";

export default {
  components: {},
  data() {
@@ -85,23 +86,50 @@
      page: 1,
      size: 10, //分页相关
      inputText: "", //输入框内容
      activeStep: 0,
      industrys: [],
      activeIndex: 0,
      total: 0, //总数
      dataList: [
        {
          name: "basic",
          phone: "1121313232",
          userType: "个人",
          duration: "永久",
          authList: "集群1，集群2",
          isBind: 1,
        },
      ],
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      isShowRelate: false,
      unbindId: "",
      options: {
        lazy: true,
        lazyLoad(node, resolve) {
          // 懒加载节点省市数据
          const { level } = node;
          let nodes;
          console.log("节点：", level, node);
          getAreas({ parentId: level == 0 ? 0 : node.value })
            .then((json) => {
              nodes = json.data.list;
              nodes = nodes.map((item) => ({
                value: item.id,
                label: item.name,
                level: item.level,
                leaf: level >= 1,
              }));
              resolve(nodes);
            })
            .catch((err) => {
              console.log(err);
            });
        },
      },
      userInfo: {
        userId: "",
        username: "panlei",
        phoneNum: "17610829559",
        type: "", // 普通用户还是开发者
        userType: 1, // 个人还是公司
        industryId: "",
        address: [110100, 110105],
        areaId: "",
        provinceId: "",
        trueName: "",
        companyName: "",
        email: "",
      },
      durationArr: [
        {
          value: 0,
@@ -116,165 +144,19 @@
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
      ruleForm: {
        name: "",
        region: "",
        password: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        authList: {
          menuAuth: [],
          dataAuth: [],
        },
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        trueName: [
          { required: true, message: "请填写真实姓名", trigger: "change" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        username: [
          { required: true, message: "请填写用户名", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        phoneNum: [
          { required: true, message: "请填写手机号", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
          { required: true, message: "请选择注册类型", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      data1: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps1: {
        children: "children",
        label: "label",
      },
      data2: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps2: {
        children: "children",
        label: "label",
      },
    };
  },
@@ -286,8 +168,27 @@
    goto(i) {
      this.activeIndex = i;
    },
    save(){

    async getIndustrys() {
      let res = await getDic();
      if (res.success) {
        this.industrys = res.data.dics;
      } else {
        console.log("查询行业列表失败！");
      }
    },
    save() {
      this.userInfo.provinceId = this.userInfo.address[0];
      this.userInfo.areaId = this.userInfo.address[1];
      entireUserInfo(this.userInfo)
        .then((res) => {
          this.$notify.success("账户信息保存成功");
        })
        .catch((err) => {
          if (err && err.status == 401) {
            return;
          }
          this.$notify.error("账户信息保存失败");
        });
    },
    // 跳到设备详情
    checkDetail(row) {
@@ -313,35 +214,6 @@
        },
      });
    },

    // 查询列表
    // searchingBtn() {
    //   let param = {
    //     page: this.page,
    //     size: this.size,
    //     // startTime: this.searchTime[0],
    //     // endTime: this.searchTime[1],
    //     inputText: this.inputText,
    //   };
    //   findDevList(param)
    //     .then((res) => {
    //       this.dataList = res.data.list;
    //       //时间分行显示

    //       this.dataList.forEach((item) => {
    //         item.installTime = item.installTime.split(" ");
    //         item.firstUseTime = item.firstUseTime.split(" ");
    //       });
    //       this.total = res.data.total;
    //       if (res.data.total <= this.size) {
    //         this.page = 1;
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    //分页功能
    handleSizeChange(size) {
      this.size = size;
@@ -408,6 +280,13 @@
    },
  },
  mounted() {},
  created() {
    getUserInfo().then((res) => {
      this.userInfo = res.data;
      this.userInfo.address = [this.userInfo.provinceId, this.userInfo.areaId];
    });
    this.getIndustrys();
  },
};
</script>

@@ -424,6 +303,10 @@
    margin-bottom: 30px;
  }
  .add-ruleForm::v-deep {
    .el-form-item__label {
      font-size: 14px;
      color: #999999;
    }
    .area-title {
      font-weight: 700;
      color: #666666;
@@ -439,31 +322,14 @@
      height: 32px;
      line-height: 32px;
    }
    .user-tree {
      .el-form-item__content {
        display: flex;
        .tree-box {
          .t {
            height: 32px;
            background: #f0f5fa;
            border-radius: 3px 3px 0px 0px;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #c0c5cc;
          }
          width: 336px;
          height: 480px;
          border: 1px solid #c0c5cc;
          margin-right: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .searchBtn {
    width: 80px;margin-top: 38px;
    width: 80px;
    margin-top: 50px;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    background: #0065ff;