<template>
|
<div>
|
<DStandardTable
|
:tableConfig="tableConfig"
|
:dispatchKey="dispatchKey"
|
:dataSource="dataSourceCmp"
|
:searchFields="searchFields"
|
:span="span"
|
:selectedRowKeys="state.selectedRows"
|
:rowKey="rowKey"
|
:total="totalCmp"
|
selectedRowKeyType="checkbox"
|
:onSelectChange="onSelectRowChange"
|
@onTableRefresh="onTableRefresh($event)"
|
>
|
<template #toolbar>
|
<a-button type="primary" shape="round" @click="onAddData()"
|
>新增</a-button
|
>
|
</template>
|
{% for field in ModelFields %}{% if field.DbColumnName contains 'Image' or field.DbColumnName contains 'image' or field.DbColumnName contains 'thumbnail' or field.DbColumnName contains 'Thumbnail' %}
|
<template #{{field.DbColumnName}}="{ record }">
|
<Image :src="record.{{field.DbColumnName}}" :width="40" :height="40"></Image>
|
</template>{% endif %}{% endfor %}
|
<template #action="{ record }">
|
<a-space>
|
<a-button size="small" shape="round" @click="onViewDataDetail(record)"
|
>查看</a-button
|
>
|
<a-button
|
size="small"
|
shape="round"
|
type="primary"
|
@click="onEdit(record)"
|
>编辑</a-button
|
>
|
<a-button size="small" shape="round" danger @click="onDelete(record)"
|
>删除</a-button
|
>
|
</a-space>
|
</template>
|
</DStandardTable>
|
|
<CoreShopFormModal
|
:visible="state.editModalVisible"
|
width="50%"
|
:schema="state.formSchema"
|
:modalVisible="onEditModalVisible"
|
:onSuccess="onEditSuccess"
|
:title="state.formModalTitle"
|
></CoreShopFormModal>
|
|
<Modal
|
:visible="state.dataDetailVisible"
|
:onClose="onCloseDataDetailModal"
|
:onCancel="onCloseDataDetailModal"
|
:destroyOnClose="true"
|
:title="state.dataDetailConfig?.title"
|
:width="45"
|
height="auto"
|
>
|
<DataDetailDisplay
|
:data="state.dataDetailConfig.fields"
|
:column="2"
|
></DataDetailDisplay>
|
</Modal>
|
|
<DeleteConfirmModal
|
:visible="state.deleteConfirmModalVisible"
|
:destroyOnClose="true"
|
:content="state.deleteContentTip"
|
:onCancel="onCancelDeleteDataModal"
|
:onSuccess="onSuccessDeleteData"
|
:DeleteUrl="state.deleteDataUrl"
|
:params="state.deleteDataparams"
|
>
|
</DeleteConfirmModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import DStandardTable from "@/components/table/dStandardTable.vue";
|
import type { I{{ModelClassName}} } from "@/models/{{ModelClassName}}";
|
import { computed, reactive } from "vue";
|
import { useStore } from "vuex";
|
import tableConfig from "./table-config";
|
import formSchema from "./form-schema";
|
import { CoreShopFormModal } from "@/components/coreshop-form";
|
import searchFields from "./search-field";
|
import { cloneDeep } from "lodash";
|
import type { IFormSchema } from "@/components/coreshop-form/type";
|
import dataDetailConfig from "./detail-config";
|
import { DataDetailDisplay } from "@/components/data-detail-display";
|
import type { IData } from "@/components/data-detail-display";
|
import { buildDataDetail } from "@/utils/build-data-detail";
|
import Modal from "@/components/modal";
|
import DeleteConfirmModal from "@/components/coreshop-modal-delete/index";
|
import Image from "@/components/coreshop-image";
|
|
/** 数据查询的接口 */
|
const dispatchKey: string = "{{ModelClassName}}/getPageList";
|
const span: number = 3;
|
const rowKey: string = "id";
|
// 表格刷新
|
let handleTableRefreshFun: Function;
|
|
const state = reactive<{
|
selectedRows: Array<any>;
|
editModalVisible: boolean;
|
formModalTitle: string;
|
formSchema: IFormSchema;
|
dataDetailVisible: boolean;
|
dataDetailConfig: {
|
title?: string;
|
fields?: Array<IData>;
|
};
|
deleteConfirmModalVisible: boolean;
|
deleteContentTip: string;
|
deleteDataUrl: string;
|
deleteDataparams: { [key: string]: any };
|
}>({
|
selectedRows: [],
|
editModalVisible: false,
|
formModalTitle: "编辑",
|
formSchema: {},
|
dataDetailVisible: false,
|
dataDetailConfig: {
|
title: "详情",
|
fields: [],
|
},
|
deleteConfirmModalVisible: false,
|
deleteContentTip: "确定删除？删除后将无法恢复。",
|
deleteDataUrl: "",
|
deleteDataparams: {},
|
});
|
|
const store = useStore();
|
const dataSourceCmp = computed<Array<I{{ModelClassName}}>>(
|
() => store.state.{{ModelClassName}}.{{ModelClassName}}.{{ModelClassName}}
|
);
|
const totalCmp = computed<number>(
|
() => store.state.{{ModelClassName}}.{{ModelClassName}}.count
|
);
|
|
const onTableRefresh = (fun: Function) => {
|
handleTableRefreshFun = fun;
|
};
|
|
const onAddData = () => {
|
state.editModalVisible = true;
|
state.formModalTitle = "新增";
|
state.formSchema = formSchema;
|
};
|
|
const onEdit = (data: { [key: string]: any }) => {
|
let editFormSchema: IFormSchema = cloneDeep(formSchema);
|
state.editModalVisible = true;
|
state.formModalTitle = "编辑";
|
editFormSchema.filter = { id: data.id };
|
state.formSchema = editFormSchema;
|
};
|
|
/** 查看详情 */
|
const onViewDataDetail = (data: { [key: string]: any }) => {
|
dataDetailConfig.fields = buildDataDetail(dataDetailConfig.fields, data);
|
state.dataDetailVisible = true;
|
state.dataDetailConfig = dataDetailConfig;
|
};
|
|
const onEditModalVisible = (visible: boolean) => {
|
state.editModalVisible = visible;
|
};
|
|
const onEditSuccess = () => {
|
state.editModalVisible = false;
|
handleTableRefreshFun && handleTableRefreshFun();
|
};
|
|
const onCloseDataDetailModal = () => {
|
state.dataDetailVisible = false;
|
};
|
|
//#region 删除数据模态交互
|
|
const onDelete = (data: { [key: string]: any }) => {
|
state.deleteConfirmModalVisible = true;
|
state.deleteContentTip = "确定删除？删除后将无法恢复。";
|
state.deleteDataUrl = "api/{{ModelClassName}}/DoDelete";
|
state.deleteDataparams = { id: data.id };
|
};
|
|
const onCancelDeleteDataModal = () => {
|
state.deleteConfirmModalVisible = false;
|
};
|
|
/** 删除数据后回调*/
|
const onSuccessDeleteData = () => {
|
state.deleteConfirmModalVisible = false;
|
store.commit("{{ModelClassName}}/deleteDataById", state.deleteDataparams.id);
|
};
|
|
/** 选中数据 */
|
const onSelectRowChange=(selectedRows:Array<number>)=>{
|
state.selectedRows =selectedRows;
|
}
|
|
//#endregion
|
</script>
|
<style lang="less" scoped>
|
</style>
|
