372 lines
13 KiB
Vue
372 lines
13 KiB
Vue
<template>
|
|
<a-spin :spinning="confirmLoading">
|
|
<div v-show="!isEditMedia"
|
|
style="padding-top: 14px;padding-left: 14px;padding-right: 14px; background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);margin-bottom: 14px;">
|
|
<JFormContainer :disabled="true">
|
|
<template #detail>
|
|
<a-form ref="formRef" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
|
name="ConfigService2DirectiveForm" style="padding: 0px 0px;">
|
|
<a-row v-show="!isEditMedia">
|
|
<a-col :span="8">
|
|
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagName"
|
|
id="ConfigServiceDirectiveForm-instructionTagName" name="instructionTagName">
|
|
<a-input v-model:value="formData.instructionTagName" placeholder="分类标签" disabled />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="服务类别" v-bind="validateInfos.categoryName"
|
|
id="ConfigServiceDirectiveForm-categoryName" name="categoryName">
|
|
<a-input v-model:value="formData.categoryName" placeholder="服务类别" disabled />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-form-item label="服务类型" v-bind="validateInfos.typeName" id="ConfigServiceDirectiveForm-typeName"
|
|
name="typeId">
|
|
<a-input v-model:value="formData.typeName" placeholder="服务类型" disabled />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
</JFormContainer>
|
|
</div>
|
|
<div style="padding: 14px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
|
|
<JFormContainer :disabled="true">
|
|
<template #detail>
|
|
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
|
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
|
|
<a-row>
|
|
<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="服务指令名称" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- <a-col :span="12">
|
|
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
|
|
name="cycleType">
|
|
<a-input v-model:value="formData.cycleTypeName" placeholder="周期类型" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col> -->
|
|
<a-col :span="12">
|
|
<a-form-item label="服务时长 (分钟)" v-bind="validateInfos.serviceDuration"
|
|
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
|
|
<a-input v-model:value="formData.serviceDuration" placeholder="服务时长（分钟）" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="收费价格 (元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
|
|
name="tollPrice">
|
|
<a-input v-model:value="formData.tollPrice" placeholder="收费价格" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="超时时长 (分钟)" v-bind="validateInfos.timeoutDuration"
|
|
id="ConfigServiceDirectiveForm-timeoutDuration" name="timeoutDuration">
|
|
<a-input v-model:value="formData.timeoutDuration" placeholder="超时时长（分钟）" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="提成价格 (元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
|
|
name="comPrice">
|
|
<a-input v-model:value="formData.comPrice" placeholder="提成价格" disabled></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24" >
|
|
<a-form-item label="服务指令描述" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
|
|
name="comPrice">
|
|
<a-textarea style="color: #606266;" v-model:value="formData.serviceContent" placeholder="服务指令描述"
|
|
:maxlength="200" :rows="3" :autoSize="{ minRows: 3 }" :showCount="true" disabled />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
</JFormContainer>
|
|
</div>
|
|
<div
|
|
style="padding: 14px;background-color: #fff;border-radius: 0 0px 10px 10px;box-shadow: 0 10px 10px rgba(0.1, 0.1, 0.2, 0.1); margin-top: -80px;">
|
|
<JFormContainer>
|
|
<template #detail>
|
|
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
|
name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
|
|
<a-row style="padding: 20px;">
|
|
<a-col :span="6">
|
|
<DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
|
|
</DirectiveRadioCom>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row style="padding: 0px 20px;">
|
|
<a-col :span="24" v-show="directiveMediaBtnValue == 0">
|
|
<JImageUploadtz :value="!!formData.previewFile ? formData.previewFile : defaultPrePic" disabled />
|
|
</a-col>
|
|
<!-- <a-col :span="24" v-show="directiveMediaBtnValue == 1">
|
|
<JImageUploadtz :value="!!formData.previewFileSmall ? formData.previewFileSmall : defaultPreSmallPic"
|
|
disabled />
|
|
</a-col> -->
|
|
<a-col :span="24" v-show="directiveMediaBtnValue == 1">
|
|
<JUploadMP3 :value="formData.mp3File" disabled />
|
|
</a-col>
|
|
<a-col :span="24" v-show="directiveMediaBtnValue == 2">
|
|
<JUploadMP4 :value="formData.mp4File" fileType="mp4" disabled />
|
|
</a-col>
|
|
<a-col :span="24" v-show="directiveMediaBtnValue == 3">
|
|
<JImageUploadtz :value="!!formData.immediateFile ? formData.immediateFile : defaultImmediatePic"
|
|
disabled />
|
|
</a-col>
|
|
<a-col :span="24" v-show="directiveMediaBtnValue == 4">
|
|
<JImageUploadtz
|
|
:value="!!formData.immediateFileFocus ? formData.immediateFileFocus : defaultImmediatePic" disabled />
|
|
</a-col>
|
|
</a-row>
|
|
<!-- <a-row style="padding: 20px;">
|
|
<a-col :span="2">
|
|
<div class="description-container">
|
|
<a-button @click="toggleDescription">服务指令描述</a-button>
|
|
<div v-show="showDescription" class="description-box">
|
|
<div class="box-header">
|
|
<span class="title">服务指令描述</span>
|
|
<span class="collapse-icon" @click="toggleDescription">
|
|
<DownOutlined style="margin-right: 3px;" />收起
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<a-textarea style="color: #606266;" v-model:value="formData.serviceContent" placeholder="服务指令描述"
|
|
:maxlength="200" :rows="3" :autoSize="{ minRows: 3 }" :showCount="true" disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row> -->
|
|
</a-form>
|
|
</template>
|
|
</JFormContainer>
|
|
</div>
|
|
</a-spin>
|
|
</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 JUploadMP3 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMP3.vue';
|
|
import JUploadMP4 from '/@/components/Form/src/jeecg/components/JUpload/JUploadMP4.vue';
|
|
import JImageUploadtz from '/@/components/Form/src/jeecg/components/JImageUploadtz.vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
|
import DirectiveRadioCom from './DirectiveRadioCom.vue'
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
import { queryUpBizPrefix } from '/@/api/common/api'
|
|
import { list } from '../DirectiveOpeLogInfo.api'
|
|
|
|
const showDescription = ref(false);
|
|
|
|
// 切换悬浮容器的显示状态
|
|
const toggleDescription = () => {
|
|
showDescription.value = !showDescription.value;
|
|
};
|
|
const defaultPrePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRE_PIC
|
|
const defaultPreSmallPic = import.meta.env.VITE_DEFAULT_DIRECTIVE_PRESMALL_PIC
|
|
const defaultImmediatePic = import.meta.env.VITE_DEFAULT_DIRECTIVE_IM_PIC
|
|
const upBizPrefix = ref('')
|
|
|
|
const formRef = ref();
|
|
const useForm = Form.useForm;
|
|
const emit = defineEmits(['register', 'ok']);
|
|
const formData = reactive<Record<string, any>>({
|
|
id: '',
|
|
categoryName: '',
|
|
createBy: '',
|
|
createTime: '',
|
|
cycleTypeName: '',
|
|
directiveName: '',
|
|
instructionTagName: '',
|
|
opeType: '',
|
|
opeType_dictText: '',
|
|
orgCode: '',
|
|
orgCode_dictText: '',
|
|
typeName: '',
|
|
tollPrice: 0,
|
|
comPrice: 0,
|
|
serviceDuration: '',
|
|
timeoutDuration: '',
|
|
serviceContent: '',
|
|
immediateFile: '',
|
|
immediateFileFocus: '',
|
|
mp3File: '',
|
|
mp4File: '',
|
|
previewFile: '',
|
|
previewFileSmall: '',
|
|
});
|
|
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
|
|
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
|
const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
|
|
const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
|
|
const confirmLoading = ref<boolean>(false);
|
|
const isEditMedia = ref(false)
|
|
//表单验证
|
|
const validatorRules = reactive({
|
|
});
|
|
|
|
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
|
|
|
/**
|
|
* 编辑
|
|
* isEditMedia_是否为编辑指令资源 （隐藏业务字段）
|
|
*/
|
|
async function detail(record_) {
|
|
let data = await list({ 'pkId': record_.id })
|
|
let record = data.records[0]
|
|
record.cycleTypeName = record_.cycleTypeName
|
|
console.log("🌊 ~ detail ~ record:", record)
|
|
nextTick(() => {
|
|
resetFields();
|
|
const tmpData = {};
|
|
Object.keys(formData).forEach((key) => {
|
|
if (record.hasOwnProperty(key)) {
|
|
tmpData[key] = record[key]
|
|
}
|
|
})
|
|
//赋值
|
|
Object.assign(formData, tmpData);
|
|
});
|
|
}
|
|
|
|
const directiveMediaBtnValue = ref(0)
|
|
function mediaBtnChanged(v_) {
|
|
directiveMediaBtnValue.value = v_
|
|
|
|
}
|
|
|
|
onMounted(() => {
|
|
queryUpBizPrefix().then(res => {
|
|
upBizPrefix.value = res.result
|
|
})
|
|
})
|
|
|
|
defineExpose({
|
|
detail,
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.antd-modal-form {
|
|
padding: 0px;
|
|
}
|
|
|
|
:deep .ant-checkbox-wrapper {
|
|
margin-top: 5px;
|
|
margin-bottom: 14px;
|
|
width: 30%;
|
|
}
|
|
|
|
.upload-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.upload-icon {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.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: 4px;
|
|
padding: 12px;
|
|
width: 43vw;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.box-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.collapse-icon {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.instruction {
|
|
color: #8c8c8c;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.confirm-btn {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
background: #1890ff;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* 渐隐渐现动画 */
|
|
.slide-fade-enter-active {
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
|
|
.slide-fade-leave-active {
|
|
transition: opacity 0.3s 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>
|