选择党组织

src/project/pingchang/AppPartyAuth/partyAuthApply.vue

@@ -42,7 +42,10 @@
             <h2>党组织</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.idNumber" :maxlength="50"/>
+            <AiPagePicker type="custom" @select="handleSelectParty"
+                          :ops="{url:'./selectPartyOrg',label: 'name'}">
+              <AiMore v-model="form.name"/>
+            </AiPagePicker>
           </div>
         </div>
       </div>
@@ -70,7 +73,7 @@
             <h2>党员类型</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.idNumber" disabled :maxlength="20"/>
+            <AiSelect dict="fpType" v-model="form.objectType"></AiSelect>
           </div>
         </div>
       </div>
@@ -122,6 +125,11 @@ export default {
       this.form.nucleicAcidDate = `${e.year}-${e.month}-${e.day}`
     },
 
+    handleSelectParty(v) {
+      console.log(v);
+    },
+
+
     submit() {
 
       if (!this.form.temperature) {

src/project/pingchang/AppPartyAuth/selectPartyOrg.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="selectPartyOrg">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in slectList" :key="index">
+          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
+          <span style="color:#3F8DF5" @click="partyNameClick(item, index)" v-text="item.name"/>
+        </span>
+      </div>
+      <div class="showTypes">
+        <div>
+          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <img src="https://cdn.cunwuyun.cn/pingchang/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
+                   @click.stop="partyClick(item, index)"/>
+              <img src="https://cdn.cunwuyun.cn/pingchang/xz.png" alt="" class="imgselect" v-else @click.stop="partyClick(item, index)"/>
+            </div>
+            <div class="rightes fill">
+              <div class="applicationNames fill">{{ item.name }}</div>
+              <u-icon v-if="item.hasChildren" @click="itemClick(item)" name="arrow-right" color="#ddd"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'selectPartyOrg',
+    data() {
+      return {
+        SelectParty: {},
+        allData: null,
+        treeList: [],
+        slectList: [],
+        userList: [],
+        parentId: '',
+        isFormMap: 0, //1为网格地图 一级不允许选中
+      }
+    },
+    onLoad(option) {
+      if (option.isFormMap) {
+        this.isFormMap = option.isFormMap
+      }
+      this.getPartyOrg()
+    },
+    methods: {
+      getPartyOrg() {
+        this.$instance.post(`/app/partyOrganization/queryPartyOrganizationServiceList`).then((res) => {
+          if (res?.data) {
+            console.log(res);
+            let parents = res.data.map(e => e.parentId)
+            this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
+            this.treeInit()
+          }
+        })
+      },
+      treeInit() {
+        // let last = uni.getStorageSync("lastSelectedParty")
+        // if (last) {
+          // this.$instance.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+          //   params: {id: last}
+          // }).then(res => {
+          //   if (res?.data) {
+          //     this.slectList = [{name: '可选范围', id: ''}, res.data].flat()
+          //     this.getPartyAndParent({id: last})
+          //   }
+          // })
+          // this.getPartyAndParent({id: last})
+        // } else {
+          this.treeList = this.allData.filter(e => !e.parentId)
+          this.treeList.map((item) => item.isChecked = false)
+          let obj = {name: '可选范围', id: ''}
+          this.slectList.push(obj)
+        // }
+      },
+      itemClick(row) {
+        if (row.hasChildren) {
+          let obj = {
+            name: row.name,
+            id: row.id,
+          }
+          this.slectList.push(obj)
+          this.getPartyAndParent(row)
+        }
+      },
+      getPartyAndParent(row) {
+        let {id: parentId} = row
+        this.treeList = this.allData.filter(e => e.parentId == parentId)
+      },
+      partyNameClick(row, index) {
+        this.userList = []
+        if (!index) { //第一级别
+          this.slectList = []
+          uni.setStorageSync("lastSelectedParty", '')
+          this.treeInit()
+        } else {
+          var list = []
+          this.slectList.map((item, i) => {
+            if (i <= index) {
+              list.push(item)
+            }
+          })
+          this.slectList = list
+          this.getPartyAndParent(row)
+        }
+      },
+      partyClick(row, index) {
+        if (this.treeList[index].isChecked) {//取消
+          this.treeList[index].isChecked = false
+          this.SelectParty = {}
+        } else {
+          this.treeList.map((item) => {
+            item.isChecked = false
+          })
+          this.treeList[index].isChecked = true
+          this.SelectParty = row
+        }
+        this.$forceUpdate()
+      },
+      submit() {
+        console.log(this.SelectParty);
+        if (this.SelectParty.id != null) {
+          uni.setStorageSync("lastSelectedParty", this.SelectParty.parentId)
+          uni.navigateBack({
+            success: () => {
+              uni.$emit("pagePicker:custom", this.SelectParty)
+            }
+          })
+        } else {
+          return this.$u.toast('请选择党组织')
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .selectPartyOrg {
+    min-height: 100vh;
+    background: #fff;
+    padding-bottom: 140px;
+    box-sizing: border-box;
+
+    .header-middle {
+      .hint {
+        padding: 28px 20px 28px 32px;
+        line-height: 56px;
+        box-shadow: 0px 1px 0px 0px #e4e5e6;
+        font-size: 30px;
+        font-weight: 500;
+        word-break: break-all;
+      }
+
+      .showTypes {
+        .cards {
+          display: flex;
+          align-items: center;
+          height: 120px;
+          line-height: 120px;
+          padding: 0 0 0 32px;
+
+          .imges {
+            display: flex;
+            align-items: center;
+            .imgselect {
+              width: 48px;
+              height: 48px;
+              vertical-align: middle;
+            }
+
+            .avatras {
+              width: 74px;
+              height: 74px;
+              border-radius: 8px;
+              margin-left: 36px;
+            }
+          }
+
+          img {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+          }
+
+          .rightes {
+            display: flex;
+            border-bottom: 1px solid #e4e5e6;
+            padding: 0 16px;
+
+            .applicationNames {
+              display: inline-block;
+              font-size: 36px;
+              font-weight: 500;
+              color: #333333;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              vertical-align: bottom;
+            }
+          }
+        }
+      }
+
+    }
+
+    .subBtn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 118px;
+      background: #f4f8fb;
+
+      div {
+        width: 192px;
+        height: 80px;
+        line-height: 80px;
+        text-align: center;
+        background: #1365dd;
+        border-radius: 4px;
+        font-size: 32px;
+        color: #fff;
+        margin: 20px 34px 0 0;
+        float: right;
+      }
+    }
+
+  }
+</style>