2025-08-15 14:20:51 +08:00
< template >
< a -spin :spinning ="confirmLoading" >
2025-08-25 14:56:19 +08:00
< div style = "padding: 14px; background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);" >
2025-08-15 14:20:51 +08:00
< JFormContainer :disabled ="disabled" >
< template # detail >
< a -form ref = "formRef" class = "antd-modal-form" :labelCol ="labelCol" :wrapperCol ="wrapperCol" :colon ="false"
name = "ConfigService2DirectiveForm" style = "padding: 20px 0px;" >
< a -row v-show ="!isEditMedia" >
< a -col :span ="12" v-show ="false" >
< a -form -item label = "分类标签" v -bind = " validateInfos.instructionTagId "
id = "ConfigServiceDirectiveForm-instructionTagId" name = "instructionTagId" >
< j -dict -select -tag v -model :value ="formData.instructionTagId" :orgCode ="mainOrgCode"
: dictCode = "`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
placeholder = "请选择分类标签" allowClear @ upDictCode = "upInstructionDictCode" : disabled = "!!formData.id" / >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" v-show ="false" >
< a -form -item label = "服务类别" v -bind = " validateInfos.categoryId " id = "ConfigServiceDirectiveForm-categoryId"
name = "categoryId" >
< j -dict -select -tag type = "list" v -model :value ="formData.categoryId" :disabled ="!!formData.id"
: orgCode = "mainOrgCode" : dictCode = "categoryDictCode" placeholder = "请选择服务类别" allow - clear
@ upDictCode = "upCategoryDictCode" / >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" v-show ="false" >
< a -form -item label = "服务类型" v -bind = " validateInfos.typeId " id = "ConfigServiceDirectiveForm-typeId"
name = "typeId" >
< j -dict -select -tag type = "list" v -model :value ="formData.typeId" :dictCode ="typeDictCode"
: orgCode = "mainOrgCode" : disabled = "!!formData.id" placeholder = "请选择服务类型" allowClear
@ upDictCode = "upTypeDictCode" / >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "服务指令名称" v -bind = " validateInfos.directiveName "
id = "ConfigServiceDirectiveForm-directiveName" name = "directiveName" >
< a -input v -model :value ="formData.directiveName" placeholder = "请输入服务指令名称" allow -clear :maxlength ="20"
: showCount = "true" : disabled = "!!formData.id" > < / a - i n p u t >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "收费价格(元)" v -bind = " validateInfos.tollPrice " id = "ConfigServiceDirectiveForm-tollPrice"
name = "tollPrice" >
< a -input -number v -model :value ="formData.tollPrice" placeholder = "请输入收费价格" style = "width: 100%" :min ="0"
: max = "99999.99" : precision = "2" @ keydown = "onPriceKeydown" / >
< / a - f o r m - i t e m >
< / a - c o l >
2026-01-16 13:18:09 +08:00
<!-- < a -col :span ="12" >
2026-01-15 11:13:47 +08:00
< a -form -item label = "指令类型" v -bind = " validateInfos.cycleType " id = "ConfigServiceDirectiveForm-cycleType"
2025-08-15 14:20:51 +08:00
name = "cycleType" >
< j -dict -select -tag type = "list" v -model :value ="formData.cycleType" dictCode = "period_type"
2026-01-15 11:13:47 +08:00
placeholder = "请选择指令类型" allowClear @ upDictCode = "upCycleTypeDictCode" : disabled = "!!formData.id" / >
2025-08-15 14:20:51 +08:00
< / a - f o r m - i t e m >
2026-01-16 13:18:09 +08:00
< / a - c o l > - - >
2025-08-15 14:20:51 +08:00
< a -col :span ="12" >
< a -form -item label = "提成价格(元)" v -bind = " validateInfos.comPrice " id = "ConfigServiceDirectiveForm-comPrice"
name = "comPrice" >
< a -input -number v -model :value ="formData.comPrice" placeholder = "请输入提成价格" style = "width: 100%" :min ="0"
: max = "99999.99" : precision = "2" @ keydown = "onPriceKeydown" / >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "是否启用" v -bind = " validateInfos.izEnabled " id = "ConfigServiceDirectiveForm-izEnabled"
name = "izEnabled" >
< j -dict -select -tag type = 'radio' v -model :value ="formData.izEnabled" dictCode = "iz_enabled"
placeholder = "请选择是否启用" allowClear / >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "服务时长" v -bind = " validateInfos.serviceDuration "
id = "ConfigServiceDirectiveForm-serviceDuration" name = "serviceDuration" >
< a -input -number v -model :value ="formData.serviceDuration" :min ="5" :max ="55" :step ="5" addon -after = " 分钟 "
placeholder = "请输入服务时长（分钟）" allow - clear @ keydown = "onDurationKeydown" / >
< / a - f o r m - i t e m >
< / a - c o l >
< / a - r o w >
2025-08-25 14:56:19 +08:00
< a -row style = "margin-top: 20px;" >
< a -col :span ="12" v-show ="showMedia" >
< a -form -item label = "服务指令图片" v-bind ="validateInfos.previewFile" >
< span v-if ="disabled && !formData.previewFile" > 暂无文件 < / span >
< JImageUpload v -else -if = " opeType = = ' dmlook ' " :fileMax ="1"
: value = "mediaApiAddress + formData.previewFile" >
< / JImageUpload >
< JImageUpload v -else :fileMax ="1" v -model :value ="formData.previewFile" > < / JImageUpload >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "服务指令描述" v -bind = " validateInfos.serviceContent "
id = "ConfigServiceDirectiveForm-serviceContent" name = "serviceContent" >
< a -textarea v -model :value ="formData.serviceContent" :autosize ="true" placeholder = "请输入服务指令描述"
: maxlength = "200" : showCount = "true" / >
< / a - f o r m - i t e m >
< / a - c o l >
< / a - r o w >
< a -row v-show ="!disabled && showMedia" >
< a -col :span ="12" >
< a -form -item label = "指令音频文件" v-bind ="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File" >
< j -upload v -model :value ="formData.mp3File" accept = ".mp3" :maxCount ="1"
: beforeUpload = "checkMp3" > < / j - u p l o a d >
< / a - f o r m - i t e m >
< / a - c o l >
< a -col :span ="12" >
< a -form -item label = "指令视频文件" v-bind ="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File" >
< j -upload v -model :value ="formData.mp4File" accept = ".mp4" :maxCount ="1"
: beforeUpload = "checkMp4" > < / j - u p l o a d >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
< / a - r o w >
2025-08-25 14:56:19 +08:00
< / a - f o r m >
< / template >
< / JFormContainer >
< JFormContainer style = "margin-top: -40px;" v-show ="showMedia" >
< template # detail >
< a -form ref = "formRef" class = "antd-modal-form" :labelCol ="labelCol" :wrapperCol ="wrapperCol" :colon ="false"
name = "ConfigServiceDirectiveForm" >
< a -row >
< a -col :span ="12" v-if ="!!formData.mp3File" >
< a -form -item label = "指令音频预览" id = "ConfigServiceDirectiveForm-mp3File" >
< audio controls disabled = "false" >
< source
: src = "opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)" >
< / audio >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
2025-08-25 14:56:19 +08:00
< a -col :span ="12" v-if ="disabled && !formData.mp3File" >
< a -form -item label = "指令音频预览" >
< span > 暂无文件 < / span >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
2025-08-25 14:56:19 +08:00
< a -col :span ="12" v-if ="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12" >
< a -form -item label = "指令视频预览" id = "ConfigServiceDirectiveForm-mp4File" >
< video controls >
< source
: src = "opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)" >
< / video >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
2025-08-25 14:56:19 +08:00
< a -col :span ="12" v-if ="disabled && !formData.mp3File" >
< a -form -item label = "指令视频预览" >
< span > 暂无文件 < / span >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
< / a - r o w >
2025-08-25 14:56:19 +08:00
< a -row >
< a -col :span ="12" >
< a -form -item label = "即时指令图标" v-bind ="validateInfos.immediateFile" >
< span v-if ="disabled && !formData.immediateFile" > 暂无文件 < / span >
< JImageUpload v -else -if = " opeType = = ' dmlook ' " :fileMax ="1"
: value = "mediaApiAddress + formData.immediateFile" >
< / JImageUpload >
< JImageUpload v -else :fileMax ="1" v -model :value ="formData.immediateFile" > < / JImageUpload >
< / a - f o r m - i t e m >
2025-08-15 14:20:51 +08:00
< / a - c o l >
< / a - r o w >
< / a - f o r m >
< / template >
< / JFormContainer >
< / div >
< / a - s p i n >
< / template >
< script lang = "ts" setup >
import { ref , reactive , defineExpose , nextTick , defineProps , computed , onMounted , watch } from 'vue' ;
import { defHttp } from '/@/utils/http/axios' ;
import { useMessage } from '/@/hooks/web/useMessage' ;
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue' ;
import { JCheckbox } from '/@/components/Form' ;
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue' ;
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue' ;
import { getValueType } from '/@/utils' ;
import { saveOrUpdate , syncMediaForBiz , syncMediaForAllBiz } from '../ConfigServiceDirective.api' ;
import { Form } from 'ant-design-vue' ;
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue' ;
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils' ;
import { env } from 'process' ;
import DirectiveRadioCom from './DirectiveRadioCom.vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue' ;
import { DownOutlined } from '@ant-design/icons-vue' ;
const showDescription = ref ( false ) ;
// 切换悬浮容器的显示状态
const toggleDescription = ( ) => {
showDescription . value = ! showDescription . value ;
} ;
const fileList = ref ( [ ] )
const onPriceKeydown = ( e : KeyboardEvent ) => {
const key = e . key ;
// 放行控制键
if ( [ 'Backspace' , 'Delete' , 'ArrowLeft' , 'ArrowRight' , 'Tab' ] . includes ( key ) ) return ;
// 只能输数字和点
if ( ! /[\d.]/ . test ( key ) ) {
e . preventDefault ( ) ;
return ;
}
const input = e . target as HTMLInputElement ;
const { value , selectionStart : s , selectionEnd : t } = input ;
const next = value . slice ( 0 , s ! ) + key + value . slice ( t ! ) ;
// 整数最多5位，
if ( ! /^\d{0,5}(?:\.\d{0,2})?$/ . test ( next ) ) {
e . preventDefault ( ) ;
}
} ;
const onDurationKeydown = ( e : KeyboardEvent ) => {
const key = e . key ;
// 放行控制键
if ( [ 'Backspace' , 'Delete' , 'ArrowLeft' , 'ArrowRight' , 'Tab' ] . includes ( key ) ) return ;
// 只能输数字和点
if ( ! /[\d.]/ . test ( key ) ) {
e . preventDefault ( ) ;
return ;
}
const input = e . target as HTMLInputElement ;
const { value , selectionStart : s , selectionEnd : t } = input ;
const next = value . slice ( 0 , s ! ) + key + value . slice ( t ! ) ;
// 整数最多5位，
if ( ! /^\d{0,2}$/ . test ( next ) ) {
e . preventDefault ( ) ;
}
} ;
const props = defineProps ( {
formDisabled : { type : Boolean , default : false } ,
formData : { type : Object , default : ( ) => ( { } ) } ,
formBpm : { type : Boolean , default : true } ,
mainOrgCode : '' ,
mediaApiAddress : '' , //指令资源请求地址
opeType : 'look' ,
} ) ;
const checkMp3 = ( file ) => {
const isPDF = file . type === 'application/mp3' || file . name . endsWith ( '.mp3' ) ;
if ( ! isPDF ) {
createMessage . error ( '只能上传 mp3 文件！' ) ;
return false ; // 阻止上传
}
return true ;
} ;
const checkMp4 = ( file ) => {
const isPDF = file . type === 'application/mp4' || file . name . endsWith ( '.mp4' ) ;
if ( ! isPDF ) {
createMessage . error ( '只能上传 mp4 文件！' ) ;
return false ; // 阻止上传
}
return true ;
} ;
const bodyTagDictCode = ref ( ` nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc ` )
const emotionTagDictCode = ref ( ` nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc ` )
const formRef = ref ( ) ;
const useForm = Form . useForm ;
const emit = defineEmits ( [ 'register' , 'ok' ] ) ;
const formData = reactive < Record < string , any > > ( {
id : '' ,
categoryId : '' ,
typeId : '' ,
instructionTagId : '' ,
directiveName : '' ,
tollPrice : 0 ,
comPrice : 0 ,
izReimbursement : '0' ,
izPreferential : '0' ,
chargingFrequency : '' ,
cycleType : '' ,
sort : 99 ,
serviceContent : '' ,
serviceDuration : '5' ,
status : '' ,
izEnabled : '0' ,
createBy : '' ,
createTime : '' ,
updateBy : '' ,
updateTime : '' ,
mp3File : '' ,
mp4File : '' ,
previewFile : '' ,
immediateFile : '' ,
} ) ;
const { createMessage } = useMessage ( ) ;
const labelCol = ref < any > ( { xs : { span : 24 } , sm : { span : 4 } } ) ;
const wrapperCol = ref < any > ( { xs : { span : 24 } , sm : { span : 19 } } ) ;
const confirmLoading = ref < boolean > ( false ) ;
const isEditMedia = ref ( false )
const instructionTagName = ref ( '' )
const categoryName = ref ( '' )
const typeName = ref ( '' )
const cycleTypeName = ref ( '' )
const orgMediaPathAddress = ref ( '' ) //对应机构媒体资源静态访问路径
//表单验证
const validatorRules = reactive ( {
categoryId : [ { required : true , message : '请选择服务类别!' } , ] ,
typeId : [ { required : true , message : '请选择服务类型!' } , ] ,
instructionTagId : [ { required : true , message : '请选择分类标签!' } , ] ,
directiveName : [ { required : true , message : '请输入服务指令名称!' } , ] ,
tollPrice : [ { required : true , message : '请输入收费价格!' } , { pattern : /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/ , message : '请输入正确的金额!' } , ] ,
comPrice : [ { required : false } , { pattern : /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/ , message : '请输入正确的金额!' } , ] ,
2025-08-25 14:56:19 +08:00
// izReimbursement: [{ required: true, message: '请选择是否参与医保报销!' },],
// izPreferential: [{ required: true, message: '请选择是否参与机构优惠!' },],
2025-08-15 14:20:51 +08:00
// chargingFrequency: [{ required: true, message: '请选择收费频次!' },],
2026-01-16 13:18:09 +08:00
// cycleType: [{ required: true, message: '请选择指令类型!' },],
2025-08-15 14:20:51 +08:00
// sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
serviceDuration : [
{ required : true , message : '请输入服务时长（分钟）!' } ,
{ pattern : /^\d+$/ , message : '请输入正整数!' } ,
{
validator : ( _ , value ) => {
if ( value % 5 !== 0 ) {
return Promise . reject ( '请输入5的倍数!' ) ;
}
return Promise . resolve ( ) ;
} ,
} ,
{
validator : ( _ , value ) => {
if ( value < 5 || value > 55 ) {
return Promise . reject ( '请输入5到55之间的值!' ) ;
}
return Promise . resolve ( ) ;
} ,
} ,
] ,
izEnabled : [ { required : true , message : '请选择是否启用!' } , ] ,
} ) ;
const { resetFields , validate , validateInfos } = useForm ( formData , validatorRules , { immediate : false } ) ;
// 表单禁用
const disabled = computed ( ( ) => {
if ( props . formBpm === true ) {
if ( props . formData . disabled === false ) {
return false ;
} else {
return true ;
}
}
return props . formDisabled ;
} ) ;
const categoryDictCode = ref ( '' )
const typeDictCode = ref ( '' )
// 计算属性：是否可以上传预览图片
const canUploadPreviewImage = computed ( ( ) => {
return formData . instructionTagId &&
formData . categoryId &&
formData . typeId &&
formData . directiveName &&
formData . cycleType ;
} ) ;
//分类标签名称
const instructionComDictCode = ref ( [ ] )
function upInstructionDictCode ( v _ ) {
instructionComDictCode . value = v _
}
//服务类别名称
const categoryComDictCode = ref ( [ ] )
function upCategoryDictCode ( v _ ) {
categoryComDictCode . value = v _
}
//服务类型名称
const typeComDictCode = ref ( [ ] )
function upTypeDictCode ( v _ ) {
typeComDictCode . value = v _
}
2026-01-15 11:13:47 +08:00
//指令类型名称
2025-08-15 14:20:51 +08:00
const cycleTypeComDictCode = ref ( [ ] )
function upCycleTypeDictCode ( v _ ) {
cycleTypeComDictCode . value = v _
}
//体型标签名称
const upBodyTagsComDictCode = ref ( [ ] )
function upBodyTagsDictCode ( v _ ) {
upBodyTagsComDictCode . value = v _
}
//情绪标签名称
const upEmotionTagsComDictCode = ref ( [ ] )
function upEmotionTagsDictCode ( v _ ) {
upEmotionTagsComDictCode . value = v _
}
watch ( [ instructionComDictCode , categoryComDictCode , typeComDictCode , cycleTypeComDictCode , upBodyTagsComDictCode , upEmotionTagsComDictCode ] , ( ) => {
// 当这些字典数据变化时，强制重新计算 formComputedData
} , { deep : true } ) ;
const bodyTagsObj = ref ( [ ] )
const emotionTagsObj = ref ( [ ] )
const formComputedData = computed ( ( ) => {
if ( ! canUploadPreviewImage . value ) return { } ;
// 获取各个字段的字典值
const instructionName = instructionComDictCode . value . find ( d => d . value == formData . instructionTagId ) ? . label || '' ;
const categoryName = categoryComDictCode . value . find ( d => d . value == formData . categoryId ) ? . label || '' ;
const typeName = typeComDictCode . value . find ( d => d . value == formData . typeId ) ? . label || '' ;
const cycleTypeName = cycleTypeComDictCode . value . find ( d => d . value == formData . cycleType ) ? . label || '' ;
// 处理标签
const processTags = ( tags , dict ) => {
if ( ! tags ) return [ ] ;
return tags . split ( ',' )
. map ( id => dict . find ( d => d . value === id ) )
. filter ( Boolean )
. map ( item => ( { id : item . value , label : item . label } ) ) ;
} ;
return {
mediaFileSavePath : ` directive/ ${ instructionName } / ${ categoryName } / ${ typeName } / ${ cycleTypeName } / ${ formData . directiveName } ` ,
instructionName ,
categoryName ,
typeName ,
cycleTypeName ,
bodyTagsObj : JSON . stringify ( processTags ( formData . bodyTags , upBodyTagsComDictCode . value ) ) ,
emotionTagsObj : JSON . stringify ( processTags ( formData . emotionTags , upEmotionTagsComDictCode . value ) )
} ;
} ) ;
watch (
( ) => formData . instructionTagId ,
( newInstructionTagId ) => {
if ( needWatch . value ) {
formData . categoryId = ''
formData . typeId = ''
2025-08-25 14:56:19 +08:00
// formData.cycleType = ''
2025-08-15 14:20:51 +08:00
}
if ( ! newInstructionTagId ) {
categoryDictCode . value = 'nu_config_service_category,category_name,id,1=2' ;
} else {
categoryDictCode . value = ` nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 0 and instruction_id = ' ${ newInstructionTagId } ' order by sort asc ` ;
}
}
) ;
watch (
( ) => formData . categoryId ,
( newCategoryId ) => {
if ( needWatch . value ) {
formData . typeId = ''
2025-08-25 14:56:19 +08:00
// formData.cycleType = ''
2025-08-15 14:20:51 +08:00
}
if ( ! newCategoryId ) {
typeDictCode . value = 'nu_config_service_type,type_name,id,1=2' ;
} else {
typeDictCode . value = ` nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 0 and category_id = ' ${ newCategoryId } ' order by sort asc ` ;
}
}
) ;
watch (
( ) => formData . typeId ,
( newTypeId ) => {
if ( needWatch . value ) {
2025-08-25 14:56:19 +08:00
// formData.cycleType = ''
2025-08-15 14:20:51 +08:00
}
}
) ;
/ * *
* 新增
* /
function add ( ) {
edit ( { } ) ;
}
const needWatch = ref ( false )
const showMedia = ref ( true )
/ * *
* 编辑
* isEditMedia _是否为编辑指令资源 （ 隐藏业务字段 ）
* /
function edit ( record , isEditMedia _ = false , showMedia _ = true , showExistTags = true ) {
if ( ! ! record . bodyTags && showExistTags ) {
// 将逗号分隔的字符串转换为 "id = 'id1' or id = 'id2'" 格式
const bodyTagConditions = record . bodyTags . split ( ',' )
. map ( id => ` id = ' ${ id } ' ` )
. join ( ' or ' ) ;
bodyTagDictCode . value = ` nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
( bodyTagConditions ? ` and ( ${ bodyTagConditions } ) ` : '' ) +
` order by sort asc ` ;
}
if ( ! ! record . emotionTags && showExistTags ) {
// 将逗号分隔的字符串转换为 "id = 'id1' or id = 'id2'" 格式
const emotionTagConditions = record . emotionTags . split ( ',' )
. map ( id => ` id = ' ${ id } ' ` )
. join ( ' or ' ) ;
emotionTagDictCode . value = ` nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 ` +
( emotionTagConditions ? ` and ( ${ emotionTagConditions } ) ` : '' ) +
` order by sort asc ` ;
}
needWatch . value = false
showMedia . value = showMedia _
setTimeout ( ( ) => {
needWatch . value = true
} , 1000 )
isEditMedia . value = isEditMedia _
formData . bodyTags = ''
formData . emotionTags = ''
nextTick ( ( ) => {
resetFields ( ) ;
const tmpData = { } ;
Object . keys ( formData ) . forEach ( ( key ) => {
if ( record . hasOwnProperty ( key ) ) {
tmpData [ key ] = record [ key ]
}
} )
//赋值
Object . assign ( formData , tmpData ) ;
} ) ;
}
/ * *
* 提交数据
* /
async function submitForm ( ) {
try {
// 触发表单验证
await validate ( ) ;
} catch ( { errorFields } ) {
if ( errorFields ) {
const firstField = errorFields [ 0 ] ;
if ( firstField ) {
formRef . value . scrollToField ( firstField . name , { behavior : 'smooth' , block : 'center' } ) ;
}
}
return Promise . reject ( errorFields ) ;
}
confirmLoading . value = true ;
const isUpdate = ref < boolean > ( false ) ;
//时间格式化
const computedData = formComputedData . value ;
const model = {
... formData ,
... computedData
} ;
if ( model . id ) {
isUpdate . value = true ;
}
//循环数据
for ( let data in model ) {
//如果该数据是数组并且是字符串类型
if ( model [ data ] instanceof Array ) {
let valueType = getValueType ( formRef . value . getProps , data ) ;
//如果是字符串类型的需要变成以逗号分割的字符串
if ( valueType === 'string' ) {
model [ data ] = model [ data ] . join ( ',' ) ;
}
}
}
//提成价格不能高于收费价格
if ( model . comPrice != 0 && model . tollPrice < model . comPrice ) {
createMessage . warning ( '提成价格不能高于收费价格！' ) ;
confirmLoading . value = false ;
return
}
model . mediaFileSavePath = formComputedData . value . mediaFileSavePath
await saveOrUpdate ( model , isUpdate . value )
. then ( ( res ) => {
if ( res . success ) {
createMessage . success ( res . message ) ;
emit ( 'ok' ) ;
} else {
createMessage . warning ( res . message ) ;
}
} )
. finally ( ( ) => {
confirmLoading . value = false ;
} ) ;
}
/ * *
* 同步媒体资源给指令所有者对应业务平台
*
* /
function syncMediaForBizFunc ( ) {
formData . mediaFileSavePath = formComputedData . value . mediaFileSavePath
syncMediaForBiz ( formData )
. then ( ( res ) => {
createMessage . success ( '操作成功！' ) ;
emit ( 'ok' ) ;
} )
. finally ( ( ) => {
confirmLoading . value = false ;
} ) ;
}
/ * *
* 同步媒体资源给所有业务平台
*
* /
function syncMediaForAllBizFunc ( ) {
formData . mediaFileSavePath = formComputedData . value . mediaFileSavePath
syncMediaForAllBiz ( formData )
. then ( ( res ) => {
createMessage . success ( '操作成功！' ) ;
emit ( 'ok' ) ;
} )
. finally ( ( ) => {
confirmLoading . value = false ;
} ) ;
}
const directiveMediaBtnValue = ref ( 0 )
function mediaBtnChanged ( v _ ) {
directiveMediaBtnValue . value = v _
}
onMounted ( ( ) => {
} )
defineExpose ( {
add ,
edit ,
submitForm ,
syncMediaForBizFunc ,
syncMediaForAllBizFunc
} ) ;
< / script >
< style lang = "less" scoped >
. antd - modal - form {
padding : 14 px ;
}
: deep . ant - checkbox - wrapper {
margin - top : 5 px ;
margin - bottom : 10 px ;
width : 30 % ;
}
. upload - area {
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
}
. upload - icon {
margin - bottom : 16 px ;
}
. upload - text {
font - size : 16 px ;
color : rgba ( 0 , 0 , 0 , 0.85 ) ;
margin - bottom : 8 px ;
}
. upload - hint {
font - size : 12 px ;
color : rgba ( 0 , 0 , 0 , 0.45 ) ;
display : flex ;
align - items : center ;
gap : 8 px ;
}
. divider {
color : rgba ( 0 , 0 , 0 , 0.2 ) ;
}
. description - container {
position : relative ;
z - index : 1000 ;
}
. description - box {
position : absolute ;
bottom : 100 % ;
left : 0 ;
background : # f6faff ;
border - radius : 4 px ;
padding : 12 px ;
width : 43 vw ;
box - shadow : 0 3 px 10 px rgba ( 0 , 0 , 0 , 0.1 ) ;
margin - bottom : 8 px ;
}
. box - header {
display : flex ;
justify - content : space - between ;
align - items : center ;
padding - bottom : 8 px ;
margin - bottom : 12 px ;
}
. title {
font - weight : bold ;
font - size : 16 px ;
}
. collapse - icon {
color : # 1890 ff ;
cursor : pointer ;
}
. content {
background : # fff ;
border - radius : 4 px ;
padding : 12 px ;
position : relative ;
}
. instruction {
color : # 8 c8c8c ;
margin - bottom : 30 px ;
}
. confirm - btn {
position : absolute ;
right : 12 px ;
bottom : 12 px ;
background : # 1890 ff ;
border - radius : 20 px ;
}
/* 渐隐渐现动画 */
. slide - fade - enter - active {
transition : opacity 0.3 s ease - out ;
}
. slide - fade - leave - active {
transition : opacity 0.3 s cubic - bezier ( 0.5 , 0 , 0.8 , 1 ) ;
}
/* 进入时从透明开始 */
. slide - fade - enter - from {
opacity : 0 ;
}
/* 离开时渐变到透明 */
. slide - fade - leave - to {
opacity : 0 ;
}
/* 确保容器初始状态无变形 */
. slide - fade - enter - to ,
. slide - fade - leave - from {
opacity : 1 ;
}
< / style >
