From c68ed6c4bc23a5841926eee53b535ce3c467053b Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Thu, 17 Nov 2022 17:10:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=BF=E5=B1=8B=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/buttonstyle.scss              |  24 ++-
 src/main.js                                   |   2 +
 .../modules/base/community/buildTable.vue     | 194 ++++++++++++------
 .../modules/base/community/communityTable.vue |  20 +-
 .../modules/base/community/roomTable.vue      | 185 +++++++++++------
 5 files changed, 286 insertions(+), 139 deletions(-)

diff --git a/src/assets/scss/buttonstyle.scss b/src/assets/scss/buttonstyle.scss
index ad6d1f080..96fe931dc 100644
--- a/src/assets/scss/buttonstyle.scss
+++ b/src/assets/scss/buttonstyle.scss
@@ -1,5 +1,4 @@
 //新版
-
 //紫色
 .diy-button--purple {
   background: linear-gradient(0deg, #7A58D1 0%, #8C91FF 100%) !important;
@@ -115,6 +114,29 @@
   
 }
 
+//列表中操作按钮
+//查看
+.div-table-button--orange {
+  font-size: 14px !important;
+  font-family: Source Han Serif CN !important;
+  font-weight: 600 !important;
+  color: #FF8400 !important;
+
+}
+.div-table-button--blue {
+  font-size: 14px !important;
+  font-family: Source Han Serif CN !important;
+  font-weight: 600 !important;
+  color: #0153B2 !important;
+}
+.div-table-button--red {
+  font-size: 14px !important;
+  font-family: Source Han Serif CN !important;
+  font-weight: 600 !important;
+  color: #BB0000 !important;
+
+}
+
 //旧版--------弃用
 //查询、确定
 .diy-button--search {
diff --git a/src/main.js b/src/main.js
index f5f3634b1..4bebde648 100644
--- a/src/main.js
+++ b/src/main.js
@@ -97,6 +97,8 @@ Vue.prototype.$getElUploadHeaders = () => ({
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG["storeState"] = cloneDeep(store.state);
 
+Vue.prototype.tableHeaderStyle = { background: 'linear-gradient(0deg, #005EB3 0%, #0083F0 100%)', color: '#FFFFFF', padding: '6px' };
+
 new Vue({
   i18n,
   router,
diff --git a/src/views/modules/base/community/buildTable.vue b/src/views/modules/base/community/buildTable.vue
index b8d5ecafc..7dd28c5e6 100644
--- a/src/views/modules/base/community/buildTable.vue
+++ b/src/views/modules/base/community/buildTable.vue
@@ -2,73 +2,110 @@
   <div>
 
     <div class="div_btn">
-
-      <el-button style="float:left"
-                 class="diy-button--add"
-                 size="small"
-                 @click="handleAdd">新增楼栋</el-button>
-      <div class="btn_upload"
-           v-if="showImportBtn">
-        <el-button style=";margin-left:10px"
-                   class="diy-button--export"
+      <div class="div_btn_left">
+        <el-button style=""
+                   class="diy-button--purple"
                    size="small"
-                   @click="handleExportModule('building')">下载楼栋模板</el-button>
-
-        <el-upload :headers="$getElUploadHeaders()"
-                   style=""
-                   ref="upload_building"
-                   :multiple='false'
-                   :show-file-list='false'
-                   :before-upload="((file)=>{beforeUpload(file, 'building')})"
-                   action=""
-                   accept=".xls,.xlsx"
-                   :http-request="(()=>{uploadFile( 'building')})">
-          <el-button style="margin-left:10px"
-                     size="small"
-                     class="diy-button--delete">导入楼栋数据</el-button>
-        </el-upload>
-        <el-button style=";margin-left:10px"
-                   class="diy-button--export"
+                   @click="handleAdd">新增楼栋</el-button>
+
+        <el-button style="margin-left:10px"
+                   class="diy-button--green"
                    size="small"
-                   @click="handleExportModule('room')">下载房屋模板</el-button>
-
-        <el-upload :headers="$getElUploadHeaders()"
-                   style=""
-                   ref="upload_room"
-                   :multiple='false'
-                   :show-file-list='false'
-                   :before-upload="((file)=>{beforeUpload(file, 'room')})"
-                   action=""
-                   accept=".xls,.xlsx"
-                   :http-request="(()=>{uploadFile( 'room')})">
+                   @click="handleExport">导出</el-button>
+
+        <div class="btn_upload"
+             v-if="showImportBtn">
+
+          <el-upload :headers="$getElUploadHeaders()"
+                     style=""
+                     ref="upload_building"
+                     :multiple='false'
+                     :show-file-list='false'
+                     :before-upload="((file)=>{beforeUpload(file, 'building')})"
+                     action=""
+                     accept=".xls,.xlsx"
+                     :http-request="(()=>{uploadFile( 'building')})">
+            <el-button style=""
+                       size="small"
+                       class="diy-button--yellow">导入楼栋数据</el-button>
+          </el-upload>
+
+          <el-upload :headers="$getElUploadHeaders()"
+                     style=""
+                     ref="upload_room"
+                     :multiple='false'
+                     :show-file-list='false'
+                     :before-upload="((file)=>{beforeUpload(file, 'room')})"
+                     action=""
+                     accept=".xls,.xlsx"
+                     :http-request="(()=>{uploadFile( 'room')})">
+            <el-button style="margin-left:10px"
+                       size="small"
+                       class="diy-button--orange">导入房屋数据</el-button>
+          </el-upload>
+
           <el-button style="margin-left:10px"
+                     class="diy-button--red"
                      size="small"
-                     class="diy-button--delete">导入房屋数据</el-button>
-        </el-upload>
+                     @click="deleteBatch">批量删除</el-button>
+
+        </div>
+
+      </div>
+
+      <div class="div_btn_right">
+        <el-popover popper-class="btn-popper"
+                    placement="bottom"
+                    style="margin-left: 10px"
+                    width="20"
+                    trigger="hover">
+
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button :headers="$getElUploadHeaders()"
+                       style=""
+                       class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule('building')">下载楼栋模板</el-button>
+          </div>
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button :headers="$getElUploadHeaders()"
+                       style=""
+                       class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule('room')">下载房屋模板</el-button>
+          </div>
+          <div class="table-more-btn">
+            <el-button style=""
+                       class="diy-button--other"
+                       size="small"
+                       type="text"
+                       :disabled="yihuyidangDisabled"
+                       @click="handleExportYihuyidang()">导出一户一档</el-button>
+          </div>
+          <div v-if="displayedBaobiaoBtn"
+               class="table-more-btn">
+            <el-button size="small"
+                       type="text"
+                       class="diy-button--other"
+                       @click="reportForm">智能填报</el-button>
+          </div>
+          <el-button size="small"
+                     style="float:right"
+                     class="diy-button--white"
+                     slot="reference">更多操作<i class="el-icon-caret-bottom"></i></el-button>
+        </el-popover>
       </div>
-      <el-button style="float:left;margin-left:10px"
-                 class="diy-button--reset"
-                 size="small"
-                 @click="handleExport">导出</el-button>
-      <el-button style="float:left;margin-left:10px"
-                 class="diy-button--more"
-                 size="small"
-                 @click="deleteBatch">批量删除</el-button>
-      <el-button style=";margin-left:10px"
-                 class="diy-button--export"
-                 size="small"
-                 :disabled="yihuyidangDisabled"
-                 @click="handleExportYihuyidang()">导出一户一档</el-button>
-      <el-button size="small"
-                 v-if="displayedBaobiaoBtn"
-                 class="diy-button--add"
-                 @click="reportForm">智能填报</el-button>
+
     </div>
 
     <div class="div_table_item">
       <el-table ref="ref_table"
                 :data="tableData"
-                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                :header-cell-style="tableHeaderStyle"
                 border
                 @sort-change="handleSortOrderChange"
                 :height="tableHeight"
@@ -80,16 +117,20 @@
                          :selectable="checkSelect"
                          width="55">
         </el-table-column>
-        <el-table-column fixed="left"
-                         width="55"
+        <!-- <el-table-column fixed="left"
+                         width="70"
                          type="index"
                          label="序号"
+                         header-align="center"
+                         align="center"
                          :index="indexMethod">
-        </el-table-column>
+        </el-table-column> -->
 
         <el-table-column prop="buildingName"
                          fixed="left"
                          label="楼栋名称"
+                         header-align="center"
+                         align="center"
                          min-width="180">
           <template slot-scope="scope">
             <a class="name-a"
@@ -100,35 +141,54 @@
         </el-table-column>
         <el-table-column prop="neighborHoodName"
                          label="所属小区"
+                         header-align="center"
+                         align="center"
                          min-width="160">
         </el-table-column>
         <el-table-column prop="buildingType"
                          label="楼栋类型"
-                         min-width="110">
+                         header-align="center"
+                         align="center"
+                         width="90">
         </el-table-column>
         <el-table-column prop="buildingLeaderName"
                          label="楼长姓名"
+                         header-align="center"
+                         align="center"
                          min-width="90">
         </el-table-column>
         <el-table-column prop="buildingLeaderMobile"
                          label="楼长电话"
+                         header-align="center"
+                         align="center"
                          min-width="110">
         </el-table-column>
         <el-table-column prop="totalUnitNum"
+                         header-align="center"
+                         align="center"
                          label="单元数">
         </el-table-column>
         <el-table-column prop="totalFloorNum"
+                         header-align="center"
+                         align="center"
                          label="层数">
         </el-table-column>
         <el-table-column prop="realTotalHouseNum"
-                         label="实际录入总数">
+                         header-align="center"
+                         align="center"
+                         width="90"
+                         label="实际录入">
         </el-table-column>
         <el-table-column prop="totalHouseNum"
+                         header-align="center"
+                         align="center"
                          label="总户数">
         </el-table-column>
         <el-table-column prop="sort"
                          sortable="custom"
-                         min-width="140"
+                         header-align="center"
+                         align="center"
+                         min-width="100"
                          label="排序">
           <template slot-scope="scope">
             <div @click="handleEditSort(scope.row)">
@@ -149,25 +209,25 @@
 
         <el-table-column label="操作"
                          fixed="right"
-                         width="140"
+                         width="160"
                          header-align="center"
                          align="center"
                          class="operate">
           <template slot-scope="scope">
 
             <el-button type="text"
-                       class="div-table-button--detail"
+                       class="div-table-button--orange"
                        size="small"
                        @click="handleDetail(scope.row)">查看</el-button>
             <el-button v-if="scope.row.showBtn"
                        type="text"
-                       class="div-table-button--edit"
+                       class="div-table-button--blue"
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
             <el-button v-if="scope.row.showBtn"
                        type="text"
-                       class="div-table-button--delete"
+                       class="div-table-button--red"
                        size="small"
                        @click="handleDelete(scope.row)">删除</el-button>
           </template>
diff --git a/src/views/modules/base/community/communityTable.vue b/src/views/modules/base/community/communityTable.vue
index 736a21c23..3c2065200 100644
--- a/src/views/modules/base/community/communityTable.vue
+++ b/src/views/modules/base/community/communityTable.vue
@@ -85,21 +85,24 @@
 
           <div v-if="showImportBtn"
                class="table-more-btn">
-            <el-button class="diy-button--other"
+            <el-button :headers="$getElUploadHeaders()"
+                       class="diy-button--other"
                        size="small"
                        type="text"
                        @click="handleExportModule('building')">下载楼栋模板</el-button>
           </div>
           <div v-if="showImportBtn"
                class="table-more-btn">
-            <el-button class="diy-button--other"
+            <el-button :headers="$getElUploadHeaders()"
+                       class="diy-button--other"
                        size="small"
                        type="text"
                        @click="handleExportModule('room')">下载房屋模板</el-button>
           </div>
           <div v-if="showYhymInfo && customerId!=='1535072605621841922'"
                class="table-more-btn">
-            <el-button class="diy-button--other"
+            <el-button :headers="$getElUploadHeaders()"
+                       class="diy-button--other"
                        size="small"
                        type="text"
                        :loading="yhymLoading"
@@ -142,7 +145,7 @@
                 border
                 :height="tableHeight"
                 v-loading="tableLoading"
-                :header-cell-style="{background:'linear-gradient(0deg, #005EB3 0%, #0083F0 100%)',color:'#FFFFFF',padding:'6px'}"
+                :header-cell-style="tableHeaderStyle"
                 style="width: 100%"
                 :show-overflow-tooltip="true"
                 @select-all="selectAll"
@@ -192,25 +195,25 @@
 
         <el-table-column label="操作"
                          fixed="right"
-                         width="140"
+                         width="160"
                          header-align="center"
                          align="center"
                          class="operate">
           <template slot-scope="scope">
 
             <el-button type="text"
-                       class="div-table-button--detail"
+                       class="div-table-button--orange"
                        size="small"
                        @click="handleDetail(scope.row)">查看</el-button>
             <el-button v-if="scope.row.showBtn"
                        type="text"
-                       class="div-table-button--edit"
+                       class="div-table-button--blue"
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
             <el-button v-if="scope.row.showBtn"
                        type="text"
-                       class="div-table-button--delete"
+                       class="div-table-button--red"
                        size="small"
                        @click="handleDelete(scope.row)">删除</el-button>
           </template>
@@ -306,6 +309,7 @@ export default {
       pageSize: 20,
       pageNo: 0,
       tableLoading: true,
+      // tableHeaderStyle: { background: 'linear-gradient(0deg, #005EB3 0%, #0083F0 100%)', color: '#FFFFFF', padding: '6px' },
 
       showImportBtn: false,//是否显示操作按钮，根据登录人所属组织判断
       roleList: [],//角色列表
diff --git a/src/views/modules/base/community/roomTable.vue b/src/views/modules/base/community/roomTable.vue
index 81a2ccbce..2985e8ad8 100644
--- a/src/views/modules/base/community/roomTable.vue
+++ b/src/views/modules/base/community/roomTable.vue
@@ -1,61 +1,92 @@
 <template>
   <div>
     <div class="div_btn">
-      <el-button v-if="agencyObj.level === 'building' || source !== 'search'"
-                 v-show="btnAuths.ic_house_add"
-                 style="float: left"
-                 class="diy-button--add"
-                 size="small"
-                 @click="handleAdd">新增房屋</el-button>
-      <div class="btn_upload"
-           v-if="showImportBtn">
-        <el-button :headers="$getElUploadHeaders()"
-                   v-if="btnAuths.ic_house_import"
-                   style="float: left"
-                   class="diy-button--export"
+      <div class="div_btn_left">
+        <el-button v-if="agencyObj.level === 'building' || source !== 'search'"
+                   v-show="btnAuths.ic_house_add"
+                   class="diy-button--purple"
                    size="small"
-                   @click="handleExportModule">下载房屋模板</el-button>
-        <el-upload ref="upload"
-                   v-if="btnAuths.ic_house_import"
-                   :multiple="false"
-                   :show-file-list="false"
-                   :before-upload="beforeUpload"
-                   action=""
-                   accept=".xls,.xlsx"
-                   :limit="1"
-                   :on-exceed="handleExceed"
-                   :http-request="uploadFile">
-          <el-button style="margin-left: 10px"
-                     size="small"
-                     class="diy-button--delete">导入房屋数据</el-button>
-        </el-upload>
+                   @click="handleAdd">新增房屋</el-button>
+
+        <el-button style="float: left; margin-left: 10px"
+                   v-if="btnAuths.ic_house_export"
+                   class="diy-button--green"
+                   size="small"
+                   @click="handleExport">导出</el-button>
+        <div class="btn_upload"
+             v-if="showImportBtn">
+
+          <el-upload ref="upload"
+                     v-if="btnAuths.ic_house_import"
+                     :multiple="false"
+                     :show-file-list="false"
+                     :before-upload="beforeUpload"
+                     action=""
+                     accept=".xls,.xlsx"
+                     :limit="1"
+                     :on-exceed="handleExceed"
+                     :http-request="uploadFile">
+            <el-button style=""
+                       size="small"
+                       class="diy-button--orange">导入房屋数据</el-button>
+          </el-upload>
+        </div>
+
+        <el-button style="float: left; margin-left: 10px"
+                   v-if="btnAuths.ic_house_batch_del"
+                   class="diy-button--red"
+                   size="small"
+                   @click="deleteBatch">批量删除</el-button>
+
+      </div>
+
+      <div class="div_btn_right">
+        <el-popover popper-class="btn-popper"
+                    placement="bottom"
+                    style="margin-left: 10px"
+                    width="20"
+                    trigger="hover">
+
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button :headers="$getElUploadHeaders()"
+                       v-if="btnAuths.ic_house_import"
+                       class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule">下载房屋模板</el-button>
+          </div>
+          <div v-if="btnAuths.ic_house_export_yhyd"
+               class="table-more-btn">
+            <el-button style=""
+                       class="diy-button--other"
+                       size="small"
+                       type="text"
+                       :disabled="yihuyidangDisabled"
+                       @click="handleExportYihuyidang()">导出一户一档</el-button>
+
+          </div>
+
+          <div v-if="btnAuths.ic_house_smart_import && displayedBaobiaoBtn"
+               class="table-more-btn">
+            <el-button size="small"
+                       class="diy-button--other"
+                       type="text"
+                       @click="reportForm">智能填报</el-button>
+          </div>
+
+          <el-button size="small"
+                     style="float:right"
+                     class="diy-button--white"
+                     slot="reference">更多操作<i class="el-icon-caret-bottom"></i></el-button>
+        </el-popover>
       </div>
-      <el-button style="float: left; margin-left: 10px"
-                 v-if="btnAuths.ic_house_export"
-                 class="diy-button--reset"
-                 size="small"
-                 @click="handleExport">导出</el-button>
-      <el-button style="float: left; margin-left: 10px"
-                 v-if="btnAuths.ic_house_batch_del"
-                 class="diy-button--more"
-                 size="small"
-                 @click="deleteBatch">批量删除</el-button>
-      <el-button style="margin-left: 10px"
-                 v-if="btnAuths.ic_house_export_yhyd"
-                 class="diy-button--export"
-                 size="small"
-                 :disabled="yihuyidangDisabled"
-                 @click="handleExportYihuyidang()">导出一户一档</el-button>
-      <el-button size="small"
-                 class="diy-button--add"
-                 v-if="btnAuths.ic_house_smart_import && displayedBaobiaoBtn"
-                 @click="reportForm">智能填报</el-button>
     </div>
 
     <div class="div_table_item">
       <el-table ref="ref_table"
                 :data="tableData"
-                :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+                :header-cell-style="tableHeaderStyle"
                 v-loading="tableLoading"
                 @sort-change="handleSortOrderChange"
                 border
@@ -67,66 +98,94 @@
                          :selectable="checkSelect"
                          width="55">
         </el-table-column>
-        <el-table-column fixed="left"
-                         width="55"
+        <!-- <el-table-column fixed="left"
+                         width="70"
                          type="index"
                          label="序号"
+                         header-align="center"
+                         align="center"
                          :index="indexMethod">
-        </el-table-column>
+        </el-table-column> -->
 
         <el-table-column prop="houseNameShow"
+                         header-align="center"
+                         align="center"
                          label="房屋名称"
                          fixed="left"
                          min-width="160">
         </el-table-column>
         <el-table-column prop="neighborHoodName"
                          label="所属小区"
+                         header-align="center"
+                         align="center"
                          min-width="150">
         </el-table-column>
         <el-table-column prop="buildingName"
                          label="所属楼栋"
-                         width="80">
+                         header-align="center"
+                         align="center"
+                         width="90">
         </el-table-column>
         <el-table-column prop="unitNum"
                          label="单元号"
-                         width="70">
+                         header-align="center"
+                         align="center"
+                         width="80">
         </el-table-column>
         <el-table-column prop="doorName"
                          label="门牌号"
-                         width="70">
+                         header-align="center"
+                         align="center"
+                         width="80">
         </el-table-column>
         <el-table-column prop="houseType"
                          label="类型"
-                         width="50">
+                         header-align="center"
+                         align="center"
+                         width="70">
         </el-table-column>
         <el-table-column prop="purpose"
                          label="用途"
-                         width="50">
+                         header-align="center"
+                         align="center"
+                         width="70">
         </el-table-column>
         <el-table-column prop="rentFlag"
                          label="房屋状态"
-                         width="80">
+                         header-align="center"
+                         align="center"
+                         width="90">
         </el-table-column>
         <el-table-column prop="ownerName"
                          label="房主姓名"
+                         header-align="center"
+                         align="center"
                          width="90">
         </el-table-column>
         <el-table-column prop="ownerPhone"
                          label="联系方式"
+                         header-align="center"
+                         align="center"
                          width="110">
         </el-table-column>
         <el-table-column prop="ownerIdCard"
                          label="身份证"
+                         header-align="center"
+                         align="center"
                          width="170">
         </el-table-column>
         <el-table-column prop="remark"
                          label="备注"
+                         header-align="center"
+                         align="center"
                          width="170">
         </el-table-column>
 
         <el-table-column prop="sort"
                          sortable="custom"
-                         min-width="140"
+                         min-width="100"
+                         header-align="center"
+                         align="center"
                          label="排序">
           <template slot-scope="scope">
             <div @click="handleEditSort(scope.row)">
@@ -145,25 +204,25 @@
         </el-table-column>
         <el-table-column label="操作"
                          fixed="right"
-                         width="140"
+                         width="160"
                          header-align="center"
                          align="center"
                          class="operate">
           <template slot-scope="scope">
             <el-button type="text"
                        v-if="btnAuths.ic_house_view"
-                       class="div-table-button--detail"
+                       class="div-table-button--orange"
                        size="small"
                        @click="handleDetail(scope.row)">查看</el-button>
             <el-button v-if="btnAuths.ic_house_update && scope.row.showBtn"
                        type="text"
-                       class="div-table-button--edit"
+                       class="div-table-button--blue"
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
             <el-button v-if="btnAuths.ic_house_del && scope.row.showBtn"
                        type="text"
-                       class="div-table-button--delete"
+                       class="div-table-button--red"
                        size="small"
                        @click="handleDelete(scope.row)">删除</el-button>
           </template>
@@ -233,7 +292,7 @@ export default {
       pageNo: 0,
       sortType: "asc", //asc：正，desc：倒
       tableLoading: true,
-
+      // tableHeaderStyle: { background: 'linear-gradient(0deg, #005EB3 0%, #0083F0 100%)', color: '#FFFFFF', padding: '6px' },
       // showImportBtn: false,//是否显示操作按钮，根据登录人所属组织判断
 
       agencyObj: {}, //树所选的小区对象