服务指令字段、功能调整
This commit is contained in:
parent
231991eeee
commit
1295827497
|
|
@ -35,7 +35,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
|
|
@ -203,13 +203,6 @@ function getTableAction(record) {
|
|||
}, {
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
}, {
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
|
|
@ -203,13 +203,6 @@ function getTableAction(record) {
|
|||
}, {
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
}, {
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
|
|
@ -199,14 +199,6 @@ function getTableAction(record) {
|
|||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
|
|
@ -207,14 +207,6 @@ function getTableAction(record) {
|
|||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { BasicColumn } from '/@/components/Table';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
|
|
@ -106,14 +107,34 @@ export const columns: BasicColumn[] = [
|
|||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '预览图片',
|
||||
title: '服务指令图片',
|
||||
align: 'center',
|
||||
dataIndex: 'previewFileMedia',
|
||||
dataIndex: 'previewFile',
|
||||
customRender: render.renderImage,
|
||||
},
|
||||
{
|
||||
title: '即时指令图片',
|
||||
title: '服务指令描述',
|
||||
align: 'center',
|
||||
dataIndex: 'immediateFileMedia',
|
||||
dataIndex: 'serviceContent',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '指令音频文件',
|
||||
align: 'center',
|
||||
dataIndex: 'mp3File',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '指令视频文件',
|
||||
align: 'center',
|
||||
dataIndex: 'mp4File',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '即时指令图标',
|
||||
align: 'center',
|
||||
dataIndex: 'immediateFile',
|
||||
customRender: render.renderImage,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -91,13 +91,41 @@
|
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
<template v-if="column.dataIndex === 'previewFileMedia'">
|
||||
<!-- 音频播放控制 -->
|
||||
<template v-if="column.dataIndex === 'mp3File'">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
||||
<img v-else :src="text" style="max-height: 50px;max-width: 80px;">
|
||||
<a-button v-else type="link" class="btnPrivate" @click="openAudioModal(text)">播放</a-button>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'immediateFileMedia'">
|
||||
<!-- <template v-if="column.dataIndex === 'mp3File'">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
||||
<img v-else :src="text" style="max-height: 50px;max-width: 80px;">
|
||||
<div v-else style="display: flex; align-items: center; gap: 8px;">
|
||||
<audio ref="audioPlayer" :src="getFileAccessHttpUrl(text)" hidden></audio>
|
||||
<a-button v-if="!currentPlayingAudio || currentPlayingAudio !== text" type="link" @click="playAudio(text)"
|
||||
preIcon="ant-design:play-circle-outlined">
|
||||
播放
|
||||
</a-button>
|
||||
|
||||
<template v-else>
|
||||
<a-button v-if="isPlaying" type="link" @click="pauseAudio" preIcon="ant-design:pause-circle-outlined">
|
||||
暂停
|
||||
</a-button>
|
||||
<a-button v-else type="link" @click="resumeAudio" preIcon="ant-design:play-circle-outlined">
|
||||
播放
|
||||
</a-button>
|
||||
|
||||
<a-button type="link" @click="restartAudio" preIcon="ant-design:reload-outlined">
|
||||
重播
|
||||
</a-button>
|
||||
|
||||
<a-button type="link" @click="stopAudio" preIcon="ant-design:stop-outlined">
|
||||
停止
|
||||
</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
<template v-if="column.dataIndex === 'mp4File'">
|
||||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
||||
<a-button v-else type="link" class="btnPrivate" @click="openVideoModal(text)">播放</a-button>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'bodyTagList'">
|
||||
<span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
|
||||
|
|
@ -154,6 +182,15 @@
|
|||
<EmotionTagList v-if="emotionTagOpen"></EmotionTagList>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 音频播放 -->
|
||||
<a-modal v-model:visible="showAudioModal" title="音频播放" :footer="null" @cancel="closeAudioModal"
|
||||
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }" :keyboard="true">
|
||||
<audio controls style="width: 100%; display: block; margin: 20px auto;">
|
||||
<source :src="audioUrl">
|
||||
您的浏览器不支持音频播放。
|
||||
</audio>
|
||||
</a-modal>
|
||||
|
||||
<!-- 视频播放 -->
|
||||
<a-modal v-model:visible="showVideoModal" title="视频播放" :footer="null" @cancel="closeVideoModal"
|
||||
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }">
|
||||
|
|
@ -221,7 +258,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
|||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
},
|
||||
actionColumn: {
|
||||
width: 160,
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
|
|
@ -288,6 +325,14 @@ function handleEdit(record: Recordable) {
|
|||
registerModal.value.edit(record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑指令资源
|
||||
*/
|
||||
function handleMedia(record: Recordable) {
|
||||
registerModal.value.disableSubmit = false;
|
||||
registerModal.value.editMedia(record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
|
|
@ -323,12 +368,17 @@ function handleSuccess() {
|
|||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record)
|
||||
}, {
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
label: '指令资源',
|
||||
onClick: handleMedia.bind(null, record)
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -428,6 +478,21 @@ function onEmotionTagClose() {
|
|||
emotionTagOpen.value = false
|
||||
}
|
||||
|
||||
const showAudioModal = ref(false); // 控制音频模态框显示
|
||||
const audioUrl = ref(''); // 音频 URL
|
||||
|
||||
// 打开音频模态框
|
||||
const openAudioModal = (url) => {
|
||||
audioUrl.value = getFileAccessHttpUrl(url);
|
||||
showAudioModal.value = true;
|
||||
};
|
||||
|
||||
// 关闭音频模态框
|
||||
const closeAudioModal = () => {
|
||||
showAudioModal.value = false;
|
||||
audioUrl.value = '';
|
||||
};
|
||||
|
||||
const showVideoModal = ref(false); // 控制模态框显示
|
||||
const videoUrl = ref(''); // 视频 URL
|
||||
|
||||
|
|
@ -443,6 +508,76 @@ const closeVideoModal = () => {
|
|||
videoUrl.value = '';
|
||||
};
|
||||
|
||||
// 添加以下响应式变量
|
||||
const audioPlayer = ref<HTMLAudioElement | null>(null);
|
||||
const currentPlayingAudio = ref<string | null>(null);
|
||||
const isPlaying = ref(false);
|
||||
|
||||
// 添加音频控制方法
|
||||
const playAudio = (url: string) => {
|
||||
if (currentPlayingAudio.value && currentPlayingAudio.value !== url) {
|
||||
// 如果正在播放其他音频，先停止
|
||||
stopAudio();
|
||||
}
|
||||
|
||||
currentPlayingAudio.value = url;
|
||||
isPlaying.value = true;
|
||||
|
||||
// 确保audio元素存在
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.src = getFileAccessHttpUrl(url);
|
||||
audioPlayer.value.play().catch(e => {
|
||||
console.error('播放失败:', e);
|
||||
isPlaying.value = false;
|
||||
currentPlayingAudio.value = null;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const pauseAudio = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.pause();
|
||||
isPlaying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resumeAudio = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.play().catch(e => {
|
||||
console.error('继续播放失败:', e);
|
||||
});
|
||||
isPlaying.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const restartAudio = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.currentTime = 0;
|
||||
audioPlayer.value.play().catch(e => {
|
||||
console.error('重新播放失败:', e);
|
||||
});
|
||||
isPlaying.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const stopAudio = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.pause();
|
||||
audioPlayer.value.currentTime = 0;
|
||||
isPlaying.value = false;
|
||||
currentPlayingAudio.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 添加音频结束监听
|
||||
onMounted(() => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.addEventListener('ended', () => {
|
||||
isPlaying.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
||||
name="ConfigService2DirectiveForm">
|
||||
<a-row>
|
||||
<a-row v-show="!isEditMedia">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
|
||||
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
|
||||
|
|
@ -76,14 +76,8 @@
|
|||
placeholder="请输入服务时长（分钟）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务说明" v-bind="validateInfos.serviceContent"
|
||||
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
|
||||
<a-textarea v-model:value="formData.serviceContent" :rows="2" placeholder="请输入服务说明" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-row v-show="!isEditMedia">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="体型标签" id="ConfigServiceDirectiveForm-typeId" :labelCol="labelCol2"
|
||||
:wrapperCol="wrapperCol2" name="typeId">
|
||||
|
|
@ -114,26 +108,27 @@
|
|||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
|
||||
<JImageUpload :fileMax="1" v-model:value="formData.immediateFile" :disabled="!canUploadPreviewImage"
|
||||
:bizPath="directiveBizPath">
|
||||
</JImageUpload>
|
||||
<a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
|
||||
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
|
||||
<a-textarea v-model:value="formData.serviceContent" :rows="2" placeholder="请输入服务指令描述" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="语音文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
|
||||
<a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
|
||||
<j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"
|
||||
:disabled="!canUploadPreviewImage" :bizPath="directiveBizPath"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
|
||||
<a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
|
||||
<j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"
|
||||
:disabled="!canUploadPreviewImage" :bizPath="directiveBizPath"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-row>
|
||||
</a-row>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
|
@ -157,6 +152,13 @@
|
|||
</video>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
|
||||
<JImageUpload :fileMax="1" v-model:value="formData.immediateFile" :disabled="!canUploadPreviewImage"
|
||||
:bizPath="directiveBizPath">
|
||||
</JImageUpload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
|
@ -218,6 +220,7 @@ 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({
|
||||
categoryId: [{ required: true, message: '请选择服务类别!' },],
|
||||
|
|
@ -314,7 +317,7 @@ const directiveBizPath = computed(() => {
|
|||
const cycleTypeName_ = cycleTypeComDictCode.value.filter(d => d.value == formData.cycleType)?.[0]?.label;
|
||||
|
||||
// 构建路径
|
||||
return `${instructionTagName_}/${categoryName_}/${typeName_}/${formData.directiveName}/${cycleTypeName_}`;
|
||||
return 'directive/' + `${instructionTagName_}/${categoryName_}/${typeName_}/${formData.directiveName}/${cycleTypeName_}`;
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
@ -349,8 +352,10 @@ function add() {
|
|||
|
||||
/**
|
||||
* 编辑
|
||||
* isEditMedia_是否为编辑指令资源 （隐藏业务字段）
|
||||
*/
|
||||
function edit(record) {
|
||||
function edit(record, isEditMedia_ = false) {
|
||||
isEditMedia.value = isEditMedia_
|
||||
formData.bodyTags = ''
|
||||
formData.emotionTags = ''
|
||||
nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,18 @@ function edit(record) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑指令资源
|
||||
* @param record
|
||||
*/
|
||||
function editMedia(record) {
|
||||
title.value = '编辑指令资源';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.edit(record,true);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
|
|
@ -69,6 +81,7 @@ function handleCancel() {
|
|||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
editMedia,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
|
|
@ -218,13 +218,6 @@ function getTableAction(record) {
|
|||
}, {
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
}, {
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue