completepage: 🍻 债务计划和还款计划完成

.env.development

@@ -1,5 +1,5 @@
 # 平台本地运行端口号
-VITE_PORT=7700
+VITE_PORT=1010
 
 # 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY="hash"
@@ -8,7 +8,7 @@ VITE_ROUTER_HISTORY="hash"
 VITE_BASE_API=/api
 
 # 跨域代理地址
-VITE_APP_URL=http://localhost:7070
+VITE_APP_URL=http://localhost:1000
 
 # mock地址
 VITE_MOCK_BASE_API=/mock

docker/nginx.conf

@@ -16,7 +16,7 @@ server {
 
      # 后端跨域请求
      location ~/admin/ {
-         proxy_pass http://172.17.0.1:7070;
+         proxy_pass http://172.17.0.1:1000;
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

src/enums/bill/debtTracking.tsx

@@ -0,0 +1,151 @@
+import { $t } from '@/plugins/i18n';
+import { ElTag } from 'element-plus';
+
+export const debtType = [
+	// 信用卡债务
+	{
+		value: 'CreditCardDebt',
+		label: $t('creditCardDebt'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('creditCardDebt')}
+			</ElTag>
+		),
+	},
+	// 贷款债务
+	{
+		value: 'LoanDebt',
+		label: $t('loanDebt'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('loanDebt')}
+			</ElTag>
+		),
+	},
+	// 抵押债务
+	{
+		value: 'MortgageDebt',
+		label: $t('mortgageDebt'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('mortgageDebt')}
+			</ElTag>
+		),
+	},
+	// 学生贷款
+	{
+		value: 'StudentLoans',
+		label: $t('studentLoans'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('studentLoans')}
+			</ElTag>
+		),
+	},
+	// 医疗债务
+	{
+		value: 'MedicalDebt',
+		label: $t('medicalDebt'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('medicalDebt')}
+			</ElTag>
+		),
+	},
+	// 透支债务
+	{
+		value: 'OverdraftDebt',
+		label: $t('overdraftDebt'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('overdraftDebt')}
+			</ElTag>
+		),
+	},
+	// 私人借款
+	{
+		value: 'PrivateBorrowing',
+		label: $t('privateBorrowing'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('privateBorrowing')}
+			</ElTag>
+		),
+	},
+	// 其他债务
+	{
+		value: 'OtherDebts',
+		label: $t('otherDebts'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('otherDebts')}
+			</ElTag>
+		),
+	},
+];
+
+export const debtTracking = [
+	{
+		value: 'InProgress',
+		label: $t('inProgress'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('inProgress')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'Uncompleted',
+		label: $t('uncompleted'),
+		el: () => (
+			<ElTag type={'primary'} effect={'plain'}>
+				{$t('uncompleted')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'Completed',
+		label: $t('completed'),
+		el: () => (
+			<ElTag type={'success'} effect={'plain'}>
+				{$t('completed')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'NotStarted',
+		label: $t('notStarted'),
+		el: () => (
+			<ElTag type={'warning'} effect={'plain'}>
+				{$t('notStarted')}
+			</ElTag>
+		),
+	},
+	{
+		value: 'OverSpending',
+		label: $t('overSpending'),
+		el: () => (
+			<ElTag type={'danger'} effect={'plain'}>
+				{$t('overSpending')}
+			</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>
+		),
+	},
+];

src/enums/bill/savingGoal.tsx

@@ -1,4 +1,5 @@
 import { $t } from '@/plugins/i18n';
+import { ElTag } from 'element-plus';
 
 export const savingGoal = [
 	{

src/store/financial/debtRepaymentPlan.ts

@@ -19,6 +19,8 @@ export const useDebtRepaymentPlanStore = defineStore('debtRepaymentPlanStore', {
 			datalist: [],
 			// 查询表单
 			form: {
+				// 用户Id
+				userId: undefined,
 				// 债务ID
 				debtId: undefined,
 				// 债务金额

src/utils/date.ts

@@ -14,3 +14,8 @@ export const getDefaultDateRange = (start = 1, end = 7) => {
 
 	return [dayjs(startDate).format('YYYY-MM-DD'), dayjs(endDate).format('YYYY-MM-DD')];
 };
+
+/** 格式化日期 */
+export const dateformat = (date: any) => {
+	return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
+};

src/views/financial/bill/bill-dialog.vue

@@ -102,7 +102,8 @@ defineExpose({ formRef });
 			<el-date-picker
 				v-model="form.transactionDate"
 				:placeholder="$t('input') + $t('transactionDate')"
-				format="YYYY/MM/DD HH:mm:ss"
+				class="!w-[100%]"
+				format="YYYY-MM-DD HH:mm:ss"
 				type="datetime"
 				value-format="YYYY-MM-DD HH:mm:ss"
 			/>

src/views/financial/bill/index.vue

@@ -108,6 +108,7 @@ onMounted(() => {
 					v-model="billStore.form.date"
 					:end-placeholder="$t('endDate')"
 					:start-placeholder="$t('startDate')"
+					class="!w-[210px]"
 					clearable
 					type="daterange"
 					value-format="YYYY-MM-DD"

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

@@ -33,14 +33,26 @@ export const columns: TableColumnList = [
 			return <ElTag effect={'plain'}>{categoryName}</ElTag>;
 		},
 	},
-	// 交易日期
-	{ label: $t('transactionDate'), prop: 'transactionDate', width: 160 },
 	// 描述
 	{ label: $t('description'), prop: 'description' },
-	// 用户名
+	// 交易日期
-	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
+	{
+		label: $t('transactionDate'),
+		prop: 'transactionDate',
+		width: 190,
+		sortable: true,
+		formatter({ transactionDate }) {
+			return (
+				<ElText type={'success'} style={{ fontWeight: 800 }}>
+					{transactionDate}
+				</ElText>
+			);
+		},
+	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 用户名
+	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },

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

@@ -128,9 +128,10 @@ onMounted(() => {
 					v-model="budgetCategoryStore.form.period"
 					:end-placeholder="$t('endTime')"
 					:start-placeholder="$t('startTime')"
-					time-format="YYYY-MM-DD HH:mm:ss"
+					class="!w-[210px]"
-					type="datetimerange"
+					time-format="YYYY-MM-DD"
-					value-format="YYYY-MM-DD HH:mm:ss"
+					type="daterange"
+					value-format="YYYY-MM-DD"
 				/>
 			</el-form-item>
 

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

@@ -8,8 +8,6 @@ export const columns: TableColumnList = [
 	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	// 分类名称
 	{ label: $t('categoryName'), prop: 'categoryName' },
-	// 绑定的用户id
-	{ label: $t('username'), prop: 'username', slot: 'username' },
 	// 预算名称
 	{ label: $t('budgetName'), prop: 'budgetName' },
 	// 完成状态
@@ -42,6 +40,8 @@ export const columns: TableColumnList = [
 	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户id
+	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },

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

@@ -6,14 +6,14 @@ 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('username'), prop: 'username', slot: 'username' },
 	// 分类名称
 	{ label: $t('categoryName'), prop: 'categoryName', slot: 'categoryName' },
 	// 是否内置字段
 	{ label: $t('isBuiltin'), prop: 'isBuiltin', slot: 'isBuiltin' },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户id
+	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
 	{ label: $t('table.operation'), fixed: 'right', width: 160, slot: 'operation' },

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

@@ -5,6 +5,8 @@ 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';
+import { debtTracking } from '@/enums/bill/debtTracking';
+import { useAdminUserStore } from '@/store/system/adminUser';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -23,12 +25,11 @@ 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 adminUserStore = useAdminUserStore();
 
 /** 搜索 */
 const onSearchUserinfo = async (keyword: string) => {
@@ -42,11 +43,6 @@ defineExpose({ formRef });
 
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
-		<!-- 债务ID -->
-		<el-form-item :label="$t('debtId')" prop="debtId">
-			<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
@@ -70,27 +66,37 @@ defineExpose({ formRef });
 
 		<!-- 债务金额 -->
 		<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
-			<el-input v-model="form.installmentNumber" :placeholder="$t('input') + $t('installmentNumber')" autocomplete="off" type="text" />
+			<el-input v-model="form.installmentNumber" :min="0.01" :placeholder="$t('input') + $t('installmentNumber')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
 		<!-- 每期应还金额 -->
 		<el-form-item :label="$t('installmentAmount')" prop="installmentAmount">
-			<el-input v-model="form.installmentAmount" :placeholder="$t('input') + $t('installmentAmount')" autocomplete="off" type="text" />
+			<el-input v-model="form.installmentAmount" :min="0.01" :placeholder="$t('input') + $t('installmentAmount')" :step="0.01" autocomplete="off" type="number" />
-		</el-form-item>
-
-		<!-- 还款截止日期 -->
-		<el-form-item :label="$t('dueDate')" prop="dueDate">
-			<el-input v-model="form.dueDate" :placeholder="$t('input') + $t('dueDate')" autocomplete="off" type="text" />
 		</el-form-item>
 
 		<!-- 已还金额 -->
 		<el-form-item :label="$t('paidAmount')" prop="paidAmount">
-			<el-input v-model="form.paidAmount" :placeholder="$t('input') + $t('paidAmount')" autocomplete="off" type="text" />
+			<el-input v-model="form.paidAmount" :min="0.01" :placeholder="$t('input') + $t('paidAmount')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 还款截止日期 -->
+		<el-form-item :label="$t('dueDate')" prop="dueDate">
+			<el-date-picker
+				v-model="form.dueDate"
+				:end-placeholder="$t('endTime')"
+				:start-placeholder="$t('startTime')"
+				class="!w-[100%]"
+				time-format="YYYY-MM-DD HH:mm:ss"
+				type="datetime"
+				value-format="YYYY-MM-DD HH:mm:ss"
+			/>
 		</el-form-item>
 
 		<!-- 还款状态 -->
 		<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
-			<el-input v-model="form.paymentStatus" :placeholder="$t('input') + $t('paymentStatus')" autocomplete="off" type="text" />
+			<el-select v-model="form.paymentStatus" :placeholder="$t('paymentStatus')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
 		</el-form-item>
 	</el-form>
 </template>

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

@@ -13,9 +13,17 @@ import { useDebtRepaymentPlanStore } from '@/store/financial/debtRepaymentPlan';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { FormInstance } from 'element-plus';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { debtTracking } from '@/enums/bill/debtTracking';
 
 const tableRef = ref();
 const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
 const debtRepaymentPlanStore = useDebtRepaymentPlanStore();
 
 /** 当前页改变时 */
@@ -42,6 +50,13 @@ const resetForm = async (formEl: FormInstance | undefined) => {
 	await onSearch();
 };
 
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -50,6 +65,28 @@ 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">
+			<!-- 绑定的用户 -->
+			<el-form-item :label="$t('user')" prop="userId">
+				<el-select
+					v-model="debtRepaymentPlanStore.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>
+
 			<!-- 债务金额 -->
 			<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
 				<el-input v-model="debtRepaymentPlanStore.form.installmentNumber" :placeholder="`${$t('input')}${$t('installmentNumber')}`" class="!w-[180px]" clearable />
@@ -62,7 +99,15 @@ onMounted(() => {
 
 			<!-- 还款截止日期 -->
 			<el-form-item :label="$t('dueDate')" prop="dueDate">
-				<el-input v-model="debtRepaymentPlanStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
+				<el-date-picker
+					v-model="debtRepaymentPlanStore.form.dueDate"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="daterange"
+					value-format="YYYY-MM-DD"
+				/>
 			</el-form-item>
 
 			<!-- 已还金额 -->
@@ -72,8 +117,20 @@ onMounted(() => {
 
 			<!-- 还款状态 -->
 			<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
-				<el-input v-model="debtRepaymentPlanStore.form.paymentStatus" :placeholder="`${$t('input')}${$t('paymentStatus')}`" class="!w-[180px]" clearable />
+				<el-select
+					v-model="debtRepaymentPlanStore.form.paymentStatus"
+					:placeholder="$t('paymentStatus')"
+					class="!w-[180px]"
+					clearable
+					filterable
+					remote
+					remote-show-suffix
+				>
+					<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
+
+			<!-- 搜索和重置 -->
 			<el-form-item>
 				<el-button :icon="useRenderIcon('ri:search-line')" :loading="debtRepaymentPlanStore.loading" type="primary" @click="onSearch">
 					{{ $t('search') }}
@@ -113,6 +170,16 @@ onMounted(() => {
 					@selection-change="onSelectionChange"
 					@page-current-change="onCurrentPageChange"
 				>
+					<template #paymentStatus="{ row }">
+						<component :is="debtTracking.find(item => item.value === row.paymentStatus).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 }}

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

@@ -1,25 +1,67 @@
 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 },
-	// 绑定的用户
-	{ label: $t('username'), prop: 'username' },
 	// 债务金额
-	{ label: $t('installmentNumber'), prop: 'installmentNumber' },
+	{
+		label: $t('installmentNumber'),
+		prop: 'installmentNumber',
+		formatter({ installmentNumber }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{installmentNumber}￥
+				</ElText>
+			);
+		},
+	},
 	// 每期应还金额
-	{ label: $t('installmentAmount'), prop: 'installmentAmount' },
+	{
-	// 还款截止日期
+		label: $t('installmentAmount'),
-	{ label: $t('dueDate'), prop: 'dueDate' },
+		prop: 'installmentAmount',
+		formatter({ installmentAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{installmentAmount}￥
+				</ElText>
+			);
+		},
+	},
 	// 已还金额
-	{ label: $t('paidAmount'), prop: 'paidAmount' },
+	{
+		label: $t('paidAmount'),
+		prop: 'paidAmount',
+		formatter({ paidAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{paidAmount}￥
+				</ElText>
+			);
+		},
+	},
 	// 还款状态
-	{ label: $t('paymentStatus'), prop: 'paymentStatus' },
+	{ label: $t('paymentStatus'), prop: 'paymentStatus', slot: 'paymentStatus' },
+	// 还款截止日期
+	{
+		label: $t('dueDate'),
+		prop: 'dueDate',
+		sortable: true,
+		formatter({ dueDate }) {
+			return (
+				<ElText type={'danger'} style={{ fontWeight: 800 }}>
+					{dueDate}
+				</ElText>
+			);
+		},
+		width: 190,
+	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户
+	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
@@ -27,6 +69,8 @@ export const columns: TableColumnList = [
 
 // 添加规则
 export const rules = reactive<FormRules>({
+	// 绑定的用户
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
 	// 债务金额
 	installmentNumber: [{ required: true, message: `${$t('input')}${$t('installmentNumber')}`, trigger: 'blur' }],
 	// 每期应还金额

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

@@ -22,7 +22,7 @@ export async function onSearch() {
 /** 添加债务还款计划表 */
 export function onAdd() {
 	addDialog({
-		title: `${$t('addNew')}${$t('debt-repayment-plan')}`,
+		title: `${$t('addNew')}${$t('debtRepaymentPlan')}`,
 		width: '30%',
 		props: {
 			formInline: {

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

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

src/views/financial/debt-tracking/debt-tracking-dialog.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { rules } from '@/views/financial/debt-tracking/utils/columns';
 import { FormProps } from '@/views/financial/debt-tracking/utils/types';
 import { $t } from '@/plugins/i18n';
+import { debtTracking, debtType } from '@/enums/bill/debtTracking';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -24,6 +27,22 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+onMounted(() => {
+	onSearchUserinfo();
+});
 
 defineExpose({ formRef });
 </script>
@@ -31,8 +50,24 @@ defineExpose({ formRef });
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
 		<!-- 绑定的用户 -->
-		<el-form-item :label="$t('userId')" prop="userId">
+		<el-form-item :label="$t('user')" prop="userId">
-			<el-input v-model="form.userId" :placeholder="$t('input') + $t('userId')" autocomplete="off" type="text" />
+			<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>
 
 		<!-- 债务人姓名 -->
@@ -42,22 +77,34 @@ defineExpose({ formRef });
 
 		<!-- 债务金额 -->
 		<el-form-item :label="$t('debtAmount')" prop="debtAmount">
-			<el-input v-model="form.debtAmount" :placeholder="$t('input') + $t('debtAmount')" autocomplete="off" type="text" />
+			<el-input v-model="form.debtAmount" :min="0.01" :placeholder="$t('input') + $t('debtAmount')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
 		<!-- 债务类型 -->
 		<el-form-item :label="$t('debtType')" prop="debtType">
-			<el-input v-model="form.debtType" :placeholder="$t('input') + $t('debtType')" autocomplete="off" type="text" />
+			<el-select v-model="form.debtType" :placeholder="$t('debtType')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtType" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
 		</el-form-item>
 
 		<!-- 债务状态 -->
 		<el-form-item :label="$t('debtStatus')" prop="debtStatus">
-			<el-input v-model="form.debtStatus" :placeholder="$t('input') + $t('debtStatus')" autocomplete="off" type="text" />
+			<el-select v-model="form.debtStatus" :placeholder="$t('debtStatus')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
 		</el-form-item>
 
 		<!-- 还款截止日期 -->
 		<el-form-item :label="$t('dueDate')" prop="dueDate">
-			<el-input v-model="form.dueDate" :placeholder="$t('input') + $t('dueDate')" autocomplete="off" type="text" />
+			<el-date-picker
+				v-model="form.dueDate"
+				:end-placeholder="$t('endTime')"
+				:start-placeholder="$t('startTime')"
+				class="!w-[100%]"
+				time-format="YYYY-MM-DD HH:mm:ss"
+				type="datetime"
+				value-format="YYYY-MM-DD HH:mm:ss"
+			/>
 		</el-form-item>
 	</el-form>
 </template>

src/views/financial/debt-tracking/index.vue

@@ -13,9 +13,17 @@ import { useDebtTrackingStore } from '@/store/financial/debtTracking';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { FormInstance } from 'element-plus';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { debtTracking, debtType } from '@/enums/bill/debtTracking';
 
 const tableRef = ref();
 const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
 const debtTrackingStore = useDebtTrackingStore();
 
 /** 当前页改变时 */
@@ -42,6 +50,13 @@ const resetForm = async (formEl: FormInstance | undefined) => {
 	await onSearch();
 };
 
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -51,8 +66,25 @@ onMounted(() => {
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="debtTrackingStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
 			<!-- 绑定的用户 -->
-			<el-form-item :label="$t('userId')" prop="userId">
+			<el-form-item :label="$t('user')" prop="userId">
-				<el-input v-model="debtTrackingStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
+				<el-select
+					v-model="debtTrackingStore.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,18 +99,32 @@ onMounted(() => {
 
 			<!-- 债务类型 -->
 			<el-form-item :label="$t('debtType')" prop="debtType">
-				<el-input v-model="debtTrackingStore.form.debtType" :placeholder="`${$t('input')}${$t('debtType')}`" class="!w-[180px]" clearable />
+				<el-select v-model="debtTrackingStore.form.debtType" :placeholder="$t('debtType')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="item in debtType" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
 
 			<!-- 债务状态 -->
 			<el-form-item :label="$t('debtStatus')" prop="debtStatus">
-				<el-input v-model="debtTrackingStore.form.debtStatus" :placeholder="`${$t('input')}${$t('debtStatus')}`" class="!w-[180px]" clearable />
+				<el-select v-model="debtTrackingStore.form.debtStatus" :placeholder="$t('debtStatus')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
 
 			<!-- 还款截止日期 -->
 			<el-form-item :label="$t('dueDate')" prop="dueDate">
-				<el-input v-model="debtTrackingStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
+				<el-date-picker
+					v-model="debtTrackingStore.form.dueDate"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="daterange"
+					value-format="YYYY-MM-DD"
+				/>
 			</el-form-item>
+
+			<!-- 搜索和重置 -->
 			<el-form-item>
 				<el-button :icon="useRenderIcon('ri:search-line')" :loading="debtTrackingStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
 				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
@@ -116,12 +162,26 @@ onMounted(() => {
 					@selection-change="onSelectionChange"
 					@page-current-change="onCurrentPageChange"
 				>
+					<template #debtType="{ row }">
+						<component :is="debtType.find(item => item.value === row.debtType).el" />
+					</template>
+
+					<template #debtStatus="{ row }">
+						<component :is="debtTracking.find(item => item.value === row.debtStatus).el" />
+					</template>
+
 					<template #createUser="{ row }">
 						<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
 							{{ row.createUsername }}
 						</el-button>
 					</template>
 
+					<template #username="{ row }">
+						<el-button v-show="row.username" link type="primary" @click="selectUserinfo(row.userId)">
+							{{ row.username }}
+						</el-button>
+					</template>
+
 					<template #updateUser="{ row }">
 						<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
 							{{ row.updateUsername }}

src/views/financial/debt-tracking/utils/columns.tsx

@@ -1,25 +1,48 @@
 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 },
-	// 绑定的用户
-	{ label: $t('userId'), prop: 'userId' },
 	// 债务人姓名
 	{ label: $t('debtorName'), prop: 'debtorName' },
 	// 债务金额
-	{ label: $t('debtAmount'), prop: 'debtAmount' },
+	{
+		label: $t('debtAmount'),
+		prop: 'debtAmount',
+		formatter({ debtAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{debtAmount}￥
+				</ElText>
+			);
+		},
+		width: 150,
+	},
 	// 债务类型
-	{ label: $t('debtType'), prop: 'debtType' },
+	{ label: $t('debtType'), prop: 'debtType', slot: 'debtType', width: 130 },
 	// 债务状态
-	{ label: $t('debtStatus'), prop: 'debtStatus' },
+	{ label: $t('debtStatus'), prop: 'debtStatus', slot: 'debtStatus', width: 130 },
 	// 还款截止日期
-	{ label: $t('dueDate'), prop: 'dueDate' },
+	{
+		label: $t('dueDate'),
+		prop: 'dueDate',
+		formatter({ dueDate }) {
+			return (
+				<ElText type={'danger'} style={{ fontWeight: 800 }}>
+					{dueDate}
+				</ElText>
+			);
+		},
+		width: 190,
+		sortable: true,
+	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户
+	{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },

src/views/financial/debt-tracking/utils/hooks.ts

@@ -55,7 +55,7 @@ export function onAdd() {
 /** 更新债务追踪 */
 export function onUpdate(row: any) {
 	addDialog({
-		title: `${$t('modify')}${$t('debt-tracking')}`,
+		title: `${$t('modify')}${$t('debtTracking')}`,
 		width: '30%',
 		props: {
 			formInline: {

src/views/financial/saving-goal/index.vue

@@ -114,10 +114,10 @@ onMounted(() => {
 					v-model="savingGoalStore.form.duration"
 					:end-placeholder="$t('endTime')"
 					:start-placeholder="$t('startTime')"
-					class="!w-[180px]"
+					class="!w-[210px]"
-					time-format="YYYY-MM-DD HH:mm:ss"
+					time-format="YYYY-MM-DD"
 					type="datetimerange"
-					value-format="YYYY-MM-DD HH:mm:ss"
+					value-format="YYYY-MM-DD"
 				/>
 			</el-form-item>
 

src/views/financial/saving-goal/saving-goal-dialog.vue

@@ -82,7 +82,7 @@ defineExpose({ formRef });
 
 		<!-- 目标金额 -->
 		<el-form-item :label="$t('amount')" prop="amount">
-			<el-input v-model="form.amount" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
+			<el-input v-model="form.amount" :min="0.01" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
 		<!-- 目标时长 -->