修复保存传参异常问题

package-lock.json

@@ -8,6 +8,7 @@
       "name": "peko-admin-web",
       "version": "0.1.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.1.0",
         "admin-lte": "^2.3.2",
         "axios": "^1.5.0",
         "bootstrap": "^3.3.5",
@@ -40,6 +41,7 @@
         "unplugin-auto-import": "^0.16.7",
         "unplugin-vue-components": "^0.25.2",
         "vue": "^3.2.13",
+        "webpack-bundle-analyzer": "^4.9.1",
         "webpack-cli": "^5.1.4"
       }
     },
@@ -12813,7 +12815,7 @@
     },
     "node_modules/webpack-bundle-analyzer": {
       "version": "4.9.1",
-      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.1.tgz",
       "integrity": "sha512-jnd6EoYrf9yMxCyYDPj8eutJvtjQNp8PHmni/e/ulydHBWhT5J3menXt3HEkScsu9YqMAcG4CfFjs3rj5pVU1w==",
       "dev": true,
       "dependencies": {

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve --mode development",
+    "dev": "vue-cli-service serve --mode development --report",
     "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "admin-lte": "^2.3.2",
     "axios": "^1.5.0",
     "bootstrap": "^3.3.5",
@@ -40,6 +41,7 @@
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
     "vue": "^3.2.13",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4"
   }
 }

src/api/roomAlbumPower/RoomRed.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+
+// 获取房间权限列表
+export const redEnvelopePage = query => {
+    return request({
+        url: '/admin/room/redEnvelope/page',
+        method: 'get',
+        params: query
+    });
+};
+// 新增
+export const redEnvelopeSave = query => {
+    return request({
+        url: '/admin/room/redEnvelope/save',
+        method: 'post',
+        params: query
+    });
+};
+// 删除
+export const delRoomRedEnvelope = query => {
+    return request({
+        url: '/admin/room/redEnvelope/delRoomRedEnvelope',
+        method: 'get',
+        params: query
+    });
+};
+// 弹窗列表
+export const userPage = query => {
+    return request({
+        url: '/admin/room/redEnvelope/userPage',
+        method: 'get',
+        params: query
+    });
+};
+// 弹窗新增
+export const saveManager = query => {
+    return request({
+        url: '/admin/room/redEnvelope/saveManager',
+        method: 'post',
+        params: query
+    });
+};
+// 弹窗编辑
+export const redEnvelopeUpdate = query => {
+    return request({
+        url: '/admin/room/redEnvelope/update',
+        method: 'post',
+        params: query
+    });
+};
+// 弹窗删除
+export const delUserRoomRedEnvelope = query => {
+    return request({
+        url: '/admin/room/redEnvelope/delUserRoomRedEnvelope',
+        method: 'get',
+        params: query
+    });
+};

src/api/sysconfAdminView/sysconfAdminView.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+// 获取列表
+export const getList = query => {
+    return request({
+        url: '/admin/sysConf/getList',
+        method: 'get',
+        params: query
+    });
+};
+// 保存新增
+export const sysConfSave = query => {
+    return request({
+        url: '/admin/sysConf/save',
+        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
+        method: 'post',
+        data: query
+    });
+};
+// 删除
+export const sysConfDel = query => {
+    return request({
+        url: '/admin/sysConf/del',
+        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
+        method: 'post',
+        data: query
+    });
+};

src/utils/request.js

@@ -3,8 +3,9 @@ import store from "@/store";
 import global from "@/constants/global";
 
 const service = axios.create();
-
+import { ElMessage } from 'element-plus'
 service.interceptors.request.use(config => {
+    console.log('config', config);
     return config;
 }, error => {
     Promise.reject(error);
@@ -12,6 +13,18 @@ service.interceptors.request.use(config => {
 
 service.interceptors.response.use(res => {
     userLogout(res.headers[global.NEED_LOGOUT.toLowerCase()]);
+    console.log('res.data', res);
+    // if (res.data.code == 200) {
+        // ElMessage({
+        //     message: "成功",
+        //     type: 'success'
+        // });
+    // } else {
+        // ElMessage({
+        //     message: res.data.message,
+        //     type: 'error'
+        //   });
+    // }
     return res.data;
 }, error => {
     return Promise.reject(error);
@@ -21,11 +34,11 @@ $.ajaxSetup({
     headers: {
         'Access-Control-Allow-Origin': '*',
     },
-    beforeSend: function(xhr) {
+    beforeSend: function (xhr) {
         console.log(xhr);
     },
-    complete: function(xhr) {
-        if (xhr && typeof(xhr.getResponseHeader) == 'function') {
+    complete: function (xhr) {
+        if (xhr && typeof (xhr.getResponseHeader) == 'function') {
             userLogout(xhr.getResponseHeader(global.NEED_LOGOUT));
         }
     }
@@ -34,7 +47,7 @@ $.ajaxSetup({
 /**
  * 强制退出
  */
-function userLogout(needLogout) {
+function userLogout (needLogout) {
     try {
         if (global.NEED_LOGOUT == needLogout) {
             var win = window;

src/views/room/RoomRed.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="outer">
+    <!-- 顶部搜索条件 -->
+    <div class="search">
+      <div class="searchLeft">
+        <span>房间ID</span>
+        <el-input
+          v-model="roomId"
+          size="default"
+          placeholder="权限房间号"
+          class="input"
+        ></el-input>
+      </div>
+      <div class="searchRight">
+        <span>用户ID</span>
+        <el-input
+          v-model="userId"
+          size="default"
+          placeholder="权限用户id"
+          class="input"
+        ></el-input>
+      </div>
+    </div>
+    <!-- 按钮 -->
+    <div class="buttonBox">
+      <el-button class="primary" type="primary" size="default" @click="search()"
+        >查询</el-button
+      >
+      <el-button
+        @click="authority = true"
+        class="primary"
+        type="primary"
+        size="default"
+        style="margin-right: 10px"
+        >添加</el-button
+      >
+    </div>
+    <!-- 增加权限弹窗 -->
+    <el-dialog v-model="authority" title="增加房间红包权限" width="30%" center>
+      <div class="authorityBox">
+        <span class="authoritySpan">房间ID</span>
+        <el-input
+          v-model="addRoomId"
+          size="default"
+          placeholder="输入房间ID多个请用英文 , 来分别"
+          class="authorityInpput"
+        ></el-input>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="authority = false">取消</el-button>
+          <el-button type="primary" @click="addAuthority()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 表格 -->
+    <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
+      <el-table-column prop="roomErBanNo" align="center" label="权限房间号" />
+      <el-table-column prop="title" align="center" label="房间名称" />
+      <el-table-column prop="createTime" align="center" label="房间获得权限时间" />
+      <el-table-column
+        prop="userCount"
+        align="center"
+        label="该房间的房间红包权限用户数"
+      />
+      <el-table-column align="center" label="操作" width="400">
+        <template v-slot="scope">
+          <el-button
+            @click="modifyUserPower(scope.row)"
+            class="primary"
+            type="primary"
+            size="default"
+            >管理权限用户</el-button
+          >
+          <el-button
+            @click="delRoomPower(scope.row)"
+            class="danger"
+            type="danger"
+            size="default"
+            >删除权限</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      style="margin-top: 10px"
+      class="paginationClass"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
+      layout="sizes, prev, pager, next"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- 管理权限弹窗 -->
+    <el-dialog v-model="dialogTableVisible" :title="dialogTableVisibleTitle">
+      <el-button
+        class="dialogTableVisibleBut primary"
+        type="primary"
+        @click="
+          authorityLimits = true;
+          radioFull = false;
+          radioHall = false;
+          typeRadio = 0;
+        "
+      >
+        新增
+      </el-button>
+
+      <el-table style="width: 100%" :data="authorityData" border>
+        <el-table-column
+          align="center"
+          property="userErBanNo"
+          label="用户id"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="nick"
+          label="用户昵称"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="createTime"
+          label="获得权限时间"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="type"
+          label="开启的权限"
+          min-width="100px"
+        >
+          <template v-slot="scope">{{
+            scope.row.type == 1
+              ? "厅内红包"
+              : scope.row.type == 2
+              ? "全服红包"
+              : scope.row.type == 3
+              ? "厅内红包&全服红包"
+              : "空或未知类型"
+          }}</template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="200px">
+          <template v-slot="scope">
+            <el-button
+              @click="editTablePower(scope.row)"
+              class="primary"
+              type="primary"
+              size="default"
+              :disabled="!(scope.row.roomUid === scope.row.uid) ? false : true"
+              >编辑</el-button
+            >
+            <el-button
+              @click="delTablePower(scope.row)"
+              class="danger"
+              type="danger"
+              size="default"
+              :disabled="!(scope.row.roomUid === scope.row.uid) ? false : true"
+              >删除权限</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页2 -->
+      <el-pagination
+        style="margin-top: 10px"
+        class="paginationClass"
+        v-model:current-page="currentPage2"
+        v-model:page-size="pageSize2"
+        :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+        :small="small"
+        :disabled="disabled"
+        :background="background"
+        layout="sizes, prev, pager, next"
+        :total="total2"
+        @size-change="handleSizeChange2"
+        @current-change="handleCurrentChange2"
+      />
+    </el-dialog>
+    <!-- 增加房间红包管理权限弹窗 -->
+    <el-dialog v-model="authorityLimits" title="增加房间红包管理权限" width="30%" center>
+      <div class="authorityBox">
+        <span class="authoritySpan">用户ID</span>
+        <el-input
+          v-model="addLimits"
+          size="default"
+          placeholder="输入用户ID多个请用英文 , 来分别"
+          class="authorityInpput"
+        ></el-input>
+      </div>
+      <div class="optionBox">
+        <el-checkbox
+          v-model="radioHall"
+          @change="checkBoxChange()"
+          label="厅内红包"
+          size="large"
+        />
+        <el-checkbox
+          v-model="radioFull"
+          @change="checkBoxChange()"
+          label="全服红包"
+          size="large"
+        />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="authorityLimits = false">取消</el-button>
+          <el-button type="primary" @click="addAuthorityLimits()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 编辑弹窗 -->
+    <el-dialog v-model="editDialog" title="编辑" width="30%" center>
+      <div class="optionBox">
+        <el-checkbox
+          v-model="radioHall"
+          @change="checkBoxChange()"
+          label="厅内红包"
+          size="large"
+        />
+        <el-checkbox
+          v-model="radioFull"
+          @change="checkBoxChange()"
+          label="全服红包"
+          size="large"
+        />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="editDialog = false">取消</el-button>
+          <el-button type="primary" @click="editDialogClick()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 公共二次确认删除弹窗 -->
+    <el-dialog v-model="delDialog" title="提示" width="30%" center>
+      <span> {{ delDialogText }}</span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="delDialog = false">取消</el-button>
+          <el-button type="primary" @click="delClick(val, type)"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  redEnvelopePage,
+  redEnvelopeSave,
+  delRoomRedEnvelope,
+  delUserRoomRedEnvelope,
+  userPage,
+  saveManager,
+  redEnvelopeUpdate,
+} from "@/api/roomAlbumPower/RoomRed";
+import { ElMessage } from "element-plus";
+export default {
+  name: "RoomRed",
+  data() {
+    return {
+      editDialog: false,
+      total: 10, //总页数
+      currentPage: 1, //页码
+      pageSize: 10, //条数
+      total2: 10, //总页数
+      currentPage2: 1, //页码
+      pageSize2: 10, //条数
+      roomId: "", //房间id
+      userId: "", //用户id
+      authority: false, //控制新增房间红包弹窗
+      addRoomId: "", //新增房间id
+      dialogTableVisible: false, //控制权限管理弹窗
+      dialogTableVisibleTitle: "房间ID:123 的房间红包权限",
+      authorityLimits: false, //控制新增房间红包权限管理弹窗
+      addLimits: "", //弹窗新增ID
+      delType: null,
+      delroomUid: null,
+      tableData: [],
+      authorityData: [],
+      //公共二次确认弹窗
+      delDialog: false,
+      delDialogText: "提示",
+      radioHall: false,
+      radioFull: false,
+      typeRadio: 0,
+      public: null,
+      delTablePowerRoomUid: null,
+      delTablePowerUid: null,
+      editTableData: {},
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // 获取外表格数据接口
+    getData() {
+      redEnvelopePage({
+        roomErBanNo: this.roomId,
+        userErBanNo: this.userId,
+        page: this.currentPage,
+        pageSize: this.pageSize,
+      }).then((res) => {
+        this.roomId = "";
+        this.userId = "";
+        this.addRoomId = "";
+        this.total = res.total;
+        this.tableData = res.rows;
+      });
+    },
+    // 查询按钮
+    search() {
+      this.getData();
+    },
+    // 管理权限用户按钮
+    modifyUserPower(row) {
+      console.log(row);
+      this.public = row;
+      this.saveManagerRoomUid = row.roomUid;
+      this.dialogTableVisibleTitle = `房间ID:${row.roomErBanNo} 的房间红包权限`;
+      this.getUserPage(row.roomUid);
+    },
+    // 弹窗列表
+    getUserPage(val) {
+      userPage({ roomUid: val, page: this.currentPage2, pageSize: this.pageSize2 }).then(
+        (res) => {
+          this.total2 = res.total;
+          this.authorityData = res.rows;
+          this.dialogTableVisible = true;
+        }
+      );
+    },
+    // 删除权限
+    delRoomPower(row) {
+      console.log(row);
+      this.delType = 1;
+      this.delDialog = true;
+      this.delDialogText = "确定要删除该房间红包权限吗?";
+      this.delroomUid = row.roomUid;
+    },
+    // 二次确认
+    delClick(val, type) {
+      if (this.delType == 1) {
+        //delType 1：删除该房间权限 2：删除房间内用户权限
+        delRoomRedEnvelope({ roomUid: this.delroomUid }).then((res) => {
+          this.getData();
+        });
+      } else {
+        delUserRoomRedEnvelope({
+          roomUid: this.delTablePowerRoomUid,
+          uid: this.delTablePowerUid,
+        }).then((res) => {
+          this.getUserPage(this.delTablePowerRoomUid);
+        });
+      }
+      this.delDialog = false;
+    },
+    // 删除弹窗权限
+    delTablePower(row) {
+      console.log(row);
+      this.delType = 2;
+      this.delDialog = true;
+      this.delDialogText = "确定要删除该房间红包权限吗?";
+      this.delTablePowerRoomUid = row.roomUid;
+      this.delTablePowerUid = row.uid;
+    },
+    // 编辑弹窗权限
+    editTablePower(row) {
+      if (row.type == 1) {
+        this.radioHall = true;
+        this.radioFull = false;
+      } else if (row.type == 2) {
+        this.radioHall = false;
+        this.radioFull = true;
+      } else if (row.type == 3) {
+        this.radioHall = true;
+        this.radioFull = true;
+      }
+      this.editTableData = row;
+      this.editDialog = true;
+    },
+    // 确认编辑按钮
+    editDialogClick() {
+      if (this.radioHall && this.radioFull) {
+        this.typeRadio = 3;
+      } else if (this.radioHall && this.radioFull == false) {
+        this.typeRadio = 1;
+      } else if (this.radioFull && this.radioHall == false) {
+        this.typeRadio = 2;
+      } else {
+        this.typeRadio = 0;
+      }
+      if (this.typeRadio == 0) {
+        ElMessage({
+          message: "请勾选开启的权限",
+          type: "error",
+        });
+        return;
+      }
+      redEnvelopeUpdate({
+        id: this.editTableData.id,
+        roomUid: this.editTableData.roomUid,
+        uid: this.editTableData.uid,
+        type: this.typeRadio,
+      }).then((res) => {
+      this.editDialog = false;
+        this.getUserPage(this.editTableData.roomUid);
+      });
+    },
+    // 确认新增房间红包弹窗按钮
+    addAuthority() {
+      redEnvelopeSave({
+        roomErBanNoStr: this.addRoomId,
+      }).then((res) => {
+        this.authority = false;
+        this.getData();
+      });
+    },
+    // 监听多选框
+    checkBoxChange() {
+      if (this.radioHall && this.radioFull) {
+        this.typeRadio = 3;
+      } else if (this.radioHall && this.radioFull == false) {
+        this.typeRadio = 1;
+      } else if (this.radioFull && this.radioHall == false) {
+        this.typeRadio = 2;
+      } else {
+        this.typeRadio = 0;
+      }
+    },
+    // 确认弹窗新增按钮
+    addAuthorityLimits() {
+      console.log(this.typeRadio);
+      if (this.typeRadio == 0) {
+        ElMessage({
+          message: "请勾选开启的权限",
+          type: "error",
+        });
+        return;
+      }
+      saveManager({
+        roomUid: this.public.roomUid,
+        type: this.typeRadio,
+        userErBanNoStr: this.addLimits,
+      }).then((res) => {
+        this.addLimits = "";
+        this.authorityLimits = false;
+        this.getUserPage(this.public.roomUid);
+      });
+    },
+    // 分页导航
+    handleSizeChange(val) {
+      this.getData();
+    },
+    handleCurrentChange(val) {
+      this.getData();
+    },
+    // 分页导航2
+    handleSizeChange2(val) {
+      this.getUserPage(this.saveManagerRoomUid);
+    },
+    handleCurrentChange2(val) {
+      this.getUserPage(this.saveManagerRoomUid);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.outer {
+  padding-top: 20px;
+  background: #ecf0f5;
+  border-top: 3px solid #d2d6de;
+  .search {
+    width: 100%;
+    height: 41px;
+    .searchLeft,
+    .searchRight {
+      width: 20%;
+      float: left;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 75%;
+      }
+    }
+  }
+  .buttonBox {
+    margin-top: 10px;
+  }
+  .authorityBox {
+    .authoritySpan {
+      margin-right: 20px;
+    }
+    .authorityInpput {
+      width: 50%;
+    }
+  }
+  .dialogTableVisibleBut {
+    margin: -25px 0 20px 0px;
+  }
+}
+</style>

src/views/system/SysconfAdminView.vue

@@ -1,350 +1,350 @@
+<!-- eslint-disable vue/no-unused-components -->
+<!-- eslint-disable vue/valid-v-slot -->
 <template>
-    <section class="content">
-        <div class="box box-primary">
-            <div class="box-body">
-                <!-- Content Header (Page header) -->
-                <section class="content-header">
-                    <h1 id="itemTitle"></h1>
-                </section>
-                <!-- .content -->
-                <section class="content">
-                    <div id="table"></div>
-                    <div id="toolbar">
-                        <button id="sysConf-add" class="btn btn-default">
-                            <i class="glyphicon glyphicon-plus"></i>增加
-                        </button>
-
-                        <button id="sysConf-multiDel" class="btn btn-default">
-                            <i class="glyphicon glyphicon-wrench"></i>批量删除
-                        </button>
-                    </div>
-                </section><!-- .content -->
-            </div>
-        </div>
-    </section>
-    <div class="modal fade" id="sysConfModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-                            aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title" id="modalLabel">字典信息</h4>
-                </div>
-                <div class="modal-body">
-                    <form class="form-horizontal" id="sysConfForm">
-                        <div class="form-group">
-                            <label for="configId" class="col-sm-2 control-label">id</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control validate[required]" name="configId" id="configId">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="configName" class="col-sm-2 control-label">名称</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control validate[required]" name="configName"
-                                    id="configName">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label">状态</label>
-                            <div class="col-sm-10">
-                                <label class="radio-inline"><input type="radio" name="configStatus" value="1"
-                                        checked>有效</label>
-                                <label class="radio-inline"><input type="radio" name="configStatus" value="2">无效</label>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="configValue" class="col-sm-2 control-label">值</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control" name="configValue" id="configValue">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="nameSpace" class="col-sm-2 control-label">命名空间</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control validate[required]" name="nameSpace" id="nameSpace">
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
-                    <button type="button" class="btn btn-primary" id="save">保存</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">提示信息</h4>
-                </div>
-                <div class="modal-body" id="tipMsg"></div>
-            </div>
-        </div>
+  <div class="box">
+    <!-- 按钮 -->
+    <div class="but">
+      <el-button @click="addConfig()" type="primary" class="primary butIn"
+        >添加</el-button
+      >
+      <el-button @click="multipleDel()" type="danger" class="danger butIn"
+        >批量删除</el-button
+      >
+      <el-input
+        @input="handlerChange"
+        v-model="valsen"
+        type="text"
+        placeholder="请输入关键字进行搜索配置"
+        class="inputs"
+      />
     </div>
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      ref="multipleTable"
+      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
+      tooltip-effect="dark"
+      style="margin-top: 25px; width: 100%"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection"> </el-table-column>
+      <el-table-column align="center" prop="configId" label="ID"> </el-table-column>
+      <el-table-column
+        show-overflow-tooltip="true"
+        align="center"
+        prop="configName"
+        label="名称"
+      ></el-table-column>
+      <el-table-column
+        show-overflow-tooltip="true"
+        align="center"
+        prop="configValue"
+        label="值"
+      ></el-table-column>
+      <el-table-column
+        show-overflow-tooltip="true"
+        align="center"
+        prop="nameSpace"
+        label="命名空间"
+      ></el-table-column>
+      <el-table-column align="center" label="状态">
+        <template v-slot="scope">{{
+          scope.row.configStatus == 1 ? "有效" : "无效"
+        }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template v-slot="scope">
+          <el-button @click="modifyTible(scope.row)" type="primary" class="primary"
+            >编辑</el-button
+          >
+          <el-button @click="delTible(scope.row)" type="danger" class="danger"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      class="paginationClass"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
+      layout="sizes, prev, pager, next"
+      :total="tableData.length"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      style="margin-top: 25px"
+    />
+    <!-- 弹窗 -->
+    <el-dialog
+      v-model="dialogTableVisible"
+      :title="dialogTableVisibleTitle"
+      width="500px"
+    >
+      <div class="userId">
+        <span>id</span>
+        <el-input
+          v-model="configId"
+          style="width: 75%"
+          class="input"
+          :disabled="disabledPub"
+        ></el-input>
+      </div>
+      <div class="userId">
+        <span>名称</span>
+        <el-input v-model="configName" style="width: 75%" class="input"></el-input>
+      </div>
+      <div class="userId">
+        <span>状态</span>
+        <el-radio-group v-model="radio" class="ml-4">
+          <el-radio :label="1" size="large">有效</el-radio>
+          <el-radio :label="2" size="large">无效</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="userId">
+        <span>值</span>
+        <el-input v-model="configValue" style="width: 75%" class="input"></el-input>
+      </div>
+      <div class="userId">
+        <span>命名空间</span>
+        <el-input v-model="nameSpace" style="width: 75%" class="input"></el-input>
+      </div>
+      <el-button
+        class="dialogTableVisibleBut"
+        type="info"
+        @click="dialogTableVisible = false"
+      >
+        关闭
+      </el-button>
+      <el-button class="dialogTableVisibleBut" type="primary" @click="saveBut()">
+        保存
+      </el-button>
+    </el-dialog>
+    <!-- 二次确认解除风险弹窗 -->
+    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
+      <span> 你确定删除该记录吗? 删除后再也不能找回，请谨慎操作! ! ! </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogClick()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import TableHelper from '@/utils/bootstrap-table-helper';
-import { getSysConfList } from '@/api/system/sysconf';
-
+import {
+  getList,
+  sysConfSave,
+  sysConfDel,
+} from "@/api/sysconfAdminView/sysconfAdminView";
+import { ElMessage } from "element-plus";
+import qs from "qs";
 export default {
-    name: "SysconfAdminView",
-    setup() {
-        function showText(obj) {
-            let text = unescape($(obj).prop('title'));
-            $("#tipMsg").text(text);
-            $("#tipModal").modal('show');
-        }
-        window.showText = showText;
-        return {
-            showText
-        };
+  name: "SysconfAdminView",
+  data() {
+    return {
+      valsen: "",
+      loading: false,
+      multipleSelection: null, //选中表格存储
+      tableData: [], //表格数据
+      tableData2: [], //表格数据
+      tableData3: [], //表格数据
+      //分页
+      totals: 0,
+      currentPage: 1,
+      pageSize: 10,
+      dialogTableVisibleTitle: "字典信息", //弹窗标题
+      dialogTableVisible: false, //弹窗控制
+      configId: "", //弹窗id
+      configName: "", //弹窗名称
+      radio: 1, //弹窗参单选
+      configValue: "", //弹窗值
+      nameSpace: "", //弹窗命名空间
+      disabledPub: true, //控制弹窗id是否禁用
+      type: null, //   控制是新增或者编辑 type 1：新增2：保存
+      delArr: [], //删除暂存
+      centerDialogVisible: false, //二次删除确认
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // 获取列表
+    getData() {
+      this.loading = true;
+      getList().then((res) => {
+        console.log(res);
+        this.totals = res.total;
+        this.tableData = res.rows;
+        this.tableData3 = res.rows;
+        this.loading = false;
+      });
     },
-    created() {
-        this.$nextTick(function () {
-            this.initData();
-            this.getSysConf();
+    // 添加按钮
+    addConfig() {
+      this.type = 1;
+      this.disabledPub = false;
+      this.configId = "";
+      this.configName = "";
+      this.radio = 1;
+      this.configValue = "";
+      this.nameSpace = "";
+      this.dialogTableVisible = true;
+    },
+    // 表格编辑按钮
+    modifyTible(row) {
+      this.type = 2;
+      this.disabledPub = true;
+      this.configId = row.configId;
+      this.configName = row.configName;
+      this.radio = row.configStatus;
+      this.configValue = row.configValue;
+      this.nameSpace = row.nameSpace;
+      this.dialogTableVisible = true;
+    },
+    // 保存按钮
+    saveBut() {
+      if (this.type == 1) {
+        if (this.configId == "") {
+          ElMessage({
+            showClose: true,
+            message: "请输入id",
+            type: "error",
+          });
+          return;
+        } else if (this.configName == "") {
+          ElMessage({
+            showClose: true,
+            message: "请输入名称",
+            type: "error",
+          });
+          return;
+        } else if (this.configValue == "") {
+          ElMessage({
+            showClose: true,
+            message: "请输入值",
+            type: "error",
+          });
+          return;
+        }
+        this.sysConfSaveFun();
+      } else {
+        this.sysConfSaveFun();
+      }
+      this.dialogTableVisible = false;
+    },
+    // 保存接口函数
+    sysConfSaveFun() {
+      this.loading = true;
+      sysConfSave({
+        configId: this.configId,
+        configName: this.configName,
+        configStatus: this.radio,
+        configValue: this.configValue,
+        nameSpace: this.nameSpace,
+      }).then((res) => {
+        this.getData();
+      });
+    },
+    // 表格选中处理
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
         });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
     },
-    methods: {
-        getSysConf() {
-            getSysConfList().then(res => {
-                $('#table').bootstrapTable('load', res.rows);
-            });
-        },
-        initData() {
-            $(function () {
-                $('#table').bootstrapTable('destroy');
-                $('#table').bootstrapTable({
-                    columns: [
-                        {field: 'tmp', title: 'ID', align: 'center', width: '5%', checkbox: true},
-                        { 
-                            field: 'configId', 
-                            title: 'id', 
-                            align: 'center',
-                            width: '5%',
-                        },
-                        { 
-                            field: 'configName', 
-                            title: '名称', 
-                            align: 'center',
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
-                            }
-                        },
-                        { 
-                            field: 'configValue', 
-                            title: '值', 
-                            align: 'center', 
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
-                            }
-                        },
-                        {
-                            field: 'configStatus', 
-                            title: '状态', 
-                            align: 'center', 
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                if (val == 1) {
-                                    return '有效';
-                                }
-                                else if (val == 2) {
-                                    return '无效';
-                                }
-                            }
-                        },
-                        { 
-                            field: 'nameSpace', 
-                            title: '命名空间', 
-                            align: 'center', 
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
-                            }
-                        },
-                        {
-                            field: 'configId', 
-                            title: '操作', 
-                            align: 'center', 
-                            width: '5%',
-                            formatter: function (val, row, index) {
-                                return '<button class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
-                                    '<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
-                                    '&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
-                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
-                            }
-                        }
-                    ],
-                    cache: false,
-                    striped: true,
-                    showRefresh: true,
-                    pageNumber: 1,
-                    pageSize: 10,
-                    pagination: true,
-                    pageList: [10, 25, 50, 100],
-                    search: true,
-                    sidePagination: "client",
-                    toolbar: '#toolbar'
-                });
-
-                $("#table").on("click", '.opt-remove', function () {
-                    var id = $(this).attr("data-id");
-                    if (id == 'undefined') {
-                        $("#tipMsg").text("id参数有误");
-                        $("#tipModal").modal('show');
-                        return;
-                    }
-                    if (confirm("你确认删除该记录吗?" +
-                        "\r\n删除后再也不能找回，请谨慎操作！")) {
-                        $.ajax({
-                            type: 'post',
-                            url: "/admin/sysConf/del.action",
-                            data: { 'ids': JSON.stringify([id]) },
-                            dataType: "json",
-                            success: function (json) {
-                                if (json.success == 'true') {
-                                    $("#tipMsg").text("删除成功");
-                                    $("#tipModal").modal('show');
-                                    getSysConfList().then(res => {
-                                        $('#table').bootstrapTable('load', res.rows);
-                                    });
-                                    TableHelper.doRefresh("#table");
-                                } else {
-                                    $("#tipMsg").text("删除失败");
-                                    $("#tipModal").modal('show');
-                                }
-                            }
-                        });
-                    }
-                });
-
-                $("#sysConf-add").click(function () {
-                    // 打开编辑弹窗
-                    $("#sysConfModal").modal('show');
-                    $("#sysConfForm")[0].reset();
-                    $("#configId").val('');
-                    $("#configId").attr('readonly', false);
-                });
-
-                $("#sysConf-multiDel").click(function () {
-                    var rows = $("#table").bootstrapTable("getSelections");
-                    if (rows.length == 0) {
-                        alert("请先选择要删除的记录");
-                        return;
-                    }
-                    console.log("rows: " + rows.length);
-                    var idArr = [];
-                    for (var i = 0; i < rows.length; i++) {
-                        idArr.push(rows[i]['configId']);
-                    }
-                    console.log(idArr);
-                    if (confirm("你确认批量删除该记录吗?" +
-                        "\r\n删除后再也不能找回，请谨慎操作！")) {
-                        $.ajax({
-                            type: 'post',
-                            url: "/admin/sysConf/del.action",
-                            data: { 'ids': JSON.stringify(idArr) },
-                            dataType: "json",
-                            success: function (json) {
-                                if (json.success == 'true') {
-                                    $("#tipMsg").text("删除成功");
-                                    $("#tipModal").modal('show');
-                                    getSysConfList().then(res => {
-                                        $('#table').bootstrapTable('load', res.rows);
-                                    });
-                                    TableHelper.doRefresh("#table");
-                                } else {
-                                    $("#tipMsg").text("删除失败");
-                                    $("#tipModal").modal('show');
-                                }
-                            }
-                        });
-                    }
-                });
-
-                $("#cancel").click(function () {
-                    TableHelper.unCheckAll("#table");
-                });
-
-                $("#table").on("click", '.opt-edit', function () {
-                    $("#configId").attr('readonly', true);
-                    var id = $(this).attr("data-id");
-                    $.ajax({
-                        type: "get",
-                        url: "/admin/sysConf/get.action",
-                        data: { id: id },
-                        dataType: "json",
-                        success: function (json) {
-                            if (json.entity) {
-                                $("#configId").val(json.entity.configId);
-                                $("#configName").val(json.entity.configName);
-                                $("#configValue").val(json.entity.configValue);
-                                $("#nameSpace").val(json.entity.nameSpace);
-                                var status = json.entity.configStatus - 1;
-                                $("input:radio[name='configStatus']")[status].checked = true;
-                                // 打开编辑弹窗
-                                $("#sysConfModal").modal('show');
-                            } else {
-                                $("#tipMsg").text("获取菜单信息出错");
-                                $("#tipModal").modal('show');
-                            }
-                        }
-                    });
-                });
-
-                $("#save").click(function () {
-                    if ($("#sysConfForm").validationEngine('validate')) {
-                        $.ajax({
-                            type: "post",
-                            url: "/admin/sysConf/save.action",
-                            data: $('#sysConfForm').serialize(),
-                            dataType: "json",
-                            success: function (json) {
-                                if (json.success == 'true') {
-                                    $("#sysConfModal").modal('hide');
-                                    $("#tipMsg").text("保存成功");
-                                    $("#tipModal").modal('show');
-                                    getSysConfList().then(res => {
-                                        $('#table').bootstrapTable('load', res.rows);
-                                    });
-                                    TableHelper.doRefresh("#table");
-                                } else {
-                                    $("#tipMsg").text("保存失败");
-                                    $("#tipModal").modal('show');
-                                }
-                            }
-                        });
-                    }
-                });
-            });
-        }
+    // 表格选中处理
+    handleSelectionChange(val) {
+      val.forEach((res, i) => {
+        this.delArr[i] = res.configId;
+      });
     },
-    unmounted() {
-        $('#table').bootstrapTable('destroy');
-    }
+    // 单个删除按钮
+    delTible(row) {
+      this.delArr = [row.configId];
+      this.centerDialogVisible = true;
+    },
+    // 多个删除按钮
+    multipleDel(row) {
+      console.log(this.delArr);
+      this.centerDialogVisible = true;
+    },
+    // 删除函数
+    delFun() {
+      this.loading = true;
+      sysConfDel({ ids: JSON.stringify(this.delArr) }).then((res) => {
+        this.getData();
+      });
+      this.centerDialogVisible = false;
+    },
+    // 二次确认删除按钮
+    dialogClick() {
+      this.delFun();
+    },
+    // 分页导航
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    },
+    handlerChange() {
+      // console.log(this.fillist());
+    },
+  },
+  watch: {
+    valsen: {
+      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
+      handler(val) {
+        this.tableData = this.tableData3.filter((p) => {
+          return (
+            p.configId.indexOf(val) !== -1 ||
+            p.configName.indexOf(val) !== -1 ||
+            p.configValue.indexOf(val) !== -1 ||
+            p.nameSpace.indexOf(val) !== -1
+          );
+        });
+      },
+    },
+  },
 };
 </script>
 
-<style scoped>
-.table_line {
-    word-break: break-all;
+<style lang="less" scoped>
+.box {
+  padding-top: 20px;
+  background: #ecf0f5;
+  .userId {
+    margin-bottom: 20px;
+    span {
+      width: 60px;
+      margin-right: 30px;
+      display: inline-block;
+      text-align: right;
+    }
+  }
+  .but {
+    width: 100%;
+    margin-bottom: 20px;
+    height: 30px;
+    .butIn {
+      float: left;
+    }
+    .inputs {
+      float: right;
+      width: 15%;
+      margin-right: 20px;
+    }
+  }
 }
-
-.td_center {
-    vertical-align: middle !important;
-}
-
-.table_line {
-    word-break: break-all;
-}
-
-.td_center {
-    vertical-align: middle !important;
-}
-</style>
+</style>

vue.config.js

@@ -1,47 +1,51 @@
 const { defineConfig } = require('@vue/cli-service')
 var webpack = require('webpack')
-var AutoImport  = require('unplugin-auto-import/webpack')
+var AutoImport = require('unplugin-auto-import/webpack')
 var Components = require('unplugin-vue-components/webpack')
 var { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 module.exports = defineConfig({
-    transpileDependencies: true,
-    chainWebpack: config => {
-        config
-            .plugin('html')
-            .tap(args => {
-                args[0].title = 'PIKO管理后台'
-                return args
-            })
+  transpileDependencies: true,
+  chainWebpack: config => {
+    config
+      .plugin('html')
+      .tap(args => {
+        args[0].title = 'PIKO管理后台'
+        return args
+      })
+  },
+  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'windows.jQuery': 'jquery',
+        Popper: ['popper.js', 'default']
+      }),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+      new BundleAnalyzerPlugin({
+        openAnalyzer: false
+      })
+    ],
+  },
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
     },
-    configureWebpack: {
-        plugins: [
-            new webpack.ProvidePlugin({
-                $: 'jquery',
-                jQuery: 'jquery',
-                'windows.jQuery': 'jquery',
-                Popper: ['popper.js', 'default']
-            }),
-            AutoImport({
-                resolvers: [ElementPlusResolver()],
-              }),
-              Components({
-                resolvers: [ElementPlusResolver()],
-              }),
-        ],
-    },
-    devServer: {
-        headers: {
-            'Access-Control-Allow-Origin': '*',
-        },
-        proxy: {
-            '/': {
-                ws: false,
-                target: process.env.VUE_APP_API_BASE_URL,
-                changeOrigin: true,
-                pathRewrite: {
-                    '^/': ''
-                }
-            }
-        },
+    proxy: {
+      '/': {
+        ws: false,
+        target: process.env.VUE_APP_API_BASE_URL,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/': ''
+        }
+      }
     },
+  },
 })