From c51d205a42585e46c569b36d9bb8da5c1b39815e Mon Sep 17 00:00:00 2001
From: Dragon <13925835632@139.com>
Date: Wed, 25 Oct 2023 17:55:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=85=8D=E7=BD=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            |   1 +
 package.json                                 |   1 +
 src/api/sysconfAdminView/sysconfAdminView.js |  28 +
 src/views/system/SysconfAdminView.vue        | 672 +++++++++----------
 4 files changed, 366 insertions(+), 336 deletions(-)
 create mode 100644 src/api/sysconfAdminView/sysconfAdminView.js

diff --git a/package-lock.json b/package-lock.json
index 6ffb14d..60166f5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 05274ff..67a5418 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/sysconfAdminView/sysconfAdminView.js b/src/api/sysconfAdminView/sysconfAdminView.js
new file mode 100644
index 0000000..c887a66
--- /dev/null
+++ b/src/api/sysconfAdminView/sysconfAdminView.js
@@ -0,0 +1,28 @@
+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',
+        method: 'post',
+        params: query
+    });
+};
+// 删除
+export const sysConfDel = query => {
+    return request({
+        url: '/admin/sysConf/del',
+        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
+        method: 'post',
+        data: query
+    });
+};
diff --git a/src/views/system/SysconfAdminView.vue b/src/views/system/SysconfAdminView.vue
index 3a37d6d..62d0e39 100644
--- a/src/views/system/SysconfAdminView.vue
+++ b/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>
\ No newline at end of file
+</style>