feat: 设置-财务设置-费项管理
This commit is contained in:
Zzz1zz
@@ -46,7 +46,7 @@
|
||||
</a-space>
|
||||
</template>
|
||||
</DataTable>
|
||||
<contractNumberFormModal
|
||||
<contractNumberFormDrawer
|
||||
v-model:visible="showModal"
|
||||
:record="currentNumberInfo"
|
||||
:is-edit="isEdit"
|
||||
@@ -68,7 +68,7 @@
|
||||
} from '@/api/setting';
|
||||
import { ContractTermInfo, UserStatus } from '@/types/setting';
|
||||
import { camelToSnake } from '@/utils/caseConvert';
|
||||
import contractNumberFormModal from './modal/contract-number-form-modal.vue';
|
||||
import contractNumberFormDrawer from './drawer/contract-number-form-drawer.vue';
|
||||
|
||||
const {
|
||||
data: renderData,
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</a-space>
|
||||
</template>
|
||||
</DataTable>
|
||||
<contractNumberFormModal
|
||||
<contractNumberFormDrawer
|
||||
v-model:visible="showModal"
|
||||
:record="currentNumberInfo"
|
||||
:is-edit="isEdit"
|
||||
@@ -68,7 +68,7 @@
|
||||
} from '@/api/setting';
|
||||
import { ContractTermInfo, UserStatus } from '@/types/setting';
|
||||
import { camelToSnake } from '@/utils/caseConvert';
|
||||
import contractNumberFormModal from './modal/contract-terms-form-modal.vue';
|
||||
import contractNumberFormDrawer from './drawer/contract-terms-form-drawer.vue';
|
||||
|
||||
const {
|
||||
data: renderData,
|
||||
|
||||
-2
@@ -103,7 +103,6 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, reactive, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { FormInstance } from '@arco-design/web-vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { createCodeSetting, updateCodeSetting } from '@/api/setting';
|
||||
@@ -143,7 +142,6 @@
|
||||
arrange: arrangeList.value,
|
||||
};
|
||||
const form = reactive<any>({ ...defaultForm });
|
||||
const { t } = useI18n();
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入合同编号' }],
|
||||
-2
@@ -42,7 +42,6 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { FormInstance } from '@arco-design/web-vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { createCodeSetting, updateCodeSetting } from '@/api/setting';
|
||||
@@ -70,7 +69,6 @@
|
||||
type: 1,
|
||||
};
|
||||
const form = reactive<any>({ ...defaultForm });
|
||||
const { t } = useI18n();
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入合同编号' }],
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="420"
|
||||
:visible="visible"
|
||||
:title="isEdit ? '编辑费项' : '新增费项'"
|
||||
unmount-on-close
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
auto-label-width
|
||||
layout="vertical"
|
||||
>
|
||||
<!-- 费项属性 -->
|
||||
<a-form-item label="费项属性" field="fee_attribute" required>
|
||||
<a-radio-group
|
||||
v-model="form.fee_attribute"
|
||||
style="width: 100%"
|
||||
type="button"
|
||||
>
|
||||
<a-radio style="width: 50%; text-align: center" :value="1"
|
||||
>收入费项</a-radio
|
||||
>
|
||||
<a-radio style="width: 50%; text-align: center" :value="2"
|
||||
>支出费项</a-radio
|
||||
>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<!-- 费项名称 -->
|
||||
<a-form-item label="费项名称" field="name" required>
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
:placeholder="$t('please.enter', { placeholder: '费项名称' })"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- 费项类别 -->
|
||||
<a-form-item label="费项类别" field="fee_type" required>
|
||||
<a-select v-model="form.fee_type">
|
||||
<a-option
|
||||
v-for="item in feeTypeList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.text }}</a-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<!-- 是否保证金 -->
|
||||
<a-form-item label="是否保证金" field="is_bond" required>
|
||||
<a-radio-group v-model="form.is_bond" style="width: 100%" type="button">
|
||||
<a-radio style="width: 50%; text-align: center" :value="1"
|
||||
>是</a-radio
|
||||
>
|
||||
<a-radio style="width: 50%; text-align: center" :value="2"
|
||||
>否</a-radio
|
||||
>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="费项税率" field="tax_rate" required>
|
||||
<a-input
|
||||
v-model.number="form.tax_rate"
|
||||
:placeholder="$t('please.enter', { placeholder: '费项税率' })"
|
||||
append="%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, reactive } from 'vue';
|
||||
import type { FormInstance } from '@arco-design/web-vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { createFee, updateFee } from '@/api/setting';
|
||||
import { CreateFeeParams } from '@/types/setting';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
isEdit: boolean;
|
||||
record?: CreateFeeParams | null;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'submitted'): void;
|
||||
}>();
|
||||
const feeTypeList = [
|
||||
{ value: 1, text: '租赁类' },
|
||||
{ value: 2, text: '物业类' },
|
||||
{ value: 3, text: '特殊类' },
|
||||
{ value: 4, text: '其他类' },
|
||||
];
|
||||
// 表单数据
|
||||
const formRef = ref<FormInstance>();
|
||||
const defaultForm: CreateFeeParams = {
|
||||
name: '',
|
||||
fee_attribute: 1,
|
||||
fee_type: 1,
|
||||
is_bond: 2,
|
||||
tax_rate: '0',
|
||||
};
|
||||
const form = reactive<CreateFeeParams>({ ...defaultForm });
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入合同编号' }],
|
||||
fee_attribute: [{ required: true, message: '请选择费项属性' }],
|
||||
fee_type: [{ required: true, message: '请选择费项类别' }],
|
||||
is_bond: [{ required: true, message: '请选择是否保证金' }],
|
||||
tax_rate: [
|
||||
{ required: true, message: '请输入费项税率' },
|
||||
{
|
||||
validator: (value, cb) => {
|
||||
const int = Number(value);
|
||||
if (!int || int > 100) {
|
||||
cb('请输入正确的费项税率');
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.isEdit && props.record) {
|
||||
Object.assign(form, props.record);
|
||||
} else {
|
||||
Object.assign(form, defaultForm);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const valid = await formRef.value.validate();
|
||||
if (valid) return;
|
||||
const res = props?.isEdit ? await updateFee(form) : await createFee(form);
|
||||
if (res?.code === 200) {
|
||||
Message.success(res?.message);
|
||||
emit('submitted');
|
||||
emit('update:visible', false);
|
||||
}
|
||||
} catch (err) {
|
||||
// 捕获异常，暂不处理
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(label.arco-form-item-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.label_wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.required {
|
||||
color: #f53f3f;
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.numbering {
|
||||
background-color: #eaf3fe;
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.arrange_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<DataTable
|
||||
:data="renderData"
|
||||
pagination
|
||||
:columns="projectColumn"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
:page-size-options="pageSizeOptions"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status == 1 ? 'green' : 'red'">
|
||||
{{ record.status == 1 ? $t('enable') : $t('disable') }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template #operate="{ record }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleEdit(record.id)">
|
||||
{{ $t('edit') }}</a-button
|
||||
>
|
||||
<a-popover trigger="click" position="bottom">
|
||||
<a-button>{{ $t('more') }}</a-button>
|
||||
<template #content>
|
||||
<a-space direction="vertical">
|
||||
<a-button @click="handleToggleStatus(record.id, record.status)">
|
||||
{{ record.status == 1 ? $t('disable') : $t('enable') }}
|
||||
</a-button>
|
||||
<a-button status="danger" @click="handleDel(record.id)">
|
||||
{{ $t('delete') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import useDataTable from '@/composables/useDataTable';
|
||||
import type { TableColumnData } from '@arco-design/web-vue';
|
||||
import { getFeeList, disableFee, delFee } from '@/api/setting';
|
||||
import { FeeType, FeeManagement, UserStatus } from '@/types/setting';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
type: FeeType;
|
||||
isSubmitted: boolean;
|
||||
}>();
|
||||
const {
|
||||
data: renderData,
|
||||
columns: projectColumn,
|
||||
total,
|
||||
loading,
|
||||
current,
|
||||
pageSize,
|
||||
setData,
|
||||
setColumns,
|
||||
setTotal,
|
||||
setLoading,
|
||||
setCurrent,
|
||||
setPageSize,
|
||||
} = useDataTable({
|
||||
initialPage: 1,
|
||||
initialPageSize: 5,
|
||||
pageSizeOptions: [5, 10, 15, 20],
|
||||
});
|
||||
const pageSizeOptions = [5, 10, 15, 20];
|
||||
const feeListData = ref<FeeManagement[]>([]);
|
||||
const getFeeListData = async () => {
|
||||
setLoading(true);
|
||||
const params = {
|
||||
page: current.value,
|
||||
page_size: pageSize.value,
|
||||
fee_attribute: props.type,
|
||||
};
|
||||
const { code, data } = await getFeeList(params);
|
||||
setLoading(false);
|
||||
if (code === 200) {
|
||||
const { list, page } = data;
|
||||
const feeList = list ?? [];
|
||||
if (feeList.length === 0) return;
|
||||
feeListData.value = feeList;
|
||||
setData(feeListData.value);
|
||||
setTotal(page?.total ? page.total : 0);
|
||||
}
|
||||
};
|
||||
|
||||
// 列配置
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '费项名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'feeTypeStr',
|
||||
key: 'feeTypeStr',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '是否保证金',
|
||||
dataIndex: 'isBondStr',
|
||||
key: 'isBond',
|
||||
},
|
||||
{
|
||||
title: '税率',
|
||||
dataIndex: 'taxRate',
|
||||
key: 'taxRate',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
slotName: 'status',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operate',
|
||||
slotName: 'operate',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
// 分页事件处理
|
||||
const onPageChange = (page: number) => {
|
||||
setCurrent(page);
|
||||
current.value = page;
|
||||
getFeeListData();
|
||||
};
|
||||
const onPageSizeChange = (size: number) => {
|
||||
setPageSize(size);
|
||||
pageSize.value = size;
|
||||
getFeeListData();
|
||||
};
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'edit', id: number): void;
|
||||
}>();
|
||||
const handleEdit = (id: number) => {
|
||||
emit('edit', id);
|
||||
};
|
||||
const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
|
||||
try {
|
||||
const status: UserStatus = currentStatus === 1 ? 2 : 1;
|
||||
const param = { id, status };
|
||||
const { code, message } = await disableFee(param);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getFeeListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
const handleDel = async (id: number) => {
|
||||
try {
|
||||
const { code, message } = await delFee(id);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getFeeListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.isSubmitted,
|
||||
(newVal) => {
|
||||
if (newVal) getFeeListData();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setColumns(columns);
|
||||
getFeeListData();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-card title="费项管理">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleAdd"><icon-plus />新增</a-button>
|
||||
</template>
|
||||
<a-tabs v-model:active-key="currentTabsKey" class="tabs_card">
|
||||
<a-tab-pane key="1" title="收入费项">
|
||||
<feeManagementTable
|
||||
v-if="currentTabsKey === '1'"
|
||||
:is-submitted="isSubmitted"
|
||||
:type="1"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="支出费项">
|
||||
<feeManagementTable
|
||||
v-if="currentTabsKey === '2'"
|
||||
:is-submitted="isSubmitted"
|
||||
:type="2"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<feeManagementDrawer
|
||||
v-model:visible="visible"
|
||||
:is-edit="isEdit"
|
||||
:record="currentRecord"
|
||||
@submitted="onSubmitted"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { getFeeFromId } from '@/api/setting';
|
||||
import feeManagementTable from './fee-management-table.vue';
|
||||
import feeManagementDrawer from './drawer/fee-management-drawer.vue';
|
||||
|
||||
const currentTabsKey = ref<string>('1');
|
||||
const visible = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const currentRecord = ref<any | null>(null);
|
||||
const isSubmitted = ref<boolean>(false);
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false;
|
||||
currentRecord.value = null;
|
||||
visible.value = true;
|
||||
isSubmitted.value = false;
|
||||
};
|
||||
const getFeeInfoFromId = async (id: number) => {
|
||||
const { code, data } = await getFeeFromId(id);
|
||||
if (code === 200 && data) {
|
||||
const { fee } = data;
|
||||
if (fee) currentRecord.value = fee;
|
||||
}
|
||||
};
|
||||
const handleEdit = async (id: number) => {
|
||||
isEdit.value = true;
|
||||
isSubmitted.value = false;
|
||||
await getFeeInfoFromId(id);
|
||||
visible.value = true;
|
||||
};
|
||||
const onSubmitted = () => {
|
||||
isSubmitted.value = true;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="system-setting-general">
|
||||
<Breadcrumb
|
||||
:items="['menu.setting', 'menu.setting.system', 'setting.finance']"
|
||||
/>
|
||||
<a-card class="full_height" :title="t('setting.finance')">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="6">
|
||||
<ul class="setting_tabs_list">
|
||||
<li
|
||||
v-for="item in financeSettingTabs"
|
||||
:key="item.id"
|
||||
:class="[
|
||||
'setting_tabs_item',
|
||||
{ isChoose: currentSettingId === item.id },
|
||||
]"
|
||||
@click="chooseSettingTab(item.id)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</li>
|
||||
</ul>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<feeManagement v-if="currentSettingId === 5" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import feeManagement from './fee-management.vue';
|
||||
// import { } from '@/api/setting';
|
||||
// import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const currentSettingId = ref<number>(5);
|
||||
const financeSettingTabs = [
|
||||
{ id: 1, text: '财务通用' },
|
||||
{ id: 2, text: '通知单模板' },
|
||||
{ id: 3, text: '通知单发送方式' },
|
||||
{ id: 4, text: '流水账户' },
|
||||
{ id: 5, text: '费项管理' },
|
||||
];
|
||||
const chooseSettingTab = (id: number) => {
|
||||
if (id === currentSettingId.value) return;
|
||||
currentSettingId.value = id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.system-setting-general {
|
||||
.setting_tabs_list {
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(239, 239, 239, 1);
|
||||
padding: 14px 0;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.setting_tabs_item {
|
||||
padding: 0 20px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&.isChoose {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project_house_list {
|
||||
.project_house_item {
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f2f3f5;
|
||||
width: 430px;
|
||||
height: 36px;
|
||||
margin-top: 10px;
|
||||
padding: 0 3px;
|
||||
|
||||
.subItem {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.isActive {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.in_rented_area,
|
||||
.cumulative_leasing_rate {
|
||||
.tips {
|
||||
color: rgba(187, 187, 187, 1);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
background-color: #eaf3fe;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(232, 243, 255, 1);
|
||||
color: rgba(29, 33, 41, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
border: 0px solid rgba(121, 121, 121, 1);
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.title_item {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user