completepage: 🍻 管理端预算分类完成

src/api/v1/financial/budgetCategory.ts

@@ -6,6 +6,11 @@ export const fetchGetBudgetCategoryList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `budgetCategory/getBudgetCategoryList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/** 预算分类表---添加预算分类表 */
+export const fetchGetAllParentList = () => {
+	return http.request<BaseResult<object>>('get', 'budgetCategory/noManage/getAllParentList');
+};
+
 /** 预算分类表---添加预算分类表 */
 export const fetchAddBudgetCategory = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'budgetCategory/addBudgetCategory', { data });

src/api/v1/financialUser/billUser.ts

@@ -5,20 +5,20 @@ import type { BaseResult, ResultTable } from '@/api/service/types';
 export const fetchGetBillList = (data: any) => {
 	// 删除这个请求参数
 	delete data.date;
-	return http.request<BaseResult<ResultTable>>('get', `bill/noManage/getBillList/${data.currentPage}/${data.pageSize}`, { params: data });
+	return http.request<BaseResult<ResultTable>>('get', `bill/noManage/getUserBillList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
 /** 账单信息---添加账单信息 */
 export const fetchAddBill = (data: any) => {
-	return http.request<BaseResult<object>>('post', 'bill/noManage/addBill', { data });
+	return http.request<BaseResult<object>>('post', 'bill/noManage/addUserBill', { data });
 };
 
 /** 账单信息---更新账单信息 */
 export const fetchUpdateBill = (data: any) => {
-	return http.request<BaseResult<object>>('put', 'bill/noManage/updateBill', { data });
+	return http.request<BaseResult<object>>('put', 'bill/noManage/updateUserBill', { data });
 };
 
 /** 账单信息---删除账单信息 */
 export const fetchDeleteBill = (data: any) => {
-	return http.request<BaseResult<object>>('delete', 'bill/noManage/deleteBill', { data });
+	return http.request<BaseResult<object>>('delete', 'bill/noManage/deleteUserBill', { data });
 };

src/enums/baseConstant.tsx

@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 import { $t } from '@/plugins/i18n';
+import { ElTag } from 'element-plus';
 
 /** 是否默认 */
 export const isDefaultOptions = [
@@ -44,6 +45,64 @@ export const incomeOrExpend = [
 	{ value: -1, label: $t('expend') },
 ];
 
+// 预算状态类型
+export const budgetStateType = [
+	{
+		value: 'InProgress',
+		label: $t('inProgress'),
+		el: (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('inProgress')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'Completed',
+		label: $t('completed'),
+		el: (
+			<ElTag type={'success'} effect={'plain'}>
+				{$t('completed')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'OverSpending',
+		label: $t('overSpending'),
+		el: (
+			<ElTag type={'danger'} effect={'plain'}>
+				{$t('overSpending')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'NotStarted',
+		label: $t('notStarted'),
+		el: (
+			<ElTag type={'warning'} effect={'plain'}>
+				{$t('notStarted')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'Pause',
+		label: $t('pause'),
+		el: (
+			<ElTag type={'warning'} effect={'plain'}>
+				{$t('pause')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'Cancel',
+		label: $t('cancel'),
+		el: (
+			<ElTag type={'info'} effect={'plain'}>
+				{$t('cancel')}
+			</ElTag>
+		),
+	},
+];
+
 /** 分页默认数组个数 */
 export const pageSizes: number[] = [15, 30, 50, 100, 150];
 export const tableSelectButtonClass = computed(() => ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary']);

src/store/financial/budgetCategory.ts

@@ -28,6 +28,10 @@ export const useBudgetCategoryStore = defineStore('budgetCategoryStore', {
 				amount: undefined,
 				// 预算周期
 				period: undefined,
+				// 开始预算时间
+				startPeriod: undefined,
+				// 结束预算时间
+				endPeriod: undefined,
 			},
 			// 分页查询结果
 			pagination: {
@@ -44,6 +48,10 @@ export const useBudgetCategoryStore = defineStore('budgetCategoryStore', {
 	actions: {
 		/** 获取预算分类表 */
 		async getBudgetCategoryList() {
+			if (this.form.period) {
+				this.form.startPeriod = this.form.period[0];
+				this.form.endPeriod = this.form.period[1];
+			}
 			// 整理请求参数
 			const data = { ...this.pagination, ...this.form };
 			delete data.pageSizes;

src/views/financial-user/bill-user/utils/columns.tsx

@@ -14,11 +14,11 @@ export const columns: TableColumnList = [
 		formatter({ type, amount }) {
 			return type === -1 ? (
 				<ElText size={'large'} type={'danger'} style={{ fontWeight: 800 }}>
-					- {amount}
+					- {amount}￥
 				</ElText>
 			) : (
 				<ElText size={'large'} type={'success'} style={{ fontWeight: 800 }}>
-					+ {amount}
+					+ {amount}￥
 				</ElText>
 			);
 		},

src/views/financial/budget-category/budget-category-dialog.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { rules } from '@/views/financial/budget-category/utils/columns';
 import { FormProps } from '@/views/financial/budget-category/utils/types';
 import { $t } from '@/plugins/i18n';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { budgetStateType } from '@/enums/baseConstant';
+import { fetchGetAllParentList } from '@/api/v1/financial/budgetCategory';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -26,6 +30,32 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+// 所有父级列表
+const allParentList = ref();
+const adminUserStore = useAdminUserStore();
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+/** 获取所有父级内容 */
+const getAllParentList = async () => {
+	const result = await fetchGetAllParentList();
+	if (result.code === 200) {
+		allParentList.value = result.data;
+	}
+};
+
+onMounted(() => {
+	getAllParentList();
+});
 
 defineExpose({ formRef });
 </script>
@@ -34,7 +64,40 @@ defineExpose({ formRef });
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
 		<!-- 父级id -->
 		<el-form-item :label="$t('parentId')" prop="parentId">
-			<el-input v-model="form.parentId" :placeholder="$t('input') + $t('parentId')" autocomplete="off" type="text" />
+			<el-cascader
+				v-model="form.parentId"
+				:options="allParentList"
+				:props="{ value: 'id', label: 'categoryName', emitPath: false, checkStrictly: true }"
+				class="w-full"
+				clearable
+				filterable
+			>
+				<template #default="{ node, data }">
+					<span>{{ data.categoryName }}</span>
+					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+				</template>
+			</el-cascader>
+		</el-form-item>
+
+		<!-- 绑定的用户id -->
+		<el-form-item :label="$t('user')" prop="userId">
+			<el-select
+				v-model="form.userId"
+				:loading="loading"
+				:placeholder="$t('user')"
+				:remote-method="onSearchUserinfo"
+				clearable
+				filterable
+				remote
+				remote-show-suffix
+			>
+				<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
+				<template #loading>
+					<el-icon class="is-loading">
+						<LoadingSvg />
+					</el-icon>
+				</template>
+			</el-select>
 		</el-form-item>
 
 		<!-- 分类名称 -->
@@ -49,17 +112,26 @@ defineExpose({ formRef });
 
 		<!-- 完成状态 -->
 		<el-form-item :label="$t('statusType')" prop="statusType">
-			<el-input v-model="form.statusType" :placeholder="$t('input') + $t('statusType')" autocomplete="off" type="text" />
+			<el-select v-model="form.statusType" :placeholder="$t('statusType')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in budgetStateType" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
 		</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-input v-model="form.amount" :min="0.01" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
 		<!-- 预算周期 -->
 		<el-form-item :label="$t('period')" prop="period">
-			<el-input v-model="form.period" :placeholder="$t('input') + $t('period')" autocomplete="off" type="text" />
+			<el-date-picker
+				v-model="form.period"
+				:end-placeholder="$t('endTime')"
+				:start-placeholder="$t('startTime')"
+				time-format="YYYY-MM-DD HH:mm:ss"
+				type="datetimerange"
+				value-format="YYYY-MM-DD HH:mm:ss"
+			/>
 		</el-form-item>
 	</el-form>
 </template>

src/views/financial/budget-category/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { columns } from '@/views/financial/budget-category/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
@@ -13,10 +13,20 @@ import { $t } from '@/plugins/i18n';
 import { useBudgetCategoryStore } from '@/store/financial/budgetCategory';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { FormInstance } from 'element-plus';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { budgetStateType } from '@/enums/baseConstant';
+import { handleTree } from '@pureadmin/utils';
 
 const tableRef = ref();
 const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
 const budgetCategoryStore = useBudgetCategoryStore();
+const datalist = computed(() => handleTree(budgetCategoryStore.datalist));
 
 /** 当前页改变时 */
 const onCurrentPageChange = async (value: number) => {
@@ -39,9 +49,19 @@ const onSelectionChange = (rows: Array<any>) => {
 const resetForm = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
+	budgetCategoryStore.form.period = undefined;
+	budgetCategoryStore.form.startPeriod = undefined;
+	budgetCategoryStore.form.endPeriod == undefined;
 	await onSearch();
 };
 
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -52,7 +72,24 @@ onMounted(() => {
 		<el-form ref="formRef" :inline="true" :model="budgetCategoryStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
 			<!-- 绑定的用户id -->
 			<el-form-item :label="$t('user')" prop="userId">
-				<el-input v-model="budgetCategoryStore.form.userId" :placeholder="`${$t('input')}${$t('user')}`" class="!w-[180px]" clearable />
+				<el-select
+					v-model="budgetCategoryStore.form.userId"
+					:loading="loading"
+					:placeholder="$t('user')"
+					:remote-method="onSearchUserinfo"
+					class="!w-[180px]"
+					clearable
+					filterable
+					remote
+					remote-show-suffix
+				>
+					<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
+					<template #loading>
+						<el-icon class="is-loading">
+							<LoadingSvg />
+						</el-icon>
+					</template>
+				</el-select>
 			</el-form-item>
 
 			<!-- 分类名称 -->
@@ -67,7 +104,17 @@ onMounted(() => {
 
 			<!-- 完成状态 -->
 			<el-form-item :label="$t('statusType')" prop="statusType">
-				<el-input v-model="budgetCategoryStore.form.statusType" :placeholder="`${$t('input')}${$t('statusType')}`" class="!w-[180px]" clearable />
+				<el-select
+					v-model="budgetCategoryStore.form.statusType"
+					:placeholder="`${$t('select')}${$t('statusType')}`"
+					class="!w-[180px]"
+					clearable
+					filterable
+					remote
+					remote-show-suffix
+				>
+					<el-option v-for="item in budgetStateType" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
 
 			<!-- 预算金额 -->
@@ -77,7 +124,14 @@ onMounted(() => {
 
 			<!-- 预算周期 -->
 			<el-form-item :label="$t('period')" prop="period">
-				<el-input v-model="budgetCategoryStore.form.period" :placeholder="`${$t('input')}${$t('period')}`" class="!w-[180px]" clearable />
+				<el-date-picker
+					v-model="budgetCategoryStore.form.period"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					time-format="YYYY-MM-DD HH:mm:ss"
+					type="datetimerange"
+					value-format="YYYY-MM-DD HH:mm:ss"
+				/>
 			</el-form-item>
 
 			<!-- 搜索和重置 -->
@@ -87,9 +141,16 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" title="预算分类表" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar
+			:columns="columns"
+			:isExpandAll="true"
+			:tableRef="tableRef?.getTableRef()"
+			title="预算分类"
+			@fullscreen="tableRef.setAdaptive()"
+			@refresh="onSearch"
+		>
 			<template #buttons>
-				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd('0')"> {{ $t('addNew') }}</el-button>
 
 				<!-- 批量删除按钮 -->
 				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
@@ -102,7 +163,7 @@ onMounted(() => {
 					ref="tableRef"
 					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
-					:data="budgetCategoryStore.datalist"
+					:data="datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="budgetCategoryStore.loading"
 					:pagination="budgetCategoryStore.pagination"
@@ -110,6 +171,7 @@ onMounted(() => {
 					adaptive
 					align-whole="center"
 					border
+					default-expand-all
 					highlight-current-row
 					row-key="id"
 					showOverflowTooltip
@@ -118,6 +180,16 @@ onMounted(() => {
 					@selection-change="onSelectionChange"
 					@page-current-change="onCurrentPageChange"
 				>
+					<template #statusType="{ row }">
+						<component :is="budgetStateType.find(item => item.value === row.statusType).el" />
+					</template>
+
+					<template #username="{ row }">
+						<el-button v-show="row.username" link type="primary" @click="selectUserinfo(row.userId)">
+							{{ row.username }}
+						</el-button>
+					</template>
+
 					<template #createUser="{ row }">
 						<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
 							{{ row.createUsername }}
@@ -132,9 +204,10 @@ onMounted(() => {
 
 					<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-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)">
-						<!-- TODO 待完成 -->
+							{{ $t('addNew') }}
-						<el-popconfirm :title="`${$t('delete')}${row.email}?`" @confirm="onDelete(row)">
+						</el-button>
+						<el-popconfirm :title="`${$t('delete')}${row.budgetName}?`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
 									{{ $t('delete') }}

src/views/financial/budget-category/utils/columns.tsx

@@ -1,23 +1,45 @@
 import { reactive } from 'vue';
 import { $t } from '@/plugins/i18n';
-import type { FormRules } from 'element-plus';
+import { ElText, 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('nickname'), prop: 'nickname' },
 	// 分类名称
 	{ label: $t('categoryName'), prop: 'categoryName' },
+	// 绑定的用户id
+	{ label: $t('username'), prop: 'username', slot: 'username' },
 	// 预算名称
 	{ label: $t('budgetName'), prop: 'budgetName' },
 	// 完成状态
-	{ label: $t('statusType'), prop: 'statusType' },
+	{ label: $t('statusType'), prop: 'statusType', slot: 'statusType', width: 100 },
 	// 预算金额
-	{ label: $t('amount'), prop: 'amount' },
+	{
+		label: $t('amount'),
+		prop: 'amount',
+		width: 150,
+		formatter({ amount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{amount}￥
+				</ElText>
+			);
+		},
+	},
 	// 预算周期
-	{ label: $t('period'), prop: 'period' },
+	{
+		label: $t('period'),
+		prop: 'period',
+		formatter({ startPeriod, endPeriod }) {
+			return (
+				<ElText type={'success'} style={{ fontWeight: 800 }}>
+					{startPeriod} ~ {endPeriod}
+				</ElText>
+			);
+		},
+		width: 360,
+	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
@@ -27,6 +49,8 @@ export const columns: TableColumnList = [
 
 // 添加规则
 export const rules = reactive<FormRules>({
+	// 绑定的用户
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
 	// 分类名称
 	categoryName: [{ required: true, message: `${$t('input')}${$t('categoryName')}`, trigger: 'blur' }],
 	// 预算名称

src/views/financial/budget-category/utils/hooks.ts

@@ -20,18 +20,20 @@ export async function onSearch() {
 }
 
 /** 添加预算分类表 */
-export function onAdd() {
+export function onAdd(parentId: string = '0') {
 	addDialog({
-		title: `${$t('addNew')}${$t('budget-category')}`,
+		title: `${$t('addNew')}${$t('budgetCategory')}`,
 		width: '30%',
 		props: {
 			formInline: {
-				parentId: undefined,
+				parentId,
 				categoryName: undefined,
 				budgetName: undefined,
 				statusType: undefined,
 				amount: undefined,
 				period: undefined,
+				startPeriod: undefined,
+				endPeriod: undefined,
 			},
 		},
 		draggable: true,
@@ -43,6 +45,10 @@ export function onAdd() {
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
 
+				// 格式化开始时间和结束时间
+				form.startPeriod = form.period[0];
+				form.endPeriod = form.period[1];
+
 				const result = await budgetCategoryStore.addBudgetCategory(form);
 				if (!result) return;
 				done();
@@ -55,16 +61,19 @@ export function onAdd() {
 /** 更新预算分类表 */
 export function onUpdate(row: any) {
 	addDialog({
-		title: `${$t('modify')}${$t('budget-category')}`,
+		title: `${$t('modify')}${$t('budgetCategory')}`,
 		width: '30%',
 		props: {
 			formInline: {
-				parentId: row.parentId,
+				parentId: row.parentId ? row.parentId : '0',
+				userId: row.userId,
 				categoryName: row.categoryName,
 				budgetName: row.budgetName,
 				statusType: row.statusType,
 				amount: row.amount,
-				period: row.period,
+				period: [row.startPeriod, row.endPeriod],
+				startPeriod: row.startPeriod,
+				endPeriod: row.endPeriod,
 			},
 		},
 		draggable: true,
@@ -76,6 +85,10 @@ export function onUpdate(row: any) {
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
 
+				// 格式化开始时间和结束时间
+				form.startPeriod = form.period[0];
+				form.endPeriod = form.period[1];
+
 				const result = await budgetCategoryStore.updateBudgetCategory({ ...form, id: row.id });
 				if (!result) return;
 				done();

src/views/financial/budget-category/utils/types.ts

@@ -13,7 +13,9 @@ export interface FormItemProps {
 	// 预算金额
 	amount: any;
 	// 预算周期
-	period: string;
+	period: string[];
+	startPeriod: string;
+	endPeriod: string;
 }
 
 // 添加或修改表单Props

src/views/financial/debt-repayment-plan/debt-repayment-plan-dialog.vue

@@ -4,11 +4,10 @@ import { FormInstance } from 'element-plus';
 import { rules } from '@/views/financial/debt-repayment-plan/utils/columns';
 import { FormProps } from '@/views/financial/debt-repayment-plan/utils/types';
 import { $t } from '@/plugins/i18n';
+import LoadingSvg from '@/assets/svg/loading.svg';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
-		// 债务ID
-		debtId: undefined,
 		// 债务金额
 		installmentNumber: undefined,
 		// 每期应还金额
@@ -24,6 +23,19 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
+// 用户是否停用样式
+const { switchStyle } = usePublicHooks();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
 
 defineExpose({ formRef });
 </script>
@@ -35,6 +47,27 @@ defineExpose({ formRef });
 			<el-input v-model="form.debtId" :placeholder="$t('input') + $t('debtId')" autocomplete="off" type="text" />
 		</el-form-item>
 
+		<!-- 绑定的用户id -->
+		<el-form-item :label="$t('user')" prop="userId">
+			<el-select
+				v-model="form.userId"
+				:loading="loading"
+				:placeholder="$t('user')"
+				:remote-method="onSearchUserinfo"
+				clearable
+				filterable
+				remote
+				remote-show-suffix
+			>
+				<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
+				<template #loading>
+					<el-icon class="is-loading">
+						<LoadingSvg />
+					</el-icon>
+				</template>
+			</el-select>
+		</el-form-item>
+
 		<!-- 债务金额 -->
 		<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
 			<el-input v-model="form.installmentNumber" :placeholder="$t('input') + $t('installmentNumber')" autocomplete="off" type="text" />

src/views/financial/debt-repayment-plan/index.vue

@@ -49,11 +49,6 @@ onMounted(() => {
 <template>
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="debtRepaymentPlanStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<!-- 债务ID -->
-			<el-form-item :label="$t('debtId')" prop="debtId">
-				<el-input v-model="debtRepaymentPlanStore.form.debtId" :placeholder="`${$t('input')}${$t('debtId')}`" class="!w-[180px]" clearable />
-			</el-form-item>
-
 			<!-- 债务金额 -->
 			<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
 				<el-input v-model="debtRepaymentPlanStore.form.installmentNumber" :placeholder="`${$t('input')}${$t('installmentNumber')}`" class="!w-[180px]" clearable />

src/views/financial/debt-repayment-plan/utils/columns.ts

@@ -6,8 +6,8 @@ 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('debtId'), prop: 'debtId' },
+	{ label: $t('username'), prop: 'username' },
 	// 债务金额
 	{ label: $t('installmentNumber'), prop: 'installmentNumber' },
 	// 每期应还金额
@@ -25,8 +25,6 @@ export const columns: TableColumnList = [
 
 // 添加规则
 export const rules = reactive<FormRules>({
-	// 债务ID
-	debtId: [{ required: true, message: `${$t('input')}${$t('debtId')}`, trigger: 'blur' }],
 	// 债务金额
 	installmentNumber: [{ required: true, message: `${$t('input')}${$t('installmentNumber')}`, trigger: 'blur' }],
 	// 每期应还金额

src/views/financial/debt-repayment-plan/utils/hooks.ts

@@ -26,7 +26,6 @@ export function onAdd() {
 		width: '30%',
 		props: {
 			formInline: {
-				debtId: undefined,
 				installmentNumber: undefined,
 				installmentAmount: undefined,
 				dueDate: undefined,
@@ -59,7 +58,6 @@ export function onUpdate(row: any) {
 		width: '30%',
 		props: {
 			formInline: {
-				debtId: row.debtId,
 				installmentNumber: row.installmentNumber,
 				installmentAmount: row.installmentAmount,
 				dueDate: row.dueDate,

src/views/financial/debt-repayment-plan/utils/types.ts

@@ -1,7 +1,7 @@
 // 添加或者修改表单元素
 export interface FormItemProps {
-	// 债务ID
+	// 绑定的用户id
-	debtId: number;
+	userId: number;
 	// 债务金额
 	installmentNumber: any;
 	// 每期应还金额

src/views/system/dept/index.vue

@@ -68,7 +68,14 @@ onMounted(() => {
 			</el-form>
 		</Auth>
 
-		<PureTableBar :columns="columns" :isExpandAll="true" :tableRef="tableRef?.getTableRef()" :title="$t('dept')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar
+			:columns="columns"
+			:isExpandAll="true"
+			:tableRef="tableRef?.getTableRef()"
+			:title="$t('dept')"
+			@fullscreen="tableRef.setAdaptive()"
+			@refresh="onSearch"
+		>
 			<template #buttons>
 				<el-button v-if="hasAuth(auth.add)" :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()">
 					{{ $t('addNew') }}
@@ -115,8 +122,12 @@ onMounted(() => {
 					</template>
 
 					<template #operation="{ row }">
-						<el-button v-if="hasAuth(auth.update)" :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button v-if="hasAuth(auth.update)" :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)">
-						<el-button v-if="hasAuth(auth.add)" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> {{ $t('addNew') }} </el-button>
+							{{ $t('modify') }}
+						</el-button>
+						<el-button v-if="hasAuth(auth.add)" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)">
+							{{ $t('addNew') }}
+						</el-button>
 						<el-popconfirm v-if="hasAuth(auth.deleted)" :title="`${$t('delete')} ${row.deptName}?`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">