From 12958274972ace5f3aa0c84e0c985a5274600174 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Mon, 14 Jul 2025 10:23:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=8C=87=E4=BB=A4=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E3=80=81=E5=8A=9F=E8=83=BD=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../directivetag/bodytag/BodyTagList.vue      |   9 +-
 .../emotiontag/EmotionTagList.vue             |   9 +-
 .../instructiontag/InstructionTag.vue         |  10 +-
 .../ConfigServiceCategoryList.vue             |  10 +-
 .../ConfigServiceDirective.data.ts            |  29 +++-
 .../ConfigServiceDirectiveList.vue            | 153 ++++++++++++++++--
 .../components/ConfigServiceDirectiveForm.vue |  37 +++--
 .../ConfigServiceDirectiveModal.vue           |  13 ++
 .../serviceType/ConfigServiceTypeList.vue     |   9 +-
 9 files changed, 208 insertions(+), 71 deletions(-)

diff --git a/src/views/services/directivetag/bodytag/BodyTagList.vue b/src/views/services/directivetag/bodytag/BodyTagList.vue
index fe5e6f0..f98a937 100644
--- a/src/views/services/directivetag/bodytag/BodyTagList.vue
+++ b/src/views/services/directivetag/bodytag/BodyTagList.vue
@@ -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',
-      }
     }
   ];
 }
diff --git a/src/views/services/directivetag/emotiontag/EmotionTagList.vue b/src/views/services/directivetag/emotiontag/EmotionTagList.vue
index 14587b5..f7c3390 100644
--- a/src/views/services/directivetag/emotiontag/EmotionTagList.vue
+++ b/src/views/services/directivetag/emotiontag/EmotionTagList.vue
@@ -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',
-      }
     }
   ];
 }
diff --git a/src/views/services/instructiontag/InstructionTag.vue b/src/views/services/instructiontag/InstructionTag.vue
index c52f63b..bbe2a0f 100644
--- a/src/views/services/instructiontag/InstructionTag.vue
+++ b/src/views/services/instructiontag/InstructionTag.vue
@@ -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',
-      }
-    }
   ];
 }
 
diff --git a/src/views/services/serviceCategory/ConfigServiceCategoryList.vue b/src/views/services/serviceCategory/ConfigServiceCategoryList.vue
index 2ee8931..fe559ae 100644
--- a/src/views/services/serviceCategory/ConfigServiceCategoryList.vue
+++ b/src/views/services/serviceCategory/ConfigServiceCategoryList.vue
@@ -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',
-      }
-    }
   ];
 }
 
diff --git a/src/views/services/serviceDirective/ConfigServiceDirective.data.ts b/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
index 969edcf..61ae651 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
+++ b/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
@@ -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,
   },
 ];
 
diff --git a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
index e753d8c..938a933 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
@@ -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>
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
index 00e8102..33a7720 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
@@ -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(() => {
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
index 34567c9..5cc922a 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
@@ -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>
diff --git a/src/views/services/serviceType/ConfigServiceTypeList.vue b/src/views/services/serviceType/ConfigServiceTypeList.vue
index a418e6a..c446421 100644
--- a/src/views/services/serviceType/ConfigServiceTypeList.vue
+++ b/src/views/services/serviceType/ConfigServiceTypeList.vue
@@ -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',
-      }
     }
   ];
 }