物业主开发

src/views/system/Sdb/SdbWaterDevice/index.vue

@@ -4,7 +4,7 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" label-width="100px" :model="queryParams" :inline="true">
+          <el-form ref="queryFormRef" label-width="100px" @submit.prevent="handleQuery" :model="queryParams" :inline="true">
             <!-- <el-form-item label="设备状态" prop="eleStatus">
               <el-select v-model="queryParams.eleStatus">
                 <el-option v-for="(item, index) in com_waterdevice_on_status" :key="index" :label="item.label" :value="item.value"></el-option>
@@ -15,12 +15,12 @@
                 <el-option v-for="(item, index) in com_water_readrecord_status" :key="index" :label="item.label" :value="item.value"></el-option>
               </el-select>
             </el-form-item> -->
-            <el-form-item label="房间号" prop="houseName">
-              <el-input v-model="queryParams.houseName" placeholder="请输入房间号" clearable @keyup.enter="handleQuery" />
+            <el-form-item label="房屋" prop="houseName">
+              <el-input v-model="queryParams.houseName" placeholder="请输入" clearable />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -29,42 +29,46 @@
 
     <el-card class="flex-1" shadow="never">
       <template #header>
-        <el-row :gutter="10" class="mb8">
+        <el-row :gutter="10" class="mb8 flex-items-center">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['equipment:addqrcode:waterdevice']"
-              >批量生成条形码</el-button
-            >
+            <div style="font-size: 0.8rem">水表列表</div>
           </el-col>
-          <el-col :span="1.5">
-            <!-- <el-button type="success" plain icon="Upload">批量更新固件</el-button> -->
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar :show-add="false" :show-edit="false" :show-delete="false">
+            <template #dropdown>
+              <el-dropdown-item @click="handleMarkqrcode" v-if="checkPermi(['equipment:addqrcode:waterdevice'])">
+                <span>批量生成条形码</span>
+              </el-dropdown-item>
+              <!-- <el-dropdown-item v-hasPermi="['equipment:addqrcode:electricitydevice']">
+                <div @click="handleMarkqrcode">批量更新固件</div>
+              </el-dropdown-item> -->
+            </template>
+          </right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" border :data="waterDeviceList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="水表设备编码" width="250" align="center" prop="deviceCode" />
+        <el-table-column label="设备编码" width="250" align="center" prop="deviceCode" />
         <el-table-column label="设备状态" width="100" align="center" prop="eleStatus">
           <template #default="scope">
             <dict-tag v-if="scope.row.waterRecord" :options="com_waterdevice_on_status" :value="scope.row.waterRecord.eleStatus"></dict-tag>
-            <span v-else>-------</span>
+            <span v-else>---</span>
           </template>
         </el-table-column>
         <el-table-column label="分合状态" width="100" align="center">
           <template #default="scope">
-            <dict-tag v-if="scope.row.status" :options="com_electricity_readrecord_status" :value="scope.row.waterRecord.status"></dict-tag>
-            <span v-else>-------</span>
+            <dict-tag v-if="scope.row.status" :options="com_water_readrecord_status" :value="scope.row.waterRecord.status"></dict-tag>
+            <span v-else>---</span>
           </template>
         </el-table-column>
         <el-table-column label="房屋" align="center" prop="houseName" />
         <el-table-column label="余额" width="120" align="center" prop="deviceCode">
           <template #default="scope">
             <span v-if="scope.row.waterRecord">{{ scope.row.waterRecord.balance }}</span>
-            <span v-else>------</span>
+            <span v-else>---</span>
           </template>
         </el-table-column>
-        <el-table-column label="条形码" width="250" align="center">
+        <el-table-column label="条码" width="250" align="center">
           <template #default="scope">
             <el-image
               v-if="scope.row.url && scope.row.url.includes('http')"
@@ -83,7 +87,7 @@
         </el-table-column>
         <el-table-column label="抄表时间" align="center">
           <template #default="scope">
-            <span>{{ scope.row.waterRecord ? scope.row.waterRecord.readTime : '--' }}</span>
+            <span>{{ scope.row.waterRecord ? scope.row.waterRecord.readTime : '---' }}</span>
           </template>
         </el-table-column>
         <!-- <el-table-column width="150" label="启停" align="center" prop="deleted" v-hasPermi="['equipment:isUse:waterdevice']">
@@ -101,9 +105,16 @@
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-row>
-              <el-col :span="24" class="flex flex-items-center">
+              <el-col :span="24" class="flex flex-items-center actions">
                 <el-button link type="primary" @click="handleRecode(scope.row)" v-hasPermi="['equipment:view:waterdevice']">充值记录</el-button>
-                <el-button link type="primary" @click="handleQrCode(scope.row)" v-hasPermi="['equipment:addqrcode:waterdevice']">生成条码</el-button>
+                <el-button
+                  link
+                  type="primary"
+                  :loading="loadingQRCode.includes(scope.row.id)"
+                  @click="handleQrCode(scope.row)"
+                  v-hasPermi="['equipment:addqrcode:waterdevice']"
+                  >生成条码</el-button
+                >
                 <el-button link type="primary" @click="handleOpenDialog('usedWater', scope.row)" v-hasPermi="['equipment:useWater:waterdevice']"
                   >用水量</el-button
                 >
@@ -144,7 +155,7 @@
     <!-- 添加或修改水 设备对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <!-- water -->
-      <el-form v-if="dialogType === 'usedWater'" ref="UsedWaterformRef" :model="UsedWaterform" label-width="100px">
+      <el-form v-if="dialogType === 'usedWater'" :rules="rules" ref="UsedWaterformRef" :model="UsedWaterform" label-width="100px">
         <el-form-item label="设备编号" prop="deviceCode"> {{ UsedWaterform.deviceCode }} </el-form-item>
         <el-form-item label="开始时间" prop="startTime">
           <el-date-picker
@@ -260,6 +271,7 @@ import { getHousePathById } from '@/utils/house';
 import { Upload } from '@element-plus/icons-vue';
 import { CascaderValue, tourEmits, UploadProps, UploadRawFile } from 'element-plus';
 import { formatDate } from '@/utils/time';
+import { checkPermi } from '@/utils/permission';
 
 const huhao = 3096371295;
 const uploadAUrl = import.meta.env.VITE_APP_BASE_API + '/waterDevice/uploadA';
@@ -267,7 +279,7 @@ const uploadBUrl = import.meta.env.VITE_APP_BASE_API + '/waterDevice/uploadB';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_waterdevice_on_status } = toRefs<any>(proxy?.useDict('com_waterdevice_on_status'));
-const { com_electricity_readrecord_status } = toRefs<any>(proxy?.useDict('com_electricity_readrecord_status'));
+const { com_water_readrecord_status } = toRefs<any>(proxy?.useDict('com_water_readrecord_status'));
 
 const waterDeviceList = ref<WaterDeviceVO[]>([]);
 const buttonLoading = ref(false);
@@ -318,6 +330,10 @@ const UsedWaterInfo = ref({
   startTime: '',
   endTime: ''
 });
+const rules = {
+  startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
+  endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
+};
 // ! =======================================================================================
 
 // ? 上传固件  ==============================================================================================
@@ -383,7 +399,7 @@ const EditHouseform = ref({
 /** 批量生成 条形码 */
 function handleMarkqrcode() {
   if (ids.value.length > 0) {
-    WaterDeviceMakerQrcode(ids.value).then((res) => {
+    WaterDeviceMakerQrcode(ids.value).then(() => {
       ElMessage.success('批量生成成功');
       getList();
     });
@@ -403,18 +419,23 @@ const handleSelectionChange = (selection: WaterDeviceVO[]) => {
   multiple.value = !selection.length;
 };
 
+const loadingQRCode = ref([]);
 /** 生成二维码 */
 const handleQrCode = (row: WaterDeviceVO) => {
-  // 1.电表 2.水表
-  WaterDeviceMakerQrcode([
-    {
-      id: row.id,
-      deviceCode: row.deviceCode
-    }
-  ]).then(() => {
-    ElMessage.success('生成成功');
-    getList();
-  });
+  loadingQRCode.value.push(row.id);
+  setTimeout(() => {
+    // 1.电表 2.水表
+    WaterDeviceMakerQrcode([
+      {
+        id: row.id,
+        deviceCode: row.deviceCode
+      }
+    ]).then(() => {
+      ElMessage.success('生成成功');
+      loadingQRCode.value = loadingQRCode.value.filter((item) => item !== row.id);
+      getList();
+    });
+  }, 1000);
 };
 // * house
 const treedata = ref([]);
@@ -444,7 +465,7 @@ const handleOpenDialog = (type: 'usedWater' | 'Upload' | 'UpdateHouse', row: Wat
   }
   dialog.visible = true;
   dialogType.value = type;
-  dialog.title = type === 'usedWater' ? '用水量' : type === 'UpdateHouse' ? '编辑户号' : '更新固件';
+  dialog.title = type === 'usedWater' ? '用水量查询' : type === 'UpdateHouse' ? '编辑户号' : '更新固件';
 };
 
 function getTree() {
@@ -461,6 +482,10 @@ const handleChangeWater = (val: string, row: WaterDeviceVO) => {};
 /** 提交按钮 */
 const submitForm = () => {
   if (dialogType.value === 'usedWater') {
+    if (UsedWaterform.value.startTime === '' || UsedWaterform.value.endTime === '') {
+      ElMessage.warning('请选择时间');
+      return;
+    }
     UsedWaterformRef.value?.validate(async (valid: boolean) => {
       if (valid) {
         buttonLoading.value = true;
@@ -570,6 +595,12 @@ const download = (url: string) => {
 </script>
 
 <style lang="scss" scoped>
+.actions {
+  :deep(.el-button > span) {
+    font-weight: 650;
+  }
+}
+
 .example-showcase .el-dropdown + .el-dropdown {
   margin-left: 15px;
 }
@@ -581,6 +612,16 @@ const download = (url: string) => {
 }
 .el-table {
   height: calc(100% - 80px);
+  :deep(.waterDevice_online) {
+    color: #3dd4a7;
+    background: transparent;
+    border: none;
+  }
+  :deep(.waterDevice_offline) {
+    color: #ee1c25;
+    background: transparent;
+    border: none;
+  }
 }
 
 .usedWaterbox {