新增地区选择组件

components/districtSelector/districtSelector.vue

@@ -0,0 +1,241 @@
+<template>
+  <view>
+    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
+      <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
+        <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+      <u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
+        <u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+      <u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
+        <u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+      <u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
+        <u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+      <u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
+        <u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+      <u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
+        <u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
+        <u-icon slot="right" name="arrow-right"></u-icon>
+      </u-form-item>
+    </u--form>
+    <u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
+      @cancel="showProvince = false" @close="showProvince = false"></u-picker>
+  </view>
+</template>
+
+<script>
+  import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
+  import { Toast } from "../../libs/uniApi"
+  export default {
+    name:"districtSelector",
+    data() {
+      return {
+        showProvince: false,
+        formData: {
+          province: '',
+          city: '',
+          area: '',
+          street: '',
+          village: '',
+          brigade: '',
+        },
+        formDataText: {
+          province: '',
+          city: '',
+          area: '',
+          street: '',
+          village: '',
+          brigade: '',
+        },
+        rules:{
+          province: {
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+          city: {
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+          area: {
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+          street: {
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+          village: {
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+          brigade: {
+            type: 'any',
+            required: true,
+            message: '不能为空',
+            trigger: ['change', 'blur']
+          },
+        },
+        provinceList: [],
+        cityList: [],
+        areaList: [],
+        streetList: [],
+        villageList: [],
+        brigadeList: [],
+        changeType: '', //当前选择的城市类型
+      };
+    },
+    mounted() {
+      this.initProvinceAndCity();
+    },
+    methods:{
+      validate(){
+        return new Promise((resolve, reject)=>{
+          this.$refs.uForm.validate().then(res=>{
+            if(res)resolve(true);
+            else reject(false);
+          })
+        })
+      },
+      // 初始化
+      async initProvinceAndCity() {
+        let res = await commonProvince();
+        this.provinceList = res.data;
+        this.provinceList.forEach(item => {
+          if (item.province_name.indexOf('四川') !== -1) {
+            this.formData.province = item.province_code;
+            this.formDataText.province = item.province_name;
+            commonCity({
+              city: item.province_code
+            }).then(cityRes => {
+              this.cityList = cityRes.data;
+              this.cityList.forEach(item => {
+                if (item.city_name.indexOf('泸州') !== -1) {
+                  this.formData.city = item.city_code;
+                  this.formDataText.city = item.city_name;
+                  commonArea({
+                    area: item.city_code
+                  }).then(areaRes => {
+                    this.areaList = areaRes.data;
+                  })
+                }
+              })
+            })
+          }
+        })
+      
+      },
+      // 选择城市
+      changeCity(type) {
+        if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
+        this.changeType = type;
+        this.showProvince = true;
+      },
+      // 选择列表
+      changeList() {
+        return this[this.changeType + 'List'];
+      },
+      // 选中城市
+      confirm(e) {
+        let flag = false;//清空所选标记
+        if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
+        if (this.changeType == 'brigade') {
+          this.formData.brigade = e.value[0].id;
+          this.formDataText.brigade = e.value[0].brigade_name;
+          this.showProvince = false;
+          return ;
+        }
+        this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
+        this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
+        // 加载下一级城市信息
+        switch (this.changeType) {
+          case 'province':
+            this.loadCity(this.formData['province']);
+            break;
+          case 'city':
+            this.loadArea(this.formData['city']);
+            break;
+          case 'area':
+            this.loadStreet(this.formData['area']);
+            break;
+          case 'street':
+            this.loadVillage(this.formData['street']);
+            break;
+          case 'village':
+            this.loadBrigade(this.formData['village']);
+            break;
+        }
+        // 清空之前所选信息
+        if(flag) switch (this.changeType) {
+          case 'province':
+            this.formData.city = '';
+            this.formDataText.city = ''
+          case 'city':
+            this.formData.area = '';
+            this.formDataText.area = ''
+          case 'area':
+            this.formData.street = '';
+            this.formDataText.street = ''
+          case 'street':
+            this.formData.village = '';
+            this.formDataText.village = ''
+          case 'village':
+            this.formData.brigade = '';
+            this.formDataText.brigade = ''
+        }
+        this.showProvince = false;
+      },
+      loadCity(code) {
+        commonCity({
+          city: code
+        }).then(res => {
+          this.cityList = res.data;
+        })
+      },
+      loadArea(code) {
+        commonArea({
+          area: code
+        }).then(res => {
+          this.areaList = res.data;
+        })
+      },
+      loadStreet(code) {
+        commonStreet({
+          street: code
+        }).then(res => {
+          this.streetList = res.data;
+        })
+      },
+      loadVillage(code) {
+        commonVillage({
+          village: code
+        }).then(res => {
+          this.villageList = res.data;
+        })
+      },
+      loadBrigade(code) {
+        commonBrigade({
+          brigade: code
+        }).then(res => {
+          this.brigadeList = res.data;
+        })
+      },
+    }
+  }
+</script>
+
+<style>
+
+</style>

pages.json

@@ -301,6 +301,24 @@
         "navigationBarTextStyle": "white"
       }
 
+    }, {
+      "path": "archives/archives",
+      "style": {
+        "navigationBarTitleText": "档案管理",
+        "enablePullDownRefresh": false,
+        "navigationBarBackgroundColor": "#3175f9",
+        "navigationBarTextStyle": "white"
+      }
+
+    }, {
+      "path": "newArchives/newArchives",
+      "style": {
+        "navigationBarTitleText": "新增档案",
+        "enablePullDownRefresh": false,
+        "navigationBarBackgroundColor": "#3175f9",
+        "navigationBarTextStyle": "white"
+      }
+
     }]
   }],
   "globalStyle": {

static/server/server.js

@@ -217,21 +217,21 @@ export const oaHomeData = [
     url: '/subpkg/companyAdmin/companyAdmin'
   },
   {
-    text: '片区经理',
+    text: '档案管理',
-    icon: prefix + 'oa/yzsq@2x.png',
+    icon: prefix + 'oa/bxsq@2x.png',
-    url: '/pages/oaManager/oaManager'
+    url: '/subpkg/archives/archives'
   },
+  // {
+  //   text: '片区经理',
+  //   icon: prefix + 'oa/yzsq@2x.png',
+  //   url: '/pages/oaManager/oaManager'
+  // },
   {
     text: '财务管理',
     icon: prefix + 'oa/gengduo@2x.png',
     url: '/subpkg/finance/finance'
   },
   // {
-  //   text: 'gong',
-  //   icon: prefix + 'oa/qjsq@2x.png',
-  //   url: '/pages/views/leave_request'
-  // },
-  // {
   //   text: '出差申请',
   //   icon: prefix + 'oa/ccsq@2x.png'
   // },

subpkg/newPersonnel/newPersonnel.vue

@@ -33,30 +33,7 @@
           <u--input v-model="formData.password_confirm" placeholder="不输入密码则默认为手机号" password></u--input>
         </u-form-item> -->
         <view class="title">地区信息</view>
-        <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
+        <districtSelector ref="districtSelectorRef"></districtSelector>
-          <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
-        <u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
-          <u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
-        <u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
-          <u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
-        <u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
-          <u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
-        <u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
-          <u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
-        <u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
-          <u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-        </u-form-item>
         <view class="title">资质信息</view>
         <u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card"
           borderBottom>
@@ -101,8 +78,6 @@
           </u-upload>
         </u-form-item>
       </u--form>
-      <u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
-        @cancel="showProvince = false" @close="showProvince = false"></u-picker>
       <button @click="addAcountNum" type="primary" class="btn">创建</button>
     </view>
   </view>
@@ -110,13 +85,12 @@
 
 <script>
   import { upLoadImage } from "@/api/file.js"
-  import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
   import { loginAdd } from "@/api/oaUser.js"
-  import { Toast } from "../../libs/uniApi"
+  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
   export default {
+    components: { districtSelector },
     data() {
       return {
-        showProvince: false,
         formData: {
           account: '', //账号
           password: '123456', //密码
@@ -126,12 +100,6 @@
           sex: '',
           avatar: '',
           nickname: '',
-          province: '',
-          city: '',
-          area: '',
-          street: '',
-          village: '',
-          brigade: '',
           address: '测试地址',
           qualification: {
             id_card: "",
@@ -142,14 +110,6 @@
             bank_account_b: ""
           },
         },
-        formDataText: {
-          province: '',
-          city: '',
-          area: '',
-          street: '',
-          village: '',
-          brigade: '',
-        },
         rules: {
           account: {
             required: true,
@@ -182,37 +142,6 @@
             message: '姓名不能为空',
             trigger: ['change', 'blur']
           },
-          province: {
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
-          city: {
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
-          area: {
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
-          street: {
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
-          village: {
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
-          brigade: {
-            type: 'any',
-            required: true,
-            message: '不能为空',
-            trigger: ['change', 'blur']
-          },
           'qualification.id_card': {
             type: 'string',
             required: true,
@@ -250,146 +179,15 @@
             trigger: ['change', 'blur']
           },
         },
-        provinceList: [],
-        cityList: [],
-        areaList: [],
-        streetList: [],
-        villageList: [],
-        brigadeList: [],
-        changeType: '', //当前选择的城市类型
       }
     },
-    onLoad() {
+    onLoad() {},
-      this.initProvinceAndCity()
-    },
     onReady() {
       //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
       this.$refs.uForm.setRules(this.rules)
     },
     onShow() {},
     methods: {
-      async initProvinceAndCity() {
-        let res = await commonProvince();
-        this.provinceList = res.data;
-        this.provinceList.forEach(item => {
-          if (item.province_name.indexOf('四川') !== -1) {
-            this.formData.province = item.province_code;
-            this.formDataText.province = item.province_name;
-            commonCity({
-              city: item.province_code
-            }).then(cityRes => {
-              this.cityList = cityRes.data;
-              this.cityList.forEach(item => {
-                if (item.city_name.indexOf('泸州') !== -1) {
-                  this.formData.city = item.city_code;
-                  this.formDataText.city = item.city_name;
-                  commonArea({
-                    area: item.city_code
-                  }).then(areaRes => {
-                    this.areaList = areaRes.data;
-                  })
-                }
-              })
-            })
-          }
-        })
-
-      },
-      // 选择城市
-      changeCity(type) {
-        if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
-        this.changeType = type;
-        this.showProvince = true;
-      },
-      // 选择列表
-      changeList() {
-        return this[this.changeType + 'List'];
-      },
-      // 选中城市
-      confirm(e) {
-        let flag = false;//清空所选标记
-        if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
-        if (this.changeType == 'brigade') {
-          this.formData.brigade = e.value[0].id;
-          this.formDataText.brigade = e.value[0].brigade_name;
-          this.showProvince = false;
-          return ;
-        }
-        this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
-        this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
-        // 加载下一级城市信息
-        switch (this.changeType) {
-          case 'province':
-            this.loadCity(this.formData['province']);
-            break;
-          case 'city':
-            this.loadArea(this.formData['city']);
-            break;
-          case 'area':
-            this.loadStreet(this.formData['area']);
-            break;
-          case 'street':
-            this.loadVillage(this.formData['street']);
-            break;
-          case 'village':
-            this.loadBrigade(this.formData['village']);
-            break;
-        }
-        // 清空之前所选信息
-        if(flag) switch (this.changeType) {
-          case 'province':
-            this.formData.city = '';
-            this.formDataText.city = ''
-          case 'city':
-            this.formData.area = '';
-            this.formDataText.area = ''
-          case 'area':
-            this.formData.street = '';
-            this.formDataText.street = ''
-          case 'street':
-            this.formData.village = '';
-            this.formDataText.village = ''
-          case 'village':
-            this.formData.brigade = '';
-            this.formDataText.brigade = ''
-        }
-        this.showProvince = false;
-      },
-      loadCity(code) {
-        commonCity({
-          city: code
-        }).then(res => {
-          this.cityList = res.data;
-        })
-      },
-      loadArea(code) {
-        commonArea({
-          area: code
-        }).then(res => {
-          this.areaList = res.data;
-        })
-      },
-      loadStreet(code) {
-        commonStreet({
-          street: code
-        }).then(res => {
-          this.streetList = res.data;
-        })
-      },
-      loadVillage(code) {
-        commonVillage({
-          village: code
-        }).then(res => {
-          this.villageList = res.data;
-        })
-      },
-      loadBrigade(code) {
-        commonBrigade({
-          brigade: code
-        }).then(res => {
-          this.brigadeList = res.data;
-        })
-      },
       // 上传头像
       async afterReadAvatar(event) {
         upLoadImage({
@@ -414,23 +212,24 @@
       },
       // 创建账号
       addAcountNum() {
-        this.$refs.uForm.validate().then(async (e) => {
+        this.$refs.uForm.validate().then((e) => {
-          if(e){
+          if (e) this.$refs.districtSelectorRef.validate().then(async (e) => {
-            uni.showLoading()
+            if (e) {
-            let res = await loginAdd(this.formData);
+              uni.showLoading()
-            uni.hideLoading()
+              let res = await loginAdd({...this.formData, ...this.$refs.districtSelectorRef.formData});
-            uni.showToast({
+              uni.hideLoading()
-              icon:"none",
+              uni.showToast({
-              title:"添加成功",
+                icon: "none",
-              success: () => {
+                title: "添加成功",
-                setTimeout(()=>{
+                success: () => {
-                  uni.navigateBack()
+                  setTimeout(() => {
-                },1000)
+                    uni.navigateBack()
-              }
+                  }, 1000)
-            })
+                }
-          }
+              })
+            }
+          })
         })
-
       },
       // // 获取机型,[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
       // initTerminal() {
@@ -490,7 +289,7 @@
       }
     }
 
-    .btn{
+    .btn {
       margin-top: 32rpx;
       // margin-bottom: 40rpx;
       width: 100%;