添加系统参数配置功能页面

src/modules/basic/routes/routes.js

@@ -11,6 +11,7 @@ import privilege_group_list from "../view/privilege_group_list.vue";
 import privilege_tree from "../view/privilege_tree.vue";
 import role_privilege_settings from "../view/role_privilege_settings.vue";
 import resource_list from "../view/resource_list.vue";
+import sys_prop_list from "../view/sys_prop_list";
 
 export default [
   {
@@ -75,6 +76,11 @@ export default [
         path: "resource_list", //资源列表
         meta: { privilegeCodes: "index_resource_list" },
         component: resource_list
+      },
+      {
+        path: "sys_prop_list", //参数配置列表
+        meta: { privilegeCodes: "sys_pop_list" },
+        component: sys_prop_list
       }
     ]
   }

src/modules/basic/view/sys_prop_list.vue

@@ -0,0 +1,486 @@
+<template>
+  <section class="content">
+    <div
+      class="box-body"
+      v-loading.fullscreen="loading"
+      element-loading-text="请稍后..."
+    >
+      <el-form :inline="true" :model="formSearch" ref="primaryForm">
+        <el-row>
+          <el-form-item label="名称">
+            <el-input
+              class="input_width_lg"
+              placeholder="请输入参数名称"
+              v-model="formSearch.propKey"
+            />
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input
+              class="input_width_lg"
+              placeholder="请输入参数描述"
+              v-model="formSearch.description"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="类型">
+            <el-select
+              class="input"
+              :remote-method="getBasicDataTypes"
+              @focus="e => getBasicDataTypes(e.target.value)"
+              :loading="basicDataTypeLoading"
+              remote
+              filterable
+              clearable
+              v-model="formSearch.basicDataTypeCode"
+              placeholder="请选择参数类型"
+            >
+              <el-option
+                v-for="item in basicDataTypeList4Search"
+                :label="item.name"
+                :value="item.code"
+                :key="item.code"
+              />
+            </el-select>
+          </el-form-item>-->
+          <el-form-item label="参数值">
+            <el-input
+              class="input_width_lg"
+              placeholder="请输入参数值"
+              v-model="formSearch.propValue"
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleSearchBtn"
+              >查询</el-button
+            >
+            <el-button
+              size="small"
+              @click="resetPrimaryForm"
+              icon="el-icon-refresh"
+              >重置</el-button
+            >
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-plus"
+              @click="insert"
+              >新增</el-button
+            >
+          </el-form-item>
+        </el-row>
+      </el-form>
+
+      <div class="block-seperator"></div>
+
+      <span>操作：</span>
+      <el-button
+        size="small"
+        type="danger"
+        @click="deleteIds"
+        :disabled="noBatchSelected"
+        icon="el-icon-delete"
+        >删除</el-button
+      >
+
+      <div style="width: 100%;margin-bottom: 10px;"></div>
+
+      <!-- 新增或修改弹出框 -->
+      <el-dialog
+        title="参数信息"
+        width="450px"
+        :visible.sync="sysPropDialog"
+        @close="dialogBeforeClose"
+      >
+        <el-form
+          :inline="true"
+          inline-message
+          :model="sysPropForm"
+          ref="sysPropForm"
+          :rules="rules"
+          label-position="right"
+          label-width="90px"
+        >
+          <el-form-item label="名称" prop="propKey">
+            <el-input
+              :disabled="'modify' == operateType"
+              class="pull_length"
+              v-model="sysPropForm.propKey"
+              auto-complete="off"
+              placeholder="请输入参数名称"
+              maxlength="100"
+            />
+          </el-form-item>
+          <el-form-item label="类型" prop="propValueType">
+            <el-select
+              class="pull_length"
+              :remote-method="getBasicDataTypes"
+              @focus="e => getBasicDataTypes(e.target.value)"
+              :loading="basicDataTypeLoading"
+              remote
+              filterable
+              clearable
+              v-model="sysPropForm.propValueType"
+              placeholder="请选择参数类型"
+            >
+              <el-option
+                v-for="item in basicDataTypeList4Search"
+                :label="item.name"
+                :value="item.code"
+                :key="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="参数值" prop="propValue">
+            <el-input
+              class="pull_length"
+              v-model="sysPropForm.propValue"
+              auto-complete="off"
+              placeholder="请输入参数值"
+              maxlength="100"
+            />
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              class="pull_length"
+              v-model="sysPropForm.description"
+              auto-complete="off"
+              placeholder="请输入参数描述"
+              maxlength="100"
+            />
+          </el-form-item>
+          <el-row class="pull_center">
+            <el-button type="primary" @click="submitForm('sysPropForm')"
+              >保 存</el-button
+            >
+            <el-button @click="close">取 消</el-button>
+          </el-row>
+        </el-form>
+      </el-dialog>
+
+      <!-- 页面列表 -->
+      <el-table
+        :data="tableData"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="35"></el-table-column>
+        <el-table-column prop="propKey" label="名称"></el-table-column>
+        <el-table-column
+          prop="propValueType"
+          label="类型"
+          width="100"
+        ></el-table-column>
+        <el-table-column prop="propValue" label="参数值"></el-table-column>
+        <el-table-column prop="description" label="描述"></el-table-column>
+        <el-table-column
+          sortable
+          prop="updateTime"
+          label="更新时间"
+          width="170"
+        ></el-table-column>
+        <el-table-column label="操作" width="300">
+          <template slot-scope="scope">
+            <div>
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit"
+                @click="edit(scope.row)"
+                plain
+                >编辑</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteId(scope.row)"
+                >删除</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page pull-right">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { CORE_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "sys_prop_list",
+  data() {
+    return {
+      courseLoading: false,
+      formSearch: {
+        propKey: "",
+        propValueType: "",
+        propValue: "",
+        description: ""
+      },
+      sysPropForm: {
+        propKey: "",
+        propValueType: "",
+        propValue: "",
+        description: ""
+      },
+      sysPropDialog: false,
+      loading: false,
+      basicDataTypeLoading: false,
+      operateType: "add",
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10,
+      basicDataTypeList4Search: [],
+      multipleSelection: [],
+      rules: {
+        propKey: [
+          { required: true, message: "请输入参数名称", trigger: "blur" }
+        ],
+        propValueType: [
+          { required: true, message: "请选择参数类型", trigger: "blur" }
+        ],
+        propValue: [
+          { required: true, message: "请输入参数值", trigger: "blur" }
+        ],
+        description: [
+          { required: true, message: "请输入参数描述", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user
+    }),
+    noBatchSelected() {
+      return this.multipleSelection.length === 0;
+    }
+  },
+  methods: {
+    dialogBeforeClose() {
+      this.$refs.sysPropForm.clearValidate();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchForm();
+    },
+    resetPrimaryForm() {
+      this.formSearch = {
+        propKey: "",
+        propValueType: "",
+        propValue: "",
+        description: ""
+      };
+      this.$refs.primaryForm.resetFields();
+    },
+    getBasicDataTypes(query) {
+      this.basicDataTypeLoading = true;
+      this.$httpWithMsg
+        .get(CORE_API + "/systemProperty/getBasicDataTypes?name=" + query)
+        .then(response => {
+          this.basicDataTypeList4Search = response.data;
+          this.basicDataTypeLoading = false;
+        });
+    },
+    handleSearchBtn() {
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    //查询
+    searchForm() {
+      let searchLock = true;
+      setTimeout(() => {
+        if (searchLock) {
+          this.loading = true;
+        }
+      }, 500);
+      var param = new URLSearchParams(this.formSearch);
+      var url =
+        CORE_API +
+        "/systemProperty/page/" +
+        (this.currentPage - 1) +
+        "/" +
+        this.pageSize +
+        "?" +
+        param;
+      this.$httpWithMsg
+        .get(url)
+        .then(response => {
+          console.log("response :", response);
+          this.tableData = response.data.content;
+          this.total = response.data.totalElements;
+        })
+        .finally(() => {
+          searchLock = false;
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    handleCourseCurrentChange(val) {
+      this.currentCoursePage = val;
+      this.searchCoursePage();
+    },
+    //全选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //保存
+    submitForm(formData) {
+      this.$refs[formData].validate(valid => {
+        if (valid) {
+          var url = CORE_API + "/systemProperty";
+          //修改
+          if ("modify" == this.operateType) {
+            this.$httpWithMsg.put(url, this.sysPropForm).then(
+              () => {
+                this.$notify({
+                  type: "success",
+                  message: "修改成功！"
+                });
+                this.searchForm();
+                this.sysPropDialog = false;
+              },
+              () => {
+                this.searchForm();
+                this.sysPropDialog = false;
+              }
+            );
+          }
+          //新增
+          else {
+            this.$httpWithMsg.post(url, this.sysPropForm).then(
+              () => {
+                this.$notify({
+                  type: "success",
+                  message: "新增成功！"
+                });
+                this.sysPropDialog = false;
+                this.searchForm();
+              },
+              () => {
+                this.sysPropDialog = false;
+                return this.searchForm();
+              }
+            );
+          }
+        } else {
+          console.log("error submit!");
+          return false;
+        }
+      });
+    },
+
+    //重置
+    resetForm(formData) {
+      this.$refs[formData].resetFields();
+    },
+    close() {
+      this.sysPropDialog = false;
+    },
+    //新增
+    insert() {
+      this.operateType = "add";
+      this.sysPropForm.propKey = "";
+      this.sysPropForm.propValueType = "";
+      this.sysPropForm.propValue = "";
+      this.sysPropForm.description = "";
+
+      this.sysPropDialog = true;
+    },
+    //修改
+    edit(row) {
+      this.operateType = "modify";
+      this.sysPropForm = Object.assign({}, row);
+
+      this.sysPropDialog = true;
+    },
+    //删除
+    deleteId(row) {
+      this.$confirm("是否删除该条配置信息？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error"
+      }).then(() => {
+        var url = CORE_API + "/systemProperty/" + row.propKey;
+        this.$httpWithMsg.delete(url).then(() => {
+          this.$notify({
+            type: "success",
+            message: "删除成功！"
+          });
+          this.searchForm();
+        });
+      });
+    },
+    //删除多条信息
+    deleteIds() {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          type: "warning",
+          message: "请选择要删除的配置"
+        });
+      } else {
+        this.$confirm("是否删除这些配置信息？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "error"
+        }).then(() => {
+          var ids = [];
+          for (var i = 0; i < this.multipleSelection.length; i++) {
+            ids.push(this.multipleSelection[i].propKey);
+          }
+          var url = CORE_API + "/systemProperty/" + ids;
+          this.$httpWithMsg.delete(url).then(() => {
+            this.$notify({
+              type: "success",
+              message: "删除成功！"
+            });
+            this.searchForm();
+          });
+        });
+      }
+    }
+  },
+
+  //初始化查询
+  created() {
+    this.searchForm();
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+
+.input_width_lg {
+  width: 180px;
+}
+.pull_center {
+  margin-left: 120px;
+}
+.pull_length {
+  width: 200px;
+}
+</style>