物业主开发

src/views/system/Sdb/SdbElectricityDevice/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>
@@ -20,12 +20,12 @@
                 ></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 @keyup.enter="handleQuery" />
             </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>
@@ -35,24 +35,41 @@
     <el-card class="flex-1" shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
+          <!-- <el-col :span="1.5">
             <el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['equipment:addqrcode:electricitydevice']"
               >批量生成条形码</el-button
             >
           </el-col>
           <el-col :span="1.5">
-            <!-- <el-button type="success" plain icon="Upload">批量更新固件</el-button> -->
+            <el-button type="success" plain icon="Upload">批量更新固件</el-button>
+          </el-col> -->
+          <el-col :span="1.5">
+            <div style="font-size: 0.8rem">电表列表</div>
           </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-menu> -->
+              <el-dropdown-item @click="handleMarkqrcode" v-if="checkPermi(['equipment:addqrcode:electricitydevice'])">
+                <span>批量生成条形码</span>
+              </el-dropdown-item>
+              <!-- </el-dropdown-menu> -->
+              <!-- <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="ElectricityDeviceList" @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="status">
           <template #default="scope">
-            <dict-tag :options="com_waterdevice_on_status" :value="scope.row.status"></dict-tag>
+            <div class="readRecord" v-if="scope.row.status">
+              <DictTag :options="com_waterdevice_on_status" :value="scope.row.status"></DictTag>
+            </div>
+            <span v-else>---</span>
           </template>
         </el-table-column>
         <el-table-column label="分合状态" width="100" align="center">
@@ -60,23 +77,23 @@
             <div class="readRecord" v-if="scope.row.waterRecord">
               <DictTag :options="com_electricity_readrecord_status" :value="scope.row.waterRecord.status"></DictTag>
             </div>
-            <span v-else>-----</span>
+            <span v-else>---</span>
           </template>
         </el-table-column>
-        <el-table-column label="房屋" align="center" prop="houseName" />
+        <el-table-column label="房屋号" align="center" prop="houseName" />
         <el-table-column label="余额" width="100" align="center" prop="elePrice">
           <template #defaul="scope">
             <span v-if="scope.row.electricityRecord">{{ scope.row.electricityRecord.balance }}</span>
-            <span v-else>-----</span>
+            <span v-else>---</span>
           </template>
         </el-table-column>
-        <el-table-column label="条形码" width="250" align="center" prop="deleted">
+        <el-table-column label="条码" width="250" align="center" prop="deleted">
           <template #default="scope">
             <el-image
               v-if="scope.row.url && scope.row.url.includes('http')"
               :src="scope.row.url"
               :preview-src-list="[scope.row.url]"
-              style="width: 90px; height: 30px; border-radius: 4px; margin-right: 5px"
+              style="width: 90%; height: 100%"
               fit="cover"
               preview-teleported
             >
@@ -107,7 +124,7 @@
         <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:electricitydevice']">充值记录</el-button>
                 <el-button link type="primary" @click="handleQrCode(scope.row)" v-hasPermi="['equipment:addqrcode:electricitydevice']"
                   >生成条码</el-button
@@ -127,7 +144,7 @@
                   type="primary"
                   @click="handleOpenDialog('UpdateHouse', scope.row)"
                   v-hasPermi="['equipment:edithouse:electricitydevice']"
-                  >修改</el-button
+                  >绑定房屋</el-button
                 >
                 <!-- <el-dropdown style="vertical-align: text-top">
                   <el-button link type="primary">
@@ -159,7 +176,7 @@
     </el-card>
     <!-- 添加或修改电 设备对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <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
@@ -245,6 +262,7 @@ import {
 import { ElectricityDeviceVO } from '@/api/system/SdbElectricityDevice/type';
 import { useHouseStore } from '@/store/modules/house';
 import { useUserStore } from '@/store/modules/user';
+import { checkPermi } from '@/utils/permission';
 import { Upload } from '@element-plus/icons-vue';
 import { CascaderValue, tourEmits, UploadProps, UploadRawFile } from 'element-plus';
 
@@ -275,9 +293,9 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    deviceCode: undefined,
-    houseName: undefined,
-    status: undefined
+    deviceCode: '',
+    houseName: '',
+    status: ''
   }
 });
 
@@ -304,6 +322,10 @@ const UsedWaterInfo = ref({
   startTime: '',
   endTime: ''
 });
+const rules = {
+  startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
+  endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
+};
 // ! =======================================================================================
 
 // ? 上传固件  ==============================================================================================
@@ -418,8 +440,8 @@ const handleOpenDialog = (type: 'usedWater' | 'Upload' | 'UpdateHouse', row: Ele
 
   if (type === 'usedWater') {
     UsedWaterform.value.deviceCode = row.deviceCode;
-    UsedWaterform.value.startTime = new Date().toLocaleString();
-    UsedWaterform.value.endTime = new Date().toLocaleString();
+    UsedWaterform.value.startTime = '';
+    UsedWaterform.value.endTime = '';
     usedWaterInfo.value = true;
   } else if (type === 'Upload') {
     UploadFileform.value.file = '';
@@ -447,6 +469,10 @@ const handleChangeWater = (val: string, row: ElectricityDeviceVO) => {};
 /** 提交按钮 */
 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;
@@ -552,6 +578,21 @@ const download = (url: string) => {
 </script>
 
 <style lang="scss" scoped>
+.actions {
+  :deep(.el-button > span) {
+    font-weight: 650;
+  }
+}
+:deep(.waterDevice_online) {
+  color: #3dd4a7;
+  background: transparent;
+  border: none;
+}
+:deep(.waterDevice_offline) {
+  color: #ee1c25;
+  background: transparent;
+  border: none;
+}
 .el-table {
   height: calc(100% - 80px);
 }