总卡删除、添加出现加载过程

src/views/doorLock/doorLock.vue

@@ -77,12 +77,12 @@
             </div>
             <div class="condition" style="margin-left: 30px">
               <el-button
-              color="rgba(41, 109, 227, 1)"
-              type="primary"
-              class="search"
-              @click="detailChange"
-              >总卡明细</el-button
-            >
+                color="rgba(41, 109, 227, 1)"
+                type="primary"
+                class="search"
+                @click="detailChange"
+                >总卡明细</el-button
+              >
             </div>
           </div>
         </div>
@@ -1295,7 +1295,7 @@
             <el-select
               v-model="identityCardRuleForm.buildingId"
               placeholder="请选择楼栋单元"
-              style="width: 214px;"
+              style="width: 214px"
               @change="searchBtn"
               :clearable="true"
             >
@@ -1474,7 +1474,7 @@
         :before-close="cancelDetail"
       >
         <div class="middle" style="display: flex">
-          <div class="condition" >
+          <div class="condition">
             <span>用户</span>
             <el-input
               :clearable="true"
@@ -1485,22 +1485,22 @@
               style="width: 230px; margin-left: 10px"
             />
           </div>
-          <div class="condition" >
-              <span>楼栋单元</span>
-              <el-select
-                v-model="detailInput.buildingId"
-                placeholder="请选择楼栋单元"
-                style="width: 200px; margin-left: 10px"
-                @change="detailList"
-                :clearable="true"
-              >
-                <el-option
-                  v-for="item in buildData"
-                  :key="item.id"
-                  :label="`${item.building}-${item.element}`"
-                  :value="item.id"
-                />
-              </el-select>
+          <div class="condition">
+            <span>楼栋单元</span>
+            <el-select
+              v-model="detailInput.buildingId"
+              placeholder="请选择楼栋单元"
+              style="width: 200px; margin-left: 10px"
+              @change="detailList"
+              :clearable="true"
+            >
+              <el-option
+                v-for="item in buildData"
+                :key="item.id"
+                :label="`${item.building}-${item.element}`"
+                :value="item.id"
+              />
+            </el-select>
           </div>
           <div class="condition">
             <span>创建时间&nbsp;&nbsp;</span>
@@ -1518,63 +1518,78 @@
               @change="detailList"
             />
           </div>
-          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="detailList"
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="detailList"
             ><span>查询</span></el-button
           >
         </div>
         <div class="footers" v-loading="detailLoading">
-            <el-table
-              :row-class-name="tableRowClassName"
-              :data="detailData.list"
-              @selection-change="handleSelectionChange"
-              style="width: 100%; height: 550px"
-              :header-cell-style="{
-                background: 'rgba(240, 243, 247, 1)',
-                height: '50px',
-                border: 0,
-              }"
-            >
-              <el-table-column align="center" prop="startTime" label="生效时间">
-              </el-table-column>
-              <el-table-column align="center" prop="endTime" label="失效时间" />
-              <el-table-column align="center" prop="employeeUsersName" label="用户" />
-              <el-table-column align="center" label="楼栋单元">
-                <template #default="{row}">
-                  <span>{{ row.building }}-{{ row.element }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" prop="roomCardInformation" label="卡号" />
-              <el-table-column align="center" prop="createTime" label="创建时间" />
-              <el-table-column align="center" prop="unlockType" label="操作">
-                <template #default="{row}">
-                  <el-popconfirm
-                    width="220"
-                    confirm-button-text="确认"
-                    cancel-button-text="取消"
-                    :icon="InfoFilled"
-                    icon-color="#f89626"
-                    title="是否删除此卡?"
-                    @confirm="detailDel(row)"
-                    @cancel="cancelEvent"
-                  >
-                    <template #reference>
-                      <span style="cursor: pointer;color:#0061ff">删除</span>
-                    </template>
-                  </el-popconfirm>
-                </template>
-              </el-table-column>
-            </el-table>
+          <el-table
+            :row-class-name="tableRowClassName"
+            :data="detailData.list"
+            @selection-change="handleSelectionChange"
+            style="width: 100%; height: 550px"
+            :header-cell-style="{
+              background: 'rgba(240, 243, 247, 1)',
+              height: '50px',
+              border: 0,
+            }"
+          >
+            <el-table-column align="center" prop="startTime" label="生效时间">
+            </el-table-column>
+            <el-table-column align="center" prop="endTime" label="失效时间" />
+            <el-table-column
+              align="center"
+              prop="employeeUsersName"
+              label="用户"
+            />
+            <el-table-column align="center" label="楼栋单元">
+              <template #default="{ row }">
+                <span>{{ row.building }}-{{ row.element }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="roomCardInformation"
+              label="卡号"
+            />
+            <el-table-column
+              align="center"
+              prop="createTime"
+              label="创建时间"
+            />
+            <el-table-column align="center" prop="unlockType" label="操作">
+              <template #default="{ row }">
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此卡?"
+                  @confirm="detailDel(row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <span style="cursor: pointer; color: #0061ff">删除</span>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
         <div class="pageSize">
-            <span></span>
-            <el-pagination
-              background
-              :current-page="detailPage"
-              :page-size="detailSize"
-              layout="total, prev, pager, next, jumper, slot"
-              :total="detailTotal"
-              @update:current-page="detailHandleCurrentChange"
-            />
+          <span></span>
+          <el-pagination
+            background
+            :current-page="detailPage"
+            :page-size="detailSize"
+            layout="total, prev, pager, next, jumper, slot"
+            :total="detailTotal"
+            @update:current-page="detailHandleCurrentChange"
+          />
         </div>
       </el-dialog>
     </div>
@@ -1594,7 +1609,7 @@ import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox, genFileId } from "element-plus";
 import { Calendar } from "@element-plus/icons-vue";
 import vidiconsApi from "@/api/vidicons.js";
-import { dayjs } from "element-plus";
+import { dayjs, ElLoading } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
 import { useStore } from "vuex";
@@ -1607,8 +1622,7 @@ const nowDay = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
 // 表格数据
 const loading = ref(false);
 const tableData = reactive({
-  list: [
-  ],
+  list: [],
 });
 
 const searchInput = reactive({
@@ -1621,25 +1635,24 @@ const buildData = ref(); // 楼栋数据
 const roomTypes = ref(); // 房间类型数据
 const roomTypeIndex = ref("全部"); // 选中的房间类型
 const roomList = reactive({
-  list: [
-  ],
+  list: [],
 });
 const electricQuantity = ref(); // 每个房间的电量
 const nfcFunction = ref(); // nfc标识
 const houseLockId = ref(); // 门锁表id
 
 // 总卡明细
-const detailVisible=ref(false);
-const detailInput=reactive({
-  keyWord:'',
-  buildingId:"",
-  createTime:""
+const detailVisible = ref(false);
+const detailInput = reactive({
+  keyWord: "",
+  buildingId: "",
+  createTime: "",
 });
-const detailLoading=ref(false)
-const detailData=reactive({list:[]});
-const detailPage=ref(1)
-const detailSize=ref(10)
-const detailTotal=ref()
+const detailLoading = ref(false);
+const detailData = reactive({ list: [] });
+const detailPage = ref(1);
+const detailSize = ref(10);
+const detailTotal = ref();
 
 // 设置临时总卡 (头部按钮--------------------------------------------------------）
 const temporaryCardVisible = ref(false);
@@ -1922,7 +1935,7 @@ const identityCardVisible = ref(false);
 const identityCardRef = ref();
 const identityCardRuleForm = reactive({
   level: "",
-  buildingId:"",// 总卡中的楼栋单元
+  buildingId: "", // 总卡中的楼栋单元
   name: "",
   phone: "",
   icCard: "",
@@ -1935,7 +1948,9 @@ const identityCardRuleForm = reactive({
 const identityCardRules = reactive({
   name: [{ required: true, message: "用户不能为空", trigger: "blur" }],
   phone: [{ required: true, message: "号码不能为空", trigger: "blur" }],
-  buildingId: [{ required: true, message: "楼栋单元不能为空", trigger: "blur" }],
+  buildingId: [
+    { required: true, message: "楼栋单元不能为空", trigger: "blur" },
+  ],
   level: [
     {
       required: true,
@@ -2463,22 +2478,22 @@ const cancelDeblocking = () => {
 };
 
 // 总卡明细 （=========================================================）
-const detailChange=()=>{
-  detailVisible.value=true
-  detailList()
-}
+const detailChange = () => {
+  detailVisible.value = true;
+  detailList();
+};
 // 总卡明细数据
-const detailList=async ()=>{
-  detailLoading.value=true
+const detailList = async () => {
+  detailLoading.value = true;
   let data = {
     page: detailPage.value,
     size: detailSize.value,
     employeeName: detailInput.keyWord, // 房型名称
     buildingId: detailInput.buildingId,
   };
-  if(detailInput.createTime){
-    data.startTime=detailInput.createTime[0]
-    data.endTime  =detailInput.createTime[1]
+  if (detailInput.createTime) {
+    data.startTime = detailInput.createTime[0];
+    data.endTime = detailInput.createTime[1];
   }
   let res = await axios({
     method: "get",
@@ -2491,11 +2506,11 @@ const detailList=async ()=>{
   });
   console.log(res, "总卡明细");
   if (res.data.code == 200) {
-    detailLoading.value=false
+    detailLoading.value = false;
     detailData.list = res.data.data.list;
-    detailTotal.value=res.data.data.totalCount
+    detailTotal.value = res.data.data.totalCount;
   } else {
-    detailLoading.value= false;
+    detailLoading.value = false;
     ElMessage({
       type: "error",
       showClose: true,
@@ -2503,14 +2518,19 @@ const detailList=async ()=>{
       center: true,
     });
   }
-}
+};
 // 总卡明细分页
-const detailHandleCurrentChange=(val)=>{
-  detailPage.value=val;
-  detailList()
-}
+const detailHandleCurrentChange = (val) => {
+  detailPage.value = val;
+  detailList();
+};
 // 总卡明细删除
-const detailDel=async (row)=>{
+const detailDel = async (row) => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "加载中...",
+    background: "rgba(255, 255, 255, 0.7)",
+  });
   let data = {
     id: row.id,
   };
@@ -2525,7 +2545,8 @@ const detailDel=async (row)=>{
   });
   console.log(res, "总卡明细删除");
   if (res.data.code == 200) {
-    detailList()
+    loading.close();
+    detailList();
     ElMessage({
       type: "success",
       showClose: true,
@@ -2533,6 +2554,7 @@ const detailDel=async (row)=>{
       center: true,
     });
   } else {
+    loading.close();
     ElMessage({
       type: "error",
       showClose: true,
@@ -2540,10 +2562,10 @@ const detailDel=async (row)=>{
       center: true,
     });
   }
-}
-const cancelDetail=()=>{
-  detailVisible.value=false
-}
+};
+const cancelDetail = () => {
+  detailVisible.value = false;
+};
 
 // 批量导入(-----------------------------------------------------------------)
 const bulkImportClick = () => {
@@ -3271,7 +3293,7 @@ const identityCardClick = (val, card) => {
       addIdentityCardVisibleTitle.value = "添加身份证";
     } else if (card == "总卡") {
       addIdentityCardVisibleTitle.value = "制作总卡";
-      identityCardRuleForm.buildingId=""
+      identityCardRuleForm.buildingId = "";
       staffData(); // 员工筛选数据
     }
   } else {
@@ -3326,9 +3348,9 @@ const Card = () => {
           identityCardIndex.value = 3;
           identityCardTitle.value = "读卡成功";
         }, 1000);
-        identityCardRuleForm.icCard=data.data.uid
+        identityCardRuleForm.icCard = data.data.uid;
         setTimeout(() => {
-          addIdentityCardVisible.value=false
+          addIdentityCardVisible.value = false;
         }, 2000);
       }
       // ElMessage({
@@ -3359,6 +3381,11 @@ const identityCardConfig = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
     if (valid) {
+      const loading = ElLoading.service({
+        lock: true,
+        text: "加载中...",
+        background: "rgba(255, 255, 255, 0.7)",
+      });
       if (keypassflag.value == "系统") {
         if (cardFlag.value == "房卡") {
           identityCardRuleForm.cardType = 0; // 0:房卡  1:身份证
@@ -3389,6 +3416,7 @@ const identityCardConfig = (formEl) => {
         });
         console.log(res, "系统添加卡片钥匙");
         if (res.data.code == 200) {
+          loading.close();
           identityCardVisible.value = false;
           keyListData();
           ElMessage({
@@ -3398,6 +3426,7 @@ const identityCardConfig = (formEl) => {
             center: true,
           });
         } else {
+          loading.close();
           ElMessage({
             type: "error",
             showClose: true,
@@ -3435,6 +3464,7 @@ const identityCardConfig = (formEl) => {
         });
         console.log(res, "自定义添加卡片钥匙");
         if (res.data.code == 200) {
+          loading.close();
           identityCardVisible.value = false;
           keyListData();
           ElMessage({
@@ -3444,6 +3474,7 @@ const identityCardConfig = (formEl) => {
             center: true,
           });
         } else {
+          loading.close();
           ElMessage({
             type: "error",
             showClose: true,
@@ -3451,14 +3482,14 @@ const identityCardConfig = (formEl) => {
             center: true,
           });
         }
-      }else if (keypassflag.value == "总卡"){
+      } else if (keypassflag.value == "总卡") {
         let data = {
           adminId: sessionStorage.getItem("id"), //管理员id
-	        "employeeUsersId": identityCardRuleForm.name, //员工id
-	        "buildingId": identityCardRuleForm.buildingId, //楼栋单元id   
-	        "roomCardInformation": identityCardRuleForm.icCard, //房卡特殊编码
-	        "startTime": identityCardRuleForm.effectiveTime, //开始时间
-	        "endTime": identityCardRuleForm.failureTime //结束时间
+          employeeUsersId: identityCardRuleForm.name, //员工id
+          buildingId: identityCardRuleForm.buildingId, //楼栋单元id
+          roomCardInformation: identityCardRuleForm.icCard, //房卡特殊编码
+          startTime: identityCardRuleForm.effectiveTime, //开始时间
+          endTime: identityCardRuleForm.failureTime, //结束时间
         };
         console.log(data);
         let res = await axios({
@@ -3472,6 +3503,7 @@ const identityCardConfig = (formEl) => {
         });
         console.log(res, "添加总卡");
         if (res.data.code == 200) {
+          loading.close();
           identityCardVisible.value = false;
           ElMessage({
             type: "success",
@@ -3480,6 +3512,7 @@ const identityCardConfig = (formEl) => {
             center: true,
           });
         } else {
+          loading.close();
           ElMessage({
             type: "error",
             showClose: true,
@@ -4352,18 +4385,18 @@ onUnmounted(() => {
 
       color: #000;
       .condition {
-          display: flex;
-          align-items: center;
-          margin-right:20px ;
-
-          :deep(.el-input .el-input__inner) {
-            font-size: 14px;
-          }
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
 
-          // span {
-          //   margin: 0 10px 0 0;
-          // }
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
         }
+
+        // span {
+        //   margin: 0 10px 0 0;
+        // }
+      }
       // border-bottom: 1px solid rgb(231, 231, 231);
     }