init
This commit is contained in:
张成
210
admin/src/views/demo/tpl_demo.vue
Normal file
210
admin/src/views/demo/tpl_demo.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="content-view" v-if="meta">
|
||||
<div class="table-head-tool">
|
||||
<div class="table-head-row">
|
||||
<div class="table-head-actions">
|
||||
<Button type="primary" @click="showAdd">新增</Button>
|
||||
<Button type="default" @click="query(1)" class="ml10">刷新</Button>
|
||||
<Button type="default" @click="exportCsv" class="ml10">导出</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Form ref="searchForm" :model="gridOption.param.seachOption" inline :label-width="80" class="search-form">
|
||||
<FormItem :label-width="20" class="search-input-group">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 180px" :placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in meta.seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 280px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem class="search-action-group">
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules" width="640" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tplDemoServer from "@/api/demo/tplDemoServer.js";
|
||||
import tableMixin from "@/mixins/tableMixin.js";
|
||||
|
||||
export default {
|
||||
name: "TplDemoPage",
|
||||
mixins: [tableMixin],
|
||||
data() {
|
||||
return {
|
||||
select_sources: {},
|
||||
gridOption: {
|
||||
param: { seachOption: { key: "", value: "" }, pageOption: { page: 1, pageSize: 20, total: 0 } },
|
||||
data: [],
|
||||
rules: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
modelName() {
|
||||
return "tpl_demo";
|
||||
},
|
||||
meta() {
|
||||
return {
|
||||
title: "演示数据",
|
||||
seachTypes: [
|
||||
{ key: "title", value: "标题" },
|
||||
{ key: "remark", value: "备注" },
|
||||
],
|
||||
fields: [
|
||||
{ key: "id", title: "ID", type: "number", list: true, form: false, minWidth: 80 },
|
||||
{ key: "title", title: "标题", type: "input", list: true, form: true, required: true, minWidth: 200 },
|
||||
{ key: "remark", title: "备注", type: "input", list: true, form: true, required: false, minWidth: 220 },
|
||||
],
|
||||
};
|
||||
},
|
||||
seachTypePlaceholder() {
|
||||
const st = this.meta && this.meta.seachTypes;
|
||||
if (!st || !st.length) {
|
||||
return "请选择";
|
||||
}
|
||||
const k = this.gridOption.param.seachOption.key;
|
||||
const f = st.find((x) => x.key === k);
|
||||
return f ? f.value : "请选择搜索字段";
|
||||
},
|
||||
editColumns() {
|
||||
if (!this.meta || !Array.isArray(this.meta.fields)) {
|
||||
return [];
|
||||
}
|
||||
return this.generateEditColumns(this.meta.fields.filter((f) => f.form !== false), this.select_sources);
|
||||
},
|
||||
listColumns() {
|
||||
if (!this.meta || !Array.isArray(this.meta.fields)) {
|
||||
return [];
|
||||
}
|
||||
const listFields = this.meta.fields.filter((f) => f.list !== false);
|
||||
const cols = this.generateListColumns(listFields, this.meta.fields, this.select_sources);
|
||||
cols.push({
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 180,
|
||||
type: "template",
|
||||
render: (h, params) => {
|
||||
return this.renderRowActionBtns(h, [
|
||||
{ title: "编辑", type: "info", click: () => this.showEdit(params.row) },
|
||||
{ title: "删除", type: "error", click: () => this.delConfirm(params.row) },
|
||||
]);
|
||||
},
|
||||
});
|
||||
return cols;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.load_select_sources();
|
||||
this.resetSearchFromMeta();
|
||||
this.syncEditRules();
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
id_field_to_model() {
|
||||
return "";
|
||||
},
|
||||
async load_select_sources() {
|
||||
this.select_sources = await this.loadSelectSources(
|
||||
this.meta.fields,
|
||||
this.id_field_to_model.bind(this),
|
||||
this.getRowLabel.bind(this)
|
||||
);
|
||||
},
|
||||
syncEditRules() {
|
||||
this.gridOption.rules = this.generateEditRules(this.meta.fields.filter((f) => f.form !== false));
|
||||
},
|
||||
resetSearchFromMeta() {
|
||||
if (!this.meta) {
|
||||
return;
|
||||
}
|
||||
const firstKey = (this.meta.seachTypes[0] && this.meta.seachTypes[0].key) || "title";
|
||||
this.gridOption.param.seachOption = { key: firstKey, value: "" };
|
||||
this.gridOption.param.pageOption = { page: 1, pageSize: 20, total: 0 };
|
||||
},
|
||||
buildEmptyForm() {
|
||||
return this.generateEmptyForm(this.meta.fields.filter((f) => f.form !== false));
|
||||
},
|
||||
normalizePayload(raw) {
|
||||
return this.generatePayload(raw, this.meta.fields.filter((f) => f.form !== false));
|
||||
},
|
||||
async query(page) {
|
||||
if (!this.modelName || !this.meta) {
|
||||
return;
|
||||
}
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
}
|
||||
try {
|
||||
const res = await tplDemoServer.page(this.gridOption.param);
|
||||
if (res && res.code === 0) {
|
||||
this.gridOption.data = res.data.rows || [];
|
||||
this.gridOption.param.pageOption.total = res.data.count || 0;
|
||||
} else {
|
||||
this.$Message.error((res && (res.message || res.Msg)) || "查询失败");
|
||||
}
|
||||
} catch (e) {
|
||||
this.$Message.error("查询失败: " + (e && e.message ? e.message : String(e)));
|
||||
}
|
||||
},
|
||||
resetQuery() {
|
||||
this.resetSearchFromMeta();
|
||||
this.query(1);
|
||||
},
|
||||
showAdd() {
|
||||
this.$refs.editModal.addShow(this.buildEmptyForm(), async (data) => {
|
||||
await this.persist(data, false);
|
||||
});
|
||||
},
|
||||
showEdit(row) {
|
||||
this.$refs.editModal.editShow(this.normalizeRowForEditModal({ ...row }), async (data) => {
|
||||
await this.persist(data, true);
|
||||
});
|
||||
},
|
||||
async persist(data, isEdit) {
|
||||
const payload = this.normalizePayload(data);
|
||||
const req = isEdit ? tplDemoServer.edit(payload) : tplDemoServer.add(payload);
|
||||
const res = await req;
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success(isEdit ? "保存成功" : "新增成功");
|
||||
this.query(1);
|
||||
} else {
|
||||
this.$Message.error((res && (res.message || res.Msg)) || "保存失败");
|
||||
throw new Error("save failed");
|
||||
}
|
||||
},
|
||||
delConfirm(row) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "确定删除该条记录？",
|
||||
onOk: async () => {
|
||||
const res = await tplDemoServer.del({ id: row.id });
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success("已删除");
|
||||
this.query(1);
|
||||
} else {
|
||||
this.$Message.error((res && (res.message || res.Msg)) || "删除失败");
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
exportCsv() {
|
||||
if (!this.modelName || !this.meta) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
tplDemoServer.exportCsv({ param: this.gridOption.param });
|
||||
} catch (e) {
|
||||
this.$Message.error("导出失败: " + (e && e.message ? e.message : String(e)));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user