page: 📄 用户储值代码生产
This commit is contained in:
parent
33a359ee96
commit
f617caa33e
|
|
@ -0,0 +1,22 @@
|
|||
import { http } from '@/api/service/request';
|
||||
import type { BaseResult, ResultTable } from '@/api/service/types';
|
||||
|
||||
/** 用户储值---获取用户储值列表 */
|
||||
export const fetchGetSavingGoalList = (data: any) => {
|
||||
return http.request<BaseResult<ResultTable>>('get', `savingGoal/getSavingGoalList/${data.currentPage}/${data.pageSize}`, { params: data });
|
||||
};
|
||||
|
||||
/** 用户储值---添加用户储值 */
|
||||
export const fetchAddSavingGoal = (data: any) => {
|
||||
return http.request<BaseResult<object>>('post', 'savingGoal/addSavingGoal', { data });
|
||||
};
|
||||
|
||||
/** 用户储值---更新用户储值 */
|
||||
export const fetchUpdateSavingGoal = (data: any) => {
|
||||
return http.request<BaseResult<object>>('put', 'savingGoal/updateSavingGoal', { data });
|
||||
};
|
||||
|
||||
/** 用户储值---删除用户储值 */
|
||||
export const fetchDeleteSavingGoal = (data: any) => {
|
||||
return http.request<BaseResult<object>>('delete', 'savingGoal/deleteSavingGoal', { data });
|
||||
};
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { fetchAddSavingGoal, fetchDeleteSavingGoal, fetchGetSavingGoalList, fetchUpdateSavingGoal } from '@/api/v1/financial/savingGoal';
|
||||
import { pageSizes } from '@/enums/baseConstant';
|
||||
import { storeMessage } from '@/utils/message';
|
||||
import { storePagination } from '@/store/useStorePagination';
|
||||
|
||||
/**
|
||||
* 用户储值 Store
|
||||
*/
|
||||
export const useSavingGoalStore = defineStore('savingGoalStore', {
|
||||
state() {
|
||||
return {
|
||||
// 用户储值列表
|
||||
datalist: [],
|
||||
// 查询表单
|
||||
form: {
|
||||
// 绑定的用户id
|
||||
userId: undefined,
|
||||
// 完成状态
|
||||
statusType: undefined,
|
||||
// 储值目标名称
|
||||
savingGoalName: undefined,
|
||||
// 目标金额
|
||||
amount: undefined,
|
||||
// 目标时长
|
||||
duration: undefined,
|
||||
},
|
||||
// 分页查询结果
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 30,
|
||||
total: 1,
|
||||
pageSizes,
|
||||
},
|
||||
// 加载
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
/** 获取用户储值 */
|
||||
async getSavingGoalList() {
|
||||
// 整理请求参数
|
||||
const data = { ...this.pagination, ...this.form };
|
||||
delete data.pageSizes;
|
||||
delete data.total;
|
||||
delete data.background;
|
||||
|
||||
// 获取用户储值列表
|
||||
const result = await fetchGetSavingGoalList(data);
|
||||
|
||||
// 公共页面函数hook
|
||||
const pagination = storePagination.bind(this);
|
||||
return pagination(result);
|
||||
},
|
||||
|
||||
/** 添加用户储值 */
|
||||
async addSavingGoal(data: any) {
|
||||
const result = await fetchAddSavingGoal(data);
|
||||
return storeMessage(result);
|
||||
},
|
||||
|
||||
/** 修改用户储值 */
|
||||
async updateSavingGoal(data: any) {
|
||||
const result = await fetchUpdateSavingGoal(data);
|
||||
return storeMessage(result);
|
||||
},
|
||||
|
||||
/** 删除用户储值 */
|
||||
async deleteSavingGoal(data: any) {
|
||||
const result = await fetchDeleteSavingGoal(data);
|
||||
return storeMessage(result);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { columns } from '@/views/financial/savingGoal/utils/columns';
|
||||
import PureTableBar from '@/components/TableBar/src/bar';
|
||||
import AddFill from '@iconify-icons/ri/add-circle-line';
|
||||
import PureTable from '@pureadmin/table';
|
||||
import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/savingGoal/utils/hooks';
|
||||
import Delete from '@iconify-icons/ep/delete';
|
||||
import EditPen from '@iconify-icons/ep/edit-pen';
|
||||
import Refresh from '@iconify-icons/ep/refresh';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
import { useSavingGoalStore } from '@/store/financial/savingGoal';
|
||||
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
|
||||
import { FormInstance } from 'element-plus';
|
||||
|
||||
const tableRef = ref();
|
||||
const formRef = ref();
|
||||
const savingGoalStore = useSavingGoalStore();
|
||||
|
||||
/** 当前页改变时 */
|
||||
const onCurrentPageChange = async (value: number) => {
|
||||
savingGoalStore.pagination.currentPage = value;
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
/** 当分页发生变化 */
|
||||
const onPageSizeChange = async (value: number) => {
|
||||
savingGoalStore.pagination.pageSize = value;
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
/** 选择多行 */
|
||||
const onSelectionChange = (rows: Array<any>) => {
|
||||
deleteIds.value = rows.map((row: any) => row.id);
|
||||
};
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form ref="formRef" :inline="true" :model="savingGoalStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
|
||||
<!-- 绑定的用户id -->
|
||||
<el-form-item :label="$t('userId')" prop="userId">
|
||||
<el-input v-model="savingGoalStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 完成状态 -->
|
||||
<el-form-item :label="$t('statusType')" prop="statusType">
|
||||
<el-input v-model="savingGoalStore.form.statusType" :placeholder="`${$t('input')}${$t('statusType')}`" class="!w-[180px]" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 储值目标名称 -->
|
||||
<el-form-item :label="$t('savingGoalName')" prop="savingGoalName">
|
||||
<el-input v-model="savingGoalStore.form.savingGoalName" :placeholder="`${$t('input')}${$t('savingGoalName')}`" class="!w-[180px]" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 目标金额 -->
|
||||
<el-form-item :label="$t('amount')" prop="amount">
|
||||
<el-input v-model="savingGoalStore.form.amount" :placeholder="`${$t('input')}${$t('amount')}`" class="!w-[180px]" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 目标时长 -->
|
||||
<el-form-item :label="$t('duration')" prop="duration">
|
||||
<el-input v-model="savingGoalStore.form.duration" :placeholder="`${$t('input')}${$t('duration')}`" class="!w-[180px]" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :icon="useRenderIcon('ri:search-line')" :loading="savingGoalStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar :columns="columns" title="用户储值" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
|
||||
|
||||
<!-- 批量删除按钮 -->
|
||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||
{{ $t('delete_batches') }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
:adaptiveConfig="{ offsetBottom: 96 }"
|
||||
:columns="dynamicColumns"
|
||||
:data="savingGoalStore.datalist"
|
||||
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
|
||||
:loading="savingGoalStore.loading"
|
||||
:pagination="savingGoalStore.pagination"
|
||||
:size="size"
|
||||
adaptive
|
||||
align-whole="center"
|
||||
border
|
||||
highlight-current-row
|
||||
row-key="id"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
@page-size-change="onPageSizeChange"
|
||||
@selection-change="onSelectionChange"
|
||||
@page-current-change="onCurrentPageChange"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
|
||||
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>
|
||||
<el-popconfirm :title="`${$t('delete')}?`" @confirm="onDelete(row)">
|
||||
<template #reference>
|
||||
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
|
||||
{{ $t('delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { FormInstance } from 'element-plus';
|
||||
import { rules } from '@/views/financial/savingGoal/utils/columns';
|
||||
import { FormProps } from '@/views/financial/savingGoal/utils/types';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
// 绑定的用户id
|
||||
userId: undefined,
|
||||
// 完成状态
|
||||
statusType: undefined,
|
||||
// 储值目标名称
|
||||
savingGoalName: undefined,
|
||||
// 目标金额
|
||||
amount: undefined,
|
||||
// 目标时长
|
||||
duration: undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = ref(props.formInline);
|
||||
|
||||
defineExpose({ formRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
|
||||
<!-- 绑定的用户id -->
|
||||
<el-form-item :label="$t('userId')" prop="userId">
|
||||
<el-input v-model="form.userId" :placeholder="$t('input') + $t('userId')" autocomplete="off" type="text" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 完成状态 -->
|
||||
<el-form-item :label="$t('statusType')" prop="statusType">
|
||||
<el-input v-model="form.statusType" :placeholder="$t('input') + $t('statusType')" autocomplete="off" type="text" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 储值目标名称 -->
|
||||
<el-form-item :label="$t('savingGoalName')" prop="savingGoalName">
|
||||
<el-input v-model="form.savingGoalName" :placeholder="$t('input') + $t('savingGoalName')" autocomplete="off" type="text" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 目标金额 -->
|
||||
<el-form-item :label="$t('amount')" prop="amount">
|
||||
<el-input v-model="form.amount" :placeholder="$t('input') + $t('amount')" autocomplete="off" type="text" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 目标时长 -->
|
||||
<el-form-item :label="$t('duration')" prop="duration">
|
||||
<el-input v-model="form.duration" :placeholder="$t('input') + $t('duration')" autocomplete="off" type="text" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { reactive } from 'vue';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
import type { FormRules } from 'element-plus';
|
||||
|
||||
// 表格列
|
||||
export const columns: TableColumnList = [
|
||||
{ type: 'selection', align: 'left' },
|
||||
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
|
||||
// 绑定的用户id
|
||||
{ label: $t('userId'), prop: 'userId' },
|
||||
// 完成状态
|
||||
{ label: $t('statusType'), prop: 'statusType' },
|
||||
// 储值目标名称
|
||||
{ label: $t('savingGoalName'), prop: 'savingGoalName' },
|
||||
// 目标金额
|
||||
{ label: $t('amount'), prop: 'amount' },
|
||||
// 目标时长
|
||||
{ label: $t('duration'), prop: 'duration' },
|
||||
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
|
||||
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
|
||||
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
|
||||
];
|
||||
|
||||
// 添加规则
|
||||
export const rules = reactive<FormRules>({
|
||||
// 绑定的用户id
|
||||
userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
|
||||
// 完成状态
|
||||
statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
|
||||
// 储值目标名称
|
||||
savingGoalName: [{ required: true, message: `${$t('input')}${$t('savingGoalName')}`, trigger: 'blur' }],
|
||||
// 目标金额
|
||||
amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
|
||||
// 目标时长
|
||||
duration: [{ required: true, message: `${$t('input')}${$t('duration')}`, trigger: 'blur' }],
|
||||
});
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import { addDialog } from '@/components/BaseDialog/index';
|
||||
import SavingGoalDialog from '@/views/financial/savingGoal/saving-goal-dialog.vue';
|
||||
import { useSavingGoalStore } from '@/store/financial/savingGoal';
|
||||
import { h, ref } from 'vue';
|
||||
import { message, messageBox } from '@/utils/message';
|
||||
import type { FormItemProps } from '@/views/financial/savingGoal/utils/types';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
|
||||
|
||||
export const formRef = ref();
|
||||
// 删除ids
|
||||
export const deleteIds = ref([]);
|
||||
const savingGoalStore = useSavingGoalStore();
|
||||
|
||||
/** 搜索初始化用户储值 */
|
||||
export async function onSearch() {
|
||||
savingGoalStore.loading = true;
|
||||
await savingGoalStore.getSavingGoalList();
|
||||
savingGoalStore.loading = false;
|
||||
}
|
||||
|
||||
/** 添加用户储值 */
|
||||
export function onAdd() {
|
||||
addDialog({
|
||||
title: `${$t('addNew')}${$t('savingGoal')}`,
|
||||
width: '30%',
|
||||
props: {
|
||||
formInline: {
|
||||
userId: undefined,
|
||||
statusType: undefined,
|
||||
savingGoalName: undefined,
|
||||
amount: undefined,
|
||||
duration: undefined,
|
||||
},
|
||||
},
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(SavingGoalDialog, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const form = options.props.formInline as FormItemProps;
|
||||
formRef.value.formRef.validate(async (valid: any) => {
|
||||
if (!valid) return;
|
||||
|
||||
const result = await savingGoalStore.addSavingGoal(form);
|
||||
if (!result) return;
|
||||
done();
|
||||
await onSearch();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 更新用户储值 */
|
||||
export function onUpdate(row: any) {
|
||||
addDialog({
|
||||
title: `${$t('modify')}${$t('savingGoal')}`,
|
||||
width: '30%',
|
||||
props: {
|
||||
formInline: {
|
||||
userId: row.userId,
|
||||
statusType: row.statusType,
|
||||
savingGoalName: row.savingGoalName,
|
||||
amount: row.amount,
|
||||
duration: row.duration,
|
||||
},
|
||||
},
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(SavingGoalDialog, { ref: formRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
const form = options.props.formInline as FormItemProps;
|
||||
formRef.value.formRef.validate(async (valid: any) => {
|
||||
if (!valid) return;
|
||||
|
||||
const result = await savingGoalStore.updateSavingGoal({ ...form, id: row.id });
|
||||
if (!result) return;
|
||||
done();
|
||||
await onSearch();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除用户储值 */
|
||||
export const onDelete = async (row: any) => {
|
||||
const id = row.id;
|
||||
|
||||
// 是否确认删除
|
||||
const result = await messageBox({
|
||||
title: $t('confirmDelete'),
|
||||
showMessage: false,
|
||||
confirmMessage: undefined,
|
||||
cancelMessage: $t('cancel_delete'),
|
||||
});
|
||||
if (!result) return;
|
||||
|
||||
// 删除数据
|
||||
await savingGoalStore.deleteSavingGoal([id]);
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
/** 批量删除 */
|
||||
export const onDeleteBatch = async () => {
|
||||
const ids = deleteIds.value;
|
||||
const formDeletedBatchRef = ref();
|
||||
|
||||
addDialog({
|
||||
title: $t('deleteBatchTip'),
|
||||
width: '30%',
|
||||
props: { formInline: { confirmText: '' } },
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
|
||||
beforeSure: (done, { options }) => {
|
||||
formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
|
||||
if (!valid) return;
|
||||
|
||||
const text = options.props.formInline.confirmText.toLowerCase();
|
||||
if (text === 'yes' || text === 'y') {
|
||||
// 删除数据
|
||||
await savingGoalStore.deleteSavingGoal(ids);
|
||||
await onSearch();
|
||||
|
||||
done();
|
||||
} else message($t('deleteBatchTip'), { type: 'warning' });
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// 添加或者修改表单元素
|
||||
export interface FormItemProps {
|
||||
// 绑定的用户id
|
||||
userId: number;
|
||||
// 完成状态
|
||||
statusType: string;
|
||||
// 储值目标名称
|
||||
savingGoalName: string;
|
||||
// 目标金额
|
||||
amount: any;
|
||||
// 目标时长
|
||||
duration: string;
|
||||
}
|
||||
|
||||
// 添加或修改表单Props
|
||||
export interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
Loading…
Reference in New Issue