XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化table 弹窗与编辑,统计的写法

Browse Source
This commit is contained in:
小陌 2024-01-09 13:56:57 +08:00
parent 519517c095
commit 5ee7e6cde5
6 changed files with 29 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/xAvatar/index.vue
View File

@ -22,12 +22,15 @@
export default { export default {
props: { props: {
data: { type: Object, default: () => { } }, data: { type: Object, default: () => { } },
options: { type: Object, default: () => { } }, options: {
type: Object, default: () => ({
subfield: 'nickname'
})
},
name: { type: String, default: "avatar" }, name: { type: String, default: "avatar" },
}, },
data() { data() {
return { return {
// data: this.modelValue,
copiedData: this.data, copiedData: this.data,
visible: false, visible: false,
} }

10
src/components/xTable/columnItem.vue
View File

@ -58,13 +58,12 @@ export default {
// 打开新窗口链接 // 打开新窗口链接
if (item.open && item.open.name && row[item.open.name]?.trim()) { if (item.open && item.open.name && row[item.open.name]?.trim()) {
window.open(row[item.open.name], "_blank"); window.open(row[item.open.name], item.open.target || "_blank");
return; return;
} }
// 打开编辑层 // 打开编辑层
else if (item.update && (item.update.url || item.update.name)) { else if (item.update && (item.update.url || item.update.name)) {
var options = Object.assign({ name: item.update.name || item.label, remoteurl: item.update.url || 'table/getUpdate?name=' + item.update.name }, item.update); this.$emit('xtablehandleClick', row, Object.assign({ name: item.update.name || item.label, remoteurl: item.update.url || 'table/getUpdate?name=' + item.update.name }, item.update), 'update');
this.$emit('xtablehandleClick', row, options, 'update');
return; return;
} }
// 统计 // 统计
@ -74,10 +73,7 @@ export default {
} }
// 打开表格 // 打开表格
else if (item.table && (item.table.url || item.table.name)) { else if (item.table && (item.table.url || item.table.name)) {
this.$emit('xtablehandleClick', row, { this.$emit('xtablehandleClick', row, Object.assign({ name: item.table.name || item.label, remoteurl: item.table.url || 'table/get?name=' + item.table.name }, item.table), 'table');
name: item.table.name || item.name,
remoteurl: item.table.url || 'table/get?name=' + item.table.name
}, item.table.type || 'dialog', 'table');
return; return;
} else if (item.http && item.http.url && item.http.key && String(row[item.http.key])?.trim()) { } else if (item.http && item.http.url && item.http.key && String(row[item.http.key])?.trim()) {

12
src/components/xTable/index.vue
View File

@ -34,9 +34,9 @@
<el-pagination :pager-count="5" :small="true" background :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination> <el-pagination :pager-count="5" :small="true" background :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
</div> </div>
</div> </div>
<x-update v-if="tableUpdateKey" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey = ''"></x-update> <x-update v-if="tableUpdateKey" :column="column" :name="tableUpdateKey" ref="xtableupdate" @success="handleSuccess" @closed="tableUpdateKey = ''"></x-update>
<x-stat v-if="tableStatKey" :name="tableStatKey" ref="xtablestat" @closed="tableStatKey = ''"></x-stat> <x-stat v-if="tableStatKey" :name="tableStatKey" ref="xtablestat" @closed="tableStatKey = ''"></x-stat>
<xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog"></xTabledialog> <xTabledialog v-if="xtabledialog" :name="xtabledialog" ref="xtabledialog" v-model="xtabledialog" @closed="xtabledialog = ''"></xTabledialog>
</template> </template>
<style scoped> <style scoped>
@ -220,8 +220,6 @@ export default {
const ids = this.selection.map(obj => obj[delkey]); const ids = this.selection.map(obj => obj[delkey]);
this.$http.post(o.url, { [delkey]: ids }).then((res) => { this.$http.post(o.url, { [delkey]: ids }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
// this.tableData = this.tableData.filter(item => !ids.includes(item[delkey]));
// this.$refs.xTable.clearSelection();
this.refresh(); this.refresh();
this.$message.success(res.message || "操作成功") this.$message.success(res.message || "操作成功")
return; return;
@ -240,20 +238,20 @@ export default {
xtablehandleClick(row, options, type = 'update') { xtablehandleClick(row, options, type = 'update') {
var componenttype = options.type || 'dialog'; var componenttype = options.type || 'dialog';
if (type == 'update') { if (type == 'update') {
this.tableUpdateKey = options.name || this.name; this.tableUpdateKey = options.name || this.name || this.rowKey;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options); this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
}) })
return; return;
} }
else if (type == 'stat') { else if (type == 'stat') {
this.tableStatKey = options.value || this.name; this.tableStatKey = options.value || this.name || this.rowKey;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xtablestat.open().setData(row).setConfig(options); this.$refs.xtablestat.open().setData(row).setConfig(options);
}) })
return; return;
} }
this.xtabledialog = options.name || this.name; this.xtabledialog = options.name || this.name || this.rowKey;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options); this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
}) })

23
src/components/xUpdate/index.vue
View File

@ -3,7 +3,7 @@
--> -->
<template> <template>
<div class="x-update"> <div class="x-update">
<component :is="componentType" :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')"> <component :is="componentType" :title="(config.name || config.label) || '编辑'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')">
<el-main> <el-main>
<el-skeleton v-if="loading" :rows="4" /> <el-skeleton v-if="loading" :rows="4" />
<x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form> <x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form>
@ -41,13 +41,8 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
mode: "plus",
token: '', token: '',
key: this.name, key: this.name,
titleMap: {
plus: '新增',
edit: '编辑'
},
data: {}, data: {},
style: {}, style: {},
config: { config: {
@ -85,20 +80,18 @@ export default {
return this; return this;
}, },
// 显示 // 显示
open(mode = 'plus') { open() {
this.mode = mode;
this.visible = true; this.visible = true;
return this; return this;
}, },
// 表单提交方法 // 表单提交方法
submit() { submit() {
this.$refs.formref.validate(async (valid) => { this.$refs.formref.validate(async (valid) => {
if (valid) { if (valid) {
if (!this.config.url) { if (!this.config.url) {
console.log(this.data) console.log(this.data)
this.$alert('没有' + ((this.config.name || this.titleMap[this.mode]) || '编辑') + '数据相关配置', "提示", { type: 'error' }); this.$alert('没有' + ((this.config.name || this.config.label) || '编辑') + '数据相关配置', "提示", { type: 'error' });
return; return;
} }
@ -119,7 +112,7 @@ export default {
this.isSaveing = false; this.isSaveing = false;
if (res.code == 200) { if (res.code == 200) {
this.visible = false; this.visible = false;
this.$emit('success', res.data, this.mode, res.message || "操作成功"); this.$emit('success', res.data, res.message || "操作成功");
return; return;
} }
this.$alert(res.message, "提示", { type: 'error' }); this.$alert(res.message, "提示", { type: 'error' });
@ -138,9 +131,13 @@ export default {
if (this.config.remoteurl) { if (this.config.remoteurl) {
this.loading = true; this.loading = true;
setTimeout(async () => { setTimeout(async () => {
var res = await this.$http.post(this.config.remoteurl, { [this.key]: this.data[this.key] })
var param = Object.assign({}, { [this.key]: this.data[this.key] }, this.config.param || {});
var res = await this.$http.post(this.config.remoteurl, param)
if (res.code == 200) { if (res.code == 200) {
this.loading = false; this.loading = false;
if (res.data.config) { if (res.data.config) {
Object.assign(this.config, res.data.config); Object.assign(this.config, res.data.config);
} }

17
src/views/table/1/index.vue
View File

@ -38,8 +38,6 @@
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></x-update>
<x-stat v-if="dialog.stat" ref="xstatdialog" @closed="dialog.stat = false"></x-stat>
</template> </template>
<script> <script>
@ -56,10 +54,6 @@ export default {
}, },
data() { data() {
return { return {
dialog: {
save: false,
stat: false,
},
isselection: true, isselection: true,
selection: [], selection: [],
batch: [], batch: [],
@ -94,7 +88,6 @@ export default {
awaitvar.then((res) => { awaitvar.then((res) => {
if (res.code == 200) { if (res.code == 200) {
Object.assign(this.$data, res.data); Object.assign(this.$data, res.data);
// 替换search值 // 替换search值
for (const key in this.search) { for (const key in this.search) {
if (Object.prototype.hasOwnProperty.call(this.$route.query, key)) { if (Object.prototype.hasOwnProperty.call(this.$route.query, key)) {
@ -169,7 +162,6 @@ export default {
}, },
//增加 //增加
plus() { plus() {
this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
let row = this.operation.plus.data || {}; let row = this.operation.plus.data || {};
// 替换search值 // 替换search值
@ -178,26 +170,23 @@ export default {
row[key] = this.search[key]; row[key] = this.search[key];
} }
} }
this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData(row).setConfig(this.operation.plus) this.$refs.table.xtablehandleClick(row, this.operation.plus, 'update');
}) })
}, },
//编辑 //编辑
operationEdit(row) { operationEdit(row) {
this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit) this.$refs.table.xtablehandleClick(row, this.operation.edit, 'update');
}) })
}, },
//打开统计 //打开统计
openStat(o) { openStat(o) {
this.dialog.stat = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xstatdialog.open().setConfig(o); this.$refs.table.xtablehandleClick({}, o, 'stat');
}) })
}, },
//删除 //删除
async operationDelete(row, index) { async operationDelete(row, index) {
const key = typeof this.operation.delete.key !== 'undefined' && this.operation.delete.key ? this.operation.delete.key : this.key; const key = typeof this.operation.delete.key !== 'undefined' && this.operation.delete.key ? this.operation.delete.key : this.key;
var res = await this.$http.post(this.operation.delete.url, { [key]: row[key], index: index }) var res = await this.$http.post(this.operation.delete.url, { [key]: row[key], index: index })
if (res.code == 200) { if (res.code == 200) {

14
src/views/table/2/index.vue
View File

@ -48,7 +48,6 @@
<el-affix v-if="operation.plus" position="bottom" :offset="200"> <el-affix v-if="operation.plus" position="bottom" :offset="200">
<el-button style="float: right; border-radius: 100%; width: 56px; height: 56px; padding: 10px; box-shadow: var(--el-box-shadow-dark); position: fixed; right: 30px; font-size: 30px; " type="success" round icon="el-icon-plus" @click="plus"></el-button> <el-button style="float: right; border-radius: 100%; width: 56px; height: 56px; padding: 10px; box-shadow: var(--el-box-shadow-dark); position: fixed; right: 30px; font-size: 30px; " type="success" round icon="el-icon-plus" @click="plus"></el-button>
</el-affix> </el-affix>
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></x-update>
</template> </template>
@ -61,10 +60,6 @@ export default {
}, },
data() { data() {
return { return {
dialog: {
save: false,
stat: false,
},
isselection: true, isselection: true,
tableexpand: false, tableexpand: false,
tableexpandtype: '', tableexpandtype: '',
@ -205,7 +200,6 @@ export default {
}, },
//增加 //增加
plus() { plus() {
this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
let row = this.operation.plus.data || {}; let row = this.operation.plus.data || {};
// 替换search值 // 替换search值
@ -214,21 +208,19 @@ export default {
row[key] = this.search[key]; row[key] = this.search[key];
} }
} }
this.$refs.saveDialog.open('plus').getComponentType(this.operation.plus.component).setData(row).setConfig(this.operation.plus) this.$refs.table.xtablehandleClick(row, this.operation.plus, 'update');
}) })
}, },
//编辑 //编辑
operationEdit(row) { operationEdit(row) {
this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open('edit').getComponentType(this.operation.edit.component).setData(row).setConfig(this.operation.edit) this.$refs.table.xtablehandleClick(row, this.operation.edit, 'update');
}) })
}, },
//打开统计 //打开统计
openStat(o) { openStat(o) {
this.dialog.stat = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xstatdialog.open().setData(o); this.$refs.table.xtablehandleClick({}, o, 'stat');
}) })
}, },
//删除 //删除