BUG 28232 28235

src/apps/AppSpecialPeople/add.vue

@@ -4,8 +4,7 @@
       <div class="item" v-if="!isEdit">
         <span class="label"><span class="tips">*</span>类型</span>
         <div class="value" @click="showType=true">
-          <span :class="appId ? '' : 'color-999'">{{ appName }}</span>
+          <AiMore v-model="appName"/>
-          <u-icon name="arrow-right" color="#cccccc"/>
         </div>
       </div>
       <div class="info-content" v-for="(items, indexs) in formDataList" :key="indexs">
@@ -62,11 +61,7 @@
           <div class="item" v-else-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)">
-              <span
+              <AiMore :value="$dict.getLabel(item.dict, formData[item.fieldDbName])"/>
-                  :class="formData[item.fieldDbName] ? '' : 'color-999'">{{
-                  $dict.getLabel(item.dict, formData[item.fieldDbName]) || '请选择'
-                }}</span>
-              <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
           <!-- 单选radio -->
@@ -112,12 +107,11 @@
             </div>
           </div>
           <!-- 地区选择 -->
-          <div class="item area" v-else-if="item.type == 'area'">
+          <div class="item" v-else-if="item.type == 'area'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
-            <div class="value">
+            <div class="value" flex>
               <AiAreaPicker @select="v=>formData[item.fieldDbName]=v" :name.sync="formData[item.fieldDbName+'_name']"
-                            :areaId="user.areaId" all :value="formData[item.fieldDbName]" :valueLevel="item.areaPattern"/>
+                            all :value="formData[item.fieldDbName]" :valueLevel="item.areaPattern" isForm/>
-              <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
           <!-- 人员选择 -->
@@ -132,18 +126,14 @@
                   formData[item.fieldDbName].length
                 }}</em>人
               </template>
-              <u-icon name="arrow-right" color="#cccccc"></u-icon>
+              <u-icon name="arrow-right" color="#ddd"></u-icon>
             </div>
           </div>
           <!-- 日期选择 / 日期带时分秒选择 / 时间-时分秒选择 -->
           <div class="item" v-else-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)">
+            <div class="value" @click="dateClick(indexs, index)" flex>
-              <span
+              <AiMore v-model="formData[item.fieldDbName]"/>
-                  :class="formData[item.fieldDbName] ? '' : 'color-999'">{{
-                  formData[item.fieldDbName] || '请选择'
-                }}</span>
-              <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
           <!-- 居民档案选择 -->
@@ -151,8 +141,7 @@
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value" flex>
               <AiPagePicker @select="v=>handleSelectResident(v,item)" single>
-                <u-icon :label="formData[item.fieldDbName + '_name'] || item.fieldTips || '从居民档案中选择' "
+                <AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
-                        name="arrow-right" label-pos="left" color="#ccc"/>
               </AiPagePicker>
             </div>
           </div>
@@ -161,8 +150,7 @@
             <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)" isMyGird>
-                <u-icon :label="formData[item.fieldDbName + '_name'] || item.fieldTips || '选择网格' "
+                <AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
-                        name="arrow-right" label-pos="left" color="#ccc"/>
               </AiPagePicker>
             </div>
           </div>
@@ -187,7 +175,7 @@ export default {
   data() {
     return {
       appId: '',
-      appName: '请选择',
+      appName: '',
       showType: false,
       typeList: [],
       formDataList: [],
@@ -596,22 +584,6 @@ export default {
     height: 160px !important;
   }
 
-  .area {
-    padding: 16px 54px 16px 0;
-
-    .label {
-      display: inline-block;
-      line-height: 78px !important;
-    }
-
-    .u-icon {
-      vertical-align: super;
-      position: absolute;
-      top: 42px;
-      right: 16px;
-    }
-  }
-
   .area-icon {
     vertical-align: super;
     position: absolute;

src/components/AiAreaPicker.vue

@@ -4,7 +4,7 @@
       <div slot="btn" @tap="handleInit">
         <slot v-if="$slots.default"/>
         <div v-else-if="isForm">
-          <u-icon name="arrow-right" :label="areaName||'请选择'" label-pos="left" color="#ddd"/>
+          <ai-more v-model="areaName"/>
         </div>
         <div v-else class="areaSelector">
           <image :src="locationIcon" class="location"/>
@@ -49,12 +49,12 @@
 
 <script>
 import AiSearchPopup from './AiSearchPopup'
-import AiCell from './AiCell.vue'
 import {mapState} from 'vuex'
+import AiMore from "./AiMore";
 
 export default {
   name: 'AiAreaPicker',
-  components: {AiCell, AiSearchPopup},
+  components: {AiMore, AiSearchPopup},
   props: {
     areaId: {default: ''},
     name: {default: ''},

src/components/AiMore.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="AiMore">
+    <u-icon name="arrow-right" color="#ddd" :label="value||placeholder" label-pos="left" :label-color="labelColor" label-size="32"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiMore",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    placeholder: {default: "请选择"},
+    value: String
+  },
+  computed: {
+    isEmpty() {
+      return !this.value
+    },
+    labelColor() {
+      return this.isEmpty ? "#999" : "#333"
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiMore {
+}
+</style>