feat: 设置-合同设置-（合同编号设置100% & 合同条款设置10%）
This commit is contained in:
Zzz1zz
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<a-card title="合同编号设置">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleAddContractNumber"
|
||||
><icon-plus />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<DataTable
|
||||
:data="renderData"
|
||||
:columns="projectColumn"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
pagination
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #realname="{ record }">
|
||||
<span>{{ record.realname }}</span>
|
||||
<icon-idcard v-if="record.isManager === 1" />
|
||||
</template>
|
||||
<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="handleEditContractNumber(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>
|
||||
<contractNumberFormModal
|
||||
v-model:visible="showModal"
|
||||
:record="currentNumberInfo"
|
||||
:is-edit="isEdit"
|
||||
@submitted="getCodeSettingListData"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import type { TableColumnData } from '@arco-design/web-vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useDataTable from '@/composables/useDataTable';
|
||||
import {
|
||||
getCodeSettingList,
|
||||
getCodeSettingFromId,
|
||||
disableCodeSetting,
|
||||
delCodeSetting,
|
||||
} from '@/api/setting';
|
||||
import { ContractTermInfo, UserStatus } from '@/types/setting';
|
||||
import { camelToSnake } from '@/utils/caseConvert';
|
||||
import contractNumberFormModal from './modal/contract-number-form-modal.vue';
|
||||
|
||||
const {
|
||||
data: renderData,
|
||||
columns: projectColumn,
|
||||
loading,
|
||||
total,
|
||||
current,
|
||||
pageSize,
|
||||
setData,
|
||||
setColumns,
|
||||
setLoading,
|
||||
setTotal,
|
||||
setCurrent,
|
||||
setPageSize,
|
||||
} = useDataTable({
|
||||
initialPage: 1,
|
||||
initialPageSize: 10,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
});
|
||||
|
||||
const contractNumbeList = ref<ContractTermInfo[]>([]);
|
||||
const showModal = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const currentNumberInfo = ref<any>(null);
|
||||
// 列配置
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '编号名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '编号预览',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 250,
|
||||
ellipsis: true,
|
||||
// slotName: 'code',
|
||||
},
|
||||
{
|
||||
title: '创建合同模板关联',
|
||||
dataIndex: 'contractSettingStr',
|
||||
key: 'contractSettingStr',
|
||||
render: ({ record }) => record.contractSettingStr || '-',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
slotName: 'status',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operate',
|
||||
slotName: 'operate',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
|
||||
// 获取列表数据
|
||||
const getCodeSettingListData = async () => {
|
||||
const params = {
|
||||
page: current.value,
|
||||
page_size: pageSize.value,
|
||||
};
|
||||
setLoading(true);
|
||||
const { code, data } = await getCodeSettingList(params);
|
||||
if (code === 200 && data) {
|
||||
const { contractCodeSetting, page } = data;
|
||||
contractNumbeList.value = Array.isArray(contractCodeSetting)
|
||||
? contractCodeSetting
|
||||
: [];
|
||||
setData(contractNumbeList.value);
|
||||
if (page?.total) setTotal(page?.total);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// 分页事件处理
|
||||
const onPageChange = (page: number) => {
|
||||
setCurrent(page);
|
||||
current.value = page;
|
||||
getCodeSettingListData();
|
||||
};
|
||||
const onPageSizeChange = (size: number) => {
|
||||
setPageSize(size);
|
||||
pageSize.value = size;
|
||||
getCodeSettingListData();
|
||||
};
|
||||
const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
|
||||
try {
|
||||
const status: UserStatus = currentStatus === 1 ? 2 : 1;
|
||||
const param = { id, status };
|
||||
const { code, message } = await disableCodeSetting(param);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getCodeSettingListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
const handleDel = async (id: number) => {
|
||||
try {
|
||||
const { code, message } = await delCodeSetting(id);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getCodeSettingListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
const getCodeSettingFromIdData = async (id: number) => {
|
||||
const { code, data } = await getCodeSettingFromId(id);
|
||||
if (code === 200 && data) {
|
||||
const { contractCodeSetting } = data;
|
||||
currentNumberInfo.value = contractCodeSetting || null;
|
||||
currentNumberInfo.value.arrange = camelToSnake(
|
||||
currentNumberInfo.value.arrange
|
||||
);
|
||||
}
|
||||
};
|
||||
const handleAddContractNumber = () => {
|
||||
currentNumberInfo.value = null;
|
||||
isEdit.value = false;
|
||||
showModal.value = true;
|
||||
};
|
||||
const handleEditContractNumber = async (id: number) => {
|
||||
await getCodeSettingFromIdData(id);
|
||||
isEdit.value = true;
|
||||
// currentNumberInfo.value = info
|
||||
showModal.value = true;
|
||||
};
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
setColumns(columns);
|
||||
getCodeSettingListData();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<a-card title="合同条款设置">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleAddContractNumber"
|
||||
><icon-plus />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<DataTable
|
||||
:data="renderData"
|
||||
:columns="projectColumn"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
pagination
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #realname="{ record }">
|
||||
<span>{{ record.realname }}</span>
|
||||
<icon-idcard v-if="record.isManager === 1" />
|
||||
</template>
|
||||
<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="handleEditContractNumber(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>
|
||||
<contractNumberFormModal
|
||||
v-model:visible="showModal"
|
||||
:record="currentNumberInfo"
|
||||
:is-edit="isEdit"
|
||||
@submitted="getTermsSettingListData"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import type { TableColumnData } from '@arco-design/web-vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useDataTable from '@/composables/useDataTable';
|
||||
import {
|
||||
getTermsSettingList,
|
||||
getTermsSettingFromId,
|
||||
disableTermsSetting,
|
||||
delTermsSetting,
|
||||
} from '@/api/setting';
|
||||
import { ContractTermInfo, UserStatus } from '@/types/setting';
|
||||
import { camelToSnake } from '@/utils/caseConvert';
|
||||
import contractNumberFormModal from './modal/contract-terms-form-modal.vue';
|
||||
|
||||
const {
|
||||
data: renderData,
|
||||
columns: projectColumn,
|
||||
loading,
|
||||
total,
|
||||
current,
|
||||
pageSize,
|
||||
setData,
|
||||
setColumns,
|
||||
setLoading,
|
||||
setTotal,
|
||||
setCurrent,
|
||||
setPageSize,
|
||||
} = useDataTable({
|
||||
initialPage: 1,
|
||||
initialPageSize: 10,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
});
|
||||
|
||||
const contractNumbeList = ref<ContractTermInfo[]>([]);
|
||||
const showModal = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const currentNumberInfo = ref<any>(null);
|
||||
// 列配置
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '条款名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '条款类别',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
// width: 250,
|
||||
ellipsis: true,
|
||||
render: ({ record }) => record.type || '-',
|
||||
},
|
||||
{
|
||||
title: '条款项',
|
||||
dataIndex: 'feeStr',
|
||||
key: 'feeStr',
|
||||
render: ({ record }) => record.feeStr || '-',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
slotName: 'status',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operate',
|
||||
slotName: 'operate',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
// 获取列表数据
|
||||
const getTermsSettingListData = async () => {
|
||||
const params = {
|
||||
page: current.value,
|
||||
page_size: pageSize.value,
|
||||
};
|
||||
setLoading(true);
|
||||
const { code, data } = await getTermsSettingList(params);
|
||||
if (code === 200 && data) {
|
||||
const { contractCodeSetting, page } = data;
|
||||
contractNumbeList.value = Array.isArray(contractCodeSetting)
|
||||
? contractCodeSetting
|
||||
: [];
|
||||
setData(contractNumbeList.value);
|
||||
if (page?.total) setTotal(page?.total);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// 分页事件处理
|
||||
const onPageChange = (page: number) => {
|
||||
setCurrent(page);
|
||||
current.value = page;
|
||||
getTermsSettingListData();
|
||||
};
|
||||
const onPageSizeChange = (size: number) => {
|
||||
setPageSize(size);
|
||||
pageSize.value = size;
|
||||
getTermsSettingListData();
|
||||
};
|
||||
const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
|
||||
try {
|
||||
const status: UserStatus = currentStatus === 1 ? 2 : 1;
|
||||
const param = { id, status };
|
||||
const { code, message } = await disableTermsSetting(param);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getTermsSettingListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
const handleDel = async (id: number) => {
|
||||
try {
|
||||
const { code, message } = await delTermsSetting(id);
|
||||
if (code === 200) {
|
||||
Message.success(message);
|
||||
getTermsSettingListData();
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
}
|
||||
};
|
||||
const getTermsSettingFromIdData = async (id: number) => {
|
||||
const { code, data } = await getTermsSettingFromId(id);
|
||||
if (code === 200 && data) {
|
||||
const { contractCodeSetting } = data;
|
||||
currentNumberInfo.value = contractCodeSetting || null;
|
||||
currentNumberInfo.value.arrange = camelToSnake(
|
||||
currentNumberInfo.value.arrange
|
||||
);
|
||||
}
|
||||
};
|
||||
const handleAddContractNumber = () => {
|
||||
currentNumberInfo.value = null;
|
||||
isEdit.value = false;
|
||||
showModal.value = true;
|
||||
};
|
||||
const handleEditContractNumber = async (id: number) => {
|
||||
await getTermsSettingFromIdData(id);
|
||||
isEdit.value = true;
|
||||
// currentNumberInfo.value = info
|
||||
showModal.value = true;
|
||||
};
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
setColumns(columns);
|
||||
getTermsSettingListData();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
@@ -1,3 +1,136 @@
|
||||
<template>
|
||||
<div> Data Dictionary </div>
|
||||
<div class="system-setting-general">
|
||||
<Breadcrumb
|
||||
:items="['menu.setting', 'menu.setting.system', 'setting.contract']"
|
||||
/>
|
||||
<a-card class="full_height" :title="t('setting.contract')">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="6">
|
||||
<ul class="setting_tabs_list">
|
||||
<li
|
||||
v-for="item in contractSettingTabs"
|
||||
: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">
|
||||
<contractNumber v-if="currentSettingId === 1" />
|
||||
<contractTerms v-if="currentSettingId === 2" />
|
||||
<ContractTemplate v-if="currentSettingId === 3" />
|
||||
<createContractTemplate v-if="currentSettingId === 4" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import contractNumber from './contract-number.vue';
|
||||
import contractTerms from './contract-terms.vue';
|
||||
import ContractTemplate from './contract-template.vue';
|
||||
import createContractTemplate from './create-contract-template.vue';
|
||||
// import { } from '@/api/setting';
|
||||
// import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const currentSettingId = ref<number>(1);
|
||||
const contractSettingTabs = [
|
||||
{ id: 1, text: '合同编号设置' },
|
||||
{ id: 2, text: '合同条款设置' },
|
||||
{ id: 3, text: '合同文档模板设置' },
|
||||
{ id: 4, 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>
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="430"
|
||||
: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="name" required>
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
:placeholder="$t('please.enter', { placeholder: '合同编号' })"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- 编号回收 -->
|
||||
<a-form-item label="编号回收" field="ecycling" required>
|
||||
<a-checkbox-group v-model="form.ecycling">
|
||||
<a-checkbox :value="1">作废合同编号回收</a-checkbox>
|
||||
<a-checkbox :value="2">删除合同编号回收</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="编号编排" field="arrange" required>
|
||||
<div class="numbering">编号预览：{{ numbering }}</div>
|
||||
</a-form-item>
|
||||
<draggable
|
||||
v-model="arrangeList"
|
||||
:animation="200"
|
||||
item-key="sort"
|
||||
@end="handleDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<a-row align="center" style="margin-top: 10px">
|
||||
<a-col :span="6">
|
||||
<div class="arrange_left">
|
||||
<icon-unordered-list :size="24" />
|
||||
<p class="text">{{ getArrangeText(element.type) }}</p>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-input
|
||||
v-if="element.type === 1"
|
||||
v-model="element.content"
|
||||
placeholder="请输入固定文本"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="element.type === 2"
|
||||
v-model="element.date_type"
|
||||
>
|
||||
<a-option
|
||||
v-for="(item, index) in dateTypeOptions"
|
||||
:key="index"
|
||||
:value="item.type"
|
||||
>
|
||||
{{ item.text }}</a-option
|
||||
>
|
||||
</a-select>
|
||||
<template v-else>
|
||||
<a-select v-model="element.data_type">
|
||||
<a-option
|
||||
v-for="(item, index) in dataTypeOptions"
|
||||
:key="index"
|
||||
:value="item.type"
|
||||
>
|
||||
{{ item.text }}</a-option
|
||||
>
|
||||
</a-select>
|
||||
<a-input-number
|
||||
v-model="element.data_digit"
|
||||
:style="{ marginTop: '10px' }"
|
||||
placeholder="Please enter something"
|
||||
>
|
||||
<template #append>位数</template>
|
||||
</a-input-number>
|
||||
</template>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<icon-delete
|
||||
v-if="element.type === 1"
|
||||
:size="16"
|
||||
style="cursor: pointer"
|
||||
@click="handleDeleteText(element)"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</draggable>
|
||||
<a-divider />
|
||||
<a-button style="width: 130px" type="outline" @click="handleAddText"
|
||||
><icon-plus /> 新增固定文本</a-button
|
||||
>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<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';
|
||||
// import { CreateCodeSettingParam } from '@/types/setting'
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
isEdit: boolean;
|
||||
record?: any | null;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'submitted'): void;
|
||||
}>();
|
||||
const arrangeList = ref([
|
||||
{ type: 1, content: '', sort: 1 },
|
||||
{ type: 2, date_type: 1, sort: 2 },
|
||||
{ type: 3, data_type: 1, data_digit: 5, sort: 3 },
|
||||
]);
|
||||
const dateTypeOptions = [
|
||||
{ text: '年月日时分', type: 1 },
|
||||
{ text: '年月日时', type: 2 },
|
||||
{ text: '年月日', type: 3 },
|
||||
{ text: '年月', type: 4 },
|
||||
];
|
||||
const dataTypeOptions = [
|
||||
{ text: '每月重置计数（每月1日零点重置）', type: 1 },
|
||||
{ text: '按年顺序计数', type: 2 },
|
||||
{ text: '按创建合同顺序计数', type: 3 },
|
||||
];
|
||||
// 表单数据
|
||||
const formRef = ref<FormInstance>();
|
||||
const defaultForm: any = {
|
||||
name: '',
|
||||
ecycling: [1],
|
||||
arrange: arrangeList.value,
|
||||
};
|
||||
const form = reactive<any>({ ...defaultForm });
|
||||
const { t } = useI18n();
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入合同编号' }],
|
||||
ecycling: [{ required: true, message: '请选择编号回收规则' }],
|
||||
arrange: [{ required: true, message: '请选择编号回收规则' }],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.isEdit && props.record) {
|
||||
Object.assign(form, { ...props.record, ecycling: [] });
|
||||
if (props.record.cancelCodeRecycling === 1) form.ecycling.push(1);
|
||||
if (props.record.delCodeRecycling === 1) form.ecycling.push(2);
|
||||
arrangeList.value = (props.record.arrange || []).map(
|
||||
(item, index) => ({
|
||||
...item,
|
||||
sort: index + 1,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
arrangeList.value = [
|
||||
{ type: 1, content: '', sort: 1 },
|
||||
{ type: 2, date_type: 1, sort: 2 },
|
||||
{ type: 3, data_type: 1, data_digit: 5, sort: 3 },
|
||||
];
|
||||
Object.assign(form, defaultForm);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
// 生成日期字符串
|
||||
function getDateStr(type) {
|
||||
const now = new Date();
|
||||
const pad = (n) => n.toString().padStart(2, '0');
|
||||
|
||||
const year = now.getFullYear();
|
||||
const month = pad(now.getMonth() + 1);
|
||||
const day = pad(now.getDate());
|
||||
const hour = pad(now.getHours());
|
||||
const minute = pad(now.getMinutes());
|
||||
|
||||
switch (type) {
|
||||
case 1:
|
||||
return `${year}${month}${day}${hour}${minute}`;
|
||||
case 2:
|
||||
return `${year}${month}${day}${hour}`;
|
||||
case 3:
|
||||
return `${year}${month}${day}`;
|
||||
case 4:
|
||||
return `${year}${month}`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
const numbering = computed(() => {
|
||||
const parts: string[] = [];
|
||||
arrangeList.value.forEach((item) => {
|
||||
if (item.type === 1) {
|
||||
parts.push(item.content || '');
|
||||
} else if (item.type === 2) {
|
||||
parts.push(getDateStr(item.date_type));
|
||||
} else if (item.type === 3) {
|
||||
const digit = item.data_digit ? item.data_digit : 1;
|
||||
parts.push('1'.padStart(digit, '0'));
|
||||
}
|
||||
});
|
||||
return parts.filter(Boolean).join('-');
|
||||
});
|
||||
const getArrangeText = (type: number) => {
|
||||
const textMap = { 1: '固定文本', 2: '日期', 3: '流水号' };
|
||||
return type ? textMap[type] : '固定文本';
|
||||
};
|
||||
const handleAddText = () => {
|
||||
const maxSort = Math.max(...arrangeList.value.map((i) => i.sort || 0));
|
||||
arrangeList.value.push({
|
||||
type: 1,
|
||||
content: '',
|
||||
sort: maxSort + 1,
|
||||
});
|
||||
};
|
||||
const handleDeleteText = (targetItem) => {
|
||||
const index = arrangeList.value.findIndex((item) => item === targetItem);
|
||||
if (index !== -1) {
|
||||
arrangeList.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
const handleDragEnd = () => {
|
||||
// 更新 sort 字段
|
||||
arrangeList.value.forEach((item, index) => {
|
||||
item.sort = index + 1;
|
||||
});
|
||||
// 同步到 form.arrange
|
||||
form.arrange = JSON.parse(JSON.stringify(arrangeList.value));
|
||||
};
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const valid = await formRef.value.validate();
|
||||
if (valid) return;
|
||||
// 同步编号排序
|
||||
form.arrange = arrangeList.value.map((item, index) => ({
|
||||
...item,
|
||||
sort: index + 1,
|
||||
}));
|
||||
const params = {
|
||||
...form,
|
||||
cancel_code_recycling: form.ecycling.includes(1) ? 1 : 0,
|
||||
del_code_recycling: form.ecycling.includes(2) ? 1 : 0,
|
||||
};
|
||||
delete params.ecycling;
|
||||
console.log('提交参数：', params);
|
||||
const res = props?.isEdit
|
||||
? await updateCodeSetting(params)
|
||||
: await createCodeSetting(params);
|
||||
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,196 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="430"
|
||||
: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="name" required>
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
:max-length="20"
|
||||
show-word-limit
|
||||
:placeholder="$t('please.enter', { placeholder: '条款名称' })"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- 条款类别 -->
|
||||
<a-form-item label="条款类别" field="type" required>
|
||||
<a-select v-model="form.type">
|
||||
<a-option
|
||||
v-for="item in termsType"
|
||||
:key="item.type"
|
||||
:value="item.type"
|
||||
>{{ item.text }}</a-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<!-- 条款项配置 -->
|
||||
<a-form-item label="条款项配置" required> </a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<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';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
isEdit: boolean;
|
||||
record?: any | null;
|
||||
}>();
|
||||
const termsType = [
|
||||
{ text: '租赁类', type: 1 },
|
||||
{ text: '物业类', type: 2 },
|
||||
{ text: '特殊类', type: 3 },
|
||||
{ text: '其他类', type: 4 },
|
||||
];
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'submitted'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const formRef = ref<FormInstance>();
|
||||
const defaultForm: any = {
|
||||
name: '',
|
||||
type: 1,
|
||||
};
|
||||
const form = reactive<any>({ ...defaultForm });
|
||||
const { t } = useI18n();
|
||||
// 校验规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入合同编号' }],
|
||||
type: [{ required: true, message: '请选择编号回收规则' }],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.isEdit && props.record) {
|
||||
Object.assign(form, { ...props.record, ecycling: [] });
|
||||
if (props.record.cancelCodeRecycling === 1) form.ecycling.push(1);
|
||||
if (props.record.delCodeRecycling === 1) form.ecycling.push(2);
|
||||
} else {
|
||||
Object.assign(form, defaultForm);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
// 生成日期字符串
|
||||
function getDateStr(type) {
|
||||
const now = new Date();
|
||||
const pad = (n) => n.toString().padStart(2, '0');
|
||||
|
||||
const year = now.getFullYear();
|
||||
const month = pad(now.getMonth() + 1);
|
||||
const day = pad(now.getDate());
|
||||
const hour = pad(now.getHours());
|
||||
const minute = pad(now.getMinutes());
|
||||
|
||||
switch (type) {
|
||||
case 1:
|
||||
return `${year}${month}${day}${hour}${minute}`;
|
||||
case 2:
|
||||
return `${year}${month}${day}${hour}`;
|
||||
case 3:
|
||||
return `${year}${month}${day}`;
|
||||
case 4:
|
||||
return `${year}${month}`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const valid = await formRef.value.validate();
|
||||
if (valid) return;
|
||||
// 同步编号排序
|
||||
|
||||
const params = {
|
||||
...form,
|
||||
cancel_code_recycling: form.ecycling.includes(1) ? 1 : 0,
|
||||
del_code_recycling: form.ecycling.includes(2) ? 1 : 0,
|
||||
};
|
||||
delete params.ecycling;
|
||||
console.log('提交参数：', params);
|
||||
const res = props?.isEdit
|
||||
? await updateCodeSetting(params)
|
||||
: await createCodeSetting(params);
|
||||
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>
|
||||
Reference in New Issue
Block a user