From 46f46a3ea84dac4cd0e6ff8b038e2d7b9e97380e Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 28 十一月 2022 16:13:13 +0800
Subject: [PATCH] 店铺管理优化

---
 src/views/systemSetting/device/loudspeaker/index.vue |  123 +++++++++++++++++++++++++++++++++-------
 1 files changed, 100 insertions(+), 23 deletions(-)

diff --git a/src/views/systemSetting/device/loudspeaker/index.vue b/src/views/systemSetting/device/loudspeaker/index.vue
index 7a427c8..19de7d7 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"
@@ -19,10 +23,7 @@
     <main>
       <div class="main-content">
         <div class="main-title">
-          <el-button
-            class="el-icon-plus"
-            type="primary"
-            @click="dialogCreate = true"
+          <el-button class="el-icon-plus" type="primary" @click="handleAdd"
             >娣诲姞</el-button
           >
         </div>
@@ -38,6 +39,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">
@@ -67,7 +69,7 @@
           </el-table-column>
           <el-table-column prop="operation" label="鎿嶄綔" min-width="20">
             <template slot-scope="scope">
-              <div class="btn">
+              <div class="operation">
                 <span @click="handleEdit(scope.row)">缂栬緫</span>
                 <span class="line">|</span>
                 <span @click="handleDelete(scope.row)">鍒犻櫎</span>
@@ -75,6 +77,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>
@@ -85,7 +105,7 @@
         width="60%"
         :before-close="handleClose"
       >
-        <MyForm :info="loudspeakerInfo" :closeDialog="null"></MyForm>
+        <MyForm :info="loudspeakerInfo" @closeDialog="handleCallBack"></MyForm>
       </el-dialog>
     </footer>
   </div>
@@ -102,7 +122,7 @@
   data() {
     return {
       dialogCreate: false,
-      context: 0,
+      context: null,
       options: [
         {
           value: null,
@@ -118,16 +138,11 @@
         },
       ],
       list: [],
-      current: 1,
-      size: 10,
-      loudspeakerInfo: {
-        id: 0,
-        name: "",
-        code: "",
-        power: "",
-        frequencyResponse: "",
-        fullRangeSpeaker: "",
-      },
+      totalNum: 0,
+      pageSize: 10,
+      currentPage: 1,
+      renderFlag: false,
+      loudspeakerInfo: {},
     };
   },
   created() {
@@ -138,9 +153,50 @@
       "getLoudspeakerList",
       "saveLoudspeaker",
       "updateLoudspeaker",
+      "deleteLoudspeaker",
     ]),
+    handleAdd() {
+      this.loudspeakerInfo = {
+        id: 0,
+        name: "",
+        code: "",
+        power: "",
+        frequencyResponse: "",
+        fullRangeSpeaker: "",
+      };
+      this.dialogCreate = true;
+    },
+    handleEdit(row) {
+      this.loudspeakerInfo = row;
+      this.dialogCreate = true;
+    },
+    handleDelete(row) {
+      this.$confirm("纭鍒犻櫎锛�").then((_) => {
+        this.deleteLoudspeaker(row.id).then((res) => {
+          this.$message({
+            type: "success",
+            message: "鍒犻櫎鎴愬姛锛�",
+          });
+          this.setTableData();
+        });
+      });
+    },
     formatSate(row, column) {
       return row.state == 1 ? "鍦ㄧ嚎" : "绂荤嚎";
+    },
+    handleCallBack(e) {
+      this.currentPage = 1;
+      this.dialogCreate = false;
+      this.setTableData();
+    },
+    // 璁剧疆琛ㄦ牸鏂戦┈绾�
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+      return "";
     },
     // 寮圭獥鍏抽棴
     handleClose(done) {
@@ -150,14 +206,35 @@
     },
     // 璁剧疆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;
+        this.list = res.records;
+        this.totalNum = res.total;
       });
     },
+    handleStateChange(e) {
+      this.currentPage = 1;
+      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