From a82f146fc1119650060a4cacfe29f7ab55f2442f Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Thu, 23 Jun 2022 10:28:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=BA=94=E5=A4=A7=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/editResi.vue | 494 ++++++++++++++++--------------
 1 file changed, 262 insertions(+), 232 deletions(-)

diff --git a/src/views/components/editResi.vue b/src/views/components/editResi.vue
index db0aba95f..05e086d92 100644
--- a/src/views/components/editResi.vue
+++ b/src/views/components/editResi.vue
@@ -1,92 +1,120 @@
 <template>
-  <div :id="formId" class="resi-container">
-    <el-form :ref="formId" class="resi-form" :model="form" :rules="rulesForm" :label-width="labelWidth">
+  <div :id="formId"
+       class="resi-container">
+    <el-form :ref="formId"
+             class="resi-form"
+             :model="form"
+             :rules="rulesForm"
+             :label-width="labelWidth">
       <template v-if="supportAdd">
         <el-row style="margin-bottom: 10px;">
           <el-col :span="24">
-            <el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
+            <el-button icon="el-icon-plus"
+                       size="small"
+                       @click="handleAddRow"></el-button>
           </el-col>
         </el-row>
-        <edit-form v-for="(item, index) in addList" :key="index"  :ref="'baseForms' + index" :columns="3"
-        :form-list="item.itemList || formList" :form-id="'baseForms' + item.row" />
+        <edit-form v-for="(item, index) in addList"
+                   :key="index"
+                   :ref="'baseForms' + index"
+                   :columns="3"
+                   :form-list="item.itemList || formList"
+                   :form-id="'baseForms' + item.row" />
       </template>
       <template v-else>
-        <el-row v-if="fixed" class="resi-row">
+        <el-row v-if="fixed"
+                class="resi-row">
           <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
           <el-col :span="6">
-              <el-form-item prop="GRID_ID" label="所属网格">
+            <el-form-item prop="GRID_ID"
+                          label="所属网格">
               <!-- <div class="resi-cell"> -->
-                <!-- <div class="resi-cell-label">{{n.label}}</div> -->
-                <div class="resi-cell-value">
-                  <el-select v-model.trim="form.GRID_ID" :disabled="disabled" placeholder="请选择网格" size="small"
-                  clearable class="resi-cell-select" @change="handleChangeGrid"
-                  >
-                    <el-option
-                      v-for="item in optionsG"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
-                    </el-option>
-                  </el-select>
-                </div>
+              <!-- <div class="resi-cell-label">{{n.label}}</div> -->
+              <div class="resi-cell-value">
+                <el-select v-model.trim="form.GRID_ID"
+                           :disabled="disabled"
+                           placeholder="请选择网格"
+                           size="small"
+                           clearable
+                           class="resi-cell-select"
+                           @change="handleChangeGrid">
+                  <el-option v-for="item in optionsG"
+                             :key="item.value"
+                             :label="item.label"
+                             :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
               <!-- </div> -->
             </el-form-item>
           </el-col>
           <el-col :span="18">
-              <el-form-item label="所属房屋" required>
-                <div class="resi-cell-value">
-                  <div class="resi-cell-col">
-                    <el-form-item prop="VILLAGE_ID">
-                      <el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small"
-                      clearable class="resi-cell-select" :disabled="disabled" @change="handleChangeV"
-                      >
-                        <el-option
-                          v-for="item in optionsV"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item prop="BUILD_ID">
-                      <el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small"
-                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
-                      >
-                        <el-option
-                          v-for="item in optionsB"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item prop="UNIT_ID">
-                      <el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small"
-                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
-                      >
-                        <el-option
-                          v-for="item in optionsD"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item prop="HOME_ID">
-                      <el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small"
-                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle"
-                      @change="handleChangeH"
-                      >
-                        <el-option
-                          v-for="item in optionsH"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                  </div>
-                  <!-- <el-col :span="6">
+            <el-form-item label="所属房屋"
+                          required>
+              <div class="resi-cell-value">
+                <div class="resi-cell-col">
+                  <el-form-item prop="VILLAGE_ID">
+                    <el-select v-model.trim="form.VILLAGE_ID"
+                               placeholder="请选择小区"
+                               size="small"
+                               clearable
+                               class="resi-cell-select"
+                               :disabled="disabled"
+                               @change="handleChangeV">
+                      <el-option v-for="item in optionsV"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item prop="BUILD_ID">
+                    <el-select v-model.trim="form.BUILD_ID"
+                               placeholder="请选择楼号"
+                               size="small"
+                               clearable
+                               :disabled="disabled"
+                               class="resi-cell-select resi-cell-select-middle"
+                               @change="handleChangeB">
+                      <el-option v-for="item in optionsB"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item prop="UNIT_ID">
+                    <el-select v-model.trim="form.UNIT_ID"
+                               placeholder="请选择单元"
+                               size="small"
+                               clearable
+                               :disabled="disabled"
+                               class="resi-cell-select resi-cell-select-middle"
+                               @change="handleChangeD">
+                      <el-option v-for="item in optionsD"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item prop="HOME_ID">
+                    <el-select v-model.trim="form.HOME_ID"
+                               placeholder="请选择房号"
+                               size="small"
+                               clearable
+                               :disabled="disabled"
+                               class="resi-cell-select resi-cell-select-middle"
+                               @change="handleChangeH">
+                      <el-option v-for="item in optionsH"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <!-- <el-col :span="6">
                     
                   </el-col>
                   <el-col :span="6">
@@ -98,7 +126,7 @@
                   <el-col :span="6">
                     
                   </el-col> -->
-                </div>
+              </div>
             </el-form-item>
           </el-col>
           <!-- <el-col :span="6">
@@ -134,37 +162,38 @@
             </el-form-item>
           </el-col> -->
         </el-row>
-        <el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
-            <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
-            <el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
-            :style="n.itemType === 'divider' && 'display: none;'">
-              <el-form-item :prop="n.columnName" :label="n.label">
-                <!-- <div class="resi-cell"> -->
-                  <!-- <div class="resi-cell-label">{{n.label}}</div> -->
-                  <div class="resi-cell-value">
-                    <template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
-                      <el-input
-                        v-if="n.validType"
-                        v-model.trim="form[n.columnName]"
-                        :disabled="disabled"
-                        class="resi-cell-input"
-                        size="small"
-                        clearable
-                        placeholder="请输入内容"
-                        >
-                      </el-input>
-                      <el-input
-                        v-else
-                        v-model.trim="form[n.columnName]"
-                        :disabled="disabled"
-                        class="resi-cell-input"
-                        size="small"
-                        clearable
-                        placeholder="请输入内容"
-                        >
-                      </el-input>
-                    </template>
-                    <!-- <template v-if="n.itemType === 'textarea'">
+        <el-row v-for="(item, index) in sliceList(formList, columns)"
+                :key="index"
+                class="resi-row">
+          <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
+          <el-col v-for="n in item"
+                  :key="n.itemId"
+                  :span="item.length === 1 ? 24 : (24/columns)"
+                  :style="n.itemType === 'divider' && 'display: none;'">
+            <el-form-item :prop="n.columnName"
+                          :label="n.label">
+              <!-- <div class="resi-cell"> -->
+              <!-- <div class="resi-cell-label">{{n.label}}</div> -->
+              <div class="resi-cell-value">
+                <template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
+                  <el-input v-if="n.validType"
+                            v-model.trim="form[n.columnName]"
+                            :disabled="disabled"
+                            class="resi-cell-input"
+                            size="small"
+                            clearable
+                            placeholder="请输入内容">
+                  </el-input>
+                  <el-input v-else
+                            v-model.trim="form[n.columnName]"
+                            :disabled="disabled"
+                            class="resi-cell-input"
+                            size="small"
+                            clearable
+                            placeholder="请输入内容">
+                  </el-input>
+                </template>
+                <!-- <template v-if="n.itemType === 'textarea'">
                       <el-input
                         v-model.trim="form[n.columnName]"
                         class="resi-cell-textarea"
@@ -175,90 +204,92 @@
                         >
                       </el-input>
                     </template> -->
-                    <el-date-picker
-                      v-else-if="n.itemType === 'datepicker'"
-                      v-model.trim="form[n.columnName]"
-                      :disabled="disabled"
-                      class="resi-cell-input"
-                      type="date"
-                      size="small"
-                      clearable
-                      placeholder="选择日期"
-                      format="yyyy 年 MM 月 dd 日"
-                      value-format="yyyy-MM-dd">
-                    </el-date-picker>
-                    <el-date-picker
-                      v-else-if="n.itemType === 'daterange'"
-                      v-model.trim="form[n.columnName]"
-                      :disabled="disabled"
-                      type="daterange"
-                      align="right"
-                      unlink-panels
-                      value-format="yyyy-MM-dd"
-                      range-separator="至"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"
-                      >
-                    </el-date-picker>
-                    <el-time-picker
-                      v-else-if="n.itemType === 'timepicker'"
-                      v-model.trim="form[n.columnName]"
-                      :disabled="disabled"
-                      placeholder="任意时间点">
-                    </el-time-picker>
-                    <el-time-picker
-                      v-else-if="n.itemType === 'timerange'"
-                      v-model.trim="form[n.columnName]"
-                      :disabled="disabled"
-                      is-range
-                      range-separator="至"
-                      start-placeholder="开始时间"
-                      end-placeholder="结束时间"
-                      placeholder="选择时间范围">
-                    </el-time-picker>
-                    <el-select v-else-if="n.itemType === 'select'" v-model.trim="form[n.columnName]"
-                    :multiple="n.multiSelect"
-                    :disabled="disabled"
-                    placeholder="请选择" size="small" clearable class="resi-cell-select">
-                      <el-option
-                        v-for="item in n.options || options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                      </el-option>
-                    </el-select>
-                    <!-- <el-cascader
+                <el-date-picker v-else-if="n.itemType === 'datepicker'"
+                                v-model.trim="form[n.columnName]"
+                                :disabled="disabled"
+                                class="resi-cell-input"
+                                type="date"
+                                size="small"
+                                clearable
+                                placeholder="选择日期"
+                                format="yyyy 年 MM 月 dd 日"
+                                value-format="yyyy-MM-dd">
+                </el-date-picker>
+                <el-date-picker v-else-if="n.itemType === 'daterange'"
+                                v-model.trim="form[n.columnName]"
+                                :disabled="disabled"
+                                type="daterange"
+                                align="right"
+                                unlink-panels
+                                value-format="yyyy-MM-dd"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期">
+                </el-date-picker>
+                <el-time-picker v-else-if="n.itemType === 'timepicker'"
+                                v-model.trim="form[n.columnName]"
+                                :disabled="disabled"
+                                placeholder="任意时间点">
+                </el-time-picker>
+                <el-time-picker v-else-if="n.itemType === 'timerange'"
+                                v-model.trim="form[n.columnName]"
+                                :disabled="disabled"
+                                is-range
+                                range-separator="至"
+                                start-placeholder="开始时间"
+                                end-placeholder="结束时间"
+                                placeholder="选择时间范围">
+                </el-time-picker>
+                <el-select v-else-if="n.itemType === 'select'"
+                           v-model.trim="form[n.columnName]"
+                           :multiple="n.multiSelect"
+                           :disabled="disabled"
+                           placeholder="请选择"
+                           size="small"
+                           clearable
+                           class="resi-cell-select">
+                  <el-option v-for="item in n.options || options"
+                             :key="item.value"
+                             :label="item.label"
+                             :value="item.value">
+                  </el-option>
+                </el-select>
+                <!-- <el-cascader
                       :options="options"
                       :props="{ checkStrictly: true }"
                       clearable></el-cascader> -->
-                    <el-cascader
-                      v-else-if="n.itemType === 'cascader'"
-                      v-model.trim="form[n.columnName]"
-                      :options="n.options"
-                      :props="{ checkStrictly: true }"
-                      :disabled="disabled"
-                      :props="{ emitPath: false }"
-                      clearable
-                      size="small"
-                      class="resi-cell-select">
-                    </el-cascader>
-                    <template v-else-if="n.itemType === 'radio'">
-                      <el-radio v-for="ns in n.options" :key="ns.value" v-model.trim="form[n.columnName]" :disabled="disabled"
-                      :label="ns.value">
-                        {{ ns.label }}
-                      </el-radio>
-                      <!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
-                    </template>
-                    <template v-else-if="n.itemType === 'checkbox'">
-                      <el-checkbox-group v-model.trim="form[n.columnName]">
-                        <el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value" :disabled="disabled">{{ns.label}}</el-checkbox>
-                        <!-- <el-checkbox label="n.la"></el-checkbox> -->
-                      </el-checkbox-group>
-                    </template>
-                  </div>
-                <!-- </div> -->
-              </el-form-item>
-            </el-col>
+                <el-cascader v-else-if="n.itemType === 'cascader'"
+                             v-model.trim="form[n.columnName]"
+                             :options="n.options"
+                             :props="{ checkStrictly: true }"
+                             :disabled="disabled"
+                             clearable
+                             size="small"
+                             class="resi-cell-select">
+                </el-cascader>
+                <template v-else-if="n.itemType === 'radio'">
+                  <el-radio v-for="ns in n.options"
+                            :key="ns.value"
+                            v-model.trim="form[n.columnName]"
+                            :disabled="disabled"
+                            :label="ns.value">
+                    {{ ns.label }}
+                  </el-radio>
+                  <!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
+                </template>
+                <template v-else-if="n.itemType === 'checkbox'">
+                  <el-checkbox-group v-model.trim="form[n.columnName]">
+                    <el-checkbox v-for="ns in n.options"
+                                 :key="ns.value"
+                                 :label="ns.value"
+                                 :disabled="disabled">{{ns.label}}</el-checkbox>
+                    <!-- <el-checkbox label="n.la"></el-checkbox> -->
+                  </el-checkbox-group>
+                </template>
+              </div>
+              <!-- </div> -->
+            </el-form-item>
+          </el-col>
         </el-row>
       </template>
     </el-form>
@@ -349,7 +380,7 @@ export default {
         _form = { ...obj }
         // return _form
       }
-      const itemTypes = ['daterange', 'timerange']
+      const itemTypes = ['cascader', 'daterange', 'timerange']
       arr.forEach(item => {
         if (item.multiSelect || itemTypes.includes(item.itemType)) {
           if (item.columnValue && item.columnValue.indexOf(',') > -1) _form[item.columnName] = item.columnValue.split(',')
@@ -382,7 +413,7 @@ export default {
     }
     let form = initForm(this.formInfo, this.formList)
     let rules = initRules(this.formList)
-    let tempFormList = [ ...this.formList ]
+    let tempFormList = [...this.formList]
     let constForm = {
       ...form
     }
@@ -526,13 +557,13 @@ export default {
         }
       })
     },
-    getTreeData(data){
+    getTreeData (data) {
       if (!Array.isArray(data)) return []
       let arr = data.map(item => {
         let _item = {}
         if (item.children) {
           if (item.children.length === 0) _item = { ...item, children: undefined }
-          else _item = { ...item, children: this.getTreeData(item.children)}
+          else _item = { ...item, children: this.getTreeData(item.children) }
         } else {
           _item = { ...item }
         }
@@ -614,9 +645,9 @@ export default {
       this.getHouseList()
     },
     // 为了实现根据房屋类型改版是否租户的需求
-    handleChangeH(val){
+    handleChangeH (val) {
       let item = this.optionsH.find(item => item.value === val);
-      if(item && item.type == '1'){
+      if (item && item.type == '1') {
         this.form.IS_TENANT = '1'
         console.log('item-----', item)
       } else this.form.IS_TENANT = '0'
@@ -625,7 +656,7 @@ export default {
       let arr = []
       this.addList.forEach(item => {
         // console.log('handlerMuscForm----000', this.$refs['baseForms' + item.row || item][0].handleForm())
-        arr.push([ ...this.$refs['baseForms' + item.row][0].handleForm() ])
+        arr.push([...this.$refs['baseForms' + item.row][0].handleForm()])
       })
       if (arr.length === 0) return arr
       let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
@@ -808,17 +839,16 @@ export default {
 
 <style lang="scss" scoped>
 .resi-form {
-  :deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
+  :deep .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
     width: 100% !important;
   }
 }
 .resi-cell-value .resi-cell-input {
-    width: 190px;
+  width: 190px;
 }
-
 </style>
 <style lang="scss" scoped>
-
 .resi-form .resi-row {
   margin-bottom: 0;
 }
@@ -826,43 +856,43 @@ export default {
 // .resi-form .resi-cell {
 //   display: flex;
 //   align-items: center;
-  // .resi-cell-label {
-  //   width: 70px;
-  //   box-sizing: border-box;
-  //   margin-right: 15px;
-  //   text-align: right;
-  // }
-  // .resi-cell-value-radio {
-  //   display: flex;
-  //   align-items: center;
-  //   min-height: 36px;
-  // }
-  //  .resi-cell-value .resi-cell-input {
-  //   width: 180px;
-  // }
+// .resi-cell-label {
+//   width: 70px;
+//   box-sizing: border-box;
+//   margin-right: 15px;
+//   text-align: right;
+// }
+// .resi-cell-value-radio {
+//   display: flex;
+//   align-items: center;
+//   min-height: 36px;
+// }
+//  .resi-cell-value .resi-cell-input {
+//   width: 180px;
+// }
 
-  .resi-cell-value .resi-cell-textarea {
-    width: 300px;
-  }
-  .resi-cell-col {
-    display: flex;
-    .el-form-item {
-      margin-right: 10px;
-    }
-  }
-  .resi-cell-select {
-    width: 190px;
-    box-sizing: border-box;
+.resi-cell-value .resi-cell-textarea {
+  width: 300px;
+}
+.resi-cell-col {
+  display: flex;
+  .el-form-item {
     margin-right: 10px;
-    &-middle {
-      width: 130px;
-    }
-    &-small {
-      width: 88px;
-    }
   }
-  .resi-cell-select:last-child {
-    margin-right: 0;
+}
+.resi-cell-select {
+  width: 190px;
+  box-sizing: border-box;
+  margin-right: 10px;
+  &-middle {
+    width: 130px;
   }
+  &-small {
+    width: 88px;
+  }
+}
+.resi-cell-select:last-child {
+  margin-right: 0;
+}
 // }
 </style>