|
|
@@ -5,28 +5,29 @@
|
|
|
<el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
|
|
|
<el-button @click="editRow()" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
|
|
|
<el-button
|
|
|
- @click="download"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-download"
|
|
|
- :loading="downloading"
|
|
|
- class="filter-item"
|
|
|
- >导出EXCEL
|
|
|
+ @click="download"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-download"
|
|
|
+ :loading="downloading"
|
|
|
+ class="filter-item"
|
|
|
+ >导出EXCEL
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<el-table
|
|
|
- :data="tableData"
|
|
|
- row-key="id"
|
|
|
- ref="table"
|
|
|
- header-row-class-name="table-header-row"
|
|
|
- header-cell-class-name="table-header-cell"
|
|
|
- row-class-name="table-row"
|
|
|
- cell-class-name="table-cell"
|
|
|
- :height="tableHeight"
|
|
|
+ :data="tableData"
|
|
|
+ row-key="id"
|
|
|
+ ref="table"
|
|
|
+ header-row-class-name="table-header-row"
|
|
|
+ header-cell-class-name="table-header-cell"
|
|
|
+ row-class-name="table-row"
|
|
|
+ cell-class-name="table-cell"
|
|
|
+ :height="tableHeight"
|
|
|
>
|
|
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
|
|
<el-table-column prop="desc" label="描述"> </el-table-column>
|
|
|
- <el-table-column prop="value" label="值"> </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" fixed="right" min-width="150">
|
|
|
+ <el-table-column prop="type" label="类型" :formatter="typeFormatter"></el-table-column>
|
|
|
+ <el-table-column prop="value" label="值" show-overflow-tooltip> </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" fixed="right" width="150">
|
|
|
<template slot-scope="{ row }">
|
|
|
<el-button @click="editRow(row, true)" type="primary" size="mini" plain>编辑</el-button>
|
|
|
</template>
|
|
|
@@ -34,19 +35,19 @@
|
|
|
</el-table>
|
|
|
<div class="pagination-wrapper">
|
|
|
<el-pagination
|
|
|
- background
|
|
|
- @size-change="onSizeChange"
|
|
|
- @current-change="onCurrentChange"
|
|
|
- :current-page="page"
|
|
|
- :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="totalElements"
|
|
|
+ background
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="totalElements"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
|
|
|
- <el-dialog :visible.sync="showDialog" width="500px">
|
|
|
+ <el-dialog :visible.sync="showDialog" width="500px" title="编辑设置" :close-on-click-modal="false">
|
|
|
<el-form :model="formData" :rules="rules" ref="form" label-width="52px" label-position="right" size="small">
|
|
|
<el-form-item prop="name" label="名称">
|
|
|
<el-input v-model="formData.name" :disabled="edit === true"></el-input>
|
|
|
@@ -54,8 +55,48 @@
|
|
|
<el-form-item prop="desc" label="描述">
|
|
|
<el-input v-model="formData.desc"></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="type" label="类型">
|
|
|
+ <el-select v-model="formData.type" placeholder="请选择" :disabled="edit === true">
|
|
|
+ <el-option
|
|
|
+ v-for="item in valueTypes"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item prop="value" label="值">
|
|
|
- <el-input v-model="formData.value"></el-input>
|
|
|
+ <el-input v-model="formData.value" v-if="formData.type === 'STRING'"></el-input>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.value"
|
|
|
+ v-if="formData.type === 'DATETIME'"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="请选择日期时间"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.value"
|
|
|
+ v-if="formData.type === 'DATE'"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="formData.value"
|
|
|
+ v-if="formData.type === 'TIME'"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="请选择时间"
|
|
|
+ arrow-control
|
|
|
+ ></el-time-picker>
|
|
|
+ <el-switch
|
|
|
+ v-model="formData.value"
|
|
|
+ v-if="formData.type === 'BOOLEAN'"
|
|
|
+ active-text="是"
|
|
|
+ inactive-text="否"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ ></el-switch>
|
|
|
+ <el-input-number v-model="formData.value" v-if="formData.type === 'NUMBER'"></el-input-number>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<span slot="footer">
|
|
|
@@ -65,120 +106,151 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import pageableTable from '@/mixins/pageableTable';
|
|
|
+ import { mapState } from 'vuex';
|
|
|
+ import pageableTable from '@/mixins/pageableTable';
|
|
|
|
|
|
-export default {
|
|
|
- name: 'SysConfigList',
|
|
|
- mixins: [pageableTable],
|
|
|
- created() {
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- multipleMode: false,
|
|
|
- search: '',
|
|
|
- url: '/sysConfig/all',
|
|
|
- downloading: false,
|
|
|
- formData: {
|
|
|
- name: '',
|
|
|
- desc: '',
|
|
|
- value: ''
|
|
|
- },
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
- desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
|
|
- value: [{ required: true, message: '请输入值', trigger: 'blur' }]
|
|
|
- },
|
|
|
- showDialog: false,
|
|
|
- saving: false,
|
|
|
- edit: false
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- selection() {
|
|
|
- return this.$refs.table.selection.map(i => i.id);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- beforeGetData() {
|
|
|
- return { search: this.search, sort: 'name' };
|
|
|
- },
|
|
|
- toggleMultipleMode(multipleMode) {
|
|
|
- this.multipleMode = multipleMode;
|
|
|
- if (!multipleMode) {
|
|
|
- this.$refs.table.clearSelection();
|
|
|
- }
|
|
|
- },
|
|
|
- addRow() {
|
|
|
- this.$router.push({
|
|
|
- path: '/sysConfigEdit',
|
|
|
- query: {
|
|
|
- ...this.$route.query
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- editRow(row, edit) {
|
|
|
- this.edit = edit;
|
|
|
- if (!row) {
|
|
|
- row = {
|
|
|
+ export default {
|
|
|
+ name: 'SysConfigList',
|
|
|
+ mixins: [pageableTable],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ multipleMode: false,
|
|
|
+ search: '',
|
|
|
+ url: '/sysConfig/all',
|
|
|
+ downloading: false,
|
|
|
+ formData: {
|
|
|
name: '',
|
|
|
desc: '',
|
|
|
- value: ''
|
|
|
- };
|
|
|
+ value: '',
|
|
|
+ type: 'STRING'
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
+ desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
|
|
+ type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
|
|
+ value: [{ required: true, message: '请输入值', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ showDialog: false,
|
|
|
+ saving: false,
|
|
|
+ edit: false,
|
|
|
+ sortStr: 'createdAt,desc',
|
|
|
+ valueTypes: [
|
|
|
+ {
|
|
|
+ label: '字符串',
|
|
|
+ value: 'STRING'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '日期时间',
|
|
|
+ value: 'DATETIME'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '日期',
|
|
|
+ value: 'DATE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '时间',
|
|
|
+ value: 'TIME'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开关',
|
|
|
+ value: 'BOOLEAN'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '数字',
|
|
|
+ value: 'NUMBER'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selection() {
|
|
|
+ return this.$refs.table.selection.map(i => i.id);
|
|
|
}
|
|
|
- this.formData = row;
|
|
|
- this.showDialog = true;
|
|
|
},
|
|
|
- download() {
|
|
|
- this.downloading = true;
|
|
|
- this.$axios
|
|
|
- .get('/sysConfig/excel', {
|
|
|
- responseType: 'blob',
|
|
|
- params: { size: 10000 }
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- console.log(res);
|
|
|
- this.downloading = false;
|
|
|
- const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = downloadUrl;
|
|
|
- link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click();
|
|
|
- link.remove();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- this.downloading = false;
|
|
|
- this.$message.error(e.error);
|
|
|
+ methods: {
|
|
|
+ beforeGetData() {
|
|
|
+ return { search: this.search, sort: 'createdAt,desc' };
|
|
|
+ },
|
|
|
+ toggleMultipleMode(multipleMode) {
|
|
|
+ this.multipleMode = multipleMode;
|
|
|
+ if (!multipleMode) {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addRow() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/sysConfigEdit',
|
|
|
+ query: {
|
|
|
+ ...this.$route.query
|
|
|
+ }
|
|
|
});
|
|
|
- },
|
|
|
- save() {
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- let data = { ...this.formData };
|
|
|
- this.saving = true;
|
|
|
- this.$http
|
|
|
- .post('/sysConfig/save', data, { body: 'json' })
|
|
|
- .then(res => {
|
|
|
- this.saving = false;
|
|
|
- this.$message.success('成功');
|
|
|
- this.showDialog = false;
|
|
|
- this.getData();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- this.saving = false;
|
|
|
- this.showDialog = false;
|
|
|
- this.$message.error(e.error);
|
|
|
- });
|
|
|
- } else {
|
|
|
- return false;
|
|
|
+ },
|
|
|
+ editRow(row, edit) {
|
|
|
+ this.edit = edit;
|
|
|
+ if (!row) {
|
|
|
+ row = {
|
|
|
+ name: '',
|
|
|
+ desc: '',
|
|
|
+ value: '',
|
|
|
+ type: null
|
|
|
+ };
|
|
|
}
|
|
|
- });
|
|
|
+ this.formData = { ...row };
|
|
|
+ this.showDialog = true;
|
|
|
+ },
|
|
|
+ download() {
|
|
|
+ this.downloading = true;
|
|
|
+ this.$axios
|
|
|
+ .get('/sysConfig/excel', {
|
|
|
+ responseType: 'blob',
|
|
|
+ params: { size: 10000 }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.downloading = false;
|
|
|
+ const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = downloadUrl;
|
|
|
+ link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ link.remove();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.downloading = false;
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let data = { ...this.formData };
|
|
|
+ this.saving = true;
|
|
|
+ this.$http
|
|
|
+ .post('/sysConfig/save', data, { body: 'json' })
|
|
|
+ .then(res => {
|
|
|
+ this.saving = false;
|
|
|
+ this.$message.success('成功');
|
|
|
+ this.showDialog = false;
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.saving = false;
|
|
|
+ this.showDialog = false;
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ typeFormatter(row, cell, cellValue) {
|
|
|
+ let item = this.valueTypes.find(i => i.value === cellValue);
|
|
|
+ return item ? item.label : '';
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
<style lang="less" scoped></style>
|