update 表单页面附件保存/读取方式处理

2021-06-08 18:33:32 +08:00
parent e002b143aa
commit 4738a1520a
13 changed files with 402 additions and 133 deletions
--- a/Web/src/pages/business/house/info/form/base/aspect.vue
+++ b/Web/src/pages/business/house/info/form/base/aspect.vue
@@ -102,7 +102,7 @@ export default {

        // 从数据中的文件id转换成uploader所需的格式
        if (record) {
-          const fileList = !!record.facadePhoto ? record.facadePhoto.split(',') : [];
+          const fileList = !!record.houseInfo.facadePhoto ? record.houseInfo.facadePhoto.split(',') : [];
          for (let i = 0; i < fileList.length; i++) {
            const file = await PreviewFile(fileList[i]);
            const base64 = await BlobToBase64(file);
@@ -115,7 +115,7 @@ export default {
            });
          }
        }
-
+        defaultForm.houseInfo.facadePhoto = facadePhoto;
        this.form = this.$_.cloneDeep({
          ...defaultForm,
        });
--- a/Web/src/pages/business/house/info/form/base/attachments.vue
+++ b/Web/src/pages/business/house/info/form/base/attachments.vue
@@ -109,22 +109,15 @@
  </a-form-model>
 </template>
 <script>
-import { GetFileName } from '@/util/file';
-
+import { GetFileName, PreviewFile, BlobToBase64 } from '@/util/file';
 /* 表单内容默认值 */
 const defaultForm = {
  /* ... */
-  // anEntryDocument: [],
-  // planningPermission: [],
-  // completionRecord: [],
-  // monitor: [],
-  // identificationReport: [],
-  // otherDocument: [],
  houseInfo: {
    anEntryDocument: [],
    planningPermission: [],
    completionRecord: [],
-    monitor: [],
+    monitorDocument: [],
    identificationReport: [],
    otherDocument: [],
  },
@@ -170,11 +163,27 @@ export default {
        // await this.onLoadCodes();
        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;
-        const form = this.$_.cloneDeep(defaultForm);

        if (record) {
-          this.$_.giveDeep(form, record);
+          // this.$_.giveDeep(form, record);
+          for (var key in defaultForm.houseInfo) {
+            const fileValue = [];
+            const fileList = !!record.houseInfo[key] ? record.houseInfo[key].split(',') : [];
+            for (let i = 0; i < fileList.length; i++) {
+              const file = await PreviewFile(fileList[i]);
+              const base64 = await BlobToBase64(file);
+              fileValue.push({
+                uid: fileList[i],
+                response: fileList[i], // 用于和新上传的文件一同回传
+                name: file.name,
+                url: base64,
+                status: 'done',
+              });
+            }
+            defaultForm.houseInfo[key] = fileValue;
+          }
        }
+        const form = this.$_.cloneDeep(defaultForm);
        this.form = form;
      }
      this.loading = false;
@@ -190,6 +199,9 @@ export default {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            for (var key in defaultForm.houseInfo) {
+              record.houseInfo[key] = record.houseInfo[key].map((p) => p.response).join(',');
+            }
            /* ... */

            reslove(record);
--- a/Web/src/pages/business/house/info/form/base/building.vue
+++ b/Web/src/pages/business/house/info/form/base/building.vue
@@ -608,18 +608,30 @@ export default {
        }
      }
    },
-
-    'form.houseInfo.curtainWall'(value) {
-      this.frame.onTogglePane(!!+value, 'curtainWall');
+    'form.houseInfo.landFloorCount'(value) {
+      this.form.houseInfo.totalFloor = value + this.form.houseInfo.underFloorCount;
    },
-    'form.houseInfo.faceBrick'(value) {
-      this.frame.onTogglePane(value, 'faceBrick');
+    'form.houseInfo.underFloorCount'(value) {
+      this.form.houseInfo.totalFloor = value + this.form.houseInfo.landFloorCount;
    },
-    'form.houseInfo.whiteWash'(value) {
-      this.frame.onTogglePane(value, 'whiteWash');
-    },
-    'form.houseInfo.coating'(value) {
-      this.frame.onTogglePane(value, 'coating');
+    // 'form.houseInfo.curtainWall'(value) {
+    //   this.frame.onTogglePane(!!+value, 'curtainWall');
+    // },
+    // 'form.houseInfo.faceBrick'(value) {
+    //   this.frame.onTogglePane(value, 'faceBrick');
+    // },
+    // 'form.houseInfo.whiteWash'(value) {
+    //   this.frame.onTogglePane(value, 'whiteWash');
+    // },
+    // 'form.houseInfo.coating'(value) {
+    //   this.frame.onTogglePane(value, 'coating');
+    // },
+    'form.houseInfo.completedDate': {
+      handler(newVal, oldVal) {
+        this.$emit('completedDateChanged', newVal.constructor === String ? newVal.substr(0, 4) : newVal.format('YYYY'));
+      },
+      deep: true,
+      immediate: false,
    },
  },

--- a/Web/src/pages/business/house/info/form/base/index.vue
+++ b/Web/src/pages/business/house/info/form/base/index.vue
@@ -13,6 +13,7 @@
                :is="part.component"
                :key="index"
                :param="param"
+                @completedDateChanged="completedDateChanged"
                ref="forms"
                v-if="part.component"
              />
@@ -71,18 +72,18 @@ export default {
          title: '图纸资料存档处',
          component: () => import('./drawing'),
        },
-        // {
-        //   title: '相关附件资料',
-        //   component: () => import('./attachments'),
-        // },
+        {
+          title: '相关附件资料',
+          component: () => import('./attachments'),
+        },
        // // {
        // //   title: '物业维修资金',
        // //   component: () => import('./fund'),
        // // },
-        // {
-        //   title: '建筑概貌',
-        //   component: () => import('./aspect'),
-        // },
+        {
+          title: '建筑概貌',
+          component: () => import('./aspect'),
+        },
        {
          title: '调查单位',
          component: () => import('./unit'),
@@ -90,7 +91,6 @@ export default {
      ],
    };
  },
-
  methods: {
    /**
     * 循环子组件中的onGetData
@@ -114,6 +114,10 @@ export default {
        }
      });
    },
+    completedDateChanged(value) {
+      console.log(value);
+      this.$emit('completedDateChanged', value);
+    },
  },
 };
 </script>
--- a/Web/src/pages/business/house/info/form/base/ownership.vue
+++ b/Web/src/pages/business/house/info/form/base/ownership.vue
@@ -181,6 +181,7 @@
                    <a-input-number
                      :min="0"
                      :step="1"
+                      disabled
                      placeholder="几"
                      v-model="form.houseInfo.houseCount"
                    />
@@ -286,7 +287,29 @@ export default {
      },
    };
  },
-
+  watch: {
+    'form.houseInfo.straightHouseCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.selfHouseCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.otherCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.businessCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.changeHouseCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.resettlementHouseCount'(value) {
+      this.houseCountCal();
+    },
+    'form.houseInfo.privateHouseCount'(value) {
+      this.houseCountCal();
+    },
+  },
  async created() {
    this.onFillData();
  },
@@ -361,6 +384,16 @@ export default {
          };
        });
    },
+    houseCountCal() {
+      this.form.houseInfo.houseCount =
+        this.form.houseInfo.straightHouseCount +
+        this.form.houseInfo.selfHouseCount +
+        this.form.houseInfo.otherCount +
+        this.form.houseInfo.businessCount +
+        this.form.houseInfo.changeHouseCount +
+        this.form.houseInfo.resettlementHouseCount +
+        this.form.houseInfo.privateHouseCount;
+    },
  },
 };
 </script>
--- a/Web/src/pages/business/house/info/form/index.vue
+++ b/Web/src/pages/business/house/info/form/index.vue
@@ -58,10 +58,12 @@
              v-if="tab.show"
            >
              <component
+                :completed-year="completedYear"
                :frame="self"
                :id="id"
                :is="tab.component"
                :param="param"
+                @completedDateChanged="completedDateChanged"
                ref="forms"
                v-if="tab.component"
              />
@@ -78,6 +80,7 @@ export default {

  data() {
    return {
+      completedYear: '',
      saving: false,
      loading: true,

@@ -196,6 +199,10 @@ export default {
        pane.show = show;
      }
    },
+    completedDateChanged(value) {
+      this.completedYear = value;
+      console.log('top-index' + value);
+    },
  },
 };
 </script>
--- a/Web/src/pages/business/house/info/form/patrol/grade.vue
+++ b/Web/src/pages/business/house/info/form/patrol/grade.vue
@@ -66,7 +66,7 @@ const defaultForm = {
 };

 export default {
-  props: ['param'],
+  props: ['param', 'completedYear'],

  data() {
    return {
@@ -97,9 +97,14 @@ export default {
      },
    };
  },
-
+  watch: {
+    completedYear(value) {
+      console.log('patrol-grade:' + value);
+    },
+  },
  async created() {
    this.onFillData();
+    console.log(this.param);
  },

  methods: {
--- a/Web/src/pages/business/house/info/form/patrol/index.vue
+++ b/Web/src/pages/business/house/info/form/patrol/index.vue
@@ -9,6 +9,7 @@
            <section :id="`form-${index}-${id}`" :key="index">
              <h5 v-if="part.title">{{part.title}}</h5>
              <component
+                :completed-year="completedYear"
                :frame="frame"
                :is="part.component"
                :key="index"
@@ -43,7 +44,7 @@

 <script>
 export default {
-  props: ['id', 'param', 'frame'],
+  props: ['id', 'param', 'frame', 'completedYear'],

  data() {
    return {
@@ -52,10 +53,10 @@ export default {
          title: '巡查基本情况',
          component: () => import('./base'),
        },
-        // {
-        //   title: '房屋检查',
-        //   component: () => import('./inspection'),
-        // },
+        {
+          title: '房屋检查',
+          component: () => import('./inspection'),
+        },
        {
          title: '等级划分',
          component: () => import('./grade'),
@@ -71,7 +72,6 @@ export default {
      ],
    };
  },
-
  methods: {
    /**
     * 循环子组件中的onGetData
--- a/Web/src/pages/business/house/info/form/patrol/inspection.vue
+++ b/Web/src/pages/business/house/info/form/patrol/inspection.vue
@@ -36,8 +36,8 @@
              :custom-request="onFileUpload"
              :file-list="form.patrolInfo.settlementTiltFiles"
              :preview-file="onPreviewFile"
-              @change="onFileChange"
-              @preview="onFilePreview"
+              @change="(data) => onFileChange(data, 'settlementTiltFiles')"
+              @preview="(data) => onFilePreview(data, 'settlementTiltFiles')"
              list-type="picture-card"
            >
              <div>
@@ -62,8 +62,8 @@
              :custom-request="onFileUpload"
              :file-list="form.patrolInfo.otherInfoFiles"
              :preview-file="onPreviewFile"
-              @change="onFileChange"
-              @preview="onFilePreview"
+              @change="(data) => onFileChange(data, 'otherInfoFiles')"
+              @preview="(data) => onFilePreview(data, 'otherInfoFiles')"
              list-type="picture-card"
            >
              <div>
@@ -74,11 +74,11 @@
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
-          <a-form-model-item class="ant-row-flex" label="主要安全隐患综述" prop="patrolInfo.MainSafety">
+          <a-form-model-item class="ant-row-flex" label="主要安全隐患综述" prop="patrolInfo.mainSafety">
            <a-textarea
              :auto-size="{ minRows: 3 }"
              placeholder="请输入主要安全隐患综述"
-              v-model="form.patrolInfo.MainSafety"
+              v-model="form.patrolInfo.mainSafety"
            />
          </a-form-model-item>
        </a-col>
@@ -98,7 +98,7 @@ const defaultForm = {
    settlementTiltFiles: [],
    otherInfo: null,
    otherInfoFiles: [],
-    MainSafety: null,
+    mainSafety: null,
  },
 };
 export default {
@@ -119,9 +119,14 @@ export default {

      /** 其他成员属性 */
      codes: {},
+      fileFieldArr: ['settlementTiltFiles', 'otherInfoFiles'],
    };
  },
  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
    async onFillData() {
      this.loading = true;
      {
@@ -129,11 +134,45 @@ export default {

        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;
-        const form = this.$_.cloneDeep(defaultForm);

        if (record) {
-          this.$_.giveDeep(form, record);
+          // this.$_.giveDeep(form, record);
+          // this.fileFieldArr.forEach((key) => {
+          //   const fileValue = [];
+          //   const fileList = !!record.patrolInfo[key] ? record.patrolInfo[key].split(',') : [];
+          //   for (let i = 0; i < fileList.length; i++) {
+          //     const file = await PreviewFile(fileList[i]);
+          //     const base64 = await BlobToBase64(file);
+          //     fileValue.push({
+          //       uid: fileList[i],
+          //       response: fileList[i], // 用于和新上传的文件一同回传
+          //       name: file.name,
+          //       url: base64,
+          //       status: 'done',
+          //     });
+          //   }
+          //   defaultForm.patrolInfo[key] = fileValue;
+          // });
+          for (var key in defaultForm.patrolInfo) {
+            if (key.indexOf('Files') > -1) {
+              const fileValue = [];
+              const fileList = !!record.patrolInfo[key] ? record.patrolInfo[key].split(',') : [];
+              for (let i = 0; i < fileList.length; i++) {
+                const file = await PreviewFile(fileList[i]);
+                const base64 = await BlobToBase64(file);
+                fileValue.push({
+                  uid: fileList[i],
+                  response: fileList[i], // 用于和新上传的文件一同回传
+                  name: file.name,
+                  url: base64,
+                  status: 'done',
+                });
+              }
+              defaultForm.patrolInfo[key] = fileValue;
+            }
+          }
        }
+        const form = this.$_.cloneDeep(defaultForm);
        this.form = form;
      }
      this.loading = false;
@@ -150,8 +189,10 @@ export default {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            this.fileFieldArr.forEach((key) => {
+              record.patrolInfo[key] = record.patrolInfo[key].map((p) => p.response).join(',');
+            });
            /* ... */
-            //record.facadePhoto = record.facadePhoto.map((p) => p.response).join(',');

            reslove(record);
          } else {
@@ -178,8 +219,8 @@ export default {
    /* ... */

    /* 上传图片相关 Begin */
-    onFileChange({ fileList }) {
-      this.form.patrolInfo.settlementTiltFiles = fileList;
+    onFileChange({ fileList }, key) {
+      this.form.patrolInfo[key] = fileList;
    },
    onPreviewFile(file) {
      return new Promise((resolve) => {
@@ -198,10 +239,10 @@ export default {
        onError();
      }
    },
-    onFilePreview(file) {
+    onFilePreview({ file }, key) {
      const items = [];
-      for (let i = 0; i < this.form.patrolInfo.settlementTiltFiles.length; i++) {
-        const _file = this.form.patrolInfo.settlementTiltFiles[i];
+      for (let i = 0; i < this.form.patrolInfo[key].length; i++) {
+        const _file = this.form.patrolInfo[key][i];
        const img = new Image();
        const src = _file.url || _file.thumbUrl;
        img.src = src;
@@ -212,7 +253,7 @@ export default {
        });
      }
      this.$refs['photo-swipe'].initPhotoSwipe(items, {
-        index: this.form.patrolInfo.settlementTiltFiles.indexOf(file),
+        index: this.form.patrolInfo[key].indexOf(file),
      });
    },
    /* 上传图片相关 End */