优化table 弹窗与编辑,统计的写法
This commit is contained in:
parent
519517c095
commit
5ee7e6cde5
@ -22,12 +22,15 @@
|
||||
export default {
|
||||
props: {
|
||||
data: { type: Object, default: () => { } },
|
||||
options: { type: Object, default: () => { } },
|
||||
options: {
|
||||
type: Object, default: () => ({
|
||||
subfield: 'nickname'
|
||||
})
|
||||
},
|
||||
name: { type: String, default: "avatar" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// data: this.modelValue,
|
||||
copiedData: this.data,
|
||||
visible: false,
|
||||
}
|
||||
|
||||
@ -58,13 +58,12 @@ export default {
|
||||
|
||||
// 打开新窗口链接
|
||||
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;
|
||||
}
|
||||
// 打开编辑层
|
||||
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, options, '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');
|
||||
return;
|
||||
}
|
||||
// 统计
|
||||
@ -74,10 +73,7 @@ export default {
|
||||
}
|
||||
// 打开表格
|
||||
else if (item.table && (item.table.url || item.table.name)) {
|
||||
this.$emit('xtablehandleClick', row, {
|
||||
name: item.table.name || item.name,
|
||||
remoteurl: item.table.url || 'table/get?name=' + item.table.name
|
||||
}, item.table.type || 'dialog', 'table');
|
||||
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');
|
||||
return;
|
||||
} else if (item.http && item.http.url && item.http.key && String(row[item.http.key])?.trim()) {
|
||||
|
||||
|
||||
@ -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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
@ -220,8 +220,6 @@ export default {
|
||||
const ids = this.selection.map(obj => obj[delkey]);
|
||||
this.$http.post(o.url, { [delkey]: ids }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
// this.tableData = this.tableData.filter(item => !ids.includes(item[delkey]));
|
||||
// this.$refs.xTable.clearSelection();
|
||||
this.refresh();
|
||||
this.$message.success(res.message || "操作成功")
|
||||
return;
|
||||
@ -240,20 +238,20 @@ export default {
|
||||
xtablehandleClick(row, options, type = 'update') {
|
||||
var componenttype = options.type || 'dialog';
|
||||
if (type == 'update') {
|
||||
this.tableUpdateKey = options.name || this.name;
|
||||
this.tableUpdateKey = options.name || this.name || this.rowKey;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xtableupdate.open().getComponentType(componenttype).setData(row).setConfig(options);
|
||||
})
|
||||
return;
|
||||
}
|
||||
else if (type == 'stat') {
|
||||
this.tableStatKey = options.value || this.name;
|
||||
this.tableStatKey = options.value || this.name || this.rowKey;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xtablestat.open().setData(row).setConfig(options);
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.xtabledialog = options.name || this.name;
|
||||
this.xtabledialog = options.name || this.name || this.rowKey;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xtabledialog.open().setData(row).getComponentType(componenttype).setConfig(options);
|
||||
})
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
-->
|
||||
<template>
|
||||
<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-skeleton v-if="loading" :rows="4" />
|
||||
<x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form>
|
||||
@ -41,13 +41,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
mode: "plus",
|
||||
token: '',
|
||||
key: this.name,
|
||||
titleMap: {
|
||||
plus: '新增',
|
||||
edit: '编辑'
|
||||
},
|
||||
data: {},
|
||||
style: {},
|
||||
config: {
|
||||
@ -85,20 +80,18 @@ export default {
|
||||
return this;
|
||||
},
|
||||
// 显示
|
||||
open(mode = 'plus') {
|
||||
this.mode = mode;
|
||||
open() {
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
// 表单提交方法
|
||||
submit() {
|
||||
|
||||
|
||||
this.$refs.formref.validate(async (valid) => {
|
||||
if (valid) {
|
||||
|
||||
if (!this.config.url) {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -119,7 +112,7 @@ export default {
|
||||
this.isSaveing = false;
|
||||
if (res.code == 200) {
|
||||
this.visible = false;
|
||||
this.$emit('success', res.data, this.mode, res.message || "操作成功");
|
||||
this.$emit('success', res.data, res.message || "操作成功");
|
||||
return;
|
||||
}
|
||||
this.$alert(res.message, "提示", { type: 'error' });
|
||||
@ -138,9 +131,13 @@ export default {
|
||||
if (this.config.remoteurl) {
|
||||
this.loading = true;
|
||||
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) {
|
||||
|
||||
this.loading = false;
|
||||
|
||||
if (res.data.config) {
|
||||
Object.assign(this.config, res.data.config);
|
||||
}
|
||||
|
||||
@ -38,8 +38,6 @@
|
||||
</el-main>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
@ -56,10 +54,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
save: false,
|
||||
stat: false,
|
||||
},
|
||||
isselection: true,
|
||||
selection: [],
|
||||
batch: [],
|
||||
@ -94,7 +88,6 @@ export default {
|
||||
awaitvar.then((res) => {
|
||||
if (res.code == 200) {
|
||||
Object.assign(this.$data, res.data);
|
||||
|
||||
// 替换search值
|
||||
for (const key in this.search) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.$route.query, key)) {
|
||||
@ -169,7 +162,6 @@ export default {
|
||||
},
|
||||
//增加
|
||||
plus() {
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
let row = this.operation.plus.data || {};
|
||||
// 替换search值
|
||||
@ -178,26 +170,23 @@ export default {
|
||||
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) {
|
||||
this.dialog.save = true
|
||||
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) {
|
||||
this.dialog.stat = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xstatdialog.open().setConfig(o);
|
||||
this.$refs.table.xtablehandleClick({}, o, 'stat');
|
||||
})
|
||||
},
|
||||
//删除
|
||||
async operationDelete(row, index) {
|
||||
|
||||
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 })
|
||||
if (res.code == 200) {
|
||||
|
||||
@ -48,7 +48,6 @@
|
||||
<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-affix>
|
||||
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></x-update>
|
||||
</template>
|
||||
|
||||
|
||||
@ -61,10 +60,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
save: false,
|
||||
stat: false,
|
||||
},
|
||||
isselection: true,
|
||||
tableexpand: false,
|
||||
tableexpandtype: '',
|
||||
@ -205,7 +200,6 @@ export default {
|
||||
},
|
||||
//增加
|
||||
plus() {
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
let row = this.operation.plus.data || {};
|
||||
// 替换search值
|
||||
@ -214,21 +208,19 @@ export default {
|
||||
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) {
|
||||
this.dialog.save = true
|
||||
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) {
|
||||
this.dialog.stat = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xstatdialog.open().setData(o);
|
||||
this.$refs.table.xtablehandleClick({}, o, 'stat');
|
||||
})
|
||||
},
|
||||
//删除
|
||||
|
||||
Loading…
Reference in New Issue
Block a user