hotline-admin/src/views/business/order/components/ExpandForm.vue

<template>
	<div>
		<el-dialog v-model="state.isShowDialog" width="80%" draggable title="拓展信息" append-to-body @closed="closed" @opened="opened">
			<el-form :model="state.expandForm" scroll-to-error ref="expandFormRef" label-width="120px" v-loading="state.loading">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
						<el-form-item label="工单类型" class="mb5"> 12315市场监管局受理单 </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
						<el-form-item label="受理类型" class="mb5">
							<template v-if="state.acceptType === 5"> 举报 </template>
							<template v-if="state.acceptType === 6"> 投诉 </template>
						</el-form-item>
					</el-col>
					<el-divider content-position="left" v-if="state.acceptType === 5"><b class="formTitle">举报人信息</b></el-divider>
					<el-divider content-position="left" v-if="state.acceptType === 6"><b class="formTitle">投诉人信息</b></el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="证件类型" prop="licenceObj" :rules="[{ required: false, message: '请选择证件类型', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.licenceObj"
								clearable
								filterable
								value-key="dicDataValue"
								placeholder="请选择证件类型"
								class="w100"
								@change="(val:any)=>{state.expandForm.licenceType = val.dicDataName;
									state.expandForm.licenceTypeCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.licenceTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 选择了证件类型必填 -->
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="证件号码"
							prop="licenceNo"
							:rules="[
								{ required: state.expandForm.licenceTypeCode, message: '请填写证件号码', trigger: 'blur' },
								{
									pattern: licenceNoPattern,
									message: '证件号码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.licenceNo" placeholder="请填写证件号码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="提供方类型" prop="identityTypeObj" :rules="[{ required: false, message: '请选择提供方类型', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.identityTypeObj"
								value-key="dicDataValue"
								clearable
								filterable
								placeholder="请选择提供方类型"
								class="w100"
								@change="(val:any)=>{state.expandForm.identityType = val.dicDataName;
									state.expandForm.identityTypeCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.identityTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="提供方身份" prop="identityObj" :rules="[{ required: false, message: '请选择提供方身份', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.identityObj"
								value-key="dicDataValue"
								filterable
								clearable
								placeholder="请选择提供方身份"
								class="w100"
								@change="(val:any)=>{state.expandForm.identity = val.dicDataName;
									state.expandForm.identityCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.identityOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="国籍/地区" prop="nationalityObj" :rules="[{ required: false, message: '请选择国籍/地区', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.nationalityObj"
								filterable
								clearable
								placeholder="请选择国籍/地区"
								class="w100"
								value-key="dicDataValue"
								@change="(val:any)=>{state.expandForm.nationality = val.dicDataName;
									state.expandForm.nationalityCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.nationalityOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="民族" prop="nationObj" :rules="[{ required: false, message: '请选择民族', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.nationObj"
								value-key="dicDataValue"
								clearable
								filterable
								placeholder="请选择民族"
								class="w100"
								@change="(val:any)=>{state.expandForm.nation = val.dicDataName;
									state.expandForm.nationCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.nationOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="邮政编码"
							prop="postalCode"
							:rules="[
								{ required: false, message: '请填写邮政编码', trigger: 'blur' },
								{
									pattern: /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/,
									message: '邮政编码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.postalCode" placeholder="请填写邮政编码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="邮箱"
							prop="email"
							:rules="[
								{ required: false, message: '请填写邮箱', trigger: 'blur' },
								{
									pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
									message: '邮箱格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.email" placeholder="请填写邮箱" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="其他联系方式" prop="otherContact" :rules="[{ required: false, message: '请填写其他联系方式', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.otherContact" placeholder="请填写其他联系方式" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-divider content-position="left" v-if="state.acceptType === 5"><b class="formTitle">举报对象信息</b></el-divider>
					<el-divider content-position="left" v-if="state.acceptType === 6"><b class="formTitle">投诉对象信息</b></el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="企业名称" prop="enterpriseName" :rules="[{ required: true, message: '请填写企业名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.enterpriseName" placeholder="请填写企业名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="统一社会信用代码"
							prop="unifiedSocialCreditCode"
							:rules="[
								{ required: false, message: '请填写统一社会信用代码', trigger: 'blur' },
								{
									pattern: /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/,
									message: '社会信用代码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.unifiedSocialCreditCode" placeholder="请填写统一社会信用代码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="注册地址" prop="registerAddress" :rules="[{ required: true, message: '请填写注册地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.registerAddress" placeholder="请填写注册地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<!-- 数字字母 -->
						<el-form-item
							label="注册号"
							prop="registerNumber"
							:rules="[
								{ required: false, message: '请填写注册号', trigger: 'blur' },
								{
									pattern: /^[A-Za-z0-9]+$/,
									message: '注册号格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.registerNumber" placeholder="请填写注册号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="企业联系人" prop="enterpriseContact" :rules="[{ required: false, message: '请填写企业联系人', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.enterpriseContact" placeholder="请填写企业联系人" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="市场主体类型" prop="marketTypeCode" :rules="[{ required: false, message: '请选择市场主体类型', trigger: 'change' }]">
							<el-cascader
								:options="state.marketTypeOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择市场主体类型"
								class="w100"
								v-model="state.expandForm.marketTypeCode"
								ref="marketTypeRef"
								@change="changeMarketType"
							>
								<template #default="{ node, data }">
									<span>{{ data.dicDataName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="行业分类" prop="industryClassifyCode" :rules="[{ required: false, message: '请选择行业分类', trigger: 'blur' }]">
							<el-cascader
								:options="state.industryClassifyOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择行业分类"
								class="w100"
								v-model="state.expandForm.industryClassifyCode"
								ref="industryClassifyRef"
								@change="changeIndustryClassify"
							>
								<template #default="{ node, data }">
									<span>{{ data.dicDataName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-divider content-position="left" v-if="state.acceptType === 5"><b class="formTitle">举报详情</b></el-divider>
					<el-divider content-position="left" v-if="state.acceptType === 6"><b class="formTitle">投诉详情</b></el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="商品分类/品牌" prop="brandCode" :rules="[{ required: true, message: '请选择商品分类/品牌', trigger: 'change' }]">
							<el-cascader
								:options="state.brandOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择商品分类/品牌"
								class="w100"
								v-model="state.expandForm.brandCode"
								ref="brandRef"
								@change="changeBrand"
							>
								<template #default="{ node, data }">
									<span>{{ data.dicDataName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<!-- 只能填写数字，且只能填写非负数 -->
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="消费金额" prop="amount" :rules="[{ required: true, message: '请填写消费金额', trigger: 'blur' }]">
							<!-- <el-input v-model="state.expandForm.amount" placeholder="请填写消费金额" clearable> </el-input> -->
							<el-input-number v-model="state.expandForm.amount" :min="0" placeholder="请填写消费金额" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="客体类别" prop="objectClassifyCode" :rules="[{ required: true, message: '请选择客体类别', trigger: 'change' }]">
							<el-cascader
								:options="state.objectClassifyOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择客体类别"
								class="w100"
								v-model="state.expandForm.objectClassifyCode"
								ref="objectClassifyRef"
								@change="changeObjectClassify"
							>
								<template #default="{ node, data }">
									<span>{{ data.dicDataName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<!-- 举报才展示 -->
					<template v-if="state.acceptType === 5">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item
								label="举报问题类别"
								prop="reportClassifyCode"
								:rules="[{ required: true, message: '请选择举报问题类别', trigger: 'change' }]"
							>
								<el-cascader
									:options="state.reportClassifyOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择举报问题类别"
									class="w100"
									v-model="state.expandForm.reportClassifyCode"
									ref="problemCascaderRef"
									@change="changeProblems"
								>
									<template #default="{ node, data }">
										<span>{{ data.dicDataName }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>
					</template>
					<!-- 投诉才展示 -->
					<template v-if="state.acceptType === 6">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item
								label="投诉问题类别"
								prop="complainClassifyCode"
								:rules="[{ required: true, message: '请选择投诉问题类别', trigger: 'change' }]"
							>
								<el-cascader
									:options="state.complainClassifyOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择投诉问题类别"
									class="w100"
									v-model="state.expandForm.complainClassifyCode"
									ref="problemCascaderRef"
									@change="changeProblems"
								>
									<template #default="{ node, data }">
										<span>{{ data.dicDataName }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>
					</template>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.acceptType === 6">
						<el-form-item label="争议发生时间" prop="occurrenceTime" :rules="[{ required: true, message: '请选择争议发生时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.occurrenceTime"
								type="datetime"
								placeholder="请选择争议发生时间"
								class="w100"
								clearable
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
							<!-- value-format="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="销售方式" prop="salesModeObj" :rules="[{ required: true, message: '请选择销售方式', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.salesModeObj"
								value-key="dicDataValue"
								placeholder="请选择销售方式"
								clearable
								class="w100"
								@change="(val:any)=>{state.expandForm.salesMode = val.dicDataName;
									state.expandForm.salesModeCode = val.dicDataValue}"
							>
								<el-option v-for="item in state.salesModeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 售方式为“网购”时展示该字段且必填 -->
					<template v-if="state.acceptType === 5 && state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="举报目标" prop="reportTargetObj" :rules="[{ required: true, message: '请选择举报目标', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.reportTargetObj"
									placeholder="请选择举报目标"
									class="w100"
									clearable
									value-key="dicDataValue"
									@change="(val:any)=>{state.expandForm.reportTarget = val.dicDataName;
									state.expandForm.reportTargetCode = val.dicDataValue}"
								>
									<el-option v-for="item in state.affairTargetOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<!-- 销售方式为“网购”时展示该字段且必填 -->
					<template v-if="state.acceptType === 6 && state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="投诉目标" prop="complainTargetObj" :rules="[{ required: true, message: '请选择投诉目标', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.complainTargetObj"
									placeholder="请选择投诉目标"
									class="w100"
									clearable
									value-key="dicDataValue"
									@change="(val:any)=>{state.expandForm.complainTarget = val.dicDataName;
									state.expandForm.complainTargetCode = val.dicDataValue}"
								>
									<el-option v-for="item in state.affairTargetOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“网购”时展示该字段且必填，支持模糊搜索，支持分级模式选择 -->
					<template v-if="state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="电商平台" prop="eCommercePlatformCode" :rules="[{ required: true, message: '请选择电商平台', trigger: 'change' }]">
								<el-cascader
									:options="state.eCommercePlatformOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择电商平台"
									clearable
									class="w100"
									v-model="state.expandForm.eCommercePlatformCode"
									ref="eCommercePlatformRef"
									@change="changeECommercePlatform"
								>
									<template #default="{ node, data }">
										<span>{{ data.dicDataName }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.expandForm.salesModeCode === '114'">
							<el-form-item label="订单号" prop="externalOrderNo" :rules="[{ required: true, message: '请填写订单号', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.externalOrderNo" placeholder="请填写订单号" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“现场”时必填，先选择经营地址所属行政区划，后填写详细地址，行政区划展示本市所有区县名称即可 举报并且销售方式为现场才会有经营地址 -->
					<template v-if="state.expandForm.salesModeCode === '2'">
						<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
							<el-form-item label="经营地址" prop="bussinessArea" :rules="[{ required: true, message: '请选择经营地址', trigger: 'change' }]">
								<el-cascader
									:options="state.areaOptions"
									filterable
									:props="{ value: 'id', label: 'areaName', emitPath: false }"
									placeholder="请选择经营地址"
									class="w100"
									v-model="state.expandForm.bussinessArea"
									ref="areaRef"
									@change="changeArea"
								>
									<template #default="{ node, data }">
										<span>{{ data.areaName }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
							<el-form-item
								label="经营详细地址"
								prop="bussinessAddress"
								:rules="[{ required: true, message: '请填写经营详细地址', trigger: 'blur' }]"
							>
								<el-input v-model="state.expandForm.bussinessAddress" placeholder="请填写经营详细地址" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“电视购物”“电话购物”“邮购”时展示该字段，且必填
						电视购物：请填写购物的电视频道,电话购物：请填写商品销售者的热线号码,邮购：请填写宣传商品的邮政公司或来件地址 -->
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6" v-if="state.expandForm.salesModeCode === '19'">
						<el-form-item
							label="具体渠道"
							prop="channel"
							:rules="[{ required: true, message: '电视频道/热线号码/商品邮政公司或来件地址', trigger: 'blur' }]"
						>
							<el-input v-model="state.expandForm.channel" placeholder="电视频道/热线号码/商品邮政公司或来件地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<!-- 投诉问题类别”为“专利”时展示该字段 -->
					<template v-if="state.isPatent">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利权人" prop="patentee" :rules="[{ required: false, message: '请填写专利权人', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentee" placeholder="请填写专利权人" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="发明名称" prop="patentName" :rules="[{ required: false, message: '请填写发明名称', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentName" placeholder="请填发明名称" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利类型" prop="patentTypeObj" :rules="[{ required: false, message: '请选择专利类型', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.patentTypeObj"
									value-key="dicDataValue"
									clearable
									filterable
									placeholder="请选择专利类型"
									class="w100"
									@change="(val:any)=>{state.expandForm.patentType = val.dicDataName;
									state.expandForm.patentTypeCode = val.dicDataValue}"
								>
									<el-option v-for="item in state.patentTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利号" prop="patentNo" :rules="[{ required: false, message: '请填写专利号', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentNo" placeholder="请填写专利号" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品名称" prop="productName" :rules="[{ required: false, message: '请填写产品名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productName" placeholder="请填写产品名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="批准文号" prop="approvalNumber" :rules="[{ required: false, message: '请填写批准文号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.approvalNumber" placeholder="请填写批准文号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品批号" prop="productBatchNo" :rules="[{ required: false, message: '请填写产品批号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productBatchNo" placeholder="请填写产品批号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品规格" prop="productStandard" :rules="[{ required: false, message: '请填写产品规格', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productStandard" placeholder="请填写产品规格" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品有效期" prop="productExpiredTime" :rules="[{ required: false, message: '请选择产品有效期', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.productExpiredTime"
								type="date"
								placeholder="请选择产品有效期"
								class="w100"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
							<!-- value-format="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="生产厂家" prop="manufacturer" :rules="[{ required: false, message: '请填写生产厂家', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.manufacturer" placeholder="请填写生产厂家" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="销售企业" prop="salesEnterprise" :rules="[{ required: false, message: '请填写销售企业', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.salesEnterprise" placeholder="请填写销售企业" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="消费者地址" prop="consumerAddress" :rules="[{ required: false, message: '请填写消费者地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.consumerAddress" placeholder="请填写消费者地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<!-- 投诉才展示 -->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.acceptType === 6">
						<el-form-item label="诉求" prop="complainTypes" :rules="[{ required: false, message: '请选择诉求', trigger: 'change' }]">
							<el-checkbox-group v-model="state.expandForm.complainTypes">
								<el-checkbox v-for="item in state.complainTypeOptions" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.isShowDialog = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="saveExpandForm" :loading="state.loading">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="oderExpandForm">
import { reactive, ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { orderBaseExt, orderDetail } from '/@/api/business/order';
import { treeArea } from '/@/api/business/commonP';
import { ElMessage } from 'element-plus';
// import { ElMessage } from 'element-plus';
const emit = defineEmits(['saveExpandForm']);
// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	acceptType: 5, // 受理类型 5: 举报 6: 投诉
	expandForm: {
		licenceTypeCode: '',
		identityTypeCode: '',
		salesModeCode: '',
	},
	licenceTypeOptions: [], //证件类型
	identityTypeOptions: [], //提供方类型
	identityOptions: [], //提供方身份
	nationalityOptions: [], //国籍/地区
	nationOptions: [], //民族
	marketTypeOptions: [], //市场主体类型
	industryClassifyOptions: [], //行业分类
	brandOptions: [], //商品分类/品牌
	objectClassifyOptions: [], //客体类别
	complainClassifyOptions: [], //投诉问题类别
	reportClassifyOptions: [], //举报问题类别
	salesModeOptions: [], //销售方式
	affairTargetOptions: [], //举报 / 投诉目标
	eCommercePlatformOptions: [], //电商平台
	patentTypeOptions: [], //专利类型
	complainTypeOptions: [], // 诉求列表
	areaOptions: [], //省市区
	isPatent: false, // 举报或者投诉问题类别为专利
	validated: false, // 是否验证通过
	isvalidate: false,
	loading: false,
});
const expandFormRef = ref();
const route = useRoute();

// 证件号码验证
const licenceNoPattern = computed(() => {
	switch (state.expandForm.licenceTypeCode) {
		case '10': // 身份证
			return /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
			break;

		default: //默认只允许数字字母
			return /^[A-Za-z0-9]+$/;
			break;
	}
});
/**
 * @description: 打开弹窗
 * @param {number} type  5: 举报 6: 投诉
 * @return {*}
 */
const openDialog = async (type: any, isvalidate?: boolean) => {
	state.acceptType = type;
	state.isvalidate = isvalidate;
	state.isShowDialog = true;
};
// 打开表单如果需要立即校验
const opened = () => {
	if (state.isvalidate) {
		// 如果需要验证
		ElMessage.warning('请确认扩展表单信息');
		closed();
	} else {
		expandFormRef.value.clearValidate();
	}
};
// 弹窗关闭时校验一次表单
const closed = () => {
	expandFormRef.value.validate((valid: boolean) => {
		state.validated = valid;
	});
};
// 选择举报或者投诉问题目
const problemCascaderRef = ref();
const changeProblems = () => {
	let currentNode = problemCascaderRef.value.getCheckedNodes();
	console.log(currentNode, 'changeProblems');
	if (state.acceptType == 5) {
		//举报
		state.expandForm.reportClassify = currentNode[0].label;
		if (currentNode[0].parent?.value === '26') {
			// 专利code为2000
			state.isPatent = true;
		} else {
			state.isPatent = false;
		}
	} else if (state.acceptType == 6) {
		// 投诉
		state.expandForm.complainClassify = currentNode[0].label;
		if (currentNode[0].parent?.value === '2000') {
			// 专利code为2000
			state.isPatent = true;
		} else {
			state.isPatent = false;
		}
	}
};
// 选择市场主体类型
const marketTypeRef = ref();
const changeMarketType = () => {
	let currentNode = marketTypeRef.value.getCheckedNodes();
	state.expandForm.marketType = currentNode[0].label;
};
// 选择行业分类
const industryClassifyRef = ref();
const changeIndustryClassify = () => {
	let currentNode = industryClassifyRef.value.getCheckedNodes();
	state.expandForm.industryClassify = currentNode[0].label;
};
// 选择商品分类/品牌
const brandRef = ref();
const changeBrand = () => {
	let currentNode = brandRef.value.getCheckedNodes();
	state.expandForm.brand = currentNode[0].label;
};
// 选择客体类别
const objectClassifyRef = ref();
const changeObjectClassify = () => {
	let currentNode = objectClassifyRef.value.getCheckedNodes();
	state.expandForm.objectClassify = currentNode[0].label;
};
// 电商平台
const eCommercePlatformRef = ref();
const changeECommercePlatform = () => {
	let currentNode = eCommercePlatformRef.value.getCheckedNodes();
	state.expandForm.eCommercePlatform = currentNode[0].label;
};
// 省市区选择
const areaRef = ref();
const changeArea = () => {
	const currentNode = areaRef.value.getCheckedNodes();
	state.expandForm.province = currentNode[0].pathLabels[0];
	state.expandForm.city = currentNode[0].pathLabels[1];
	state.expandForm.county = currentNode[0].pathLabels[2];
};
// 保存拓展表单
const saveExpandForm = () => {
	expandFormRef.value.validate((valid: boolean) => {
		state.validated = valid;
		if (valid) {
			let submitObj = JSON.parse(JSON.stringify(state.expandForm));
			Reflect.deleteProperty(submitObj, 'licenceObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'identityTypeObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'identityObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'nationalityObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'nationObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'salesModeObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'patentTypeObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'complainTargetObj'); // 删除无用的参数
			Reflect.deleteProperty(submitObj, 'reportTargetObj'); // 删除无用的参数
			emit('saveExpandForm', submitObj);
			closeDialog();
		} else {
			return false;
		}
	});
};

onMounted(async () => {
	state.loading = true;
	try {
		const res: any = await orderBaseExt(); //基础数据
		const area: any = await treeArea();
		state.licenceTypeOptions = res.result.licenceTypeOptions ?? []; // 证件类型
		state.identityTypeOptions = res.result.identityTypeOptions ?? []; // 提供方类型
		state.identityOptions = res.result.identityOptions ?? []; // 提供方身份
		state.nationalityOptions = res.result.nationalityOptions ?? []; // 国籍/地区
		state.nationOptions = res.result.nationOptions ?? []; // 民族
		state.marketTypeOptions = res.result.marketTypeOptions ?? []; // 市场主体类型
		state.eCommercePlatformOptions = res.result.eCommercePlatformOptions ?? []; // 电商平台
		state.industryClassifyOptions = res.result.industryClassifyOptions ?? []; // 行业分类
		state.brandOptions = res.result.brandOptions ?? []; // 商品分类/品牌
		state.objectClassifyOptions = res.result.objectClassifyOptions ?? []; // 客体类别
		state.complainClassifyOptions = res.result.complainClassifyOptions ?? []; // 投诉问题类别
		state.salesModeOptions = res.result.salesModeOptions ?? []; // 销售方式
		state.affairTargetOptions = res.result.affairTargetOptions ?? []; // /举报 / 投诉目标
		state.reportClassifyOptions = res.result.reportClassifyOptions ?? []; // 举报问题类别
		state.complainTypeOptions = res.result.complainTypeOptions ?? []; // 诉求列表
		state.patentTypeOptions = res.result.patentTypeOptions ?? []; // 专利类型
		state.areaOptions = area.result ?? []; //省市区数据
		setTimeout(async () => {
			if (route.params.id) {
				// 修改 将数据填入表单组件
				const response: any = await orderDetail(route.params.id);
				if (response.result.acceptType === 5 && response.result.orderType === 1) {
					// 举报
					state.expandForm = response.result.orderReport;
				} else if (response.result.acceptType === 6 && response.result.orderType === 1) {
					// 投诉
					state.expandForm = response.result.orderComplain;
				}
				state.expandForm.licenceObj = {
					//证件类型
					dicDataValue: state.expandForm.licenceTypeCode,
					dicDataName: state.expandForm.licenceType,
				};
				state.expandForm.identityTypeObj = {
					//提供方类型
					dicDataValue: state.expandForm.identityTypeCode,
					dicDataName: state.expandForm.identityType,
				};
				state.expandForm.identityObj = {
					//提供方身份
					dicDataValue: state.expandForm.identityCode,
					dicDataName: state.expandForm.identity,
				};
				state.expandForm.nationalityObj = {
					//国籍/地区
					dicDataValue: state.expandForm.nationalityCode,
					dicDataName: state.expandForm.nationality,
				};
				state.expandForm.nationObj = {
					//民族
					dicDataValue: state.expandForm.nationCode,
					dicDataName: state.expandForm.nation,
				};
				state.expandForm.salesModeObj = {
					//销售方式
					dicDataValue: state.expandForm.salesModeCode,
					dicDataName: state.expandForm.salesMode,
				};
				state.expandForm.complainTargetObj = {
					//投诉目标
					dicDataValue: state.expandForm.complainTargetCode,
					dicDataName: state.expandForm.complainTarget,
				};
				state.expandForm.reportTargetObj = {
					//举报目标
					dicDataValue: state.expandForm.reportTargetCode,
					dicDataName: state.expandForm.reportTarget,
				};
				if (state.expandForm.patentTypeCode) {
					//专利类型
					state.expandForm.patentTypeObj = {
						dicDataValue: state.expandForm.patentTypeCode,
						dicDataName: state.expandForm.patentType,
					};
				}
				state.loading = false;
			}
			state.loading = false;
		}, 500);
	} catch (error) {
		state.loading = false;
	}
});

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
	closed,
	state,
});
</script>
<style lang="scss" scoped></style>