From e3f49adba47498466684325b8a897de585738c55 Mon Sep 17 00:00:00 2001
From: shikeying <pxzsky@163.com>
Date: 星期一, 17 四月 2023 09:15:56 +0800
Subject: [PATCH] 参数配置功能，使用table组件
---
src/views/system/config/index.vue | 446 ++++++++++++++++++++-----------------------------------
1 files changed, 162 insertions(+), 284 deletions(-)
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index fcc7efd..d09a315 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,278 +1,184 @@
<template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="鍙傛暟鍚嶇О" prop="configName">
- <el-input
- v-model="queryParams.configName"
- placeholder="璇疯緭鍏ュ弬鏁板悕绉�"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="鍙傛暟閿悕" prop="configKey">
- <el-input
- v-model="queryParams.configKey"
- placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="绯荤粺鍐呯疆" prop="configType">
- <el-select v-model="queryParams.configType" placeholder="绯荤粺鍐呯疆" clearable>
- <el-option
- v-for="dict in dict.type.sys_yes_no"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
-<!-- <el-form-item label="鍒涘缓鏃堕棿">-->
-<!-- <el-date-picker-->
-<!-- v-model="dateRange"-->
-<!-- style="width: 240px"-->
-<!-- value-format="yyyy-MM-dd"-->
-<!-- type="daterange"-->
-<!-- range-separator="-"-->
-<!-- start-placeholder="寮�濮嬫棩鏈�"-->
-<!-- end-placeholder="缁撴潫鏃ユ湡"-->
-<!-- ></el-date-picker>-->
-<!-- </el-form-item>-->
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ <div class="app-main">
+ <div class="base-container">
+ <el-card shadow="never" class="box-card">
+ <!--鎼滅储鏉′欢-->
+ <div class="filter-container">
+ <el-form :inline="true" :model="filterFrom" size="small">
+ <el-form-item label="鍙傛暟鍚嶇О">
+ <el-input v-model="filterFrom.configName" placeholder="璇疯緭鍏�'鍙傛暟鍚嶇О'" clearable />
+ </el-form-item>
+ <el-form-item label="鍙傛暟鏍囪瘑">
+ <el-input v-model="filterFrom.configKey" placeholder="璇疯緭鍏�'鍙傛暟KEY'" clearable />
+ </el-form-item>
+<!-- <el-form-item label="鍙戣捣鏃堕棿">-->
+<!-- <el-date-picker v-model="filterFrom.startTime" type="date" placeholder="閫夋嫨寮�濮嬫棩鏈�" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 177px" />-->
+<!-- - <el-date-picker v-model="filterFrom.finishTime" style="width: 177px" type="date" placeholder="閫夋嫨缁撴潫鏃ユ湡" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />-->
+<!-- </el-form-item>-->
+ <el-form-item label="绯荤粺鍐呯疆">
+ <el-select v-model="filterFrom.configType" placeholder="绯荤粺鍐呯疆" clearable>
+ <el-option
+ v-for="dict in dict.type.sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <my-button-v2 site="filter" name="鎼滅储" @click="search(1)" />
+ <my-button-v2 site="filter" name="閲嶇疆" @click="reset()" />
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ <!--鍒楄〃-->
+ <my-table-v3 ref="myTable" :filter="filterFrom" :table="table" />
+ <!--娣诲姞/缂栬緫寮圭獥-->
+ <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show=false" @search="search" />
+ </div>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- v-hasPermi="['system:config:add']"
- >鏂板</el-button>
- </el-col>
-<!-- <el-col :span="1.5">-->
-<!-- <el-button-->
-<!-- type="success"-->
-<!-- plain-->
-<!-- icon="el-icon-edit"-->
-<!-- size="mini"-->
-<!-- :disabled="single"-->
-<!-- @click="handleUpdate"-->
-<!-- v-hasPermi="['system:config:edit']"-->
-<!-- >淇敼</el-button>-->
-<!-- </el-col>-->
-<!-- <el-col :span="1.5">-->
-<!-- <el-button-->
-<!-- type="danger"-->
-<!-- plain-->
-<!-- icon="el-icon-delete"-->
-<!-- size="mini"-->
-<!-- :disabled="multiple"-->
-<!-- @click="handleDelete"-->
-<!-- v-hasPermi="['system:config:remove']"-->
-<!-- >鍒犻櫎</el-button>-->
-<!-- </el-col>-->
- <el-col :span="1.5">
- <el-button
- type="warning"
- plain
- icon="el-icon-download"
- size="mini"
- @click="handleExport"
- v-hasPermi="['system:config:export']"
- >瀵煎嚭</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="el-icon-refresh"
- size="mini"
- @click="handleRefreshCache"
- v-hasPermi="['system:config:remove']"
- >鍒锋柊缂撳瓨</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
-<!-- <el-table-column label="鍙傛暟涓婚敭" align="center" prop="configId" />-->
- <el-table-column label="KEY" align="left" prop="config_key" :show-overflow-tooltip="true" />
- <el-table-column label="VALUE" align="left" prop="config_value" />
- <el-table-column label="鎻忚堪" align="left" prop="config_name" :show-overflow-tooltip="true" />
- <el-table-column label="鍐呯疆" align="center" prop="config_type">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.config_type"/>
- </template>
- </el-table-column>
- <el-table-column label="澶囨敞" align="left" prop="remark" :show-overflow-tooltip="true" />
- <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="create_time" width="180">
- <template slot-scope="scope">
- <span>{{ parseTime(scope.row.create_time) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
- v-hasPermi="['system:config:edit']"
- >淇敼</el-button>
-<!-- <el-button-->
-<!-- size="mini"-->
-<!-- type="text"-->
-<!-- icon="el-icon-delete"-->
-<!-- @click="handleDelete(scope.row)"-->
-<!-- v-hasPermi="['system:config:remove']"-->
-<!-- >鍒犻櫎</el-button>-->
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 -->
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="鍙傛暟鍚嶇О" prop="config_name">
- <el-input v-model="form.config_name" placeholder="璇疯緭鍏ュ弬鏁板悕绉�" />
- </el-form-item>
- <el-form-item label="KEY" prop="config_key">
- <el-input v-model="form.config_key" placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" />
- </el-form-item>
- <el-form-item label="VALUE" prop="config_value">
- <el-input v-model="form.config_value" placeholder="璇疯緭鍏ュ弬鏁伴敭鍊�" />
- </el-form-item>
- <el-form-item label="绯荤粺鍐呯疆" prop="config_type">
- <el-radio-group v-model="form.config_type">
- <el-radio
- v-for="dict in dict.type.sys_yes_no"
- :key="dict.value"
- :label="dict.value"
- >{{dict.label}}</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" />
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
- <el-button @click="cancel">鍙� 娑�</el-button>
- </div>
- </el-dialog>
</div>
</template>
<script>
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+ import {listConfig, refreshCache} from "@/api/system/config";
+ import myTableV3 from '@/views/components/myTableV3';
+ import myButtonV2 from '@/views/components/myButtonV2'
+ import edit from './edit'
-export default {
+ export default {
+ components: {myTableV3, myButtonV2, edit},
name: "Config",
dicts: ['sys_yes_no'],
data() {
return {
- // 閬僵灞�
- loading: true,
// 閫変腑鏁扮粍
ids: [],
// 闈炲崟涓鐢�
single: true,
// 闈炲涓鐢�
multiple: true,
- // 鏄剧ず鎼滅储鏉′欢
- showSearch: true,
- // 鎬绘潯鏁�
- total: 0,
- // 鍙傛暟琛ㄦ牸鏁版嵁
- configList: [],
- // 寮瑰嚭灞傛爣棰�
- title: "",
- // 鏄惁鏄剧ず寮瑰嚭灞�
- open: false,
// 鏃ユ湡鑼冨洿
dateRange: [],
- // 鏌ヨ鍙傛暟
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- configName: undefined,
- configKey: undefined,
- configType: undefined
- },
// 琛ㄥ崟鍙傛暟
- form: {},
+ // form: {},
// 琛ㄥ崟鏍￠獙
- rules: {
- config_name: [
- { required: true, message: "鍙傛暟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
+
+ /** 鎼滅储鏉′欢*/
+ filterFrom: {
+ configName: null,
+ configKey: null,
+ configType: null
+ },
+
+ table: {
+ showIndex: true, // 鏄惁鏄剧ず搴忓彿
+ expand: false, // 鏄惁鏄剧ず璇︽儏鏁版嵁
+ checkBox: false, // 鏄惁鏄剧ず澶嶉�夋
+ url: globalConf.baseUrl + '/system/config/list', // 璇锋眰鍦板潃
+ // 宸ュ叿鏉�
+ tools: {
+ columnsCtrl: {// 鍒楁帶鍒舵寜閽�
+ show: true
+ },
+ generalExport: {// 閫氱敤瀵煎嚭鎸夐挳
+ show: false
+ },
+ custom: [ // 鑷畾涔夊伐鍏锋潯鎸夐挳
+ {
+ name: '鍒锋柊缂撳瓨',
+ checkPermission: 'system:config:remove',
+ myType: 'danger',
+ mySize: 'mini',
+ click: ()=> {
+ this.handleRefreshCache();
+ }
+ },
+ {
+ name: '瀵煎嚭鍙傛暟',
+ click: ()=> {
+
+ }
+ }
+ ]
+ },
+ columns: [
+ { title: 'KEY', field: 'config_key', align: 'left', width: 190 },
+ { title: 'VALUE', field: 'config_value', align: 'left', width: 200 },
+ { title: '鎻忚堪', field: 'config_name', align: 'left', width: 240 },
+ { title: '鍐呯疆', field: 'config_type', align: 'left', width: 60, formatter: row => {
+ let title = '';
+ switch (row.config_type) {
+ case 'Y':
+ title = '鏄�'
+ break
+ case 'N':
+ title = '鍚�'
+ break
+ }
+ return { value: title, type: 'primary' }
+ }
+ },
+ { title: '鍒涘缓鏃堕棿', field: 'create_time', align: 'left', width: 170 },
+ { title: '澶囨敞', field: 'remark', align: 'left', width: 260 }
],
- config_key: [
- { required: true, message: "鍙傛暟閿悕涓嶈兘涓虹┖", trigger: "blur" }
- ],
- config_value: [
- { required: true, message: "鍙傛暟閿�间笉鑳戒负绌�", trigger: "blur" }
- ]
+ // 鎿嶄綔淇℃伅
+ operation: {
+ show: true, // 鏄剧ず鎿嶄綔鍒�
+ width: '100', // 鍒楀
+ attr: [
+ {
+ title: '缂栬緫',
+ checkPermission: 'system:config:edit',
+ events: row => {
+ this.handleUpdate(row)
+ }
+ }
+ ]
+ },
+ paging: {
+ show: true, // 鏄剧ず鍒嗛〉
+ // 鍒嗛〉淇℃伅
+ page: {
+ small: false,
+ pageNum: 1,
+ pageSize: platformPageSize,
+ total: 0
+ }
+ }
+ },
+
+ // 娣诲姞&缂栬緫绐楀彛
+ editSetting: {
+ id: null,
+ title: '',
+ show: false
}
};
},
+
created() {
- this.getList();
+ // this.getList();
+ // console.log(dict);
},
methods: {
- /** 鏌ヨ鍙傛暟鍒楄〃 */
- getList() {
- this.loading = true;
- listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
- this.configList = response.data;
- this.total = response.total;
- this.loading = false;
- }
- );
- },
- // 鍙栨秷鎸夐挳
- cancel() {
- this.open = false;
- this.reset();
+ // 鏌ヨtable鍒楄〃
+ search(pageNum) {
+ if (pageNum != undefined) {
+ this.$refs.myTable.search({ pageNum: pageNum })
+ } else {
+ this.$refs.myTable.search()
+ }
},
// 琛ㄥ崟閲嶇疆
reset() {
- this.form = {
- config_id: undefined,
- config_name: undefined,
- config_key: undefined,
- config_value: undefined,
- config_type: "Y",
- remark: undefined
- };
- this.resetForm("form");
- },
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 閲嶇疆鎸夐挳鎿嶄綔 */
- resetQuery() {
- this.dateRange = [];
- this.resetForm("queryForm");
- this.handleQuery();
+ this.filterFrom = {
+ configName: null,
+ configKey: null,
+ configType: null
+ }
+ this.search(1)
},
/** 鏂板鎸夐挳鎿嶄綔 */
handleAdd() {
@@ -288,43 +194,9 @@
},
/** 淇敼鎸夐挳鎿嶄綔 */
handleUpdate(row) {
- this.reset();
- const configId = row.config_id || this.ids
- getConfig(configId).then(response => {
- this.form = response.data;
- this.open = true;
- this.title = "淇敼鍙傛暟";
- });
- },
- /** 鎻愪氦鎸夐挳 */
- submitForm: function() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.config_id != undefined) {
- updateConfig(this.form).then(response => {
- this.$modal.msgSuccess("淇敼鎴愬姛");
- this.open = false;
- this.getList();
- });
- } else {
- addConfig(this.form).then(response => {
- this.$modal.msgSuccess("鏂板鎴愬姛");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 鍒犻櫎鎸夐挳鎿嶄綔 */
- handleDelete(row) {
- const configIds = row.config_id || this.ids;
- this.$modal.confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + configIds + '"鐨勬暟鎹」锛�').then(function() {
- return delConfig(configIds);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- }).catch(() => {});
+ this.editSetting.id = row.config_id
+ this.editSetting.title = "缂栬緫鍙傛暟"
+ this.editSetting.show = true
},
/** 瀵煎嚭鎸夐挳鎿嶄綔 */
handleExport() {
@@ -334,9 +206,15 @@
},
/** 鍒锋柊缂撳瓨鎸夐挳鎿嶄綔 */
handleRefreshCache() {
- refreshCache().then(() => {
- this.$modal.msgSuccess("鍒锋柊鎴愬姛");
- });
+ this.$confirm('纭鍒锋柊缂撳瓨锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(()=> {
+ refreshCache().then(() => {
+ this.$modal.msgSuccess("鍒锋柊鎴愬姛");
+ });
+ })
}
}
};
--
Gitblit v1.9.1