yangan
2024-03-14 8deb375725d1ad19e1a90ec6c83cf09f64d3de9f
pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit.vue
@@ -1,237 +1,283 @@
<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%"
               @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-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="idCard">
               <u--input border="none"
                  v-model="model1.idCard"
                  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="name">
               <u--input border="none"
                  v-model="model1.name"
                  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 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 label="密码"
               labelWidth="20%"
               borderBottom
               prop="password">
               <u--input border="none"
                  v-model="model1.password"
                  placeholder="请输入密码"></u--input>
            </u-form-item>
         </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();
      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']
               }
               this.model1 = {
                  ...res.data,
                  password: '',
                  deptIds: this.diffdeptId
               };
            } else {
               this.$u.toast('加载失败');
            }
         });
            },
            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'
               },
               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>
</style>