21 changed files with 3702 additions and 650 deletions
@ -0,0 +1,199 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="800" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
:title="isUpdate ? '编辑班级' : '添加班级'" |
|||
:body-style="{ paddingBottom: '28px' }" |
|||
@update:visible="updateVisible" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:rules="rules" |
|||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-form-item label="选择年级" name="gradeId"> |
|||
<a-select |
|||
v-model:value="form.gradeName" |
|||
show-search |
|||
placeholder="选择年级" |
|||
style="width: 200px" |
|||
:options="options" |
|||
@change="handleChange" |
|||
></a-select> |
|||
</a-form-item> |
|||
<a-form-item label="班级" name="name"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入班级" |
|||
v-model:value="form.name" |
|||
@pressEnter="save" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="排序" name="sortNumber"> |
|||
<a-input-number |
|||
:min="0" |
|||
:max="9999" |
|||
class="ele-fluid" |
|||
placeholder="请输入排序号" |
|||
v-model:value="form.sortNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="comments"> |
|||
<a-textarea |
|||
:rows="4" |
|||
:maxlength="200" |
|||
placeholder="请输入描述" |
|||
v-model:value="form.comments" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { Form, message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { addBszxClass, updateBszxClass } from '@/api/bszx/bszxClass'; |
|||
import { BszxClass } from '@/api/bszx/bszxClass/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
import {BszxGrade} from "@/api/bszx/bszxGrade/model"; |
|||
import {listBszxGrade} from "@/api/bszx/bszxGrade"; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const useForm = Form.useForm; |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: BszxClass | null; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
const options = ref<BszxGrade[]>([]); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<BszxClass>({ |
|||
id: undefined, |
|||
name: undefined, |
|||
gradeId: undefined, |
|||
gradeName: undefined, |
|||
branch: 2, |
|||
sortNumber: 100, |
|||
comments: undefined, |
|||
status: undefined, |
|||
tenantId: undefined, |
|||
createTime: undefined |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
// 表单验证规则 |
|||
const rules = reactive({ |
|||
appBszxClassName: [ |
|||
{ |
|||
required: true, |
|||
type: 'string', |
|||
message: '请填写应用-百色中学-班级名称', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}); |
|||
|
|||
const handleChange = (value: string, item: any) => { |
|||
form.gradeName = value; |
|||
form.gradeId = item.id; |
|||
}; |
|||
|
|||
const handleBranch = () => { |
|||
getBszxGradeList(); |
|||
} |
|||
|
|||
const getBszxGradeList = () => { |
|||
listBszxGrade({branch: form.branch}).then((list) => { |
|||
options.value = list.map(d => { |
|||
d.value = d.name; |
|||
d.label = d.name; |
|||
return d; |
|||
}); |
|||
}) |
|||
} |
|||
const { resetFields } = useForm(form, rules); |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
const formData = { |
|||
...form |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateBszxClass : addBszxClass; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
loading.value = false; |
|||
message.error(e.message); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (visible) { |
|||
getBszxGradeList() |
|||
images.value = []; |
|||
if (props.data) { |
|||
assignObject(form, props.data); |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} else { |
|||
// resetFields(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,98 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-button type="primary" class="ele-btn-icon" @click="add"> |
|||
<template #icon> |
|||
<PlusOutlined/> |
|||
</template> |
|||
<span>添加</span> |
|||
</a-button> |
|||
<a-select |
|||
show-search |
|||
v-model:value="where.gradeId" |
|||
style="width: 240px" |
|||
placeholder="选择年级" |
|||
:options="gradeList" |
|||
@change="onGrade" |
|||
></a-select> |
|||
<a-input-search |
|||
allow-clear |
|||
placeholder="请输入关键词" |
|||
style="width: 240px" |
|||
v-model:value="where.keywords" |
|||
@search="handleSearch" |
|||
/> |
|||
<a-button @click="reset">重置</a-button> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {PlusOutlined} from '@ant-design/icons-vue'; |
|||
import {watch,ref} from 'vue'; |
|||
import useSearch from "@/utils/use-search"; |
|||
import {BszxClassParam} from "@/api/bszx/bszxClass/model"; |
|||
import {listBszxGrade} from "@/api/bszx/bszxGrade"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const gradeList = ref<BszxClassParam[]>([]); |
|||
|
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: BszxClassParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
// 表单数据 |
|||
const {where, resetFields} = useSearch<BszxClassParam>({ |
|||
gradeId: undefined, |
|||
eraId: undefined, |
|||
branch: undefined, |
|||
keywords: '' |
|||
}); |
|||
|
|||
// 新增 |
|||
const add = () => { |
|||
emit('add'); |
|||
}; |
|||
|
|||
const handleSearch = () => { |
|||
emit('search', where); |
|||
} |
|||
|
|||
/* 重置 */ |
|||
const reset = () => { |
|||
resetFields(); |
|||
handleSearch(); |
|||
}; |
|||
|
|||
const onGrade = (gradeId: number) => { |
|||
where.gradeId = gradeId; |
|||
handleSearch(); |
|||
} |
|||
|
|||
const reload = () => { |
|||
listBszxGrade({}).then(res => { |
|||
gradeList.value = res.map(d => { |
|||
d.value = Number(d.id); |
|||
d.label = d.name; |
|||
return d; |
|||
}); |
|||
}) |
|||
} |
|||
reload(); |
|||
watch( |
|||
() => props.selection, |
|||
() => { |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,237 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<template #extra> |
|||
<a-button |
|||
type="text" |
|||
@click="openUrl('/bsyx/grade')" |
|||
>年级设置 |
|||
</a-button |
|||
> |
|||
<a-button |
|||
type="text" |
|||
@click="openUrl('/bsyx/class')" |
|||
>班级设置 |
|||
</a-button |
|||
> |
|||
</template> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="id" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
@add="openEdit" |
|||
@remove="removeBatch" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image :src="record.image" :width="50"/> |
|||
</template> |
|||
<template v-if="column.key === 'era'"> |
|||
<span>{{ record.era }}级</span> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<a-space> |
|||
<a @click="openEdit(record)">修改</a> |
|||
<a-divider type="vertical"/> |
|||
<a-popconfirm |
|||
title="确定要删除此记录吗？" |
|||
@confirm="remove(record)" |
|||
> |
|||
<a class="ele-text-danger">删除</a> |
|||
</a-popconfirm> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<BszxClassEdit v-model:visible="showEdit" :data="current" @done="reload"/> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {createVNode, ref} from 'vue'; |
|||
import {message, Modal} from 'ant-design-vue'; |
|||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'; |
|||
import type {EleProTable} from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import BszxClassEdit from './components/bszxClassEdit.vue'; |
|||
import {pageBszxClass, removeBszxClass, removeBatchBszxClass} from '@/api/bszx/bszxClass'; |
|||
import type {BszxClass, BszxClassParam} from '@/api/bszx/bszxClass/model'; |
|||
import {getPageTitle, openUrl} from "@/utils/common"; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
|
|||
// 表格选中数据 |
|||
const selection = ref<BszxClass[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<BszxClass | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 加载状态 |
|||
const loading = ref(true); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({ |
|||
page, |
|||
limit, |
|||
where, |
|||
orders, |
|||
filters |
|||
}) => { |
|||
if (filters) { |
|||
where.status = filters.status; |
|||
} |
|||
return pageBszxClass({ |
|||
...where, |
|||
...orders, |
|||
page, |
|||
limit |
|||
}); |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
// { |
|||
// title: 'ID', |
|||
// dataIndex: 'id', |
|||
// key: 'id', |
|||
// width: 120, |
|||
// }, |
|||
{ |
|||
title: '年级', |
|||
dataIndex: 'gradeName', |
|||
key: 'gradeName', |
|||
width: 120 |
|||
}, |
|||
// { |
|||
// title: '年级', |
|||
// dataIndex: 'gradeId', |
|||
// key: 'gradeId', |
|||
// width: 120 |
|||
// }, |
|||
{ |
|||
title: '班级', |
|||
dataIndex: 'name', |
|||
key: 'name' |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
key: 'action', |
|||
width: 180, |
|||
fixed: 'right', |
|||
align: 'center', |
|||
hideInSetting: true |
|||
} |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: BszxClassParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({where: where}); |
|||
}; |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: BszxClass) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
/* 删除单个 */ |
|||
const remove = (row: BszxClass) => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBszxClass(row.id) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
}; |
|||
|
|||
/* 批量删除 */ |
|||
const removeBatch = () => { |
|||
if (!selection.value.length) { |
|||
message.error('请至少选择一条数据'); |
|||
return; |
|||
} |
|||
Modal.confirm({ |
|||
title: '提示', |
|||
content: '确定要删除选中的记录吗?', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
maskClosable: true, |
|||
onOk: () => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBatchBszxClass(selection.value.map((d) => d.id)) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
/* 查询 */ |
|||
const query = () => { |
|||
loading.value = true; |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: BszxClass) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
// console.log(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
query(); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
export default { |
|||
name: 'BszxClass' |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,164 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="800" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
:title="isUpdate ? '编辑年级' : '添加年级'" |
|||
:body-style="{ paddingBottom: '28px' }" |
|||
@update:visible="updateVisible" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:rules="rules" |
|||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-form-item label="年级" name="name"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入年级" |
|||
v-model:value="form.name" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="排序" name="sortNumber"> |
|||
<a-input-number |
|||
:min="0" |
|||
:max="9999" |
|||
class="ele-fluid" |
|||
placeholder="请输入排序号" |
|||
v-model:value="form.sortNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="comments"> |
|||
<a-textarea |
|||
:rows="4" |
|||
:maxlength="200" |
|||
placeholder="请输入描述" |
|||
v-model:value="form.comments" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { Form, message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { addBszxGrade, updateBszxGrade } from '@/api/bszx/bszxGrade'; |
|||
import { BszxGrade } from '@/api/bszx/bszxGrade/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const useForm = Form.useForm; |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: BszxGrade | null; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<BszxGrade>({ |
|||
id: undefined, |
|||
branch: 2, |
|||
name: undefined, |
|||
comments: undefined, |
|||
status: undefined, |
|||
tenantId: undefined, |
|||
createTime: undefined, |
|||
sortNumber: 100 |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
// 表单验证规则 |
|||
const rules = reactive({ |
|||
appBszxGradeName: [ |
|||
{ |
|||
required: true, |
|||
type: 'string', |
|||
message: '请填写应用-百色中学-年级名称', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}); |
|||
|
|||
const { resetFields } = useForm(form, rules); |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
const formData = { |
|||
...form |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateBszxGrade : addBszxGrade; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
loading.value = false; |
|||
message.error(e.message); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (visible) { |
|||
images.value = []; |
|||
if (props.data) { |
|||
assignObject(form, props.data); |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} else { |
|||
resetFields(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,52 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-button type="primary" class="ele-btn-icon" @click="add"> |
|||
<template #icon> |
|||
<PlusOutlined /> |
|||
</template> |
|||
<span>添加</span> |
|||
</a-button> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { PlusOutlined } from '@ant-design/icons-vue'; |
|||
import useSearch from "@/utils/use-search"; |
|||
import { watch } from 'vue'; |
|||
import {BszxGradeParam} from "@/api/bszx/bszxGrade/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: BszxGradeParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
// 表单数据 |
|||
const {where} = useSearch<BszxGradeParam>({ |
|||
branch: undefined, |
|||
keywords: '' |
|||
}); |
|||
|
|||
// 新增 |
|||
const add = () => { |
|||
emit('add'); |
|||
}; |
|||
|
|||
const handleSearch = () => { |
|||
emit('search', where); |
|||
} |
|||
watch( |
|||
() => props.selection, |
|||
() => {} |
|||
); |
|||
</script> |
|||
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<template #extra> |
|||
<a-button |
|||
type="text" |
|||
@click="openUrl('/bsyx/grade')" |
|||
>年级设置 |
|||
</a-button |
|||
> |
|||
<a-button |
|||
type="text" |
|||
@click="openUrl('/bsyx/class')" |
|||
>班级设置 |
|||
</a-button |
|||
> |
|||
</template> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="appBszxGradeId" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
@add="openEdit" |
|||
@remove="removeBatch" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image :src="record.image" :width="50" /> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<a-space> |
|||
<a @click="openEdit(record)">修改</a> |
|||
<a-divider type="vertical" /> |
|||
<a-popconfirm |
|||
title="确定要删除此记录吗？" |
|||
@confirm="remove(record)" |
|||
> |
|||
<a class="ele-text-danger">删除</a> |
|||
</a-popconfirm> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<BszxGradeEdit v-model:visible="showEdit" :data="current" @done="reload" /> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { createVNode, ref } from 'vue'; |
|||
import { message, Modal } from 'ant-design-vue'; |
|||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|||
import type { EleProTable } from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import BszxGradeEdit from './components/bszxGradeEdit.vue'; |
|||
import { pageBszxGrade, removeBszxGrade, removeBatchBszxGrade } from '@/api/bszx/bszxGrade'; |
|||
import type { BszxGrade, BszxGradeParam } from '@/api/bszx/bszxGrade/model'; |
|||
import {getPageTitle, openUrl} from "@/utils/common"; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
|
|||
// 表格选中数据 |
|||
const selection = ref<BszxGrade[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<BszxGrade | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 加载状态 |
|||
const loading = ref(true); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({ |
|||
page, |
|||
limit, |
|||
where, |
|||
orders, |
|||
filters |
|||
}) => { |
|||
if (filters) { |
|||
where.status = filters.status; |
|||
} |
|||
return pageBszxGrade({ |
|||
...where, |
|||
...orders, |
|||
page, |
|||
limit |
|||
}); |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
// { |
|||
// title: 'ID', |
|||
// dataIndex: 'id', |
|||
// key: 'id', |
|||
// align: 'center', |
|||
// width: 90, |
|||
// }, |
|||
{ |
|||
title: '年级', |
|||
dataIndex: 'name', |
|||
key: 'name' |
|||
}, |
|||
{ |
|||
title: '排序', |
|||
dataIndex: 'sortNumber', |
|||
key: 'sortNumber', |
|||
align: 'center', |
|||
width: 120, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
key: 'action', |
|||
width: 180, |
|||
fixed: 'right', |
|||
align: 'center', |
|||
hideInSetting: true |
|||
} |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: BszxGradeParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({ where: where }); |
|||
}; |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: BszxGrade) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
/* 删除单个 */ |
|||
const remove = (row: BszxGrade) => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBszxGrade(row.id) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
}; |
|||
|
|||
/* 批量删除 */ |
|||
const removeBatch = () => { |
|||
if (!selection.value.length) { |
|||
message.error('请至少选择一条数据'); |
|||
return; |
|||
} |
|||
Modal.confirm({ |
|||
title: '提示', |
|||
content: '确定要删除选中的记录吗?', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
maskClosable: true, |
|||
onOk: () => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBatchBszxGrade(selection.value.map((d) => d.id)) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
/* 查询 */ |
|||
const query = () => { |
|||
loading.value = true; |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: BszxGrade) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
// console.log(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
query(); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
export default { |
|||
name: 'BszxGrade' |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,249 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="800" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
:title="isUpdate ? '编辑捐款记录' : '添加捐款记录'" |
|||
:body-style="{ paddingBottom: '28px' }" |
|||
@update:visible="updateVisible" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:rules="rules" |
|||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-form-item label="年龄" name="age"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入年龄" |
|||
v-model:value="form.age" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="姓名" name="name"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入姓名" |
|||
v-model:value="form.name" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="性别 1男 2女" name="sex"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入性别 1男 2女" |
|||
v-model:value="form.sex" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="手机号码" name="phone"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入手机号码" |
|||
v-model:value="form.phone" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="班级" name="className"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入班级" |
|||
v-model:value="form.className" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="年级" name="gradeName"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入年级" |
|||
v-model:value="form.gradeName" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="居住地址" name="address"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入居住地址" |
|||
v-model:value="form.address" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="工作单位" name="workUnit"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入工作单位" |
|||
v-model:value="form.workUnit" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="职务" name="position"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入职务" |
|||
v-model:value="form.position" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="捐赠证书" name="certificate"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入捐赠证书" |
|||
v-model:value="form.certificate" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="排序(数字越小越靠前)" name="sortNumber"> |
|||
<a-input-number |
|||
:min="0" |
|||
:max="9999" |
|||
class="ele-fluid" |
|||
placeholder="请输入排序号" |
|||
v-model:value="form.sortNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="comments"> |
|||
<a-textarea |
|||
:rows="4" |
|||
:maxlength="200" |
|||
placeholder="请输入描述" |
|||
v-model:value="form.comments" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="状态" name="status"> |
|||
<a-radio-group v-model:value="form.status"> |
|||
<a-radio :value="0">显示</a-radio> |
|||
<a-radio :value="1">隐藏</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { Form, message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { addBszxPay, updateBszxPay } from '@/api/bszx/bszxPay'; |
|||
import { BszxPay } from '@/api/bszx/bszxPay/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
import { FileRecord } from '@/api/system/file/model'; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const useForm = Form.useForm; |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: BszxPay | null; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<BszxPay>({ |
|||
id: undefined, |
|||
age: undefined, |
|||
name: undefined, |
|||
sex: undefined, |
|||
phone: undefined, |
|||
className: undefined, |
|||
gradeName: undefined, |
|||
address: undefined, |
|||
workUnit: undefined, |
|||
position: undefined, |
|||
number: undefined, |
|||
extra: undefined, |
|||
dateTime: undefined, |
|||
certificate: undefined, |
|||
formData: undefined, |
|||
formId: undefined, |
|||
userId: undefined, |
|||
comments: undefined, |
|||
status: undefined, |
|||
deleted: undefined, |
|||
tenantId: undefined, |
|||
createTime: undefined, |
|||
sortNumber: 100 |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
// 表单验证规则 |
|||
const rules = reactive({ |
|||
appBszxPayName: [ |
|||
{ |
|||
required: true, |
|||
type: 'string', |
|||
message: '请填写应用-百色中学-捐款记录名称', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}); |
|||
|
|||
const { resetFields } = useForm(form, rules); |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
const formData = { |
|||
...form |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateBszxPay : addBszxPay; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
loading.value = false; |
|||
message.error(e.message); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (visible) { |
|||
images.value = []; |
|||
if (props.data) { |
|||
assignObject(form, props.data); |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} else { |
|||
resetFields(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,230 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-select |
|||
show-search |
|||
v-model:value="where.gradeName" |
|||
style="width: 240px" |
|||
placeholder="选择年级" |
|||
:options="gradeList" |
|||
@change="onGrade" |
|||
></a-select> |
|||
<a-select |
|||
v-if="where.gradeName" |
|||
show-search |
|||
v-model:value="where.className" |
|||
style="width: 240px" |
|||
placeholder="选择年级" |
|||
:options="classList" |
|||
@change="onClass" |
|||
></a-select> |
|||
<a-range-picker |
|||
v-model:value="dateRange" |
|||
@change="search" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
<a-input-search |
|||
allow-clear |
|||
placeholder="请输入关键词" |
|||
style="width: 220px" |
|||
v-model:value="where.keywords" |
|||
@search="reload" |
|||
/> |
|||
<a-button @click="handleExport">导出</a-button> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref, watch} from 'vue'; |
|||
import {utils, writeFile} from 'xlsx'; |
|||
import dayjs from 'dayjs'; |
|||
import {message} from 'ant-design-vue'; |
|||
import useSearch from "@/utils/use-search"; |
|||
import {BszxPayParam} from "@/api/bszx/bszxPay/model"; |
|||
import {BszxBm} from "@/api/bszx/bszxBm/model"; |
|||
import {listBszxPay} from "@/api/bszx/bszxPay"; |
|||
import {BszxClassParam} from "@/api/bszx/bszxClass/model"; |
|||
import {listBszxGrade} from "@/api/bszx/bszxGrade"; |
|||
import {listBszxClass} from "@/api/bszx/bszxClass"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: BszxPayParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
// 表单数据 |
|||
const {where} = useSearch<BszxPayParam>({ |
|||
id: undefined, |
|||
keywords: '', |
|||
gradeName: undefined, |
|||
className: undefined, |
|||
createTimeStart: undefined, |
|||
createTimeEnd: undefined, |
|||
userId: undefined |
|||
}); |
|||
|
|||
const reload = () => { |
|||
emit('search', where); |
|||
}; |
|||
|
|||
/* 搜索 */ |
|||
const search = () => { |
|||
const [d1, d2] = dateRange.value ?? []; |
|||
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined; |
|||
where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined; |
|||
emit('search', { |
|||
...where |
|||
}); |
|||
}; |
|||
|
|||
|
|||
const dateRange = ref<[string, string]>(['', '']); |
|||
// 变量 |
|||
const loading = ref(false); |
|||
const bmList = ref<BszxBm[]>([]) |
|||
const xlsFileName = ref<string>(); |
|||
const branchId = ref<number>(); |
|||
const gradeId = ref<number>(); |
|||
const gradeList = ref<BszxClassParam[]>([]); |
|||
const classList = ref<BszxClassParam[]>([]); |
|||
|
|||
|
|||
const getGradeList = () => { |
|||
listBszxGrade({branch: branchId.value}).then(res => { |
|||
gradeList.value = res.map(d => { |
|||
d.value = Number(d.id); |
|||
d.label = d.name; |
|||
return d; |
|||
}); |
|||
}) |
|||
}; |
|||
|
|||
const getClassList = () => { |
|||
listBszxClass({gradeId: gradeId.value}).then(res => { |
|||
classList.value = res.map(d => { |
|||
d.value = Number(d.id); |
|||
d.label = d.name; |
|||
return d; |
|||
}); |
|||
}) |
|||
} |
|||
|
|||
const onGrade = (gradeName: number, item: any) => { |
|||
where.gradeName = item.name; |
|||
if (gradeName) { |
|||
console.log(item) |
|||
gradeId.value = item.id; |
|||
getClassList(); |
|||
} |
|||
emit('search', where); |
|||
} |
|||
|
|||
const onBranchId = () => { |
|||
getGradeList(); |
|||
} |
|||
|
|||
const onClass = (classId, item) => { |
|||
console.log(classId); |
|||
where.className = item.name; |
|||
reload(); |
|||
} |
|||
|
|||
// 导出 |
|||
const handleExport = async () => { |
|||
loading.value = true; |
|||
const array: (string | number)[][] = [ |
|||
[ |
|||
'订单编号', |
|||
'姓名', |
|||
'手机号码', |
|||
'捐款金额', |
|||
'性别', |
|||
'年级', |
|||
'班级', |
|||
'居住地址', |
|||
'工作单位', |
|||
'职务', |
|||
'捐款时间' |
|||
] |
|||
]; |
|||
|
|||
// 按搜索结果导出 |
|||
where.sceneType = 'Content'; |
|||
await listBszxPay(where) |
|||
.then((list) => { |
|||
bmList.value = list; |
|||
list?.forEach((d: BszxBm) => { |
|||
array.push([ |
|||
`${d.orderNo}`, |
|||
`${d.name}`, |
|||
`${d.mobile}`, |
|||
`${d.price}`, |
|||
`${d.sex == 1 ? '男' : ''}${d.sex == 2 ? '女' : '-'}`, |
|||
`${d.gradeName ? d.gradeName : '-'}`, |
|||
`${d.className ? d.className : '-'}`, |
|||
`${d.address ? d.address : '-'}`, |
|||
`${d.workUnit ? d.workUnit : '-'}`, |
|||
`${d.position ? d.position : '-'}`, |
|||
`${d.createTime}` |
|||
]); |
|||
}); |
|||
const sheetName = `导出捐款记录${dayjs(new Date()).format('YYYYMMDD')}`; |
|||
const workbook = { |
|||
SheetNames: [sheetName], |
|||
Sheets: {} |
|||
}; |
|||
const sheet = utils.aoa_to_sheet(array); |
|||
workbook.Sheets[sheetName] = sheet; |
|||
// 设置列宽 |
|||
sheet['!cols'] = [ |
|||
{wch: 10}, |
|||
{wch: 40}, |
|||
{wch: 20}, |
|||
{wch: 20}, |
|||
{wch: 60}, |
|||
{wch: 15}, |
|||
{wch: 10}, |
|||
{wch: 10}, |
|||
{wch: 20}, |
|||
{wch: 10}, |
|||
{wch: 20} |
|||
]; |
|||
message.loading('正在导出...'); |
|||
setTimeout(() => { |
|||
writeFile( |
|||
workbook, |
|||
`${ |
|||
where.createTimeEnd ? xlsFileName.value + '_' : '' |
|||
}${sheetName}.xlsx` |
|||
); |
|||
loading.value = false; |
|||
}, 1000); |
|||
}) |
|||
.catch((msg) => { |
|||
message.error(msg); |
|||
loading.value = false; |
|||
}) |
|||
.finally(() => { |
|||
}); |
|||
|
|||
}; |
|||
|
|||
getGradeList(); |
|||
|
|||
watch( |
|||
() => props.totalPriceAmount, |
|||
(totalPriceAmount) => { |
|||
console.log(totalPriceAmount, 'totalPriceAmount') |
|||
} |
|||
); |
|||
</script> |
|||
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<template #extra> |
|||
<Extra/> |
|||
</template> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="id" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
:parse-data="parseData" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
@add="openEdit" |
|||
@remove="removeBatch" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'name'"> |
|||
<div @click="onSearch(record)" class="cursor-pointer">{{ record.name || '匿名' }}</div> |
|||
</template> |
|||
<template v-if="column.key === 'phone'"> |
|||
<div v-if="record.mobile" class="text-gray-400">{{ record.mobile }}</div> |
|||
<div v-else class="text-gray-600">{{ record.phone }}</div> |
|||
</template> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image :src="record.image" :width="50"/> |
|||
</template> |
|||
<template v-if="column.key === 'sex'"> |
|||
<a-tag v-if="record.sex === 1">男</a-tag> |
|||
<a-tag v-if="record.sex === 2">女</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'present'"> |
|||
<a-tag v-if="record.present">能</a-tag> |
|||
<a-tag v-else>不能</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<a-space> |
|||
<a @click="openEdit(record)">修改</a> |
|||
<a-divider type="vertical"/> |
|||
<a-popconfirm |
|||
title="确定要删除此记录吗？" |
|||
@confirm="remove(record)" |
|||
> |
|||
<a class="ele-text-danger">删除</a> |
|||
</a-popconfirm> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
<template #footer> |
|||
<span v-if="totalPriceAmount" class="text-red-500 font-bold">小计：￥{{ totalPriceAmount.toFixed(2) }}</span> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<BszxPayEdit v-model:visible="showEdit" :data="current" @done="reload"/> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {createVNode, ref} from 'vue'; |
|||
import {message, Modal} from 'ant-design-vue'; |
|||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'; |
|||
import type {EleProTable} from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import BszxPayEdit from './components/bszxPayEdit.vue'; |
|||
import {pageBszxPay, removeBszxPay, removeBatchBszxPay} from '@/api/bszx/bszxPay'; |
|||
import type {BszxPay, BszxPayParam} from '@/api/bszx/bszxPay/model'; |
|||
import {getPageTitle} from "@/utils/common"; |
|||
import Extra from "@/views/bsyx/extra.vue"; |
|||
import {PageResult} from "@/api"; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
|
|||
// 表格选中数据 |
|||
const selection = ref<BszxPay[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<BszxPay | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 加载状态 |
|||
const loading = ref(true); |
|||
const totalPriceAmount = ref<number>(0); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({ |
|||
page, |
|||
limit, |
|||
where, |
|||
orders, |
|||
filters |
|||
}) => { |
|||
if (filters) { |
|||
where.status = filters.status; |
|||
} |
|||
return pageBszxPay({ |
|||
...where, |
|||
...orders, |
|||
page, |
|||
limit |
|||
}); |
|||
}; |
|||
|
|||
// 整理数据 |
|||
const parseData = (data: PageResult<BszxPay>) => { |
|||
totalPriceAmount.value = 0; |
|||
data.list?.map((item) => { |
|||
if(item.price){ |
|||
totalPriceAmount.value += Number(item.price) |
|||
} |
|||
}) |
|||
return data; |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
{ |
|||
title: '订单编号', |
|||
dataIndex: 'orderNo', |
|||
key: 'orderNo', |
|||
align: 'center', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '手机号码', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
align: 'center', |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '捐款金额', |
|||
dataIndex: 'price', |
|||
key: 'price', |
|||
width: 120, |
|||
align: 'center', |
|||
sorter: true, |
|||
customRender: ({text}) => '￥' + text |
|||
}, |
|||
{ |
|||
title: '性别', |
|||
dataIndex: 'sex', |
|||
key: 'sex', |
|||
align: 'center', |
|||
customRender: ({text}) => ['', '男', '女'][text] |
|||
}, |
|||
{ |
|||
title: '分部', |
|||
dataIndex: 'branchName', |
|||
key: 'branchName', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '年级', |
|||
dataIndex: 'gradeName', |
|||
key: 'gradeName', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '班级', |
|||
dataIndex: 'className', |
|||
key: 'className', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '居住地址', |
|||
dataIndex: 'address', |
|||
key: 'address', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '工作单位', |
|||
dataIndex: 'workUnit', |
|||
key: 'workUnit', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '职务', |
|||
dataIndex: 'position', |
|||
key: 'position', |
|||
align: 'center', |
|||
}, |
|||
// { |
|||
// title: '捐赠证书', |
|||
// dataIndex: 'certificate', |
|||
// key: 'certificate', |
|||
// align: 'center', |
|||
// }, |
|||
{ |
|||
title: '心愿', |
|||
dataIndex: 'comments', |
|||
key: 'comments', |
|||
align: 'center', |
|||
}, |
|||
// { |
|||
// title: '状态', |
|||
// dataIndex: 'status', |
|||
// key: 'status', |
|||
// align: 'center', |
|||
// }, |
|||
{ |
|||
title: '捐款时间', |
|||
dataIndex: 'createTime', |
|||
key: 'createTime', |
|||
align: 'center', |
|||
width: 180, |
|||
sorter: true, |
|||
ellipsis: true |
|||
}, |
|||
// { |
|||
// title: '操作', |
|||
// key: 'action', |
|||
// width: 180, |
|||
// fixed: 'right', |
|||
// align: 'center', |
|||
// hideInSetting: true |
|||
// } |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: BszxPayParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({where: where}); |
|||
}; |
|||
|
|||
const onSearch = (item: BszxPay) => { |
|||
reload({userId: item.userId}) |
|||
} |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: BszxPay) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
/* 删除单个 */ |
|||
const remove = (row: BszxPay) => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBszxPay(row.id) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
}; |
|||
|
|||
/* 批量删除 */ |
|||
const removeBatch = () => { |
|||
if (!selection.value.length) { |
|||
message.error('请至少选择一条数据'); |
|||
return; |
|||
} |
|||
Modal.confirm({ |
|||
title: '提示', |
|||
content: '确定要删除选中的记录吗?', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
maskClosable: true, |
|||
onOk: () => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBatchBszxPay(selection.value.map((d) => d.id)) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
/* 查询 */ |
|||
const query = () => { |
|||
loading.value = true; |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: BszxPay) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
// console.log(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
// openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
query(); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
export default { |
|||
name: 'BszxPay' |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,220 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="800" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
:title="isUpdate ? '编辑百色中学-捐款排行' : '添加百色中学-捐款排行'" |
|||
:body-style="{ paddingBottom: '28px' }" |
|||
@update:visible="updateVisible" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:rules="rules" |
|||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-form-item label="来源表ID（项目名称）" name="formId"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入来源表ID（项目名称）" |
|||
v-model:value="form.formId" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="数量" name="number"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入数量" |
|||
v-model:value="form.number" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="获得捐款总金额" name="totalPrice"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入获得捐款总金额" |
|||
v-model:value="form.totalPrice" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="排序(数字越小越靠前)" name="sortNumber"> |
|||
<a-input-number |
|||
:min="0" |
|||
:max="9999" |
|||
class="ele-fluid" |
|||
placeholder="请输入排序号" |
|||
v-model:value="form.sortNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="comments"> |
|||
<a-textarea |
|||
:rows="4" |
|||
:maxlength="200" |
|||
placeholder="请输入描述" |
|||
v-model:value="form.comments" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="状态, 0正常, 1冻结" name="status"> |
|||
<a-radio-group v-model:value="form.status"> |
|||
<a-radio :value="0">显示</a-radio> |
|||
<a-radio :value="1">隐藏</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
<a-form-item label="是否删除, 0否, 1是" name="deleted"> |
|||
<a-input |
|||
allow-clear |
|||
placeholder="请输入是否删除, 0否, 1是" |
|||
v-model:value="form.deleted" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { Form, message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { addBszxPayRanking, updateBszxPayRanking } from '@/api/bszx/bszxPayRanking'; |
|||
import { BszxPayRanking } from '@/api/bszx/bszxPayRanking/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
import { FileRecord } from '@/api/system/file/model'; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const useForm = Form.useForm; |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: BszxPayRanking | null; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<BszxPayRanking>({ |
|||
id: undefined, |
|||
formId: undefined, |
|||
number: undefined, |
|||
totalPrice: undefined, |
|||
sortNumber: undefined, |
|||
comments: undefined, |
|||
status: undefined, |
|||
deleted: undefined, |
|||
tenantId: undefined, |
|||
createTime: undefined, |
|||
bszxPayRankingId: undefined, |
|||
bszxPayRankingName: '', |
|||
status: 0, |
|||
comments: '', |
|||
sortNumber: 100 |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
// 表单验证规则 |
|||
const rules = reactive({ |
|||
bszxPayRankingName: [ |
|||
{ |
|||
required: true, |
|||
type: 'string', |
|||
message: '请填写百色中学-捐款排行名称', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}); |
|||
|
|||
const chooseImage = (data: FileRecord) => { |
|||
images.value.push({ |
|||
uid: data.id, |
|||
url: data.path, |
|||
status: 'done' |
|||
}); |
|||
form.image = data.path; |
|||
}; |
|||
|
|||
const onDeleteItem = (index: number) => { |
|||
images.value.splice(index, 1); |
|||
form.image = ''; |
|||
}; |
|||
|
|||
const { resetFields } = useForm(form, rules); |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
const formData = { |
|||
...form |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateBszxPayRanking : addBszxPayRanking; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
loading.value = false; |
|||
message.error(e.message); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (visible) { |
|||
images.value = []; |
|||
if (props.data) { |
|||
assignObject(form, props.data); |
|||
if(props.data.image){ |
|||
images.value.push({ |
|||
uid: uuid(), |
|||
url: props.data.image, |
|||
status: 'done' |
|||
}) |
|||
} |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} else { |
|||
resetFields(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,69 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-range-picker |
|||
v-model:value="dateRange" |
|||
@change="search" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
<a-tooltip title="获得捐款总金额" class="flex px-4"> |
|||
<span class="text-gray-400">捐款总金额：</span> |
|||
<span class="text-gray-700 font-bold">￥{{ formatNumber(totalPriceAmount) }}</span> |
|||
</a-tooltip> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import useSearch from "@/utils/use-search"; |
|||
import { watch,ref } from 'vue'; |
|||
import { formatNumber } from 'ele-admin-pro/es'; |
|||
import {BszxPayRankingParam} from "@/api/bszx/bszxPayRanking/model"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
totalPriceAmount?: number; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
// 日期范围选择 |
|||
const dateRange = ref<[string, string]>(['', '']); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: BszxPayRankingParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
// 表单数据 |
|||
const {where,resetFields} = useSearch<BszxPayRankingParam>({ |
|||
id: undefined, |
|||
userId: undefined, |
|||
createTimeStart: undefined, |
|||
createTimeEnd: undefined, |
|||
keywords: '' |
|||
}); |
|||
|
|||
/* 搜索 */ |
|||
const search = () => { |
|||
const [d1, d2] = dateRange.value ?? []; |
|||
emit('search', { |
|||
...where, |
|||
createTimeStart: d1 ? d1 + ' 00:00:00' : '', |
|||
createTimeEnd: d2 ? d2 + ' 23:59:59' : '' |
|||
}); |
|||
}; |
|||
|
|||
const onSearch = (text: string) => { |
|||
where.sceneType = text |
|||
search(); |
|||
} |
|||
|
|||
watch( |
|||
() => props.selection, |
|||
() => {} |
|||
); |
|||
</script> |
|||
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<template #extra> |
|||
<Extra/> |
|||
</template> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="id" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
:totalPriceAmount="totalPriceAmount.toFixed(2)" |
|||
@add="openEdit" |
|||
@remove="removeBatch" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image :src="record.image" :width="50"/> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<a-space> |
|||
<a @click="openEdit(record)">修改</a> |
|||
<a-divider type="vertical"/> |
|||
<a-popconfirm |
|||
title="确定要删除此记录吗？" |
|||
@confirm="remove(record)" |
|||
> |
|||
<a class="ele-text-danger">删除</a> |
|||
</a-popconfirm> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<BszxPayRankingEdit v-model:visible="showEdit" :data="current" @done="reload"/> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {createVNode, ref} from 'vue'; |
|||
import {message, Modal} from 'ant-design-vue'; |
|||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'; |
|||
import type {EleProTable} from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import BszxPayRankingEdit from './components/bszxPayRankingEdit.vue'; |
|||
import {removeBszxPayRanking, removeBatchBszxPayRanking, ranking} from '@/api/bszx/bszxPayRanking'; |
|||
import type {BszxPayRanking, BszxPayRankingParam} from '@/api/bszx/bszxPayRanking/model'; |
|||
import {getPageTitle} from "@/utils/common"; |
|||
import Extra from "@/views/bsyx/extra.vue"; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
|
|||
// 表格选中数据 |
|||
const selection = ref<BszxPayRanking[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<BszxPayRanking | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 加载状态 |
|||
const loading = ref(true); |
|||
// 合计总金额 |
|||
const totalPriceAmount = ref<number>(0); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({where}) => { |
|||
return ranking({...where}).then(data => { |
|||
totalPriceAmount.value = 0; |
|||
data.map((item) => { |
|||
if (item.totalPrice) { |
|||
totalPriceAmount.value += item.totalPrice |
|||
} |
|||
}) |
|||
return data; |
|||
}); |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
{ |
|||
key: 'index', |
|||
width: 48, |
|||
align: 'center', |
|||
fixed: 'left', |
|||
hideInSetting: true, |
|||
customRender: ({index}) => index + (tableRef.value?.tableIndex ?? 0) |
|||
}, |
|||
{ |
|||
title: '项目名称', |
|||
dataIndex: 'formName', |
|||
key: 'formName' |
|||
}, |
|||
{ |
|||
title: '捐款人数', |
|||
dataIndex: 'number', |
|||
key: 'number', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '获得捐款总金额', |
|||
dataIndex: 'totalPrice', |
|||
key: 'totalPrice', |
|||
align: 'center', |
|||
} |
|||
// { |
|||
// title: '操作', |
|||
// key: 'action', |
|||
// width: 180, |
|||
// fixed: 'right', |
|||
// align: 'center', |
|||
// hideInSetting: true |
|||
// } |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: BszxPayRankingParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({where: where}); |
|||
}; |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: BszxPayRanking) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
/* 删除单个 */ |
|||
const remove = (row: BszxPayRanking) => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBszxPayRanking(row.bszxPayRankingId) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
}; |
|||
|
|||
/* 批量删除 */ |
|||
const removeBatch = () => { |
|||
if (!selection.value.length) { |
|||
message.error('请至少选择一条数据'); |
|||
return; |
|||
} |
|||
Modal.confirm({ |
|||
title: '提示', |
|||
content: '确定要删除选中的记录吗?', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
maskClosable: true, |
|||
onOk: () => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBatchBszxPayRanking(selection.value.map((d) => d.bszxPayRankingId)) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
/* 查询 */ |
|||
const query = () => { |
|||
loading.value = true; |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: BszxPayRanking) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
// console.log(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
query(); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
export default { |
|||
name: 'BszxPayRanking' |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,60 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space style="flex-wrap: wrap" v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"> |
|||
<a-button |
|||
type="text" |
|||
@click="openUrl('/bsyx/ranking')" |
|||
>捐款排行榜 |
|||
</a-button> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {watch,nextTick} from 'vue'; |
|||
import {CmsWebsite} from '@/api/cms/cmsWebsite/model'; |
|||
import {openUrl} from "@/utils/common"; |
|||
import {message} from 'ant-design-vue'; |
|||
import {removeSiteInfoCache} from "@/api/cms/cmsWebsite"; |
|||
import {hasRole} from "@/utils/permission"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: []; |
|||
website?: CmsWebsite; |
|||
count?: 0; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'add'): void; |
|||
}>(); |
|||
|
|||
const add = () => { |
|||
emit('add'); |
|||
}; |
|||
|
|||
// 清除缓存 |
|||
const clearSiteInfoCache = () => { |
|||
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId') + "*").then( |
|||
(msg) => { |
|||
if (msg) { |
|||
message.success(msg); |
|||
} |
|||
} |
|||
); |
|||
}; |
|||
|
|||
nextTick(() => { |
|||
if(localStorage.getItem('NotActive')){ |
|||
// IsActive.value = false |
|||
} |
|||
}) |
|||
|
|||
watch( |
|||
() => props.selection, |
|||
() => { |
|||
} |
|||
); |
|||
</script> |
|||
@ -0,0 +1,237 @@ |
|||
<!-- 编辑弹窗 --> |
|||
<template> |
|||
<ele-modal |
|||
:width="1000" |
|||
:visible="visible" |
|||
:maskClosable="false" |
|||
:maxable="maxable" |
|||
title="文章详情" |
|||
:body-style="{ paddingBottom: '18px' }" |
|||
@update:visible="updateVisible" |
|||
:confirm-loading="loading" |
|||
@ok="save" |
|||
> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="form" |
|||
:label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }" |
|||
:wrapper-col=" |
|||
styleResponsive ? { md: 20, sm: 20, xs: 20 } : { flex: '1' } |
|||
" |
|||
> |
|||
<a-spin :spinning="loading"> |
|||
<div v-html="content"></div> |
|||
</a-spin> |
|||
</a-form> |
|||
</ele-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, watch } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { assignObject, uuid } from 'ele-admin-pro'; |
|||
import { |
|||
addCmsArticle, |
|||
getCmsArticle, |
|||
updateCmsArticle |
|||
} from '@/api/cms/cmsArticle'; |
|||
import { CmsArticle } from '@/api/cms/cmsArticle/model'; |
|||
import { useThemeStore } from '@/store/modules/theme'; |
|||
import { storeToRefs } from 'pinia'; |
|||
import { useI18n } from 'vue-i18n'; |
|||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types'; |
|||
import { FormInstance } from 'ant-design-vue/es/form'; |
|||
import { useWebsiteSettingStore } from '@/store/modules/setting'; |
|||
|
|||
// 是否是修改 |
|||
const isUpdate = ref(false); |
|||
const setting = useWebsiteSettingStore(); |
|||
const { locale } = useI18n(); |
|||
const editor = ref<number>(1); |
|||
// 是否开启响应式布局 |
|||
const themeStore = useThemeStore(); |
|||
const { styleResponsive } = storeToRefs(themeStore); |
|||
|
|||
const props = defineProps<{ |
|||
// 弹窗是否打开 |
|||
visible: boolean; |
|||
// 修改回显的数据 |
|||
data?: CmsArticle | null; |
|||
categoryId?: number; |
|||
}>(); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'done'): void; |
|||
(e: 'update:visible', visible: boolean): void; |
|||
}>(); |
|||
|
|||
// 提交状态 |
|||
const loading = ref(false); |
|||
// 是否显示最大化切换按钮 |
|||
const maxable = ref(true); |
|||
// 表格选中数据 |
|||
const formRef = ref<FormInstance | null>(null); |
|||
const images = ref<ItemType[]>([]); |
|||
const content = ref(''); |
|||
const files = ref<ItemType[]>([]); |
|||
const category = ref<string[]>([]); |
|||
const password = ref(); |
|||
|
|||
// 用户信息 |
|||
const form = reactive<CmsArticle>({ |
|||
articleId: undefined, |
|||
// 文章模型 |
|||
model: 'detail', |
|||
// 封面图 |
|||
image: '', |
|||
// 文章标题 |
|||
title: '', |
|||
type: 0, |
|||
// 展现方式 |
|||
showType: 10, |
|||
// 文章来源 |
|||
source: undefined, |
|||
// 产品概述 |
|||
overview: undefined, |
|||
// 标签集 |
|||
tags: undefined, |
|||
// 父级栏目ID |
|||
parentId: undefined, |
|||
// 栏目ID |
|||
categoryId: undefined, |
|||
// 栏目名称 |
|||
categoryName: undefined, |
|||
// 文章内容 |
|||
content: '', |
|||
// 虚拟阅读量 |
|||
virtualViews: 0, |
|||
// 实际阅读量 |
|||
actualViews: 0, |
|||
recommend: undefined, |
|||
translation: true, |
|||
permission: 0, |
|||
password: undefined, |
|||
password2: undefined, |
|||
// 用户ID |
|||
userId: undefined, |
|||
files: '', |
|||
lang: locale.value || undefined, |
|||
// 排序 |
|||
sortNumber: 100, |
|||
// 备注 |
|||
comments: undefined, |
|||
// 状态 |
|||
status: 1, |
|||
// 创建时间 |
|||
createTime: '', |
|||
// 更新时间 |
|||
updateTime: '' |
|||
}); |
|||
|
|||
/* 更新visible */ |
|||
const updateVisible = (value: boolean) => { |
|||
emit('update:visible', value); |
|||
}; |
|||
|
|||
/* 保存编辑 */ |
|||
const save = () => { |
|||
if (!formRef.value) { |
|||
return; |
|||
} |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
loading.value = true; |
|||
if (password.value) { |
|||
form.password = password.value; |
|||
} |
|||
if (form.tags) { |
|||
form.tags = JSON.stringify(form.tags); |
|||
} |
|||
const formData = { |
|||
...form, |
|||
editor: editor.value || 1, |
|||
status: setting.setting?.articleReview ? 1 : 0, |
|||
content: content.value |
|||
}; |
|||
const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle; |
|||
saveOrUpdate(formData) |
|||
.then((msg) => { |
|||
loading.value = false; |
|||
message.success(msg); |
|||
updateVisible(false); |
|||
emit('done'); |
|||
}) |
|||
.catch((e) => { |
|||
message.error(e.message); |
|||
}) |
|||
.finally(() => { |
|||
loading.value = false; |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.visible, |
|||
(visible) => { |
|||
if (props.categoryId) { |
|||
form.categoryId = props.categoryId; |
|||
} |
|||
if (localStorage.getItem('Editor')) { |
|||
editor.value = Number(localStorage.getItem('Editor')); |
|||
} |
|||
|
|||
if (visible) { |
|||
images.value = []; |
|||
category.value = []; |
|||
files.value = []; |
|||
content.value = ''; |
|||
if (props.data) { |
|||
loading.value = true; |
|||
// 文章详情 |
|||
getCmsArticle(Number(props.data?.articleId)).then((data) => { |
|||
assignObject(form, data); |
|||
if (data.content) { |
|||
content.value = data.content; |
|||
} |
|||
|
|||
if (data.image) { |
|||
images.value.push({ |
|||
uid: uuid(), |
|||
url: data.image, |
|||
status: 'done' |
|||
}); |
|||
} |
|||
if (!data.source) { |
|||
form.source = undefined; |
|||
} |
|||
if (data.tags) { |
|||
form.tags = JSON.parse(form.tags); |
|||
} else { |
|||
form.tags = undefined; |
|||
} |
|||
if (data.editor) { |
|||
editor.value = data.editor; |
|||
} |
|||
if (data.files) { |
|||
const arr = JSON.parse(data.files); |
|||
arr.map((url: string) => { |
|||
files.value.push({ |
|||
uid: uuid(), |
|||
url: url, |
|||
status: 'done' |
|||
}); |
|||
}); |
|||
} |
|||
loading.value = false; |
|||
}); |
|||
isUpdate.value = true; |
|||
} else { |
|||
isUpdate.value = false; |
|||
} |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
</script> |
|||
@ -0,0 +1,69 @@ |
|||
<!-- 搜索表单 --> |
|||
<template> |
|||
<a-space :size="10" style="flex-wrap: wrap"> |
|||
<a-input-search |
|||
allow-clear |
|||
placeholder="请输入关键词" |
|||
style="width: 240px" |
|||
v-model:value="where.keywords" |
|||
@search="reload" |
|||
/> |
|||
</a-space> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {watch} from 'vue'; |
|||
import type {CmsArticle, CmsArticleParam} from '@/api/cms/cmsArticle/model'; |
|||
import useSearch from '@/utils/use-search'; |
|||
import {CmsNavigation} from '@/api/cms/cmsNavigation/model'; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
// 选中的角色 |
|||
selection?: CmsArticle[]; |
|||
merchantId?: number; |
|||
navigationList?: CmsNavigation[]; |
|||
categoryId?: number; |
|||
}>(), |
|||
{} |
|||
); |
|||
|
|||
// 表单数据 |
|||
const {where} = useSearch<CmsArticleParam>({ |
|||
articleId: undefined, |
|||
model: undefined, |
|||
categoryId: undefined, |
|||
merchantId: undefined, |
|||
keywords: '', |
|||
sceneType: undefined, |
|||
userId: undefined |
|||
}); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'search', where?: CmsArticleParam): void; |
|||
(e: 'add'): void; |
|||
(e: 'remove'): void; |
|||
(e: 'batchMove'): void; |
|||
}>(); |
|||
|
|||
const reload = () => { |
|||
emit('search', where); |
|||
}; |
|||
|
|||
// 按分类查询 |
|||
const onCategoryId = (id: number) => { |
|||
where.categoryId = id; |
|||
emit('search', where); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.merchantId, |
|||
() => { |
|||
if (props.categoryId) { |
|||
where.categoryId = props.categoryId; |
|||
} |
|||
reload(); |
|||
}, |
|||
{immediate: true} |
|||
); |
|||
</script> |
|||
@ -0,0 +1,383 @@ |
|||
<template> |
|||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
|||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|||
<ele-pro-table |
|||
ref="tableRef" |
|||
row-key="articleId" |
|||
:columns="columns" |
|||
:datasource="datasource" |
|||
:customRow="customRow" |
|||
:scroll="{ x: 1200 }" |
|||
tool-class="ele-toolbar-form" |
|||
class="sys-org-table" |
|||
> |
|||
<template #toolbar> |
|||
<search |
|||
@search="reload" |
|||
:selection="selection" |
|||
:navigationList="navigationList" |
|||
:merchantId="merchantId" |
|||
:categoryId="categoryId" |
|||
@add="openEdit" |
|||
@remove="removeBatch" |
|||
@batchMove="openMove" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'title'"> |
|||
<span class="text-black">{{ record.title }}</span> |
|||
</template> |
|||
<template v-if="column.key === 'image'"> |
|||
<a-image |
|||
:src="record.image" |
|||
:width="50" |
|||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</ele-pro-table> |
|||
</a-card> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<ArticleEdit |
|||
v-model:visible="showEdit" |
|||
:navigationList="navigationList" |
|||
:categoryList="categoryList" |
|||
:categoryId="categoryId" |
|||
:data="current" |
|||
@done="reload" |
|||
/> |
|||
</a-page-header> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {createVNode, ref, watch} from 'vue'; |
|||
import {message, Modal} from 'ant-design-vue'; |
|||
import { |
|||
CheckOutlined, |
|||
CloseOutlined, |
|||
ExclamationCircleOutlined |
|||
} from '@ant-design/icons-vue'; |
|||
import type {EleProTable} from 'ele-admin-pro'; |
|||
import type { |
|||
DatasourceFunction, |
|||
ColumnItem |
|||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|||
import Search from './components/search.vue'; |
|||
import ArticleEdit from './components/articleEdit.vue'; |
|||
import { |
|||
pageCmsArticle, |
|||
removeCmsArticle, |
|||
removeBatchCmsArticle, |
|||
updateCmsArticle |
|||
} from '@/api/cms/cmsArticle'; |
|||
import type {CmsArticle, CmsArticleParam} from '@/api/cms/cmsArticle/model'; |
|||
import {formatNumber} from 'ele-admin-pro/es'; |
|||
import router from '@/router'; |
|||
import {toTreeData} from 'ele-admin-pro'; |
|||
import {toDateString} from 'ele-admin-pro'; |
|||
import { |
|||
detail, |
|||
getPageTitle |
|||
} from '@/utils/common'; |
|||
import {listCmsNavigation} from '@/api/cms/cmsNavigation'; |
|||
import {CmsNavigation} from '@/api/cms/cmsNavigation/model'; |
|||
import {CmsArticleCategory} from '@/api/cms/cmsArticleCategory/model'; |
|||
import {listCmsArticleCategory} from '@/api/cms/cmsArticleCategory'; |
|||
import {getCmsWebsiteSetting} from '@/api/cms/cmsWebsiteSetting'; |
|||
import {useWebsiteSettingStore} from '@/store/modules/setting'; |
|||
|
|||
// 表格实例 |
|||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|||
// 表格选中数据 |
|||
const selection = ref<CmsArticle[]>([]); |
|||
// 当前编辑数据 |
|||
const current = ref<CmsArticle | null>(null); |
|||
// 是否显示编辑弹窗 |
|||
const showEdit = ref(false); |
|||
// 是否显示批量移动弹窗 |
|||
const showMove = ref(false); |
|||
// 店铺ID |
|||
const merchantId = ref<number>(); |
|||
// 栏目ID |
|||
const categoryId = ref<number>(); |
|||
// 栏目数据 |
|||
const navigationList = ref<CmsNavigation[]>(); |
|||
// 文章分类 |
|||
const categoryList = ref<CmsArticleCategory[]>(); |
|||
// 是否显示二维码 |
|||
const showQrcode = ref(false); |
|||
// 网站设置信息 |
|||
const setting = useWebsiteSettingStore(); |
|||
|
|||
// 表格数据源 |
|||
const datasource: DatasourceFunction = ({page, limit, where, orders}) => { |
|||
if (categoryId.value) { |
|||
where.categoryId = categoryId.value; |
|||
} |
|||
where.model = 'help'; |
|||
return pageCmsArticle({ |
|||
...where, |
|||
...orders, |
|||
page, |
|||
limit |
|||
}); |
|||
}; |
|||
|
|||
// 表格列配置 |
|||
const columns = ref<ColumnItem[]>([ |
|||
// { |
|||
// title: 'ID', |
|||
// dataIndex: 'articleId', |
|||
// key: 'articleId', |
|||
// align: 'center', |
|||
// width: 90 |
|||
// }, |
|||
{ |
|||
title: '封面图', |
|||
dataIndex: 'image', |
|||
key: 'image', |
|||
width: 120, |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '文章标题', |
|||
dataIndex: 'title', |
|||
key: 'title' |
|||
}, |
|||
// { |
|||
// title: '栏目名称', |
|||
// dataIndex: 'categoryName', |
|||
// key: 'categoryName', |
|||
// width: 120, |
|||
// align: 'center' |
|||
// }, |
|||
// { |
|||
// title: '所属栏目', |
|||
// dataIndex: 'categoryId', |
|||
// key: 'categoryId', |
|||
// align: 'center', |
|||
// hideInTable: true |
|||
// }, |
|||
// { |
|||
// title: '实际阅读量', |
|||
// dataIndex: 'actualViews', |
|||
// key: 'actualViews', |
|||
// sorter: true, |
|||
// width: 120, |
|||
// align: 'center' |
|||
// }, |
|||
// { |
|||
// title: '虚拟阅读量', |
|||
// dataIndex: 'virtualViews', |
|||
// key: 'virtualViews', |
|||
// width: 120, |
|||
// align: 'center', |
|||
// hideInTable: true |
|||
// }, |
|||
// { |
|||
// title: '推荐', |
|||
// dataIndex: 'recommend', |
|||
// key: 'recommend', |
|||
// sorter: true, |
|||
// width: 120, |
|||
// align: 'center' |
|||
// }, |
|||
// { |
|||
// title: '状态', |
|||
// dataIndex: 'status', |
|||
// key: 'status', |
|||
// sorter: true, |
|||
// width: 120, |
|||
// align: 'center' |
|||
// }, |
|||
// { |
|||
// title: '排序号', |
|||
// dataIndex: 'sortNumber', |
|||
// key: 'sortNumber', |
|||
// sorter: true, |
|||
// width: 120, |
|||
// align: 'center' |
|||
// }, |
|||
{ |
|||
title: '创建时间', |
|||
dataIndex: 'createTime', |
|||
key: 'createTime', |
|||
align: 'center', |
|||
width: 180, |
|||
customRender: ({text}) => toDateString(text, 'yyyy-MM-dd'), |
|||
sorter: true |
|||
}, |
|||
// { |
|||
// title: '操作', |
|||
// key: 'action', |
|||
// width: 180, |
|||
// fixed: 'right', |
|||
// align: 'center', |
|||
// hideInSetting: true |
|||
// } |
|||
]); |
|||
|
|||
/* 搜索 */ |
|||
const reload = (where?: CmsArticleParam) => { |
|||
selection.value = []; |
|||
tableRef?.value?.reload({where: where}); |
|||
}; |
|||
|
|||
/* 打开编辑弹窗 */ |
|||
const openEdit = (row?: CmsArticle) => { |
|||
current.value = row ?? null; |
|||
showEdit.value = true; |
|||
}; |
|||
|
|||
/* 打开批量移动弹窗 */ |
|||
const openMove = () => { |
|||
showMove.value = true; |
|||
}; |
|||
|
|||
// 分享二维码 |
|||
const onShare = (row?: CmsArticle) => { |
|||
const data = { |
|||
isMobile: true, |
|||
...row |
|||
}; |
|||
data.qrcode = `${detail(data)}`; |
|||
data.url = `${detail(row)}`; |
|||
current.value = data ?? null; |
|||
showQrcode.value = true; |
|||
}; |
|||
|
|||
const onUpdate = (row?: CmsArticle) => { |
|||
const status = row?.status == 0 ? 1 : 0; |
|||
updateCmsArticle({...row, status}).then((msg) => { |
|||
message.success(msg); |
|||
reload(); |
|||
}); |
|||
}; |
|||
|
|||
const onRecommend = (row: CmsArticle) => { |
|||
updateCmsArticle({ |
|||
...row, |
|||
recommend: row.recommend == 1 ? 0 : 1 |
|||
}).then((msg) => { |
|||
message.success(msg); |
|||
reload(); |
|||
}); |
|||
}; |
|||
|
|||
/* 删除单个 */ |
|||
const remove = (row: CmsArticle) => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeCmsArticle(row.articleId) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
}; |
|||
|
|||
/* 批量删除 */ |
|||
const removeBatch = () => { |
|||
if (!selection.value.length) { |
|||
message.error('请至少选择一条数据'); |
|||
return; |
|||
} |
|||
Modal.confirm({ |
|||
title: '提示', |
|||
content: '确定要删除选中的记录吗?', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
maskClosable: true, |
|||
onOk: () => { |
|||
const hide = message.loading('请求中..', 0); |
|||
removeBatchCmsArticle(selection.value.map((d) => d.articleId)) |
|||
.then((msg) => { |
|||
hide(); |
|||
message.success(msg); |
|||
reload(); |
|||
}) |
|||
.catch((e) => { |
|||
hide(); |
|||
message.error(e.message); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
/* 自定义行属性 */ |
|||
const customRow = (record: CmsArticle) => { |
|||
return { |
|||
// 行点击事件 |
|||
onClick: () => { |
|||
openEdit(record); |
|||
}, |
|||
// 行双击事件 |
|||
onDblclick: () => { |
|||
openEdit(record); |
|||
} |
|||
}; |
|||
}; |
|||
|
|||
// 加载栏目数据 |
|||
if (!navigationList.value) { |
|||
listCmsNavigation({ |
|||
lang: localStorage.getItem('i18n-lang') || undefined |
|||
}).then((res) => { |
|||
navigationList.value = toTreeData({ |
|||
data: res?.map((d) => { |
|||
d.value = d.navigationId; |
|||
d.label = d.title; |
|||
if (!d.component) { |
|||
d.disabled = true; |
|||
} |
|||
if ( |
|||
d.model == 'index' || |
|||
d.model == 'page' || |
|||
d.model == 'order' || |
|||
d.model == 'links' |
|||
) { |
|||
d.disabled = true; |
|||
} |
|||
return d; |
|||
}), |
|||
idField: 'navigationId', |
|||
parentIdField: 'parentId' |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
// 加载文章分类 |
|||
if (!categoryList.value) { |
|||
listCmsArticleCategory({}).then((res) => { |
|||
categoryList.value = toTreeData({ |
|||
data: res?.map((d) => { |
|||
d.value = d.categoryId; |
|||
d.label = d.title; |
|||
return d; |
|||
}), |
|||
idField: 'categoryId', |
|||
parentIdField: 'parentId' |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
watch( |
|||
() => router.currentRoute.value.query, |
|||
(query) => { |
|||
if (query) { |
|||
categoryId.value = Number(query.id); |
|||
reload(); |
|||
} |
|||
}, |
|||
{immediate: true} |
|||
); |
|||
</script> |
|||
|
|||
<script lang="ts"> |
|||
export default { |
|||
name: 'CmsArticleV2' |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue