From d791b34f2e28a0a27b1a42795eb8c720acea82b4 Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Wed, 10 Nov 2021 14:55:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/editResi.vue   | 18 ++++----
 src/views/components/resiForm.vue   | 57 +++++++++++-------------
 src/views/components/resiSearch.vue | 11 +++--
 src/views/modules/base/resi.vue     | 67 +++++++++++++++++------------
 4 files changed, 79 insertions(+), 74 deletions(-)

diff --git a/src/views/components/editResi.vue b/src/views/components/editResi.vue
index e5f3c907..1be440e7 100644
--- a/src/views/components/editResi.vue
+++ b/src/views/components/editResi.vue
@@ -14,7 +14,7 @@
         <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="form.GRID_ID" label="所属网格">
+              <el-form-item :prop="form.GRID_ID" label="所属网格" required>
               <!-- <div class="resi-cell"> -->
                 <!-- <div class="resi-cell-label">{{n.label}}</div> -->
                 <div class="resi-cell-value">
@@ -33,7 +33,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="18">
-              <el-form-item :prop="form.VILLAGE_ID" label="所属小区">
+              <el-form-item :prop="form.VILLAGE_ID" label="所属小区" required>
                 <div class="resi-cell-value">
                   <el-select v-model.trim="form.VILLAGE_ID" :disabled="disabled" placeholder="请选择小区" size="small"
                   clearable class="resi-cell-select"
@@ -46,7 +46,7 @@
                     </el-option>
                   </el-select>
                   <el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small"
-                  clearable class="resi-cell-select" @change="handleChangeB"
+                  clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
                   >
                     <el-option
                       v-for="item in optionsB"
@@ -56,7 +56,7 @@
                     </el-option>
                   </el-select>
                   <el-select v-model.trim="form.UNIT_ID" :disabled="disabled" placeholder="请选择单元" size="small"
-                  clearable class="resi-cell-select" @change="handleChangeD"
+                  clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
                   >
                     <el-option
                       v-for="item in optionsD"
@@ -66,7 +66,7 @@
                     </el-option>
                   </el-select>
                   <el-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择房号" size="small"
-                  clearable class="resi-cell-select"
+                  clearable class="resi-cell-select resi-cell-select-middle"
                   >
                     <el-option
                       v-for="item in optionsH"
@@ -115,7 +115,7 @@
             <!-- <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">
+              <el-form-item :prop="n.columnName" :label="n.label" :required="Boolean(n.required)">
                 <!-- <div class="resi-cell"> -->
                   <!-- <div class="resi-cell-label">{{n.label}}</div> -->
                   <div class="resi-cell-value">
@@ -175,7 +175,6 @@
                       range-separator="至"
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
-                      :picker-options="pickerOptions"
                       >
                     </el-date-picker>
                     <el-time-picker
@@ -760,9 +759,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .resi-form {
-  .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;
   }
 }
@@ -798,6 +797,7 @@ export default {
   .resi-cell-value .resi-cell-textarea {
     width: 300px;
   }
+
   .resi-cell-select {
     width: 180px;
     box-sizing: border-box;
diff --git a/src/views/components/resiForm.vue b/src/views/components/resiForm.vue
index 12781f2d..553ab8df 100644
--- a/src/views/components/resiForm.vue
+++ b/src/views/components/resiForm.vue
@@ -34,7 +34,7 @@
           <el-col :span="18">
               <el-form-item label="所属家庭" required>
                 <div class="resi-cell-value">
-                  <el-col :span="4">
+                  <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" @change="handleChangeV"
@@ -47,11 +47,9 @@
                         </el-option>
                       </el-select>
                     </el-form-item>
-                  </el-col>
-                  <el-col :span="4">
                     <el-form-item prop="BUILD_ID">
                       <el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small"
-                      clearable class="resi-cell-select" @change="handleChangeB"
+                      clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
                       >
                         <el-option
                           v-for="item in optionsB"
@@ -61,11 +59,9 @@
                         </el-option>
                       </el-select>
                     </el-form-item>
-                  </el-col>
-                  <el-col :span="4">
                     <el-form-item prop="UNIT_ID">
                       <el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small"
-                      clearable class="resi-cell-select" @change="handleChangeD"
+                      clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
                       >
                         <el-option
                           v-for="item in optionsD"
@@ -75,11 +71,9 @@
                         </el-option>
                       </el-select>
                     </el-form-item>
-                  </el-col>
-                  <el-col :span="4">
                     <el-form-item prop="HOME_ID">
                       <el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small"
-                      clearable class="resi-cell-select"
+                      clearable class="resi-cell-select resi-cell-select-middle"
                       >
                         <el-option
                           v-for="item in optionsH"
@@ -89,7 +83,19 @@
                         </el-option>
                       </el-select>
                     </el-form-item>
+                  </div>
+                  <!-- <el-col :span="6">
+                    
                   </el-col>
+                  <el-col :span="6">
+                    
+                  </el-col>
+                  <el-col :span="6">
+                    
+                  </el-col>
+                  <el-col :span="6">
+                    
+                  </el-col> -->
                 </div>
             </el-form-item>
           </el-col>
@@ -196,7 +202,6 @@
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
                       value-format="yyyy-MM-dd"
-                      :picker-options="pickerOptions"
                       >
                     </el-date-picker>
                     <el-time-picker
@@ -763,9 +768,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .resi-form {
-  .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;
   }
 }
@@ -773,7 +778,7 @@ export default {
     max-width: 180px;
 }
 .resi-cell-value {
-  .el-col {
+  :deep .el-col {
     margin-right: 20px;
   }
   // .resi-cell-range {
@@ -787,27 +792,16 @@ export default {
   margin-bottom: 0;
 }
 
-// .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-value .resi-cell-textarea {
     width: 300px;
   }
+  .resi-cell-col {
+    display: flex;
+    .el-form-item {
+      margin-right: 10px;
+    }
+  }
   .resi-cell-select {
     width: 180px;
     box-sizing: border-box;
@@ -822,5 +816,4 @@ export default {
   .resi-cell-select:last-child {
     margin-right: 0;
   }
-// }
 </style>
diff --git a/src/views/components/resiSearch.vue b/src/views/components/resiSearch.vue
index 39c20019..dcef80ea 100644
--- a/src/views/components/resiSearch.vue
+++ b/src/views/components/resiSearch.vue
@@ -138,7 +138,6 @@
                     size="small"
                     format="yyyy-MM-dd"
                     value-format="yyyy-MM-dd"
-                    :picker-options="pickerOptions"
                   >
                   </el-date-picker>
                   <el-date-picker
@@ -543,7 +542,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
 .resi-container .resi-card {
   position: relative;
   overflow: visible;
@@ -579,7 +578,7 @@ export default {
   margin-bottom: 20px;
 }
 .resi-search {
-  padding-right: 140px;
+  padding-right: 20px;
   .el-col {
     text-align: right;
   }
@@ -601,13 +600,13 @@ export default {
     min-height: 32px;
   }
   .resi-cell-input {
-    width: 180px;
+    width: 200px;
   }
   .resi-cell--daterange {
-    width: 100%;
+    width: 200px;
   }
   .resi-cell-select {
-    width: 180px;
+    width: 200px;
     box-sizing: border-box;
     margin-right: 10px;
     &-middle {
diff --git a/src/views/modules/base/resi.vue b/src/views/modules/base/resi.vue
index d0195275..fa3f8d81 100644
--- a/src/views/modules/base/resi.vue
+++ b/src/views/modules/base/resi.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="pageLoading">
+  <div v-if="pageLoading" class="resi-container">
     <resi-search
       v-if="searchList.length > 0"
       ref="resiSearch"
@@ -35,7 +35,7 @@
         style="width: 100%"
         class="resi-table"
       >
-        <el-table-column type="index" align="center" width="50">
+        <el-table-column label="序号" type="index" align="center" width="50">
         </el-table-column>
         <el-table-column
           v-for="item in tableHeader"
@@ -43,7 +43,7 @@
           :prop="item.columnName"
           :label="item.label"
           align="center"
-          :width="item.itemType === 'radio' ? 80 : 180"
+          :width="item.itemType === 'radio' ? computedWidth(item.label) : 180"
         >
           <template slot-scope="scope">
             <span>{{ handleFilterSpan(scope.row, item) }}</span>
@@ -66,31 +66,9 @@
                 class="btn-color-edit"
                 >编辑</el-button
               >
-              <!-- <el-popover placement="top" width="160" trigger="manual">
-                <p>删除之后无法回复，确认删除？</p>
-                <div style="text-align: right; margin: 0">
-                  <el-button size="mini" type="text" @click="rowVisible = false"
-                    >取消</el-button
-                  >
-                  <el-button
-                    type="primary"
-                    size="mini"
-                    @click="handleDel(scope.row)"
-                    >确定</el-button
-                  >
-                </div>
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  class="btn-color-del"
-                  @click="rowVisible = true"
-                  >删除</el-button
-                >
-              </el-popover> -->
               <el-popconfirm
                 title="删除之后无法回复，确认删除？"
-                @confirm="handleDel(scope.row)"
+                @onConfirm="handleDel(scope.row)"
               >
                 <el-button
                   slot="reference"
@@ -273,6 +251,10 @@ export default {
     console.log('storeoooo----0000', this.$store)
   },
   methods: {
+    computedWidth(label) {
+      const wd = 20 * label.length
+      return wd > 80 ? wd : 80
+    },
     filterEdit(id) {
       const { user } = this.$store.state
       return id === user.agencyId
@@ -428,7 +410,7 @@ export default {
     },
     async handleLook(row) {
       this.disabled = true
-      await this.getFormList()
+      await this.getFormList('edit')
       this.getrowInfo(row.icResiUserId)
     },
     async handleEdit(row) {
@@ -862,10 +844,31 @@ export default {
   }
   .el-tabs__nav-next,
   .el-tabs__nav-prev {
+    // width: 12px;
+    // height: 12px;
+    color: rgba(30, 122, 254, 1);
     line-height: 20px;
+    background: rgba(30, 122, 254, .2);
+    // border-radius: 50%;
+  }
+  .el-tabs__item.is-active {
+    color: #fff;
+    background: linear-gradient(90deg, #1A5AFD, #26C4FF);
+  }
+}
+.resi-container .resi-card-table {
+  .el-table th {
+    color: #fff;
+    background-color: rgba(33, 149, 254, 1);
+    border-right: 1px solid rgba(33, 149, 254, 1);;
   }
 }
 .resi-table {
+  // .el-table__header-wrapper .el-table__header th {
+  //   color: #fff;
+  //   background-color: rgba(33, 149, 254, 1);
+  //   border-right: 1px solid rgba(33, 149, 254, 1);;
+  // }
   .el-button--text {
     text-decoration: underline;
   }
@@ -888,6 +891,16 @@ export default {
   margin-bottom: 13px;
   .el-button {
     margin-left: 10px;
+    border: 0;
+  }
+  .el-button--success {
+    background: rgba(34, 193, 195, 1);
+  }
+  .el-button--warning {
+    background: rgba(254, 179, 73, 1);
+  }
+  .el-button--danger {
+    background: rgba(254, 98, 82, 1);
   }
 }
 .resi-other {