285 lines
7.6 KiB
Django/Jinja
285 lines
7.6 KiB
Django/Jinja
import dayjs from "dayjs";
|
||
import editForm from "../components/form.vue";
|
||
import { message } from "@/utils/message";
|
||
import { type Ref, ref, reactive, onMounted, h, toRaw } from "vue";
|
||
import type { {{ class_name }}Info } from "types/{{ name }}";
|
||
import type { PaginationProps } from "@pureadmin/table";
|
||
import { addDialog } from "@/components/ReDialog";
|
||
import {
|
||
delete{{ class_name }}API,
|
||
delete{{ class_name }}ListAPI,
|
||
get{{ class_name }}ListAPI,
|
||
postAdd{{ class_name }}API,
|
||
putUpdate{{ class_name }}API
|
||
} from "@/api/{{ name }}";
|
||
import { getKeyList } from "@pureadmin/utils";
|
||
|
||
export const use{{ class_name }} = (tableRef: Ref) => {
|
||
/**
|
||
* 查询表单
|
||
*/
|
||
const form = reactive({
|
||
{% for column in columns if column.is_query %}
|
||
/** {{ column.column_comment }} */
|
||
{{ column.column_name }}: "",
|
||
{% endfor %}
|
||
});
|
||
/**
|
||
* 表单Ref
|
||
*/
|
||
const formRef = ref(null);
|
||
/**
|
||
* 数据列表
|
||
*/
|
||
const dataList = ref<{{ class_name }}Info[]>([]);
|
||
/**
|
||
* 加载状态
|
||
*/
|
||
const loading = ref(true);
|
||
/**
|
||
* 已选数量
|
||
*/
|
||
const selectedNum = ref<number>(0);
|
||
/**
|
||
* 分页参数
|
||
*/
|
||
const pagination = reactive<PaginationProps>({
|
||
total: 0,
|
||
pageSize: 10,
|
||
currentPage: 1,
|
||
background: true,
|
||
pageSizes: [10, 20, 30, 40, 50]
|
||
});
|
||
|
||
/**
|
||
* 表格列设置
|
||
*/
|
||
const columns: TableColumnList = [
|
||
{
|
||
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||
type: "selection",
|
||
fixed: "left",
|
||
reserveSelection: true // 数据刷新后保留选项
|
||
},
|
||
{% for column in columns if column.is_list %}
|
||
{
|
||
label: "{{ column.column_comment }}",
|
||
prop: "{{ column.column_name }}",
|
||
hide: {{ "true" if column.is_hide else "false" }}{% if column.python_type == "datetime" %},
|
||
formatter: ({ {{ column.column_name }} }) =>
|
||
dayjs({{ column.column_name }}).format("YYYY-MM-DD HH:mm:ss"){% endif %}
|
||
},
|
||
{% endfor %}
|
||
{
|
||
label: "操作",
|
||
fixed: "right",
|
||
width: 220,
|
||
slot: "operation"
|
||
}
|
||
];
|
||
/**
|
||
* 初次查询
|
||
*/
|
||
const onSearch = async () => {
|
||
loading.value = true;
|
||
const res = await get{{ class_name }}ListAPI({
|
||
page: pagination.currentPage,
|
||
pageSize: pagination.pageSize,
|
||
...toRaw(form)
|
||
});
|
||
if (res.success) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
loading.value = false;
|
||
};
|
||
/**
|
||
* 重置表单
|
||
* @param formEl 表单ref
|
||
* @returns
|
||
*/
|
||
const resetForm = async (formEl: any) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
await onSearch();
|
||
};
|
||
/**
|
||
* 处理删除
|
||
* @param row
|
||
*/
|
||
const handleDelete = async (row: {{ class_name }}Info) => {
|
||
const res = await delete{{ class_name }}API(row.id);
|
||
if (res.success) {
|
||
onSearch();
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
};
|
||
/**
|
||
* 处理每页数量变化
|
||
*/
|
||
const handleSizeChange = async (val: number) => {
|
||
loading.value = true;
|
||
const res = await get{{ class_name }}ListAPI({
|
||
page: pagination.currentPage,
|
||
pageSize: val,
|
||
...toRaw(form)
|
||
});
|
||
if (res.success) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
loading.value = false;
|
||
};
|
||
|
||
/**
|
||
* 处理页码变化
|
||
* @param val
|
||
*/
|
||
const handleCurrentChange = async (val: number) => {
|
||
loading.value = true;
|
||
const res = await get{{ class_name }}ListAPI({
|
||
page: val,
|
||
pageSize: pagination.pageSize,
|
||
...toRaw(form)
|
||
});
|
||
if (res.success) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
loading.value = false;
|
||
};
|
||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||
const handleSelectionChange = async (val: any) => {
|
||
selectedNum.value = val.length;
|
||
// 重置表格高度
|
||
tableRef.value.setAdaptive();
|
||
};
|
||
|
||
/** 取消选择 */
|
||
const onSelectionCancel = async () => {
|
||
selectedNum.value = 0;
|
||
// 用于多选表格，清空用户的选择
|
||
tableRef.value.getTableRef().clearSelection();
|
||
};
|
||
/**
|
||
* 批量删除
|
||
*/
|
||
const onbatchDel = async () => {
|
||
// 返回当前选中的行
|
||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||
const res = await delete{{ class_name }}ListAPI({
|
||
ids: getKeyList(curSelected, "id")
|
||
});
|
||
if (res.success) {
|
||
message(res.msg, {
|
||
type: "success"
|
||
});
|
||
tableRef.value.getTableRef().clearSelection();
|
||
onSearch();
|
||
} else {
|
||
message(res.msg, { type: "error", duration: 5000 });
|
||
}
|
||
};
|
||
const openDialog = async (title = "新增", row?: {{ class_name }}Info) => {
|
||
addDialog({
|
||
title: `${title}配置`,
|
||
props: {
|
||
formInline: {
|
||
/** 方式 */
|
||
title:title,
|
||
{% for column in columns if column.is_list %}
|
||
/** {{ column.column_comment }} */
|
||
{{ column.python_name }}: row?.{{ column.python_name }} ?? "",
|
||
{% endfor %}
|
||
}
|
||
},
|
||
width: "45%",
|
||
draggable: true,
|
||
fullscreenIcon: true,
|
||
closeOnClickModal: false,
|
||
contentRenderer: () =>
|
||
h(editForm, {
|
||
formInline: {
|
||
/** 方式 */
|
||
title:title,
|
||
{% for column in columns if column.is_list %}
|
||
/** {{ column.column_comment }} */
|
||
{{ column.python_name }}: row?.{{ column.python_name }} ?? "",
|
||
{% endfor %}
|
||
},
|
||
ref: formRef
|
||
}),
|
||
beforeSure: async (done, {}) => {
|
||
const FormData = formRef.value.newFormInline;
|
||
if (title === "新增") {
|
||
let addForm = {
|
||
{% for column in columns if column.is_insert %}
|
||
/** {{ column.column_comment }} */
|
||
{{ column.python_name }}: FormData.{{ column.python_name }} ?? "",
|
||
{% endfor %}
|
||
};
|
||
const res = await postAdd{{ class_name }}PI(addForm);
|
||
if (res.success) {
|
||
done();
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
} else {
|
||
let updateForm = {
|
||
{% for column in columns if column.is_update %}
|
||
/** {{ column.column_comment }} */
|
||
{{ column.python_name }}: FormData.{{ column.python_name }} ?? "",
|
||
{% endfor %}
|
||
};
|
||
const res = await putUpdate{{ class_name }}API(updateForm, row.id);
|
||
if (res.success) {
|
||
done();
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
/**
|
||
* 页面加载执行
|
||
*/
|
||
onMounted(async () => {
|
||
await onSearch();
|
||
});
|
||
return {
|
||
form,
|
||
dataList,
|
||
loading,
|
||
pagination,
|
||
columns,
|
||
selectedNum,
|
||
openDialog,
|
||
onSearch,
|
||
resetForm,
|
||
handleDelete,
|
||
handleSizeChange,
|
||
handleCurrentChange,
|
||
handleSelectionChange,
|
||
onSelectionCancel,
|
||
onbatchDel
|
||
};
|
||
};
|