From 6d1754304d79d3398df52126cd1d3cd7d630e94a Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 01 十一月 2022 11:59:46 +0800
Subject: [PATCH] 单兵、音柱页面显示

---
 src/views/systemSetting/device/loudspeaker/index.vue                      |   81 ++++++++++++++++++--
 src/store/system/handheldTerminal/index.js                                |   14 +-
 src/views/systemSetting/device/handheldTerminal/index.vue                 |  115 ++++++++++++++++++++++++----
 src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue |   23 +----
 4 files changed, 182 insertions(+), 51 deletions(-)

diff --git a/src/store/system/handheldTerminal/index.js b/src/store/system/handheldTerminal/index.js
index 3dc7ab2..2f447bb 100644
--- a/src/store/system/handheldTerminal/index.js
+++ b/src/store/system/handheldTerminal/index.js
@@ -1,18 +1,18 @@
-import loudspeakerApi from "@/api/system/loudspeaker";
+import handheldTerminalApi from "@/api/system/handheldTerminal";
 export default {
     namespaced: true,
     state: {
         userInfo: {},
     },
     actions: {
-        getLoudspeakerList(context, params) {
-            return loudspeakerApi.getLoudspeakerList(params);
+        getHandheldTerminalList(context, params) {
+            return handheldTerminalApi.getHandheldTerminalList(params);
         },
-        saveLoudspeaker(context, params) {
-            return loudspeakerApi.saveLoudspeaker(params);
+        saveHandheldTerminal(context, params) {
+            return handheldTerminalApi.saveHandheldTerminal(params);
         },
-        updateLoudspeaker(context, params) {
-            return loudspeakerApi.updateLoudspeaker(params);
+        updateHandheldTerminal(context, params) {
+            return handheldTerminalApi.updateHandheldTerminal(params);
         },
     },
 };
\ No newline at end of file
diff --git a/src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue b/src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue
index f231b83..fa3c400 100644
--- a/src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue
+++ b/src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue
@@ -40,7 +40,7 @@
           </el-form-item>
           <!-- 閮ㄩ棬 -->
           <el-form-item class="optionItems" label="鎵�灞為儴闂�:" prop="departId">
-            <el-select v-model="form.departId" placeholder="璇疯緭鍏ユ墍灞為儴闂�">
+            <el-select v-model="form.departName" placeholder="璇疯緭鍏ユ墍灞為儴闂�">
               <el-option :value="mylabel">
                 <el-tree
                   ref="tree"
@@ -77,11 +77,7 @@
   data() {
     const checkName = (rule, value, callback) => {
       if (value) {
-        if (validateName(value)) {
-          callback();
-        } else {
-          callback(new Error("璇锋纭緭鍏ュ崟鍏靛悕绉�"));
-        }
+        callback();
       } else {
         callback(new Error("鍗曞叺鍚嶇О涓嶈兘涓虹┖"));
       }
@@ -102,11 +98,7 @@
     };
     const checkUser = (rule, value, callback) => {
       if (value) {
-        if (validateName(value)) {
-          callback();
-        } else {
-          callback(new Error("璇锋纭緭鍏ヤ娇鐢ㄤ汉鍛�"));
-        }
+        callback();
       } else {
         callback(new Error("浣跨敤浜哄憳涓嶈兘涓虹┖"));
       }
@@ -124,11 +116,10 @@
     };
     return {
       form: {
-        carNumber: "",
-        contact: "",
-        ownerName: "",
-        trajectory: "",
-        vehicleUser: "",
+        name: "",
+        code: "",
+        user: "",
+        phone: "",
         departName: "",
         departId: 0,
       },
diff --git a/src/views/systemSetting/device/handheldTerminal/index.vue b/src/views/systemSetting/device/handheldTerminal/index.vue
index c7ba97f..e130306 100644
--- a/src/views/systemSetting/device/handheldTerminal/index.vue
+++ b/src/views/systemSetting/device/handheldTerminal/index.vue
@@ -4,7 +4,11 @@
       <div class="header-content">
         <div class="search">
           <span style="padding-right: 20px">绛涢�夋潯浠�:</span>
-          <el-select v-model="context" placeholder="绛涢�夋潯浠�">
+          <el-select
+            v-model="context"
+            placeholder="绛涢�夋潯浠�"
+            @change="handleStateChange"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -36,6 +40,7 @@
             'font-weight': '650',
             'line-height': '45px',
           }"
+          :row-class-name="tableRowClassName"
           :data="list"
           style="width: 100%"
         >
@@ -72,23 +77,42 @@
           </el-table-column>
         </el-table>
       </div>
+
+      <!-- tools -->
+      <div class="tools">
+        <div class="funs"></div>
+        <div class="pagination">
+          <el-pagination
+            background
+            :current-page="currentPage"
+            layout="prev, pager, next"
+            :total="totalNum"
+            :page-size="pageSize"
+            @current-change="changeCurrentPage"
+            @prev-click="handlePrev"
+            @next-click="handleNext"
+          >
+          </el-pagination>
+        </div>
+      </div>
     </main>
     <footer>
       <!-- 娣诲姞闊虫煴 -->
       <el-dialog
         title="娣诲姞闊虫煴"
         :visible.sync="dialogCreate"
+        v-if="dialogCreate"
         width="60%"
         :before-close="handleClose"
       >
-        <MyForm :info="loudspeakerInfo" :closeDialog="null"></MyForm>
+        <MyForm :info="handheldTerminal" :closeDialog="setTableData"></MyForm>
       </el-dialog>
     </footer>
   </div>
 </template>
   <script>
 import { createNamespacedHelpers } from "vuex";
-const { mapActions } = createNamespacedHelpers("loudspeaker");
+const { mapActions } = createNamespacedHelpers("handheldTerminal");
 import MyForm from "./components/dialogForm.vue";
 
 export default {
@@ -98,7 +122,7 @@
   data() {
     return {
       dialogCreate: false,
-      context: 0,
+      context: null,
       options: [
         {
           value: null,
@@ -114,15 +138,17 @@
         },
       ],
       list: [],
-      current: 1,
-      size: 10,
-      loudspeakerInfo: {
+      totalNum: 0,
+      pageSize: 10,
+      currentPage: 1,
+      renderFlag: false,
+      handheldTerminal: {
         id: 0,
         name: "",
         code: "",
-        power: "",
-        frequencyResponse: "",
-        fullRangeSpeaker: "",
+        user: "",
+        phone: "",
+        departId: 0,
       },
     };
   },
@@ -131,12 +157,28 @@
   },
   methods: {
     ...mapActions([
-      "getLoudspeakerList",
-      "saveLoudspeaker",
-      "updateLoudspeaker",
+      "getHandheldTerminalList",
+      "saveHandheldTerminal",
+      "updateHandheldTerminal",
     ]),
+    handleEdit(row) {
+      
+      this.handheldTerminal = row;
+      this.dialogCreate = true;
+    },
+    handleDelete(row) {},
     formatSate(row, column) {
       return row.state == 1 ? "鍦ㄧ嚎" : "绂荤嚎";
+    },
+
+    // 璁剧疆琛ㄦ牸鏂戦┈绾�
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+      return "";
     },
     // 寮圭獥鍏抽棴
     handleClose(done) {
@@ -146,13 +188,35 @@
     },
     // 璁剧疆tableData
     setTableData() {
-      const { current, size, context } = this;
-      let arr = this.getLoudspeakerList({
-        current,
-        size,
+      const { currentPage, pageSize, context } = this;
+      this.getHandheldTerminalList({
+        currentPage,
+        pageSize,
+        state: context,
       }).then((res) => {
-        this.list = arr.data.data;
+        if (res.data.code == 200) {
+          this.list = res.data.data.records;
+          this.totalNum = res.data.data.total;
+        }
       });
+    },
+    handleStateChange(e) {
+      this.setTableData();
+    },
+    // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+    changeCurrentPage(page) {
+      this.currentPage = page;
+      this.setTableData();
+    },
+    // 涓婁竴椤电偣鍑讳簨浠�
+    handlePrev(page) {
+      this.currentPage = page;
+      this.setTableData();
+    },
+    // 涓嬩竴椤电偣鍑讳簨浠�
+    handleNext(page) {
+      this.currentPage = page;
+      this.setTableData();
     },
   },
 };
@@ -269,11 +333,24 @@
         }
       }
     }
+    &::v-deep .warning-row {
+      background-color: #06122c;
+    }
 
+    &::v-deep .success-row {
+      background-color: #071f39;
+    }
+
+    .operationBox {
+      display: flex;
+    }
+
+    .el-divider {
+      background-color: #4b9bb7;
+    }
     .el-table {
       color: #4b9bb7;
       font-size: 10px;
-
       .operation {
         display: flex;
 
diff --git a/src/views/systemSetting/device/loudspeaker/index.vue b/src/views/systemSetting/device/loudspeaker/index.vue
index 7a427c8..de78e41 100644
--- a/src/views/systemSetting/device/loudspeaker/index.vue
+++ b/src/views/systemSetting/device/loudspeaker/index.vue
@@ -4,7 +4,11 @@
       <div class="header-content">
         <div class="search">
           <span style="padding-right: 20px">绛涢�夋潯浠�:</span>
-          <el-select v-model="context" placeholder="绛涢�夋潯浠�">
+          <el-select
+            v-model="context"
+            placeholder="绛涢�夋潯浠�"
+            @change="handleStateChange"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -38,6 +42,7 @@
           }"
           :data="list"
           style="width: 100%"
+          :row-class-name="tableRowClassName"
         >
           <el-table-column type="selection" min-width="5"> </el-table-column>
           <el-table-column prop="name" label="闊虫煴鍚嶇О" min-width="10">
@@ -75,6 +80,24 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <!-- tools -->
+        <div class="tools">
+          <div class="funs"></div>
+          <div class="pagination">
+            <el-pagination
+              background
+              :current-page="currentPage"
+              layout="prev, pager, next"
+              :total="totalNum"
+              :page-size="pageSize"
+              @current-change="changeCurrentPage"
+              @prev-click="handlePrev"
+              @next-click="handleNext"
+            >
+            </el-pagination>
+          </div>
+        </div>
       </div>
     </main>
     <footer>
@@ -83,6 +106,7 @@
         title="娣诲姞闊虫煴"
         :visible.sync="dialogCreate"
         width="60%"
+        v-if="dialogCreate"
         :before-close="handleClose"
       >
         <MyForm :info="loudspeakerInfo" :closeDialog="null"></MyForm>
@@ -102,7 +126,7 @@
   data() {
     return {
       dialogCreate: false,
-      context: 0,
+      context: null,
       options: [
         {
           value: null,
@@ -118,8 +142,10 @@
         },
       ],
       list: [],
-      current: 1,
-      size: 10,
+      totalNum: 0,
+      pageSize: 10,
+      currentPage: 1,
+      renderFlag: false,
       loudspeakerInfo: {
         id: 0,
         name: "",
@@ -139,8 +165,23 @@
       "saveLoudspeaker",
       "updateLoudspeaker",
     ]),
+    handleEdit(row) {
+      this.loudspeakerInfo = row;
+      this.dialogCreate = true;
+    },
+    handleDelete(row) {},
     formatSate(row, column) {
       return row.state == 1 ? "鍦ㄧ嚎" : "绂荤嚎";
+    },
+
+    // 璁剧疆琛ㄦ牸鏂戦┈绾�
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+      return "";
     },
     // 寮圭獥鍏抽棴
     handleClose(done) {
@@ -150,14 +191,36 @@
     },
     // 璁剧疆tableData
     setTableData() {
-      const { current, size, context } = this;
-      let arr = this.getLoudspeakerList({
-        current,
-        size,
+      const { currentPage, pageSize, context } = this;
+      this.getLoudspeakerList({
+        currentPage,
+        pageSize,
+        state: context,
       }).then((res) => {
-        this.list = arr.data.data;
+        if (res.data.code == 200) {
+          this.list = res.data.data.records;
+          this.totalNum = res.data.data.total;
+        }
       });
     },
+    handleStateChange(e) {
+      this.setTableData();
+    },
+    // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+    changeCurrentPage(page) {
+      this.currentPage = page;
+      this.setTableData();
+    },
+    // 涓婁竴椤电偣鍑讳簨浠�
+    handlePrev(page) {
+      this.currentPage = page;
+      this.setTableData();
+    },
+    // 涓嬩竴椤电偣鍑讳簨浠�
+    handleNext(page) {
+      this.currentPage = page;
+      this.setTableData();
+    },
   },
 };
 </script>

--
Gitblit v1.8.0