特殊人群

src/project/new/AppSpecialPeople/AppSpecialPeople.vue

@@ -0,0 +1,483 @@
+<template>
+  <div class="AppSpecialPeople">
+    <template v-if="hasGridPermit">
+      <div class="tab-select">
+        <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
+             @click="tabClick(index)">{{ item }}<span></span></div>
+      </div>
+      <div class="area-select">
+        <div class="select-content">
+          <div class="area-content fill">
+            <AiPagePicker type="gird" @select="handleGridSelect">
+              <AiMore v-model="gridName" placeholder="选择网格"/>
+            </AiPagePicker>
+          </div>
+          <div class="search-input" v-if="tabIndex">
+            <img src="./img/search-icon.png" alt=""/>
+            <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18"
+                     v-model="search.name" @confirm="getUserList" :clearable="false" maxlength="6"/>
+          </div>
+        </div>
+      </div>
+      <div v-if="!tabIndex">
+        <div class="info-content">
+          <div class="title">特殊人群</div>
+          <div class="num-content">
+            <div class="num-item" v-for="(item, index) in statisticsList" :key="index">
+              <h3 v-text="item.value"/>
+              <p v-text="item.label"/>
+            </div>
+            <AiEmpty v-if="!statisticsList.length"/>
+          </div>
+        </div>
+        <div class="info-content">
+          <div class="title">本月新增</div>
+          <div class="num-content color-org">
+            <div class="num-item" v-for="(item, index) in statisticsListMon" :key="index">
+              <h3>{{ item.value }}</h3>
+              <p>{{ item.label }}</p>
+            </div>
+            <AiEmpty v-if="!statisticsListMon.length"/>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="item-content" v-for="(item, index) in userList" :key="index">
+          <div class="title" @click="showUserType(index)">
+            <h2>{{ item.label }}</h2>
+            <img src="./img/down-icon.png" alt="" :class="item.check ? 'img-active' : ''"/>
+          </div>
+          <div class="user-list" v-if="item.check">
+            <div class="user-item" v-for="(e, indexs) in item.value" :key="indexs" @click="showDetail(e)">
+              <div class="user-img">
+                <img src="./img/user-img.png" alt=""/>
+              </div>
+              <div class="user-info">
+                <p class="name">{{ e.name }}
+                  <span class="btn-icon" v-if="isAdmin || user.id == e.create_user_id">
+                  <img src="./img/edit-icon.png" alt="" @click.stop="toEdit(e,item.dictValue)">
+                  <img src="./img/del-icon.png" alt="" @click.stop="del(e,item.dictValue)">
+                </span>
+                </p>
+                <div class="phone">
+                  <span>{{ idNumberInit(e.idNumber) }}</span>
+                  <span>{{ e.phone }}</span>
+                </div>
+              </div>
+            </div>
+            <p class="text" v-if="!item.value.length">{{ '暂无' + item.label + '信息' }}</p>
+          </div>
+        </div>
+        <div class="footer" @click="toAdd">
+          <div class="btn">新增特殊人群信息</div>
+        </div>
+      </div>
+    </template>
+    <AiEmpty description="没有网格员权限<br>无法查看特殊人员信息~" v-else style="text-align:center;"/>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'AppSpecialPeople',
+  appName: '特殊人群',
+  data() {
+    return {
+      areaName: '',
+      tabs: ['统计信息', '人员信息'],
+      tabIndex: 0,
+      addressArea: '',
+      statisticsList: [],
+      statisticsListMon: [],
+      userList: [],
+      gridName: "",
+      search: {name: ''}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    hasGridPermit() {
+      return this.user.girdCheckType != 0
+    },
+    isAdmin() {
+      return this.user.girdCheckType == 2
+    },
+  },
+  created() {
+    this.$dict.load('appSpecialTypeFive')
+  },
+  onShow() {
+    document.title = '特殊人群管理'
+    if (this.hasGridPermit) {
+      if (!this.search.girdId) {
+        this.search.girdId = this.user.girdId
+        this.gridName = this.user.girdName
+      }
+      this.getDatas()
+    }
+  },
+  methods: {
+    getDatas() {
+      this.getStatistic()
+      this.getStatisticMon()
+      this.getUserList()
+      this.$forceUpdate()
+    },
+    handleGridSelect(e) {
+      this.gridName = e?.girdName
+      this.search.girdId = e?.id
+      this.getDatas()
+    },
+    areaSelect(e) {
+      this.search.areaId = e
+      this.getDatas()
+    },
+    tabClick(index) {
+      this.tabIndex = index
+    },
+    getStatistic() {
+      this.statisticsList = []
+      this.$instance.post(`/app/appapplicationinfo/specialStatistic`, null, {
+        params: {...this.search, type: 0, range: 0}
+      }).then((res) => {
+        if (res?.data) {
+          this.statisticsList = Object.keys(res.data).map((label, i, arr) => ({label, value: res.data[label]}))
+        }
+      })
+    },
+    getStatisticMon() {
+      this.statisticsListMon = []
+      this.$instance.post(`/app/appapplicationinfo/specialStatistic`, null, {
+        params: {...this.search, type: 0, range: 1}
+      }).then((res) => {
+        if (res?.data) {
+          this.statisticsListMon = Object.keys(res.data).map((label, i, arr) => ({label, value: res.data[label]}))
+        }
+      })
+    },
+    getUserList() {
+      this.userList = []
+      this.$instance.post(`/app/appapplicationinfo/queryPeople`, null, {
+        params: {...this.search, type: 0, status: 1}
+      }).then((res) => {
+        if (res?.data) {
+          this.userList = Object.keys(res.data).map(e => ({
+            label: e,
+            value: res.data[e],
+            check: false,
+          }))
+        }
+      })
+    },
+    toAdd() {
+      uni.navigateTo({url: './add'})
+    },
+    idNumberInit(idNumber) {
+      if (!idNumber) {
+        idNumber = ''
+      } else {
+        idNumber = idNumber.substring(0, 5) + '******' + idNumber.substring(12, 15)
+      }
+      return idNumber
+    },
+    showUserType(index) {
+      if (this.userList[index].check) {
+        this.userList[index].check = false
+      } else {
+        this.userList.map((item) => {
+          item.check = false
+        })
+        this.userList[index].check = true
+      }
+    },
+    toEdit(row) {
+      uni.navigateTo({
+        url: `./add?id=${row.id}&appId=${row.appId}`
+      })
+    },
+    del(row) {
+      this.$confirm('确定删除该数据?').then(() => {
+        uni.showLoading({})
+        let {id: ids, appId} = row
+        this.$instance.post("/app/appapplicationinfo/delete", null, {
+          params: {ids, appId}
+        }).then((res) => {
+          if (res?.code == 0) {
+            this.$u.toast('删除成功！')
+            this.getUserList()
+          }
+          uni.hideLoading()
+        })
+      }).catch(() => {
+      })
+    },
+    showDetail(e) {
+      uni.navigateTo({url: `/apps/AppPeopleList/DetailCard?id=${e.resident_id}`})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppSpecialPeople {
+  min-height: 100%;
+
+  .tab-select {
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    background: #3975c6;
+    display: flex;
+
+    .item {
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #cddcf0;
+    }
+
+    .active {
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      position: relative;
+      color: #fff;
+
+      span {
+        width: 48px;
+        height: 4px;
+        background: #fff;
+        position: absolute;
+        bottom: 14px;
+        left: 50%;
+        margin-left: -24px;
+      }
+    }
+  }
+
+  .area-select {
+    width: 100%;
+    background: #fff;
+    padding-left: 32px;
+    box-sizing: border-box;
+
+    .select-content {
+      width: 100%;
+      padding: 24px 32px 24px 0;
+      border-bottom: 1px solid #d8dde6;
+      display: flex;
+      justify-content: space-between;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+      line-height: 44px;
+      box-sizing: border-box;
+
+      .area-content {
+        line-height: 64px;
+
+        img {
+          width: 42px;
+          vertical-align: middle;
+          margin-right: 16px;
+        }
+
+        .u-icon {
+          margin-left: 6px;
+        }
+      }
+
+      .search-input {
+        width: 402px;
+        height: 64px;
+        background: #f5f5f5;
+        border-radius: 32px;
+        padding: 14px 32px 14px 64px;
+        box-sizing: border-box;
+        position: relative;
+
+        img {
+          width: 32px;
+          height: 32px;
+          margin-right: 12px;
+          position: absolute;
+          top: 18px;
+          left: 24px;
+        }
+
+        ::v-deep .u-input {
+          display: inline-block;
+          width: 240px;
+          font-size: 26px;
+        }
+      }
+    }
+  }
+
+  .info-content {
+    width: calc(100% - 64px);
+    background: #fff;
+    border-radius: 8px;
+    margin: 24px 32px 0;
+
+    .title {
+      padding-left: 32px;
+      line-height: 94px;
+      border-bottom: 1px solid #ddd;
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .num-content {
+      overflow: hidden;
+
+      .num-item {
+        float: left;
+        width: 33%;
+        padding: 40px 0;
+        text-align: center;
+
+        h3 {
+          font-size: 64px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3192f4;
+          line-height: 74px;
+          margin-bottom: 10px;
+        }
+
+        p {
+          font-size: 28px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #999;
+          line-height: 40px;
+        }
+      }
+    }
+
+    .color-org {
+      .num-item {
+        h3 {
+          color: #ff8700;
+        }
+      }
+    }
+  }
+
+  .item-content {
+    margin-bottom: 4px;
+
+    .title {
+      width: 100%;
+      height: 108px;
+      line-height: 108px;
+      background: #fff;
+      padding: 0 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+
+      h2 {
+        font-size: 32px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+      }
+
+      img {
+        width: 34px;
+        height: 34px;
+        margin-top: 38px;
+        transition: all 0.3s ease-in-out;
+      }
+
+      .img-active {
+        transform: rotate(180deg);
+      }
+    }
+
+    .user-list {
+      background-color: #fff;
+
+      .user-item {
+        padding: 24px 32px;
+        display: flex;
+
+        .user-img {
+          width: 112px;
+
+          img {
+            width: 80px;
+            height: 80px;
+          }
+        }
+
+        .user-info {
+          width: 100%;
+
+          .name {
+            font-size: 32px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333;
+            line-height: 44px;
+            margin-bottom: 8px;
+
+            .btn-icon {
+              float: right;
+
+              img {
+                width: 48px;
+                height: 48px;
+                margin-left: 20px;
+                vertical-align: baseline;
+              }
+            }
+          }
+
+          .phone {
+            width: 100%;
+            font-size: 26px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #999;
+            line-height: 36px;
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+  }
+
+  .text {
+    height: 96px;
+    line-height: 96px;
+    color: #999;
+    font-size: 28px;
+    text-align: center;
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365dd;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #fff;
+  }
+}
+</style>

src/project/new/AppSpecialPeople/add.vue

@@ -0,0 +1,620 @@
+<template>
+  <div class="add">
+    <div class="pad-l32">
+      <div class="item" v-if="!isEdit">
+        <span class="label"><span class="tips">*</span>类型</span>
+        <div class="value" @click="showType=true">
+          <AiMore v-model="appName"/>
+        </div>
+      </div>
+      <div class="info-content" v-for="(items, indexs) in formDataList" :key="indexs">
+        <div v-for="(item, index) in items" :key="index">
+          <!-- 初始化字段锁定 -->
+          <div class="item" v-if="!!formData[item.isInit]&&item.isInit!=item.fieldDbName">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" v-if="item.dict"
+                 v-text="toString($dict.getLabel(item.dict, formData[item.fieldDbName]))"/>
+            <div class="value" v-if="item.type=='area'">
+              <AiAreaPicker :value="formData[item.fieldDbName]" isForm disabled/>
+            </div>
+            <div class="value" v-if="item.type=='upload'">
+              <template v-if="formData[item.fieldDbName]">
+                <ai-image v-for="(op,i) in [formData[item.fieldDbName]].flat()" :key="i" :src="op" preview/>
+              </template>
+              <span v-else>-</span>
+            </div>
+            <div class="value" v-else v-text="toString(formData[item.fieldDbName])"/>
+          </div>
+          <!-- input输入框 -->
+          <div class="item" v-if="item.type == 'input' || item.type == 'name' || item.type == 'phone'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;"
+                       height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
+            </div>
+          </div>
+          <!-- number 输入框 -->
+          <div class="item" v-if="item.type == 'number'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-input type="number" placeholder="请输入" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
+                       :maxlength="item.maxLength"/>
+            </div>
+          </div>
+          <!-- 身份证输入框 -->
+          <div class="item" v-if="item.type == 'idNumber'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-input type="idcard" placeholder="请输入" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
+                       :maxlength="item.maxLength"/>
+            </div>
+          </div>
+          <!-- textarea输入框 富文本-->
+          <div class="textarea" v-if="item.type == 'textarea' || item.type == 'text' || item.type == 'rtf'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-input type="textarea" placeholder="请输入请输入" placeholder-style="color:#999;font-size:16px;" height="200"
+                       v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
+            </div>
+          </div>
+          <!-- 字典下拉选择 -->
+          <div class="item" v-if="item.type == 'dict'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" @click="selectClick(item.fieldDbName, item.dict)">
+              <AiMore :value="$dict.getLabel(item.dict, formData[item.fieldDbName])"/>
+            </div>
+          </div>
+          <!-- 单选radio -->
+          <div class="item" v-if="item.type == 'radio'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-radio-group v-model="formData[item.fieldDbName]">
+                <!-- <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict(item.dict)" :key="index">
+                  {{ item.dictName }}
+                </u-radio> -->
+              </u-radio-group>
+            </div>
+          </div>
+          <!-- 开关onOff -->
+          <div class="item" v-if="item.type == 'onOff'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-switch v-model="formData[item.fieldDbName]" :active-value="1" :inactive-value="0"></u-switch>
+            </div>
+          </div>
+          <!-- 多选checkbox -->
+          <div class="textarea" v-if="item.type == 'checkbox'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <u-checkbox-group>
+                <u-checkbox
+                    v-model="e.checked"
+                    v-for="(e, i) in item.checkList" :key="i"
+                    :name="item.dictValue"
+                    @change="checkboxChange(indexs, index, i)"
+                >{{ e.dictName }}
+                </u-checkbox>
+              </u-checkbox-group>
+            </div>
+          </div>
+          <!-- 附件 -->
+          <div class="textarea" v-if="item.type == 'upload'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value">
+              <!-- <AiUploader :multiple="true" type="image" :limit="9" placeholder="上传图片"
+                          :def.sync="formData[item.fieldDbName]"
+                          action="/admin/file/add2"/> -->
+            </div>
+          </div>
+          <!-- 地区选择 -->
+          <div class="item" v-if="item.type == 'area'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" flex>
+              <!-- <AiAreaPicker @select="v=>formData[item.fieldDbName]=v" :name.sync="formData[item.fieldDbName+'_name']"
+                            all :value="formData[item.fieldDbName]" :valueLevel="item.areaPattern" isForm/> -->
+            </div>
+          </div>
+          <!-- 人员选择 -->
+          <div class="item" v-if="item.type == 'user'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" @click="handleSelectUser(item.fieldDbName)">
+              <template v-if="!formData[item.fieldDbName].length">
+                <span>请选择</span>
+              </template>
+              <template v-else>
+                已选择<em>{{ formData[item.fieldDbName].map(e => e.name).slice(0, 2).join("、") }}</em>等<em>{{
+                  formData[item.fieldDbName].length
+                }}</em>人
+              </template>
+              <u-icon name="arrow-right" color="#ddd"></u-icon>
+            </div>
+          </div>
+          <!-- 日期选择 / 日期带时分秒选择 / 时间-时分秒选择 -->
+          <div class="item" v-if="item.type == 'date' || item.type == 'datetime' || item.type == 'time'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" @click="dateClick(indexs, index)" flex>
+              <AiMore v-model="formData[item.fieldDbName]"/>
+            </div>
+          </div>
+          <!-- 居民档案选择 -->
+          <div class="item" v-if="item.type == 'resident'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" flex>
+              <AiPagePicker @select="v=>handleSelectResident(v,item)" single>
+                <AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
+              </AiPagePicker>
+            </div>
+          </div>
+          <!-- 网格选择 -->
+          <div class="item" v-if="item.type == 'gird'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" flex>
+              <AiPagePicker type="gird" @select="v=>handleSelectGird(v,item)">
+                <AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
+              </AiPagePicker>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <u-picker mode="time" v-model="dateShow" :params="deteParams" @confirm="dateConfirm">请选择</u-picker>
+    <u-select v-model="selectShow" mode="single-column" :list="selectList" label-name="dictName" value-name="dictValue"
+              @confirm="selectConfirm"></u-select>
+    <u-select v-model="showType" :list="typeList" label-name="applicationName" value-name="id"
+              @confirm="typeConfirm"></u-select>
+    <div class="footer" @click="submit" v-if="appId">
+      <div class="btn">保存</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  data() {
+    return {
+      appId: '',
+      appName: '',
+      showType: false,
+      typeList: [],
+      formDataList: [],
+      formData: {},
+      pageShow: false,
+      dateShow: false,
+      deteParams: {},
+      datePropIndex: '', //时间选择 formDataList索引
+      dateIndex: '', //时间选择 formDataList 数组里面的索引
+      selectName: '',
+      selectList: [],
+      selectShow: false,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isEdit() {
+      return !!this.$route.query.id
+    }
+  },
+  created() {
+    // this.getType()
+  },
+  onShow() {
+    // if (this.isEdit) {
+    //   document.title = "编辑人员"
+    //   if (!this.appId) {
+    //     let {appId: value} = this.$route.query
+    //     this.typeConfirm([{value}]).then(() => this.getDetail())
+    //   }
+    // } else {
+    //   document.title = '新增人员'
+    //   if (this.$route.query.appId && !this.appId) {
+    //     let {appId: value, appName} = this.$route.query
+    //     this.typeConfirm([{value, label: decodeURIComponent(appName)}])
+    //   }
+    // }
+  },
+  methods: {
+    // ...mapActions(['selectEnterpriseContact']),
+    handleSelectUser(fieldDbName) {
+      // this.selectEnterpriseContact({
+      //   fromDepartmentId: 0,
+      //   type: ["user"],
+      //   selectedUserIds: this.form[fieldDbName]?.map(e => e.id)
+      // }).then(res => {
+      //   this.form[fieldDbName] = res?.userList || []
+      // })
+    },
+    getType() {
+      this.$instance.post(`/app/appapplicationinfo/queryApplicationListByType`, null, {
+        params: {type: 0, status: 1}
+      }).then((res) => {
+        if (res?.data) {
+          this.typeList = res.data
+        }
+      })
+    },
+    typeConfirm(e) {
+      this.appId = e[0].value
+      this.appName = e[0].label
+      return this.$instance.post(`/app/appapplicationinfo/queryApplicationInfo?appId=${this.appId}`).then((res) => {
+        if (res?.data) {
+          this.formData = {}
+          let data = res.data
+          let dictList = []
+          let formList = {}
+          data.tableInfos.map((item) => {
+            let colItem
+            if (item.dictionaryCode) {
+              dictList.push(item.dictionaryCode)
+            }
+            if (item.dictionaryCode && item.type != 'radio' && item.type != 'checkbox' && item.type != 'onOff') {
+              colItem = {
+                ...item,
+                type: 'dict',
+                dict: item.dictionaryCode,
+                fieldValue: item.defaultValue || ''
+              }
+            } else if (item.type == 'radio') {
+              colItem = {
+                ...item,
+                dict: item.dictionaryCode,
+                fieldValue: item.defaultValue || ''
+              }
+            } else if (item.type == 'checkbox') {
+              colItem = {
+                ...item,
+                dict: item.dictionaryCode,
+                fieldValue: ''
+              }
+              if (item.defaultValue) {
+                colItem.fieldValue = item.defaultValue?.split('`')
+              }
+
+            } else if (item.type == 'onOff') {
+              colItem = {
+                ...item,
+                fieldValue: 0
+              }
+            } else if (item.type == 'number') {
+              colItem = {
+                ...item,
+                type: item.type,
+                min: item.minValue || '',
+                max: item.maxValue || '',
+                fieldValue: Number(item.defaultValue) || 0
+              }
+            } else if (item.type == 'upload' || item.type == 'user') {
+              colItem = {
+                ...item,
+                type: item.type,
+                fieldValue: []
+              }
+            } else if (item.type == 'area') {
+              colItem = {
+                ...item,
+                type: item.type,
+                fieldValue: "",
+              }
+            } else {
+              if (item.type == 'date') {
+                item.params = {year: true, month: true, day: true, hour: false, minute: false, second: false}
+              }
+              if (item.type == 'datetime') {
+                item.params = {year: true, month: true, day: true, hour: true, minute: true, second: true}
+              }
+              if (item.type == 'time') {
+                item.params = {year: false, month: false, day: false, hour: true, minute: true, second: true}
+              }
+
+              colItem = {
+                ...item,
+                type: item.type,
+              }
+              colItem.fieldValue = item.defaultValue || ''
+            }
+            formList[item.groupIndex]?.push(colItem) || (formList[item.groupIndex] = [colItem])
+            this.$set(this.formData, colItem.fieldDbName, colItem.fieldValue || "")
+          })
+          this.formDataList = Object.values(formList)
+
+          if (dictList.length) {
+            this.getDictList(dictList)
+          } else {
+            this.formDataList.map((item) => {
+              item.map((e) => {
+                if (e.type == 'onOff') { //开关
+                  this.formData[e.fieldDbName] = 0
+                }
+                if (e.type == 'area') { //地区
+                  this.formData[e.fieldDbName + '_name'] = this.user.areaName
+                }
+              })
+            })
+            this.$forceUpdate()
+            this.pageShow = true
+          }
+        }
+      })
+    },
+    getDictList(listName) {
+      this.$dict.load(listName.join(',')).then(() => {
+        this.formDataList.map((item) => {
+          item.map((e) => {
+            if (e.type == 'checkbox') {  //多选
+              var list = this.$dict.getDict(e.dict)
+              list.map((items) => {
+                items.checked = false
+              })
+              e.checkList = list
+            }
+            if (e.type == 'onOff') { //开关
+              this.formData[e.fieldDbName] = 0
+            }
+            if (e.type == 'area') { //地区
+              this.formData[e.fieldDbName + '_name'] = this.user.areaName
+            }
+          })
+        })
+        this.$forceUpdate()
+        this.pageShow = true
+      })
+    },
+    selectClick(name, dictName) {
+      this.selectName = name
+      this.selectList = this.$dict.getDict(dictName)
+      this.selectShow = true
+    },
+    selectConfirm(e) {
+      this.formData[this.selectName] = e[0].value
+    },
+    checkboxChange(indexs, index, i) {
+      this.formDataList[indexs][index].checkList[i].checked = !this.formDataList[indexs][index].checkList[i].checked
+      this.$forceUpdate()
+    },
+    dateClick(indexs, index) {
+      this.deteParams = this.formDataList[indexs][index].params
+      this.datePropIndex = indexs
+      this.dateIndex = index
+
+      this.$nextTick(() => {
+        this.dateShow = true
+      })
+    },
+    dateConfirm(e) {
+      var fieldDbName = this.formDataList[this.datePropIndex][this.dateIndex].fieldDbName
+      if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'date') {  //年月日
+        this.formData[fieldDbName] = `${e.year}-${e.month}-${e.day}`
+      }
+      if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'datetime') {  //年月日时分秒
+        this.formData[fieldDbName] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
+      }
+      if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'time') {  //时分秒
+        this.formData[fieldDbName] = `${e.hour}:${e.minute}:${e.second}`
+      }
+    },
+    submit() {
+      let isValid = true, form = JSON.parse(JSON.stringify(this.formData))
+      this.formDataList.map((item) => {
+        item?.map((items) => {
+          if (items.type == 'checkbox') { //多选
+            form[items.fieldDbName] = ''
+            let list = []
+            items.checkList.map((e) => {
+              if (e.checked) {
+                list.push(e.dictValue)
+              }
+            })
+            form[items.fieldDbName] = list?.toString()
+          }
+          if (items.type == 'upload') { //附件 只传id
+            let files = [];
+            [form[items.fieldDbName]]?.flat()?.map(item => item?.url && files.push(item.url))
+            form[items.fieldDbName] = files?.toString()
+          }
+          // if (items.type == 'onOff') { //开关
+          //   form[items.fieldDbName] = form[items.fieldDbName] ? '1' : '0'
+          // }
+          if (items.type == 'area' && form[items.fieldDbName]) {
+            let area = []
+            area.push(form[items.fieldDbName])
+            area.push(form[items.fieldDbName + '_name'])
+            form[items.fieldDbName] = area.join('_')
+          }
+        })
+      })
+      this.formDataList.some((item) => {
+        return item.some((items) => {
+          if (items.mustFill == 1 && !form[items.fieldDbName]) {
+            isValid = false
+            return this.$u.toast(`${items.fieldName}为必填项`)
+          }
+        })
+      })
+
+      if (!isValid) return
+
+      this.$instance.post(`/app/appapplicationinfo/addOrUpdate?appId=${this.appId}`, {
+        ...form
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast('提交成功')
+          setTimeout(() => uni.navigateBack({
+            success: () => {
+              uni.$emit("selectType")
+            }
+          }), 1500)
+        } else this.$u.toast(res?.msg || "提交失败,请联系管理员")
+      }).catch(err => {
+        this.$u.toast(err || "提交失败,请联系管理员")
+      })
+    },
+    handleSelectResident(resident, item) {
+      let info = resident?.[0] || {}
+      this.formData = {...this.formData, ...info}
+      this.formData[item.fieldDbName] = info.id
+      this.formData[item.fieldDbName + "_name"] = info.name
+      this.$forceUpdate()
+    },
+    toString(obj) {
+      return obj?.toString() || "-"
+    },
+    handleSelectGird(gird, item) {
+      let info = gird || {}
+      this.formData[item.fieldDbName] = [info.id, info.girdName].join("_")
+      this.formData[item.fieldDbName + "_name"] = info.girdName
+      this.$forceUpdate()
+    },
+    getDetail() {
+      let {id, appId} = this.$route.query
+      return id ? this.$instance.post("/app/appapplicationinfo/queryDetailById", null, {
+        params: {id, appId}
+      }).then(res => {
+        if (res?.data) {
+          this.formData = res.data
+          this.$forceUpdate()
+        }
+      }) : Promise.resolve()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding-bottom: 112px;
+
+  .title {
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    background: #FFF;
+    font-size: 32px;
+    font-weight: 500;
+    color: #262B36;
+    padding-right: 32px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .tips {
+      display: inline-block;
+      width: 8px;
+      height: 32px;
+      background: #4E75FE;
+      box-shadow: 0 8px 24px 2px #C9D8FA;
+      border-radius: 4px;
+      vertical-align: middle;
+      margin-right: 22px;
+    }
+
+    .select {
+      float: right;
+      font-size: 30px;
+      color: #1365DD;
+    }
+  }
+
+  .item {
+    width: 100%;
+    padding: 34px 32px 34px 0;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 44px;
+    box-sizing: border-box;
+    position: relative;
+
+    .value {
+      .u-icon {
+        margin-left: 16px;
+      }
+
+      ::v-deep .u-input {
+        font-size: 32px;
+      }
+    }
+  }
+
+  .color-999 {
+    color: #999;
+  }
+
+  .tips {
+    display: inline-block;
+    width: 16px;
+    height: 44px;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #F46;
+    line-height: 44px;
+  }
+
+  .textarea {
+    width: 100%;
+    padding: 34px 32px 34px 0;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+
+    .label {
+      display: inline-block;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+      line-height: 44px;
+      margin-bottom: 8px;
+    }
+
+    .value {
+      padding: 0 16px;
+    }
+  }
+
+  ::v-deep .default {
+    width: 160px !important;
+    height: 160px !important;
+  }
+
+  .area-icon {
+    vertical-align: super;
+    position: absolute;
+    top: 10px;
+    right: 0;
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+
+  .line-bg {
+    width: 100%;
+    height: 16px;
+    background: #F5F5F5;
+  }
+
+  .pad-l32 {
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>