账号权限修复

liangjin

2021-04-23 7759b52788c81e0724350642ed62d40b467c365b

 src/views/mine/account/account-add.vue

@@ -21,6 +21,27 @@
      <v-cell v-model="form.email" max="50" label="联系邮箱" placeholder="请输入邮箱地址"></v-cell>
    </div>

    <div v-if="orgType !== 4" class="cell-group">
      <v-cell label="权限分配" :readonly="true"></v-cell>
      <van-checkbox-group class="van-check-box" v-model="form.menuPower">
        <div v-for="(item, index) in powerInfo" :key="index">
          <v-cell :label="item.powerName" v-if="item.powerId !==100005">
            <van-checkbox
                    slot="v-cell-right"
                    :key="item.powerId"
                    :name="item.powerId"
                    :checked-color="$store.state.backColor"
            />
          </v-cell>
        </div>
        <!-- <v-cell label='商户管理'>
          <van-checkbox  slot="v-cell-right" key="商户管理" name="商户管理" checked-color="#896EDB"/>
        </v-cell>
        <v-cell  label='渠道管理'>
          <van-checkbox  slot="v-cell-right" key="渠道管理" name="渠道管理" checked-color="#896EDB"/>
        </v-cell>-->
      </van-checkbox-group>
    </div>

    <footer class="flex-center-g footer">
      <van-button class="btn" :color="$store.state.backColor" v-if="isAdd" @click="add">新增账户</van-button>
@@ -30,146 +51,155 @@
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "account-add",
  data() {
    return {
      form: {
        name: "",
        mblNo: "",
        email: "",
        name: "",
        menuPower: [100001, 100006],
        powerInfoVos: [] //权限列表
      },
      rule:[
        {key:"name",message:"请输入账户名称",type:"isEmpty"},
        {key:"name",message:"请输入正确的账户名称",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,6}$/},
        {key:"mblNo",message:"请输入手机号",type:"isEmpty"},
        {key:"mblNo",message:"请输入正确的手机号",type:"isTel"},
        {key:"email",message:"请输入联系邮箱",type:"isEmpty"},
        {key:"email",message:"请输入正确的联系邮箱",type:"isEmail"},
      ],
      isFreeze: false
    };
  },
  computed: {
    ...mapState(["userinfo"]),
    // 判断是新增 还是 详情
    isAdd() {
      return this.$route.query.isAdd == "1";
    },
    //权限列表
    powerInfo() {
      return this.form.powerInfoVos || [];
    },
    id() {
      return this.$route.query.id || "";
    }
  },
  created() {
    this.form.powerInfoVos  = this.userinfo.powerInfoVos;
    if (!this.isAdd) {
      this.init();
    }
  },
  methods: {
    //获取用户详情
    init() {
      this.$api.getUserDetail(this.id).then(({ body }) => {
          let {powerInfoVos} = body;
          if (body.supStatus && body.status) {
            this.isFreeze = true;
          } else {
            this.isFreeze = false;
          }
          let powerInfo = this.userinfo.powerInfoVos;
          if (powerInfoVos.length) {
            powerInfo.forEach(item => {
              let index = powerInfoVos.findIndex(child => {
                return item.powerId === child.powerId;
              });
            });
          }
    import { mapState } from "vuex";
    export default {
        name: "account-add",
        data() {
            return {
                orgType:"",
                form: {
                    name: "",
                    mblNo: "",
                    email: "",
                    name: "",
                    menuPower: [],
                    powerInfoVos: [] //权限列表
                },
                rule:[
                    {key:"name",message:"请输入账户名称",type:"isEmpty"},
                    {key:"name",message:"请输入正确的账户名称",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,6}$/},
                    {key:"mblNo",message:"请输入手机号",type:"isEmpty"},
                    {key:"mblNo",message:"请输入正确的手机号",type:"isTel"},
                    {key:"email",message:"请输入联系邮箱",type:"isEmpty"},
                    {key:"email",message:"请输入正确的联系邮箱",type:"isEmail"},
                ],
                isFreeze: false
            };
        },
        computed: {
            ...mapState(["userinfo"]),
            // 判断是新增 还是 详情
            isAdd() {
                return this.$route.query.isAdd == "1";
            },
            //权限列表
            powerInfo() {
                return this.form.powerInfoVos || [];
            },
            id() {
                return this.$route.query.id || "";
            }
        },
        created() {
            this.orgType = this.userinfo.orgType;
            console.log("orgType:"+this.orgType);
            this.form.powerInfoVos  = this.userinfo.powerInfoVos;
            if (!this.isAdd) {
                this.init();
            }
        },
        methods: {
            //获取用户详情
            init() {
                this.$api.getUserDetail(this.id).then(({ body }) => {
                    let {powerInfoVos} = body;
                    if (body.supStatus && body.status) {
                        this.isFreeze = true;
                    } else {
                        this.isFreeze = false;
                    }
                    let powerInfo = this.userinfo.powerInfoVos;
                    if (powerInfoVos.length) {
                        powerInfo.forEach(item => {
                            let index = powerInfoVos.findIndex(child => {
                                return item.powerId === child.powerId;
                            });
                            if(index!==-1){
                                this.form.menuPower.push(item.powerId)
                            }
                        });
                    }

          this.form = {
            ...this.form,
            ...body
          };
          this.form.powerInfoVos = this.userinfo.powerInfoVos;;
        })
        .catch(err => {});
    },
    // 验证form参数
    validatorForm(){
        return this.$validator(this.form,this.rule).check(item=>{
            this.$notify(item.message)
        })
    },
    // 新增
    add() {
      if(!this.validatorForm()) return
      this.$api.userAdd(this.form).then(res => {
          this.$notify("添加成功");
          setTimeout(() => this.$router.go(-1), 1000);
        }).catch(err => {});
    },
    //更新
    update() {
      if(!this.validatorForm()) return
      this.$api.userUpdate(this.form).then(res => {
          this.$notify("保存成功");
        })
        .catch(err => {});
    },
    //冻结账号
    freeze() {
      this.$dialog.confirm({
          message: `请问是否确认${this.isFreeze ? "冻结" : "启用"}该账户？`
        }).then(() => {
          this.$api.userFreezeMgr(this.id).then(() => {
            let text = this.isFreeze ? "冻结成功" : "启用成功";
            this.$notify(text);
            this.isFreeze = !this.isFreeze;
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
                    this.form = {
                        ...this.form,
                        ...body
                    };
                    this.form.powerInfoVos = this.userinfo.powerInfoVos;;
                })
                    .catch(err => {});
            },
            // 验证form参数
            validatorForm(){
                return this.$validator(this.form,this.rule).check(item=>{
                    this.$notify(item.message)
                })
            },
            // 新增
            add() {
                if(this.orgType == 4){
                    this.form.menuPower = [100001, 100006]
                }
                if(!this.validatorForm()) return
                this.$api.userAdd(this.form).then(res => {
                    this.$notify("添加成功");
                    setTimeout(() => this.$router.go(-1), 1000);
                }).catch(err => {});
            },
            //更新
            update() {
                if(!this.validatorForm()) return
                this.$api.userUpdate(this.form).then(res => {
                    this.$notify("保存成功");
                })
                    .catch(err => {});
            },
            //冻结账号
            freeze() {
                this.$dialog.confirm({
                    message: `请问是否确认${this.isFreeze ? "冻结" : "启用"}该账户？`
                }).then(() => {
                    this.$api.userFreezeMgr(this.id).then(() => {
                        let text = this.isFreeze ? "冻结成功" : "启用成功";
                        this.$notify(text);
                        this.isFreeze = !this.isFreeze;
                    });
                })
                    .catch(() => {
                        // on cancel
                    });
            }
        }
    };
</script>

<style scoped lang="less">
.account-add {
  background-color: @c-bg-f5;
  padding-top: 44px;
  .account-add {
    background-color: @c-bg-f5;
    padding-top: 44px;

  .tip {
    margin: 10px 0 15px 21px;
    font-size: @font-12;
    color: @c-text-999;
    .tip {
      margin: 10px 0 15px 21px;
      font-size: @font-12;
      color: @c-text-999;
    }
  }
}

.cell-group {
  margin: 10px 8px 0;
}
  .cell-group {
    margin: 10px 8px 0;
  }

.btn {
  width: 340px;
  height: 44px;
  border: none;
  font-size: @font-16;
  border-radius: 22px;
  background-color: @c-bg-default;
  color: @c-text-fff;
}
  .btn {
    width: 340px;
    height: 44px;
    border: none;
    font-size: @font-16;
    border-radius: 22px;
    background-color: @c-bg-default;
    color: @c-text-fff;
  }

.footer {
  margin-top: 60px;
  padding-bottom: 30px;
}
  .footer {
    margin-top: 60px;
    padding-bottom: 30px;
  }
</style>