增删改权限，红绿点同步

src/api/taicangpop/data.js

@@ -15,6 +15,12 @@ export function getNum(data) {
   });
 }
 
+export function getNumNew(data) {
+  return request({
+    url: `/taicangpop/data/getNumNew?buildingid=${data.buildingId}`,
+    method: "get",
+  });
+}
 export function getPeopellist(data) {
   return request({
     url: `/taicangpop/data/getpeopellist?deptid=${data.deptid}&deptname=${data.deptname}`,

src/assets/styles/index.scss

@@ -252,6 +252,6 @@ aside {
 .taicang-dialog-small {
   width: 850px !important;
   .dialog-main {
-    min-height: 500px;
+    min-height: auto;
   }
 }

src/components/NavigationBar/index.vue

@@ -121,7 +121,10 @@ export default {
   computed: {
     ...mapGetters(["name", "yjTotal"]),
     handlerBtn() {
-      return this.$route.name == "xiaoqu" && this.$auth.hasRole("admin");
+      return (
+        this.$route.name == "xiaoqu" &&
+        this.$auth.hasRoleOr(["admin", "leader"])
+      );
     },
   },
 };

src/views/components/xiaoqu/ColorCell/index.vue

@@ -40,6 +40,11 @@
             v-show="item.is_x"
         /></el-tooltip>
       </div>
+      <!-- 红绿点 -->
+      <div class="point-color">
+        <div class="red" style="background: red" v-if="item.daycount > 0"></div>
+        <div class="green" style="background: green" v-else></div>
+      </div>
     </div>
   </div>
 </template>
@@ -163,6 +168,21 @@ export default {
         margin-right: 3px;
       }
     }
+    .point-color {
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      z-index: 10;
+
+      & > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        border: 1px solid white;
+      }
+    }
   }
 }
 .grid-item-main:hover,

src/views/components/xiaoqu/building.vue

@@ -35,7 +35,7 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { getNum } from "@/api/taicangpop/data";
+import { getNumNew } from "@/api/taicangpop/data";
 import { getBuilding } from "@/api/taicangpop/building";
 import colorCell from "./ColorCell/index.vue";
 import { v4 as uuidv4 } from "uuid";
@@ -151,7 +151,7 @@ export default {
       this.$refs.build.scrollIntoView({
         behavior: "smooth", // 平滑滚动
       });
-      let res = await getNum({
+      let res = await getNumNew({
         buildingId: this.queryParamsXiaoqu.buildingId,
       });
       this.currentIndex = this.houseItem.keyId;

src/views/components/xiaoqu/house.vue

@@ -57,7 +57,10 @@
                 >确认空关</imageButton
               >
               <!-- <div class="btn-add"></div> -->
-              <imageButton size="small" @handlerClcik="addPerson()"
+              <imageButton
+                size="small"
+                @handlerClcik="addPerson()"
+                v-hasPermi="['taicangpop:person:add']"
                 >添加居民</imageButton
               >
               <div class="btn-close" @click="handleClose()">关闭</div>
@@ -181,12 +184,22 @@
                   </div>
                 </div>
                 <div class="row-btn">
-                  <imageButton @handlerClcik="delPerson(item.id)"
+                  <imageButton
+                    @handlerClcik="delPerson(item.id)"
+                    v-hasPermi="['taicangpop:person:remove']"
                     >删除</imageButton
                   >
-                  <imageButton @handlerClcik="getPersonInfo(item.id)"
+                  <imageButton
+                    @handlerClcik="getPersonInfo(item.id)"
+                    v-hasPermi="['taicangpop:person:edit']"
                     >修改</imageButton
                   >
+                  <imageButton @handlerClcik="handlerInfo(item.id)"
+                    >查看</imageButton
+                  >
+                  <imageButton @handlerClcik="lookSocialSecurity(item.id)"
+                    >查看社保</imageButton
+                  >
                 </div>
               </div>
             </div>
@@ -297,6 +310,51 @@
         </el-form>
       </div>
     </el-dialog>
+
+    <!-- 查看详情 -->
+    <el-dialog
+      :visible.sync="openInfo"
+      append-to-body
+      custom-class="taicang-dialog-small"
+    >
+      <div class="dialog-main">
+        <div class="dialog-title"><span></span> 详情</div>
+        <div class="info-container">
+          <div class="border-top">社区名称</div>
+          <div class="border-top">{{ infoData.shequ_name }}</div>
+          <div class="border-top no-left">姓名</div>
+          <div class="border-top">{{ infoData.name }}</div>
+          <div>小区名称</div>
+          <div>{{ infoData.xiaoqu_name }}</div>
+          <div class="no-left">身份证号</div>
+          <div>{{ infoData.credentialNo }}</div>
+          <div>网格名称</div>
+          <div>{{ infoData.parentname }}</div>
+          <div class="no-left">手机号码</div>
+          <div>{{ infoData.phone }}</div>
+          <div>苑名称</div>
+          <div>{{ infoData.deptname }}</div>
+          <div class="no-left">户口类型</div>
+          <div>{{ infoData.type == 1 ? "户籍" : "流动" }}</div>
+          <div>楼栋名称</div>
+          <div>{{ infoData.buildingname }}</div>
+          <div class="no-left">分色</div>
+          <div>
+            <ColorCell :item="infoData"
+              ><span class="house-color"> {{ infoData.color }}</span></ColorCell
+            >
+          </div>
+          <div>住户名称</div>
+          <div>{{ infoData.housename }}</div>
+          <div class="no-left">社保缴纳单位</div>
+          <div>{{ "/" }}</div>
+          <div>实际工作单位</div>
+          <div>{{ infoData.workunit || "/" }}</div>
+          <div class="no-left">备注</div>
+          <div>{{ infoData.remark || "/" }}</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -364,7 +422,10 @@ export default {
       },
       multiple: [],
       title: "",
+
       open: false,
+      openInfo: false,
+      infoData: {},
       show: false,
       total: 0,
       list: [],
@@ -409,6 +470,13 @@ export default {
       };
       this.multiple = [];
     },
+    async handlerInfo(id) {
+      let res = await getPerson(id);
+      this.infoData = handleColor([res.data])[0];
+      this.openInfo = true;
+      console.log(res, "详情");
+    },
+    lookSocialSecurity() {},
     handlerhousEempty() {
       let id = this.houseData.id;
       this.$modal
@@ -782,4 +850,41 @@ div {
     margin-right: 12px;
   }
 }
+
+.info-container {
+  margin-top: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  & > div {
+    font-size: 14px;
+    color: #fff;
+    width: 20%;
+    height: 45px;
+    border-bottom: 1px solid #0059a2;
+    text-align: center;
+    line-height: 45px;
+    .grid-item-main {
+      justify-content: left;
+    }
+  }
+  & > div:nth-child(odd) {
+    border-right: 1px solid #0059a2;
+    border-left: 1px solid #0059a2;
+  }
+  .no-left {
+    border-left: 0 !important;
+  }
+  .border-top {
+    border-top: 1px solid #0059a2;
+  }
+  & > div:nth-child(even) {
+    border-right: 1px solid #0059a2;
+
+    width: 30%;
+    background: #042854;
+    text-align: left;
+    padding: 0 10px;
+  }
+}
 </style>