feat:通行证

wk

2024-09-14 0bd15917637362c104eb157d5163f65bf9503780

 pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit.vue

@@ -1,237 +1,391 @@
<template>
   <view class="main">
      <view class="main-block">
         <u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :errorType="errorType">
            <u-form-item label="服务部门" labelWidth="20%" @click="treeOpen" borderBottom prop="deptIds">
               <u--input placeholder="请选择服务部门" v-model="model1.deptIds" class="input" type="text"></u--input>
               <qian-tree ref="tkitree" :range="department" confirmColor="#4e8af7" :multiple="true" :selectParent="true" title="选择部门" @confirm="treeChooseValue" />
         <u--form labelPosition="left"
            :model="model1"
            :rules="rules"
            ref="uForm"
            :errorType="errorType">
            <u-form-item label="姓名"
               labelWidth="20%"
               borderBottom
               prop="name">
               <u--input border="none"
                  v-model="model1.name"
                  placeholder="请输入真实姓名"></u--input>
            </u-form-item>
            <u-form-item label="身份证" labelWidth="20%" borderBottom prop="idCard">
               <u--input border="none" v-model="model1.idCard" placeholder="请输入身份证"></u--input>
            <u-form-item label="手机号"
               labelWidth="20%"
               borderBottom
               prop="phone">
               <u--input border="none"
                  v-model="model1.phone"
                  placeholder="请输入手机号"></u--input>
            </u-form-item>
            <u-form-item label="真实姓名" labelWidth="20%" borderBottom prop="name">
               <u--input border="none" v-model="model1.name" placeholder="请输入真实姓名"></u--input>
            <u-form-item label="密码"
               labelWidth="20%"
               borderBottom
               prop="password">
               <u--input border="none"
                  v-model="model1.password"
                  placeholder="请输入密码"></u--input>
            </u-form-item>
            <u-form-item label="手机号" labelWidth="20%" borderBottom prop="phone">
               <u--input border="none" v-model="model1.phone" placeholder="请输入手机号"></u--input>
            </u-form-item>
            <u-form-item label="密码" labelWidth="20%" borderBottom prop="password">
               <u--input border="none" v-model="model1.password" placeholder="请输入密码"></u--input>
            </u-form-item>
              <view class="intensity">
               <view class="psdText">密码强度</view>
               <view
                  class="line"
                  :class="[level.includes('low') ? 'low' : '']"></view>
               <view
                  class="line"
                  :class="[level.includes('middle') ? 'middle' : '']"></view>
               <view
                  class="line"
                  :class="[level.includes('high') ? 'high' : '']"></view>
               <div class="warningtext">
               密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
               </div>
            </view>
         </u--form>
      </view>
      <view class="submit-button"><u-button :text="userId ? '确认修改' : '确认提交'" type="primary" @click="submitMsg"></u-button></view>
      <view class="submit-button"><u-button :text="userId ? '确认修改' : '确认提交'"
            type="primary"
            @click="submitMsg"></u-button></view>
   </view>
</template>

<script>
let url = 'http://192.168.31.14:9999';
import qianTree from '@/components/qian-tree/qian-tree.vue';
export default {
   components: {
      qianTree
   },
   data() {
      return {
         department: [],
         model1: {
            departmentName: '',
            idCard: '',
            name: '',
            phone: '',
            password: '',
            deptIds: '',
            isHostUser: 1
         },
         tempdeptIds: '',
         userId: '',
         diffdeptId: '',
         ismodifyDept: false,
         rules: {
            deptIds: {
               type: 'string',
               required: true,
               message: '请至少选择一个部门',
               trigger: ['blur', 'change']
            },
            idCard: {
               type: 'string',
               required: true,
               message: '请填写身份证号码',
               trigger: ['blur', 'change']
            },
            name: {
               type: 'string',
               required: true,
               message: '请填写姓名',
               trigger: ['blur', 'change']
            },
            phone: {
               type: 'string',
               required: true,
               message: '请填写手机号',
               trigger: ['blur', 'change']
            },
            password: {
               type: 'string',
               required: true,
               message: '请填写密码',
               trigger: ['blur', 'change']
            }
         },
         errorType: 'message'
      };
   },
   onLoad(params) {
      if (params.userId) {
         this.userId = params.userId;
      }
   },
   onShow() {
      if (this.userId) {
         this.viewInfo();
      }
      this.$refs.tkitree._hide();
   },
   onReady() {
      this.$refs.uForm.setRules(this.rules);
   },
   created() {
      this.fetchTree();
   },
   methods: {
      fetchTree() {
         uni.request({
            url: `${url}/admin/dept/ownTree`,
            header: {
               Authorization: 'Bearer' + ' ' + uni.getStorageSync('token'),
               CLIENT_TOC: 'Y'
            },
            success: res => {
               this.department = res.data.data;
            }
         });
   let url = 'http://192.168.31.14:9999';
   import qianTree from '@/components/qian-tree/qian-tree.vue';
   import { BaseUrl } from '@/api/publicInterface.js'
   export default {
      components: {
         qianTree
      },
      viewInfo(v) {
         uni.showLoading({
            title: '加载中'
         });
         this.$reqGet('getAppById', { userId: this.userId.toString() }).then(res => {
            uni.hideLoading();
            if (res.code == 0) {
               this.tempdeptIds = res.data.deptIds;
               if (res.data.deptIds == null) {
                  this.diffdeptId = '全部';
               } else {
                  this.diffdeptId = this.findNameById(this.department, res.data.deptIds.split(',')).join();
               }
               this.model1 = {
                  ...res.data,
                  password: '',
                  deptIds: this.diffdeptId
               };
            } else {
               this.$u.toast('加载失败');
            }
         });
      data() {
         const checkPassword = (rule, value, callback) => {
        // let roles = this.$store.getters.roles;//当前用户角色id
        // let passL = 8;
        // if (roles.concat(1)){
        //   passL = 10
        // }
        let passL = 8;
        this.level = []
        if(!value) {
          return callback()
        }
        if(value.length < passL) {
          return callback(`密码不能少于${passL}位`)
        }
        if(value.length > 16) {
          return callback('密码不能大于16位')
        }
        //校验是数字
        const regex1 = /^\d+$/
        // 校验字母
        const regex2 = /^[A-Za-z]+$/
        // 校验符号
        const regex3 =
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
        if(regex1.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex2.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex3.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(/^[A-Za-z\d]+$/.test(value)) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          this.level.push('high')
        }
        return callback()
      };
     const phone = (rule, value, callback) =>{
          if(/^1[34578]\d{9}$/.test(value) == false){
                    callback(new Error("请输入正确的手机号"));
                }else{
                    callback();
                }
     }
         return {
            level:[],
            department: [],
            model1: {
               departmentName: '',
               idCard: '',
               name: '',
               phone: '',
               password: '',
               deptIds: '',
               isHostUser: 1
            },
            tempdeptIds: '',
            userId: '',
            diffdeptId: '',
            ismodifyDept: false,
            rules: {
               deptIds: {
                  type: 'string',
                  required: true,
                  message: '请至少选择一个部门',
                  trigger: ['blur', 'change']
               },
               idCard: {
                  type: 'string',
                  required: true,
                  message: '请填写身份证号码',
                  trigger: ['blur', 'change']
               },
               name: {
                  type: 'string',
                  required: true,
                  message: '请填写姓名',
                  trigger: ['blur', 'change']
               },
               phone:  [{
                     required: true,
                     message: '请输入手机号',
                     trigger: ['blur', 'change']
                  },
                     {
                     validator: phone,
                     trigger: 'change'
                     }],
                        password: [{
                     required: false,
                     message: '请设置密码',
                     trigger: ['blur', 'change']
                  },
                     {
                     validator: checkPassword,
                     trigger: 'change'
                     }],
            },
            errorType: 'message'
         };
      },
      treeOpen() {
         this.$refs.tkitree._show();
      },
      treeClose() {
         this.$refs.tkitree._hide();
      },
      treeChooseValue(v) {
         this.$refs.tkitree._hide();
         this.model1.deptIds = this.findNameById(this.department, v).join();
         this.diffdeptId = v.join();
         this.ismodifyDept = true;
         this.$refs.uForm.clearValidate('deptIds');
      },
      findNameById(tree, idArr) {
         let result = [];

         function traverse(node, idArr) {
            if (!node) return;
            if (idArr.includes(node.id)) {
               result.push(node.name);
            }
            if (node.children && node.children.length > 0) {
               node.children.forEach(child => {
                  traverse(child, idArr);
               });
            }
      onLoad(params) {
         if (params.userId) {
            this.userId = params.userId;
         }

         tree.forEach(node => {
            traverse(node, idArr);
         });

         return result;
      },
      submitMsg() {
         this.$refs.uForm
            .validate()
            .then(res => {
               if (this.userId) {
                  this.model1.deptIds = this.ismodifyDept ? this.diffdeptId : this.tempdeptIds;
                  this.$reqAllJson('appUpdateById', this.model1, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
                     if (res.code == 0) {
                        this.$u.toast('修改成功');
                        let timer = setTimeout(() => {
                           uni.navigateBack({
                              delta: 1
                           });
                        }, 500);
                     } else {
                        this.$u.toast('修改失败');
                     }
                  });
               } else {
      onShow() {
         if (this.userId) {
            this.viewInfo();
         }
         this.$refs.tkitree._hide();
      },
      onReady() {
         this.$refs.uForm.setRules(this.rules);
      },
      created() {
         this.fetchTree();
      },
      methods: {
         fetchTree() {
            uni.request({
               url: `${BaseUrl}/admin/dept/ownTree`,
               header: {
                  Authorization: 'Bearer' + ' ' + uni.getStorageSync('token'),
                  clientToc: 'Y',
                   'CLIENT_TOC': 'Y',
               },
               success: res => {
                  this.department = res.data.data;
               }
            });
         },
         viewInfo(v) {
            uni.showLoading({
               title: '加载中'
            });
            this.$reqGet('getAppById', { userId: this.userId.toString() }).then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  this.tempdeptIds = res.data.deptIds;
                  if (res.data.deptIds == null) {
                     this.diffdeptId = '全部';
                  } else {
                     this.diffdeptId = this.findNameById(this.department, res.data.deptIds.split(','))
                     .join();
                  }
                  this.model1 = {
                     ...this.model1,
                     ...res.data,
                     password: '',
                     deptIds: this.diffdeptId
                  };
                  this.$reqPost('appSave', this.model1, 'json').then(result => {
                     if (result.code == 0) {
                        this.$u.toast('提交成功');
                        let timer = setTimeout(() => {
                           uni.navigateBack({
                              delta: 1
                           });
                        }, 500);
                     } else {
                        this.$u.toast(result.msg ? result.msg : '提交失败');
                     }
               } else {
                  this.$u.toast('加载失败');
               }
            });
         },
         treeOpen() {
            this.$refs.tkitree._show();
         },
         treeClose() {
            this.$refs.tkitree._hide();
         },
         treeChooseValue(v) {
            this.$refs.tkitree._hide();
            this.model1.deptIds = this.findNameById(this.department, v).join();
            this.diffdeptId = v.join();
            this.ismodifyDept = true;
            this.$refs.uForm.clearValidate('deptIds');
         },
         findNameById(tree, idArr) {
            let result = [];

            function traverse(node, idArr) {
               if (!node) return;
               if (idArr.includes(node.id)) {
                  result.push(node.name);
               }
               if (node.children && node.children.length > 0) {
                  node.children.forEach(child => {
                     traverse(child, idArr);
                  });
               }
            })
            .catch(error => {
               console.log(error);
            }

            tree.forEach(node => {
               traverse(node, idArr);
            });

            return result;
         },
         submitMsg() {
            this.$refs.uForm
               .validate()
               .then(res => {
                  if (this.userId) {
                     this.model1.deptIds = this.ismodifyDept ? this.diffdeptId : this.tempdeptIds;
                     this.$reqAllJson('appUpdateById', this
                  .model1, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
                        if (res.code == 0) {
                           this.$u.toast('修改成功');
                           let timer = setTimeout(() => {
                              uni.navigateBack({
                                 delta: 1
                              });
                           }, 500);
                        } else {
                           this.$u.toast('修改失败');
                        }
                     });
                  } else {
                     this.model1 = {
                        ...this.model1,
                        deptIds: this.diffdeptId
                     };
                     this.$reqPost('appSave', this.model1, 'json').then(result => {
                        if (result.code == 0) {
                           this.$u.toast('提交成功');
                           let timer = setTimeout(() => {
                              uni.navigateBack({
                                 delta: 1
                              });
                           }, 500);
                        } else {
                           this.$u.toast(result.msg ? result.msg : '提交失败');
                        }
                     });
                  }
               })
               .catch(error => {
                  console.log(error);
               });
         }
      }
   }
};
   };
</script>

<style lang="scss" scoped>
.main {
   width: 100%;
   &-block {
      width: 94%;
      margin: vww(15);
   }
   .submit-button {
      position: relative;
      bottom: vww(-20);
      /deep/ .u-button {
         width: 631rpx;
         height: 74rpx;
         border: 2px solid #3b56eb;
         background-color: #fff;
         color: #3b56eb;
         border-radius: 37rpx 37rpx 37rpx 37rpx;
<style lang="scss"
   scoped>
   .main {
      width: 100%;

      &-block {
         width: 94%;
         margin: vww(15);
      }

      .submit-button {
         position: relative;
         bottom: vww(-20);

         /deep/ .u-button {
            width: 631rpx;
            height: 74rpx;
            border: 2px solid #3b56eb;
            background-color: #fff;
            color: #3b56eb;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
         }
      }
   }
}
</style>
   .intensity {
    width: 100%;
    margin-top: 10rpx;
    .psdText {
      font-size: 14px;
      margin-right: 10px;
    }

    .line {
      display: inline-block;
      width: 70rpx;
      height: 8rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
      margin-right: 16rpx;

      &.low {
        background: #f4664a;
      }

      &.middle {
        background: #ffb700;
      }

      &.high {
        background: #2cbb79;
      }
    }

    .level {
      margin: 0 32rpx 0 16rpx;
    }

    .warningtext {
      color: #5a5a5a;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
</style>