update 表单代码优化

Web/src/main.js

@@ -99,7 +99,7 @@ import './assets/style/app.less'
 
 import { SETTING_KEY } from './common/storage'
 
-const settings = JSON.parse(window.localStorage.getItem(SETTING_KEY))
+const settings = JSON.parse(window.localStorage.getItem(SETTING_KEY)) || {}
 Object.assign(settings, {
   layout: 'top-nav',
   container: 'container-fluid',

Web/src/pages/business/house/code/form/part.vue

@@ -143,6 +143,8 @@
   </a-form-model>
 </template>
 <script>
+import { CITY } from '@/util/global';
+
 /* 表单内容默认值 */
 const defaultForm = {
   /* ... */
@@ -374,7 +376,7 @@ export default {
 
     onMapInit() {
       return new Promise((resolve) => {
-        const city = '宁波市';
+        const city = CITY;
 
         const district = new AMap.DistrictSearch({
           subdistrict: 0,
@@ -391,7 +393,6 @@ export default {
 
           // 挂载map到this,但不监听
           this.map = new AMap.Map(this.$refs.map, {
-            city,
             mask,
             zoom: 12,
           });
@@ -403,6 +404,8 @@ export default {
           });
 
           this.map.on('complete', () => {
+            this.map.setFitView();
+            this.map.setZoom(12);
             resolve();
           });
 
@@ -420,7 +423,7 @@ export default {
 
           auto.on('select', ({ poi: { name: keywords, adcode } }) => {
             this.map.clearMap();
-            marker = null;
+            this.marker = null;
             placeSearch.search(keywords, (status, result) => {
               const {
                 poiList: { pois },

Web/src/pages/business/house/info/form/base/building.vue

@@ -30,7 +30,7 @@
             <a-radio-group button-style="solid" v-model="form.houseInfo.landAttribute">
               <a-radio-button
                 :key="item.code"
-                :value="item.code"
+                :value="+item.code"
                 v-for="item in codes.landAttribute"
               >{{ item.value }}</a-radio-button>
             </a-radio-group>
@@ -81,18 +81,18 @@
             >
               <a-radio-button
                 :key="item.code"
-                :value="item.code"
+                :value="+item.code"
                 v-for="item in codes.houseStructureType"
               >{{ item.value }}</a-radio-button>
             </a-radio-group>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.aseismicGrade">
+          <a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.seismicGrade">
-            <a-radio-group button-style="solid" v-model="form.houseInfo.aseismicGrade">
+            <a-radio-group button-style="solid" v-model="form.houseInfo.seismicGrade">
               <a-radio-button
                 :key="item.code"
-                :value="item.code"
+                :value="+item.code"
                 v-for="item in codes.houseSseismicGrade"
               >{{ item.value }}</a-radio-button>
             </a-radio-group>
@@ -103,7 +103,7 @@
             <a-radio-group button-style="solid" v-model="form.houseInfo.baseInfo">
               <a-radio-button
                 :key="item.code"
-                :value="item.code"
+                :value="+item.code"
                 v-for="item in codes.houseBaseInfo"
               >{{ item.value }}</a-radio-button>
             </a-radio-group>
@@ -163,7 +163,7 @@
             <a-radio-group button-style="solid" v-model="form.houseInfo.curtainWall">
               <a-radio-button
                 :key="item.code"
-                :value="item.code"
+                :value="+item.code"
                 v-for="item in codes.houseBuildingCurtainWall"
               >{{ item.value }}</a-radio-button>
             </a-radio-group>
@@ -239,15 +239,16 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="8">
-          <a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.households">
+          <a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.houseHolds">
             <a-row type="flex">
               <a-col flex="1">
                 <a-input-number
                   :min="0"
+                  :precision="0"
                   :step="1"
                   class="w-100-p"
                   placeholder="请输入总户数"
-                  v-model="form.houseInfo.households"
+                  v-model="form.houseInfo.houseHolds"
                 />
               </a-col>
               <a-col>
@@ -262,6 +263,7 @@
               <a-col flex="1">
                 <a-input-number
                   :min="0"
+                  :precision="0"
                   :step="1"
                   class="w-100-p"
                   placeholder="请输入房屋单元数"
@@ -280,6 +282,7 @@
               <a-col flex="1">
                 <a-input-number
                   :min="0"
+                  :precision="0"
                   :step="1"
                   class="w-100-p"
                   placeholder="请输入每层每单元户数"
@@ -334,6 +337,7 @@
                 <a-col flex="1">
                   <a-input-number
                     :min="0"
+                    :precision="0"
                     :step="1"
                     class="w-100-p"
                     placeholder="请输入地上层"
@@ -355,6 +359,7 @@
                 <a-col flex="1">
                   <a-input-number
                     :min="0"
+                    :precision="0"
                     :step="1"
                     class="w-100-p"
                     placeholder="请输入地下层"
@@ -376,6 +381,7 @@
                 <a-col flex="1">
                   <a-input-number
                     :min="0"
+                    :precision="0"
                     :step="1"
                     class="w-100-p"
                     disabled
@@ -483,6 +489,8 @@
   </a-form-model>
 </template>
 <script>
+import { CITY } from '@/util/global';
+
 /* 表单内容默认值 */
 const defaultForm = {
   /* ... */
@@ -496,7 +504,7 @@ const defaultForm = {
     buildingName: null,
     landAttribute: '1',
     structureType: null,
-    aseismicGrade: null,
+    seismicGrade: null,
     baseInfo: null,
     insulationMaterial: null,
     keepWarmMaterialRest: null,
@@ -510,7 +518,7 @@ const defaultForm = {
     completedDate: null,
     usefulYear: null,
     totalArea: null,
-    households: null,
+    houseHolds: null,
     units: null,
     unitFloorHolds: null,
     buildingUnit: null,
@@ -539,7 +547,9 @@ export default {
       wrapperCol: { flex: '1' },
 
       /** 表单数据 */
-      form: {},
+      form: {
+        ...defaultForm,
+      },
       /** 验证格式 */
       rules: {
         /* ... */
@@ -549,23 +559,23 @@ export default {
         'houseCode.lng': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
         'houseCode.lat': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
         'houseInfo.structureType': [{ required: true, message: '请选择结构类型' }],
-        'houseInfo.aseismicGrade': [{ required: true, message: '请选择抗震等级' }],
+        'houseInfo.seismicGrade': [{ required: true, message: '请选择抗震等级' }],
         'houseInfo.baseInfo': [{ required: true, message: '请选择基础情况' }],
         'houseInfo.curtainWall': [{ required: true, message: '请选择建筑幕墙' }],
         'houseInfo.elevator': [{ required: true, message: '请选择电梯' }],
         'houseInfo.completedDate': [{ required: true, message: '请选择竣工日期' }],
-        'houseInfo.usefulYear': [{ required: true, message: '请输入设计使用年限', trigger: 'blur' }],
+        'houseInfo.usefulYear': [{ required: true, message: '请输入设计使用年限' }],
-        'houseInfo.totalArea': [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
+        'houseInfo.totalArea': [{ required: true, message: '请输入总建筑面积' }],
-        'houseInfo.households': [{ required: true, message: '请输入总户数', trigger: 'blur' }],
+        'houseInfo.houseHolds': [{ required: true, message: '请输入总户数' }],
-        'houseInfo.units': [{ required: true, message: '请输入房屋单元数', trigger: 'blur' }],
+        'houseInfo.units': [{ required: true, message: '请输入房屋单元数' }],
-        'houseInfo.unitFloorHolds': [{ required: true, message: '请输入每层每单元户数', trigger: 'blur' }],
+        'houseInfo.unitFloorHolds': [{ required: true, message: '请输入每层每单元户数' }],
-        'houseInfo.buildingUnit': [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
+        // 'houseInfo.buildingUnit': [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
-        'houseInfo.buildingUnitUser': [{ required: true, message: '请输入建设单位联系人', trigger: 'blur' }],
+        // 'houseInfo.buildingUnitUser': [{ required: true, message: '请输入建设单位联系人', trigger: 'blur' }],
-        'houseInfo.buildingUnitTel': [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
+        // 'houseInfo.buildingUnitTel': [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
-        'houseInfo.desingerUnit': [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
+        // 'houseInfo.desingerUnit': [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
-        'houseInfo.constructionUnit': [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
+        // 'houseInfo.constructionUnit': [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
-        'houseInfo.landFloorCount': [{ required: true, message: '请输入地上层', trigger: 'blur' }],
+        'houseInfo.landFloorCount': [{ required: true, message: '请输入地上层' }],
-        'houseInfo.underFloorCount': [{ required: true, message: '请输入地下层', trigger: 'blur' }],
+        'houseInfo.underFloorCount': [{ required: true, message: '请输入地下层' }],
       },
 
       /** 加载异步数据状态 */
@@ -613,10 +623,7 @@ export default {
     },
   },
 
-  async created() {
+  created() {
-    this.form = this.$_.cloneDeep(defaultForm);
-
-    await this.onInit();
     this.onFillData();
   },
 
@@ -629,36 +636,30 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData() {
+    async onFillData() {
-      /** 将默认数据覆盖到form */
+      this.loading = true;
-      const record = this.param && this.param.record;
+      {
+        await this.onLoadCodes();
 
-      const form = this.$_.cloneDeep(defaultForm);
+        /** 将默认数据覆盖到form */
+        const record = this.param && this.param.record;
+        const form = this.$_.cloneDeep(defaultForm);
 
-      if (record) {
+        if (record) {
-        // 此处因业务复杂, 所有数据必定包裹在单独节点中, 所以需要两层循环
+          this.$_.giveDeep(form, record);
-        Object.keys(form).forEach((p) => {
+        }
-          if (record.hasOwnProperty(p) && record[p]) {
+
-            const _form = form[p],
+        this.form = form;
-              _record = record[p];
+
-            Object.keys(form[p]).forEach((q) => {
+        this.$nextTick(async () => {
-              if (_record.hasOwnProperty(q) && (_record[q] !== null) & (_record[q] !== undefined)) {
+          await this.onMapInit();
-                _form[q] = _record[q];
+          if (this.form.houseCode.lng && this.form.houseCode.lat) {
-              }
+            this.setMarker([this.form.houseCode.lng, this.form.houseCode.lat]);
-            });
+            this.map.setCenter([this.form.houseCode.lng, this.form.houseCode.lat]);
           }
         });
       }
-
+      this.loading = false;
-      this.form = form;
-
-      this.$nextTick(async () => {
-        await this.onMapInit();
-        if (this.form.houseCode.lng && this.form.houseCode.lat) {
-          this.setMarker([this.form.houseCode.lng, this.form.houseCode.lat]);
-          this.map.setCenter([this.form.houseCode.lng, this.form.houseCode.lat]);
-        }
-      });
     },
 
     /**
@@ -667,29 +668,24 @@ export default {
      */
     onGetData() {
       return new Promise((reslove, reject) => {
-        this.$refs.form.validate((valid) => {
+        this.$refs.form.validate((valid, err) => {
           if (valid) {
             const record = this.$_.cloneDeep(this.form);
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
             /* ... */
+            if (record.houseInfo.completedDate && record.houseInfo.completedDate.constructor === Object) {
+              record.houseInfo.completedDate = record.houseInfo.completedDate.format('YYYY-MM-DD');
+            }
 
             reslove(record);
           } else {
-            reject();
+            reject(err);
           }
         });
       });
     },
 
-    /**
-     * 必要的方法
-     * 在外部窗口进行保存时调用表单验证
-     */
-    onValidate(callback) {
-      this.$refs.form.validate(callback);
-    },
-
     /**
      * 必要的方法
      * 在外部窗口关闭或重置时对表单验证进行初始化
@@ -703,18 +699,6 @@ export default {
       }, 300);
     },
 
-    /**
-     * 必要方法
-     * 加载当前表单中所需要的异步数据
-     */
-    async onInit() {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /* ... */
-      await this.onLoadCodes();
-      this.loading = false;
-    },
-
     /** 当前组件的其他方法 */
     /* ... */
     onLoadCodes() {
@@ -763,7 +747,7 @@ export default {
 
     onMapInit() {
       return new Promise((resolve) => {
-        const city = '宁波市';
+        const city = CITY;
 
         const district = new AMap.DistrictSearch({
           subdistrict: 0,
@@ -780,7 +764,6 @@ export default {
 
           // 挂载map到this,但不监听
           this.map = new AMap.Map(this.$refs.map, {
-            city,
             mask,
             zoom: 12,
           });
@@ -792,6 +775,8 @@ export default {
           });
 
           this.map.on('complete', () => {
+            this.map.setFitView();
+            this.map.setZoom(12);
             resolve();
           });
 
@@ -809,7 +794,7 @@ export default {
 
           auto.on('select', ({ poi: { name: keywords, adcode } }) => {
             this.map.clearMap();
-            marker = null;
+            this.marker = null;
             placeSearch.search(keywords, (status, result) => {
               const {
                 poiList: { pois },

Web/src/pages/business/house/info/form/base/index.vue

@@ -51,10 +51,10 @@ export default {
           title: '建筑物基本信息',
           component: () => import('./building'),
         },
-        // {
+        {
-        //   title: '权属情况',
+          title: '权属情况',
-        //   component: () => import('./ownership'),
+          component: () => import('./ownership'),
-        // },
+        },
         // {
         //   title: '管理情况',
         //   component: () => import('./manager'),
@@ -107,14 +107,13 @@ export default {
               ...formData,
               ...data,
             };
-          } catch {
+          } catch (e) {
             flag = false;
+            reject(e);
           }
         }
         if (flag) {
           resolve(formData);
-        } else {
-          reject();
         }
       });
     },

Web/src/pages/business/house/info/form/base/ownership.vue

@@ -247,7 +247,7 @@ export default {
   },
 
   async created() {
-    await this.onInit();
+    this.form = this.$_.cloneDeep(defaultForm);
     this.onFillData();
   },
 
@@ -256,16 +256,22 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData() {
+    async onFillData() {
-      /** 将默认数据覆盖到form */
+      this.loading = true;
-      const record = this.param && this.param.record;
+      {
+        await this.onLoadCodes();
 
-      this.form = this.$_.cloneDeep({
+        /** 将默认数据覆盖到form */
-        ...defaultForm,
+        const record = this.param && this.param.record;
-        ...record,
+        const form = this.$_.cloneDeep(defaultForm);
-        /** 在此处添加其他默认数据转换 */
+
-        /* ... */
+        if (record) {
-      });
+          this.$_.giveDeep(form, record);
+        }
+
+        this.form = form;
+      }
+      this.loading = false;
     },
 
     /**
@@ -274,7 +280,7 @@ export default {
      */
     onGetData() {
       return new Promise((reslove, reject) => {
-        this.$refs.form.validate((valid) => {
+        this.$refs.form.validate((valid, err) => {
           if (valid) {
             const record = this.$_.cloneDeep(this.form);
 
@@ -283,20 +289,12 @@ export default {
 
             reslove(record);
           } else {
-            reject();
+            reject(err);
           }
         });
       });
     },
 
-    /**
-     * 必要的方法
-     * 在外部窗口进行保存时调用表单验证
-     */
-    onValidate(callback) {
-      this.$refs.form.validate(callback);
-    },
-
     /**
      * 必要的方法
      * 在外部窗口关闭或重置时对表单验证进行初始化
@@ -310,18 +308,6 @@ export default {
       }, 300);
     },
 
-    /**
-     * 必要方法
-     * 加载当前表单中所需要的异步数据
-     */
-    async onInit() {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /* ... */
-      await this.onLoadCodes();
-      this.loading = false;
-    },
-
     /** 当前组件的其他方法 */
     /* ... */
     onLoadCodes() {

Web/src/pages/business/house/info/form/index.vue

@@ -78,6 +78,9 @@ export default {
 
   data() {
     return {
+      saving: false,
+      loading: true,
+
       tabs: [
         {
           title: '房屋基本情况',
@@ -121,8 +124,6 @@ export default {
           show: true,
         },
       ],
-
-      loading: true,
     };
   },
 
@@ -133,7 +134,6 @@ export default {
   },
 
   created() {
-    this.loading = true;
     this.$api.houseInfoGetByTaskId({ taskId: this.param.taskId }).then(({ data }) => {
       this.$set(this.param, 'record', data);
       this.loading = false;
@@ -152,7 +152,12 @@ export default {
             ...formData,
             ...data,
           };
-        } catch {
+        } catch (e) {
+          if (e) {
+            Object.keys(e).forEach((p) => {
+              this.$message.error(e[p][0].message);
+            });
+          }
           flag = false;
         }
       }
@@ -164,6 +169,19 @@ export default {
       /**
        * 对表单提交进行处理
        */
+      if (formData.houseCode) {
+        formData.houseCode.id = this.param.record.houseCode.id;
+      }
+
+      if (formData.patrolInfo && this.param.taskId) {
+        formData.patrolInfo.id = this.param.taskId;
+      }
+
+      this.saving = true;
+
+      this.$api.houseInfoSave(formData).finally(() => {
+        this.saving = false;
+      });
     },
 
     onTabChange(key) {

Web/src/pages/business/house/info/form/patrol/base.vue

@@ -106,7 +106,7 @@ export default {
      */
     onGetData() {
       return new Promise((reslove, reject) => {
-        this.$refs.form.validate((valid) => {
+        this.$refs.form.validate((valid, err) => {
           if (valid) {
             const record = this.$_.cloneDeep(this.form);
 
@@ -115,7 +115,7 @@ export default {
 
             reslove(record);
           } else {
-            reject();
+            reject(err);
           }
         });
       });

Web/src/pages/business/house/info/form/patrol/index.vue

@@ -108,14 +108,13 @@ export default {
               ...formData,
               ...data,
             };
-          } catch {
+          } catch (e) {
             flag = false;
+            reject(e);
           }
         }
         if (flag) {
           resolve(formData);
-        } else {
-          reject();
         }
       });
     },

Web/src/pages/business/statistics/summary/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="yo-form-page">
+    <div class="yo-form-page-layout">
+      <div class="yo-tab-external-mount">
+        <a-tabs @change="onTabChange">
+          <template v-for="(tab, index) in tabs">
+            <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
+          </template>
+        </a-tabs>
+        <div class="yo-tab-external-mount-content">
+          <template v-for="(tab, index) in tabs">
+            <div
+              :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
+              :key="index"
+              class="yo-tab-external-tabpane"
+              v-if="tab.show"
+            >
+              <p :key="n" v-for="n in 100">{{n}}</p>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tabs: [
+        {
+          title: '按房屋等级',
+          active: true,
+          show: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    onTabChange(key) {
+      this.tabs.forEach((p, i) => {
+        p.active = i === key;
+      });
+    },
+  },
+};
+</script>

Web/src/util/global/index.js

@@ -28,4 +28,12 @@ export const getGlobal = () => {
     return JSON.parse(decryptByDES(window.sessionStorage.getItem(GLOBAL_INFO_KEY)))
 }
 
+/**
+ * RSA公钥
+ */
 export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC273zAyijb3uX6O66VThrdfHtzZJn3d/SBM8qiETS7PijyNY3zNecAB+F/owxOWSB/6ojBo5Eu0FCiENxfpenTZB7sKrYu6NVH5gkfHLa6jz4pNzlGP93Q6RON4KjMZolAfRevBQ7vD6sOfJfMDnYi8xk+dRXcqc6PWY8fQiGs5QIDAQAB-----END PUBLIC KEY-----'
+
+/**
+ * 城市名称
+ */
+export const CITY = '黄石市'