hotline-admin-wex/src/views/business/order/components/Order-detail.vue

<template>
	<div>
		<el-dialog v-model="state.dialogVisible" draggable title="工单详情" ref="dialogRef" width="80%" append-to-body destroy-on-close>
			<el-tabs v-model="state.activeName" class="demo-tabs" @tab-change="handleClick">
				<el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label"></el-tab-pane>
			</el-tabs>
			<!-- 工单详情 -->
			<el-collapse v-model="state.collapseArr" v-if="state.activeName === '0'" class="collapse-box" v-loading="state.loading">
				<!-- 来电信息 -->
				<el-collapse-item name="1">
					<template #title>
						<p class="pl20">
							<b class="font14">来电信息</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来源渠道"> {{ state.ruleForm.channelText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="转接来源"> {{ state.ruleForm.transferPhone }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromPhone">
									<el-form-item label="来电号码">
										{{ state.ruleForm.fromPhone }}
										<!-- <el-popover :width="480" trigger="hover">
											<template #reference>
												<el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
											</template>
											<AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" />
										</el-popover> -->
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="服务坐席"> {{ state.ruleForm.employeeName }}[{{ state.ruleForm.employeeStaffNo }}] </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来电/信人">
										{{ state.ruleForm.fromName }} <span v-if="state.ruleForm.fromGenderText !== '未知'"> {{ state.ruleForm.fromGenderText }}</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来电/信人身份"> {{ state.ruleForm.identityTypeText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.licenceType">
									<el-form-item label="证件类型"> {{ state.ruleForm.licenceType }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.licenceNo">
									<el-form-item label="证件号码"> {{ state.ruleForm.licenceNo }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.ageRange">
									<el-form-item label="年龄段"> {{ state.ruleForm.ageRange }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.needContact">
									<el-form-item label="联系电话"> 无需联系 </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-else>
									<el-form-item label="联系电话"> {{ state.ruleForm.contactMask }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="受理短信">
										<span style="color: var(--el-color-danger)" v-if="state.ruleForm.acceptSms"
											>未发送<el-button link type="primary" class="ml5" title="重新发送"
												><SvgIcon name="iconfont icon-zhongxinfasong" size="16px" /></el-button
										></span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="受理时间"> {{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.company">
									<el-form-item label="工作单位"> {{ state.ruleForm.company }} </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
				<!-- 诉求信息 -->
				<el-collapse-item name="2">
					<template #title>
						<p class="pl20">
							<b class="font14">诉求信息</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="工单标题">
										{{ state.ruleForm.title }} <el-tag class="ml10">{{ state.ruleForm.statusText }}</el-tag>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="受理类型"> {{ state.ruleForm.acceptTypeText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
									<el-form-item label="工单类型">
										{{ state.ruleForm.orderTypeText }}
										<!-- 投诉或者建议并且是12315工单才有扩展信息 -->
										<el-button
											link
											type="primary"
											v-if="state.ruleForm.orderType === 1 && (state.ruleForm.acceptType === 30 || state.ruleForm.acceptType === 35)"
											class="ml10"
											@click="showExpandInfo"
											><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button
										>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
									<el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.incidentTime">
									<el-form-item label="事发时间"> {{ formatDate(state.ruleForm.incidentTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" v-if="state.ruleForm.address">
									<el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="重复工单" v-if="state.ruleForm.duplicateTitle">
										<el-button link type="primary" @click="showDuplicateInfo"> {{ state.ruleForm.duplicateTitle }}</el-button>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.pushType">
									<el-form-item label="推送分类"> {{ state.ruleForm.pushType }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="投诉详情">
										{{ state.ruleForm.content }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.additions && state.ruleForm.additions.length">
									<el-form-item label="附件"> </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
				<!-- 补充信息 -->
				<el-collapse-item name="3" v-if="state.supplements && state.supplements.length">
					<template #title>
						<p class="pl20">
							<b class="font14">补充信息</b>
						</p>
					</template>
					<div class="collapse-container">
						<div v-for="(i, index) in state.supplements" :key="i" class="plug-container">
							<p class="plug-container-title">第{{ verifyNumberCnUppercase(index + 1) }}次</p>
							<el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
										<el-form-item label="补充人">
											{{ i.creator.name }} <span v-if="i.creator.staffNo">[{{ i.creator.staffNo }} ]</span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
										<el-form-item label="补充时间"> {{ formatDate(i.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<el-form-item label="补充详情">
											{{ i.opinion }}
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="i.additions && i.additions.length">
										<el-form-item label="附件"> </el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</div>
				</el-collapse-item>
				<!-- 办件结果 -->
				<el-collapse-item name="4" v-if="state.workflow.assignOrgs">
					<template #title>
						<p class="pl20">
							<b class="font14">办件结果</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="接办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="交办时间"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时限"> {{ state.workflow.timeLimit }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理期限"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时间"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时间">
										{{ formatDate(state.ruleForm.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }}
										<el-popover placement="top-start" popper-class="demo-tabs-form" :width="state.extensionList.length >= 1 ? 400 : 300" trigger="hover">
											<template #reference>
												<el-tag class="ml10" style="cursor: pointer" type="danger">已延期 </el-tag>
											</template>
											<p class="title"><b>延期申请记录</b></p>
											<template v-if="state.extensionList.length >= 1">
												<el-tabs tab-position="left" v-model="state.extensionState">
													<el-tab-pane :label="'第' + index + '次'" :name="item.id" v-for="(item, index) in state.extensionList" :key="index">
														<template v-if="state.extensionState === index + 1">
															<el-form label-width="100px" ref="ruleFormRef">
																<el-row :gutter="0">
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="原办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请部门">市场监管部门</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请时间">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请延期">{{ index + 1 }}个工作日</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="新办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																</el-row>
															</el-form>
														</template>
													</el-tab-pane>
													<template> </template>
												</el-tabs>
											</template>
											<template v-else>
												<el-form label-width="100px" ref="ruleFormRef">
													<el-form-item label="原办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
													<el-form-item label="申请部门">市场监管部门</el-form-item>
													<el-form-item label="申请时间">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
													<el-form-item label="申请延期">3个工作日</el-form-item>
													<el-form-item label="新办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
												</el-form>
											</template>
										</el-popover>
									</el-form-item>
								</el-col> -->
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="办理意见"> {{ state.workflow.opinion }} </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
			</el-collapse>

			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onRecord" :loading="state.loading" v-auth="'system:workflow:record'">流转记录</el-button>
					<!-- 工单未归档和可以办理展示办理按钮 -->
					<el-button
						type="primary"
						@click="onSubmit('提交', 'next')"
						:loading="state.loading"
						v-if="state.ruleForm.workflow?.status !== 60 && state.workflow.canHandle"
						v-auth="'system:workflow:handle'"
						>办 理</el-button
					>
					<el-button type="primary" @click="onDelay" v-auth="'business:order:delay'" :loading="state.loading">延 期</el-button>
					<!-- 流程结束之后不展示补充按钮 -->
					<el-button type="primary" @click="onSupply" :loading="state.loading" v-if="state.workflow.status === 0" v-auth="'business:order:supply'"
						>补 充</el-button
					>
					<el-button type="primary" @click="onSupervise" :loading="state.loading" v-auth="'business:order:supervise'">督 办</el-button>
					<el-button type="primary" @click="onRevoke" :loading="state.loading" v-auth="'business:order:revoke'">撤 销</el-button>
					<!-- 工单未归档都可以撤回 -->
					<el-button
						type="primary"
						@click="onSubmit('撤回', 'recall')"
						:loading="state.loading"
						v-if="state.ruleForm.workflow?.status === 0"
						v-auth="'system:workflow:recall'"
						>撤 回</el-button
					>
					<!-- 工单未归档和可以办理展示退回按钮 -->
					<el-button
						type="primary"
						@click="onSubmit('退回', 'return')"
						:loading="state.loading"
						v-if="state.ruleForm.workflow?.status !== 60 && state.workflow.canHandle"
						v-auth="'system:workflow:return'"
						>退 回</el-button
					>
				</span>
			</template>
		</el-dialog>
		<!-- 处理流程 -->
		<order-process ref="OrderProcessRef" @orderProcessSuccess="orderProcessSuccess" @orderProcessFailed="orderProcessFailed" />
		<!-- 扩展信息 -->
		<order-expand-detail ref="orderExpandDetailRef" />
		<!-- 流转记录 -->
		<!--		<order-circulation-record ref="orderCirculationRecordRef" />-->
		<audit-record ref="AuditRecordRef">
			<template #header>
				<el-form label-width="90px" ref="ruleFormRef">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
							<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
							<el-form-item label="工单标题"> {{ state.ruleForm.title }} </el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</audit-record>
		<!-- 工单补充 -->
		<order-supply ref="orderSupplyRef" @onSupplySuccess="onSupplySuccess" />
		<!-- 工单撤销 -->
		<order-revoke ref="orderRevokeRef" @onRevokeSuccess="onRevokeSuccess" />
		<!-- 工单延期 -->
		<order-delay ref="orderDelayRef" @OnDelaySuccess="OnDelaySuccess" />
		<!-- 工单督办 -->
		<order-super-vise ref="orderSuperviseRef" @onSuperviseSuccess="onSuperviseSuccess" />
	</div>
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { throttle } from '/@/utils/tools';
import { commonEnum } from '/@/utils/constants';
import { verifyNumberCnUppercase } from '/@/utils/toolsValidate';
import { orderDetail } from '/@/api/business/order';
import { formatDate } from '/@/utils/formatTime';
import {ElMessage} from "element-plus";

// 引入组件
const OrderExpandDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-expand-detail.vue')); // 扩展信息
// const OrderCirculationRecord = defineAsyncComponent(() => import('/@/views/business/order/components/Order-circulation-record.vue'));
const OrderProcess = defineAsyncComponent(() => import('/@/views/business/order/components/Order-process.vue'));  // 处理流程
const OrderSupply = defineAsyncComponent(() => import('/@/views/business/order/components/Order-supply.vue'));  // 工单补充
const OrderRevoke = defineAsyncComponent(() => import('/@/views/business/order/components/Order-revoke.vue'));  // 工单撤销
const OrderDelay = defineAsyncComponent(() => import('/@/views/business/delay/components/Order-delay.vue'));  // 工单延期
const OrderSuperVise = defineAsyncComponent(() => import('/@/views/business/supervise/components/Order-supervise.vue'));  // 工单督办
const AuditRecord = defineAsyncComponent(() => import('/@/components/AuditRecord/index.vue'));  // 审核记录
// const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'handle']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	ruleForm: {
		// 表单数据
		url: '',
		fromGenderText: '',
		channelText: '',
		identityTypeText: '',
		licenceNo: '',
		contactMask: '',
		company: '',
		emergencyLevelText: '',
		incidentTime: '',
	} as any,
	activeName: '0', // tab切换
	tabPaneList: [
		// tab列表
		{
			label: '工单详情',
			value: '0',
		},
		{
			label: '延期记录',
			value: '1',
		},
		{
			label: '历史工单',
			value: '2',
		},
		{
			label: '回访记录',
			value: '3',
		},
		{
			label: '甄别记录',
			value: '4',
		},
		{
			label: '市民画像',
			value: '5',
		},
	],
	collapseArr: ['1', '2'], //展开列表
	extensionState: 1, // 1展开 2收起
	extensionList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
	loading: false,
	supplements: [],
	workflow: {},
	orderId: '',
});
const ruleFormRef = ref<RefType>(); // 表单ref
const router = useRouter(); // 路由
// 打开弹窗
const openDialog = (val: any) => {
  if(!val || !val.id){
    ElMessage.error('工单id不能为空')
    return;
  }
	state.orderId = val.id;
	getDetail(val.id);
};
// 查看详情
const getDetail = async (id: string) => {
	state.loading = true;
	try {
		const res: any = await orderDetail(id);
		state.ruleForm = res.result;
		state.workflow = state.ruleForm?.workflow ?? {};
		state.supplements = res.result?.workflow?.supplements ?? [];
		state.loading = false;
		state.dialogVisible = true;
	} catch (error) {
		state.loading = false;
		state.dialogVisible = false;
	}
};
// 展示扩展表单
const orderExpandDetailRef = ref<RefType>(); // 扩展信息
const showExpandInfo = () => {
	let form: any = {};
	if (state.ruleForm.acceptType === 30) {
		// 举报
		form = state.ruleForm.orderReport;
		form.orderTypeText = '12315市场监管局受理单';
		form.acceptTypeText = '举报';
	} else if (state.ruleForm.acceptType === 35) {
		//投诉
		form = state.ruleForm.orderComplain;
		form.orderTypeText = '12315市场监管局受理单';
		form.acceptTypeText = '投诉';
	}
	orderExpandDetailRef.value.openDialog(form);
};
// 展示重复工单详情
const showDuplicateInfo = () => {
	state.dialogVisible = false;
	router.push({
		name: 'repeatOrderDetail',
		params: {
			id: state.ruleForm.duplicateId,
			tagsViewName: '工单详情-' + state.ruleForm.duplicateTitle,
		},
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 切换tab 查询列表
const handleClick = (val: string) => {
	console.log(val);
};
// 流转记录
const AuditRecordRef = ref<RefType>(); // 流转记录
const onRecord = () => {
	const params = {
		dialogTitle: '流转记录',
		...state.ruleForm,
	};
	AuditRecordRef.value.openDialog(params);
};
// 办理 下一步
const OrderProcessRef = ref<RefType>(); // 处理流程
const onSubmit = throttle((val: string, type?: string) => {
	OrderProcessRef.value.openDialog({ id: state.ruleForm.workflowId, title: val, processType: type, commonEnum: commonEnum.OrderCirculation });
}, 1000);
// 流程提交成功
const orderProcessSuccess = () => {
	closeDialog();
	emit('updateList');
};
// 流程提交失败
const orderProcessFailed = () => {
	closeDialog();
	emit('updateList');
};
// 补充信息
const orderSupplyRef = ref<RefType>(); // 工单补充
const onSupply = () => {
	// 穿入当前流程id
	orderSupplyRef.value.openDialog(state.ruleForm);
};
// 补充意见提交成功
const onSupplySuccess = () => {
	getDetail(state.orderId);
};
// 延期
const orderDelayRef = ref<RefType>(); // 工单延期
const onDelay = () => {
	orderDelayRef.value.openDialog(state.ruleForm);
};
// 延期提交成功
const OnDelaySuccess = () => {
	getDetail(state.orderId);
};
// 撤销
const orderRevokeRef = ref<RefType>(); // 工单撤销
const onRevoke = () => {
	orderRevokeRef.value.openDialog(state.ruleForm);
};
// 撤销提交成功
const onRevokeSuccess = () => {
	getDetail(state.orderId);
};
// 督办
const orderSuperviseRef = ref<RefType>(); // 工单督办
const onSupervise = () => {
	orderSuperviseRef.value.openDialog(state.ruleForm);
};
// 督办提交成功
const onSuperviseSuccess = () => {
	getDetail(state.orderId);
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.collapse-box {
	:deep(.el-collapse-item__header) {
		background-color: var(--hotline-bg-main-color);
		height: 40px;
		border-radius: var(--el-border-radius-base);
	}
	:deep(.el-collapse-item__content) {
		padding-bottom: 10px !important;
		.el-form-item {
			margin-bottom: 5px;
			.el-form-item__content {
				line-height: 24px;
			}
		}
	}
	.collapse-container {
		padding: 10px;
		.plug-container {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			.plug-container-title {
				padding: 10px 15px;
				font-weight: bold;
				border-bottom: var(--el-border);
				font-size: var(--el-font-size-medium);
			}
		}
	}
}
</style>
<style lang="scss">
.demo-tabs-form {
	.title {
		font-size: var(--el-font-size-medium);
		padding: 10px 15px 20px 15px;
	}
	.el-form-item {
		margin-bottom: 0 !important;
	}
}
</style>