转赠身份设置后台管理

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",
@@ -25,7 +26,8 @@
         "sass": "^1.67.0",
         "sass-loader": "^13.3.2",
         "vue-router": "^4.0.3",
-        "vuex": "^4.0.0"
+        "vuex": "^4.0.0",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -3716,6 +3718,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/admin-lte": {
       "version": "2.3.2",
       "resolved": "https://registry.npmmirror.com/admin-lte/-/admin-lte-2.3.2.tgz",
@@ -4439,6 +4449,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
@@ -4691,6 +4713,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
@@ -4961,6 +4991,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -6778,6 +6819,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.6",
       "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.6.tgz",
@@ -11660,6 +11709,17 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -13273,6 +13333,22 @@
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -13339,6 +13415,26 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -8,6 +8,7 @@
     "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",
@@ -25,7 +26,8 @@
     "sass": "^1.67.0",
     "sass-loader": "^13.3.2",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

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/api/transferIdentitySet/transferIdentitySet.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+// 获取列表
+export const userPage = query => {
+    return request({
+        url: '/admin/give/user/page',
+        method: 'get',
+        params: query
+    });
+};
+// 新增
+export const userSave = query => {
+    return request({
+        url: '/admin/give/user/save',
+        method: 'post',
+        params: query
+    });
+};
+// 删除
+export const batchDel = query => {
+    return request({
+        url: '/admin/give/user/batchDel',
+        method: 'get',
+        params: query
+    });
+};

src/components/maintainer/index.vue

@@ -105,6 +105,7 @@
   
 <script>
 import store from '@/store';
+import { getStore } from '@/utils/store';
 import loading from '@/assets/images/loading.gif';
 
 export default {
@@ -130,10 +131,17 @@ export default {
     },
     methods: {
         getMenu() {
-            store.dispatch('getMenu').then(res => {
-                this.parentMenus = res.parents;
-                this.childMenus = res.childs;
-            });
+            let parentMenus = getStore({ name: 'parent_menus' });
+            let childMenus = getStore({ name: 'child_menus' });
+            if (parentMenus && childMenus && parentMenus.length > 0 && childMenus.length > 0) {
+                this.parentMenus = parentMenus;
+                this.childMenus = childMenus;
+            } else {
+                store.dispatch('getMenu').then(res => {
+                    this.parentMenus = res.parents;
+                    this.childMenus = res.childs;
+                });
+            }
         },
         getChilds(parentId) {
             return this.childMenus.filter(v => v.parentid == parentId);

src/css/public.css

@@ -2,39 +2,69 @@
 /*鼠标点击后移开，恢复本身样式*/
 .primary,
 .primary:focus:not(.primary:hover) {
-  color: white;
-  background: #409eff;
-}
-/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
-/* 更改背景和字體顏色 */
-.primary:focus, .primary:hover{
     color: white;
     background: #409eff;
 }
+
+/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
+/* 更改背景和字體顏色 */
+.primary:focus,
+.primary:hover {
+    color: white;
+    background: #409eff;
+}
+
 /*鼠标按下，没有抬起*/
 /* 更改邊框顏色 */
 .primary:active {
-  color: white;
-  background: #337ecc;
+    color: white;
+    background: #337ecc;
 }
 
 
 /*鼠标点击后移开，恢复本身样式*/
 .danger,
 .danger:focus:not(.danger:hover) {
-  color: white;
-  background: #f56c6c;
-}
-/* 危险的按钮样式 */
-/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
-/* 更改背景和字體顏色 */
-.danger:focus, .danger:hover{
     color: white;
     background: #f56c6c;
 }
+
+/* 危险的按钮样式 */
+/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
+/* 更改背景和字體顏色 */
+.danger:focus,
+.danger:hover {
+    color: white;
+    background: #f56c6c;
+}
+
 /*鼠标按下，没有抬起*/
 /* 更改邊框顏色 */
 .danger:active {
-  color: white;
-  background: #c45656;
+    color: white;
+    background: #c45656;
+}
+
+
+/*鼠标点击后移开，恢复本身样式*/
+.success,
+.success:focus:not(.success:hover) {
+    color: white;
+    background: #67c23a;
+}
+
+/* 危险的按钮样式 */
+/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
+/* 更改背景和字體顏色 */
+.success:focus,
+.success:hover {
+    color: white;
+    background: #b3e19d;
+}
+
+/*鼠标按下，没有抬起*/
+/* 更改邊框顏色 */
+.danger:active {
+    color: white;
+    background: #529b2e;
 }

src/utils/excelUtils.js

@@ -0,0 +1,26 @@
+import * as XLSX from 'xlsx';
+const exportToExcel = (row, fileName, list, sheetNames) => {//调用方式 exportToExcel(接口返回的表格列表, "文件名", 定义的表头和字段[{ piko号: "erbanNo" }{ piko号: "erbanNo" }],, ["Sheet1"]);
+    var data = [];
+    var headerTitle = [];
+    row.forEach((res, i) => {
+        var arr = [];
+        for (let index = 0; index < list.length; index++) {
+            for (let key in list[index]) {
+                headerTitle[index] = key;
+                arr[index] = res[list[index][key]];
+            }
+        }
+        data[i] = arr;
+    });
+    let smallArr = Array.from(data);
+    let bigArr = [];
+    smallArr = smallArr.map((item) => {
+        bigArr.push(Object.values(item));
+    });
+    const ws = XLSX.utils.aoa_to_sheet([...[headerTitle], ...bigArr]); // tableName为表头，tableData为数据
+    const wb = XLSX.utils.book_new();
+    // 将工作表放入工作簿中
+    XLSX.utils.book_append_sheet(wb, ws, sheetNames);
+    XLSX.writeFile(wb, fileName + ".xlsx");
+}
+export default exportToExcel

src/views/batch/FlowDataBatchSearchView.vue

@@ -438,6 +438,11 @@ export default {
                         let id = $('#id').val();
                         let startTime = $('#startTime').val();
                         let endTime = $('#endTime').val(); 
+                        if (getDate(endTime).getMonth() != getDate(startTime).getMonth()) {
+                            $("#tipMsg").text("归因场次不允许跨月.");
+                            $("#tipModal").modal('show'); 
+                            return;
+                        }
                         if ((getDate(endTime).getTime() - getDate(startTime).getTime()) > (36 * 60 * 60 * 1000)) {
                             $("#tipMsg").text("时间间隔不能超过36h.");
                             $("#tipModal").modal('show');

src/views/flowteam/FlowTeamSettlementView.vue

@@ -206,8 +206,11 @@ export default {
                         { field: 'totalChargeAmount', title: '累计充值(美元)', align: 'center', width: '5%', },
                         { field: 'totalChargeUserNum', title: '累计充值人数', align: 'center', width: '5%', },
                         { field: 'totalChargeNum', title: '累计充值次数', align: 'center', width: '5%', },
-                        { field: 'totalGiveNum', title: '累计收到转赠次数', align: 'center', width: '5%', },
-                        { field: 'totalGiveAmount', title: '累计收到转赠金额', align: 'center', width: '5%', },
+                        { field: 'newUserGiveAmount', title: '当月新增转赠', align: 'center', width: '10%', valign: 'center' },
+                        { field: 'totalGiveAmount', title: '累计转赠(美元)', align: 'center', width: '5%', },
+                        { field: 'totalGiveUserNum', title: '累计转赠人数', align: 'center', width: '5%', },
+                        { field: 'totalGiveNum', title: '累计转赠次数', align: 'center', width: '5%', },
+                        
                         {
                             field: 'month',
                             title: '操作',

src/views/flowteam/FlowTeamStatisticView.vue

@@ -477,7 +477,7 @@ export default {
                     groupData.tchargeMoney = tchargeMoney;
                     groupData.tsendGiftMony = tsendGiftMony;
                     groupData.tgiveCount = tgiveCount; 
-                    groupData.tgiveMoney = tgiveMoney;
+                    groupData.tgiveMoney = tgiveMoney.toFixed(0);
                     groupData.tarpu = (tchargeMoney / tnewUserCount).toFixed(2);
                     groupDataList.push(groupData);
                 }

src/views/recharge/TransferIdentitySet.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="box">
+    <!-- 查询条件 -->
+    <div class="search">
+      <div class="searchLeft">
+        <span>Piko号:</span>
+        <el-input
+          v-model="userId"
+          size="default"
+          placeholder="请输入要查询的Piko号"
+          class="input"
+        ></el-input>
+      </div>
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+      <el-button type="primary" class="primary butIn" @click="getData()">查询</el-button>
+      <el-button type="primary" class="primary butIn" @click="dialogTableVisible = true"
+        >新增</el-button
+      >
+      <el-button type="success" class="success butIn" @click="exportExcelFun()"
+        >导出</el-button
+      >
+      <el-button type="danger" class="danger butIn" @click="delsAll()"
+        >批量删除</el-button
+      >
+    </div>
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      ref="multipleTable"
+      :data="tableData"
+      tooltip-effect="dark"
+      style="margin-top: 10px; width: 100%"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection"> </el-table-column>
+      <el-table-column align="center" prop="erbanNo" label="piko号"> </el-table-column>
+      <el-table-column align="center" prop="nick" label="昵称"> </el-table-column>
+      <el-table-column align="center" prop="hallName" label="所属公会"> </el-table-column>
+      <el-table-column align="center" prop="diamonds" label="当前账户钻石余额">
+      </el-table-column>
+      <el-table-column align="center" prop="createTime" label="权限生效时间">
+      </el-table-column>
+      <el-table-column align="center" prop="operator" label="操作人"> </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template v-slot="scope">
+          <el-button @click="del(scope.row)" type="danger" class="danger">删除</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"
+    />
+  </div>
+  <!-- 二次确认解除风险弹窗 -->
+  <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" class="primary" @click="sureDel()">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <!-- 弹窗 -->
+  <el-dialog v-model="dialogTableVisible" :title="dialogTableVisibleTitle" width="500px">
+    <div class="userId" style="margin-bottom: 25px">
+      <span style="display: inline-block; margin-right: 20px">piko号</span>
+      <el-input
+        v-model="addUserId"
+        style="width: 75%"
+        class="input"
+        placeholder="多个ID用英文 “,” 隔开"
+      ></el-input>
+    </div>
+    <el-button
+      class="dialogTableVisibleBut"
+      type="info"
+      @click="dialogTableVisible = false"
+    >
+      关闭
+    </el-button>
+    <el-button class="dialogTableVisibleBut primary" type="primary" @click="add()">
+      保存
+    </el-button>
+  </el-dialog>
+</template>
+
+<script>
+import exportToExcel from "@/utils/excelUtils";
+import {
+  userPage,
+  userSave,
+  batchDel,
+} from "@/api/transferIdentitySet/transferIdentitySet";
+import { ElMessage } from "element-plus";
+import "element-plus/dist/index.css";
+export default {
+  name: "TransferIdentitySet",
+  data() {
+    return {
+      userId: "", //查询条件
+      //分页
+      total: 0,
+      currentPage: 1,
+      pageSize: 50,
+      //表格
+      loading: false,
+      tableData: [],
+      centerDialogVisible: false, //二次确认删除
+      //新增
+      dialogTableVisible: false,
+      dialogTableVisibleTitle: "转增身份配置",
+      addUserId: "",
+      publicVal: null,
+      delIdArr: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // 初始化数据
+    getData() {
+      this.loading = true;
+      userPage({
+        erbanNo: this.userId,
+        page: this.currentPage,
+        pageSize: this.pageSize,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.records;
+        this.loading = false;
+      });
+    },
+    // 新增
+    add() {
+      userSave({
+        erBanNoStr: this.addUserId,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.addUserId = "";
+          this.getData();
+          ElMessage({
+            showClose: true,
+            message: "添加成功",
+            type: "success",
+          });
+          this.dialogTableVisible = false;
+        } else {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "error",
+          });
+          this.dialogTableVisible = false;
+        }
+      });
+    },
+    // 表格删除按钮
+    del(row) {
+      this.publicVal = row.id;
+      this.centerDialogVisible = true;
+    },
+    // 确认删除
+    sureDel() {
+      batchDel({ idStr: this.publicVal }).then((res) => {
+        if (res.code == 200) {
+          this.addUserId = "";
+          this.getData();
+          ElMessage({
+            showClose: true,
+            message: "删除成功",
+            type: "success",
+          });
+          this.centerDialogVisible = false;
+        } else {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "error",
+          });
+          this.centerDialogVisible = false;
+        }
+      });
+    },
+    // 表格批量选中处理
+    handleSelectionChange(val) {
+      this.delIdArr = val;
+    },
+    // 批量删除
+    delsAll() {
+      var str = "";
+      this.delIdArr.forEach((res) => {
+        str += `${res.id},`;
+      });
+      this.publicVal = str;
+      this.centerDialogVisible = true;
+    },
+    // 导出
+    exportExcelFun() {
+      userPage({
+        erbanNo: this.userId,
+        page: this.currentPage,
+        pageSize: 100000000,
+      }).then((res) => {
+        var list = [
+          { piko号: "erbanNo" },
+          { 昵称: "nick" },
+          { 所属公会: "hallName" },
+          { 当前钻石账户余额: "diamonds" },
+          { 权限生效时间: "createTime" },
+          { 操作人: "operator" },
+        ];
+        exportToExcel(res.data.records, "转赠身份设置", list, ["Sheet1"]);
+      });
+    },
+    // 分页导航
+    handleSizeChange(val) {
+      this.getData();
+    },
+    handleCurrentChange(val) {
+      this.getData();
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+  padding: 20px;
+  background: #ecf0f5;
+  .search {
+    width: 100%;
+    height: 41px;
+    .searchLeft,
+    .searchRight {
+      width: 20%;
+      float: left;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 75%;
+      }
+    }
+  }
+  .but {
+    margin-top: 10px;
+  }
+}
+</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>