<script setup lang="ts">
|
import { computed, ref } from 'vue'
|
import type { FormInst, FormRules } from 'naive-ui'
|
import AiRichTextEditor from '@/components/custom/Editor/AiRichTextEditor/index.vue'
|
|
interface FormModel {
|
tirePressure: string
|
lighting: string
|
bodyClean: string
|
cabinClean: string
|
lostItems: string
|
}
|
|
const activeSubTab = ref('tirePressure')
|
|
const subTabs = [
|
{ key: 'tirePressure', label: '胎压说明' },
|
{ key: 'lighting', label: '灯光说明' },
|
// { key: 'bodyClean', label: '车身标识及清洁' },
|
{ key: 'cabinClean', label: '舱内清洁及消毒' },
|
// { key: 'lostItems', label: '遗失物品上报' },
|
]
|
|
const formRef = ref<FormInst | null>(null)
|
|
const formModel = ref<FormModel>({
|
tirePressure: '',
|
lighting: '',
|
bodyClean: '',
|
cabinClean: '',
|
lostItems: '',
|
})
|
|
const rules = computed<FormRules>(() => {
|
const r: FormRules = {}
|
const map: Record<string, string> = {
|
tirePressure: '请输入胎压说明',
|
lighting: '请输入灯光说明',
|
bodyClean: '请输入车身标识及清洁说明',
|
cabinClean: '请输入舱内清洁及消毒说明',
|
lostItems: '请输入遗失物品上报说明',
|
}
|
const key = activeSubTab.value as keyof FormModel
|
if (map[key]) {
|
r[key] = [{ required: true, message: map[key], trigger: 'blur' }]
|
}
|
return r
|
})
|
|
const currentContent = computed({
|
get: () => formModel.value[activeSubTab.value as keyof FormModel],
|
set: (value: string) => {
|
const key = activeSubTab.value as keyof FormModel
|
formModel.value[key] = value
|
},
|
})
|
|
async function validate() {
|
return await formRef.value?.validate()
|
}
|
|
defineExpose({
|
validate,
|
getData: () => formModel.value,
|
getActiveKey: () => activeSubTab.value,
|
setData: (data: Partial<FormModel>) => {
|
if (typeof data.tirePressure === 'string')
|
formModel.value.tirePressure = data.tirePressure
|
if (typeof data.lighting === 'string')
|
formModel.value.lighting = data.lighting
|
if (typeof data.bodyClean === 'string')
|
formModel.value.bodyClean = data.bodyClean
|
if (typeof data.cabinClean === 'string')
|
formModel.value.cabinClean = data.cabinClean
|
if (typeof data.lostItems === 'string')
|
formModel.value.lostItems = data.lostItems
|
},
|
})
|
</script>
|
|
<template>
|
<div>
|
<div class="flex tabs mb-16px">
|
<div
|
v-for="tab in subTabs"
|
:key="tab.key"
|
class="tab-item"
|
:class="{ 'active-tab': activeSubTab === tab.key }"
|
@click="activeSubTab = tab.key"
|
>
|
{{ tab.label }}
|
</div>
|
</div>
|
|
<n-form
|
ref="formRef"
|
:model="formModel"
|
:rules="rules"
|
label-placement="left"
|
label-width="80"
|
require-mark-placement="left"
|
>
|
<n-form-item label="" :path="activeSubTab" required>
|
<div class="rich-text-wrapper">
|
<AiRichTextEditor v-model="currentContent" height="300px" />
|
</div>
|
</n-form-item>
|
</n-form>
|
</div>
|
</template>
|
|
<style scoped>
|
.rich-text-wrapper {
|
width: 100%;
|
}
|
|
.rich-text-wrapper :deep(.aie-container) {
|
min-height: 300px;
|
font-size: 14px;
|
}
|
|
.rich-text-wrapper :deep(.aie-main) {
|
min-height: 300px;
|
}
|
.tabs {
|
display: inline-flex;
|
align-items: stretch;
|
/* width: 558px; */
|
height: 32px;
|
box-sizing: border-box;
|
margin-bottom: 16px;
|
}
|
|
.tab-item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid rgba(23, 31, 38, 0.15);
|
color: #171F26;
|
font-size: 13px;
|
line-height: 18px;
|
cursor: pointer;
|
box-sizing: border-box;
|
white-space: nowrap;
|
user-select: none;
|
transition: color 0.2s ease, border-color 0.2s ease;
|
padding: 7px 16px;
|
}
|
|
.tab-item + .tab-item {
|
margin-left: -1px;
|
}
|
|
.tab-item:first-child {
|
border-radius: 4px 0 0 4px;
|
}
|
|
.tab-item:last-child {
|
border-radius: 0 4px 4px 0;
|
}
|
|
.tab-item:hover {
|
color: #0068FF;
|
}
|
|
.active-tab {
|
color: #0068FF;
|
border-color: #0068FF;
|
position: relative;
|
z-index: 1;
|
}
|
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.gap-2 {
|
gap: 8px;
|
}
|
.n-form-item-feedback-wrapper{
|
height: 0px !important;
|
}
|
</style>
|
