137 lines
3.4 KiB
Vue
137 lines
3.4 KiB
Vue
<template>
|
|
<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>
|