From 0e4720b3f2552d3701987ff7f68c765fabad66ee Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Wed, 16 Jul 2025 08:31:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=8C=87=E4=BB=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/jeecg/components/JDictSelectTag.vue   |   3 -
 .../ConfigServiceDirective.api.ts             |  32 +-
 .../ConfigServiceDirective.data.ts            | 158 +++++++++
 .../ConfigServiceDirectiveList.vue            |  17 +-
 .../components/ConfigServiceDirectiveForm.vue |  87 ++++-
 .../ConfigServiceDirectiveModal.vue           |  48 ++-
 .../components/ServiceDirectiveAuditList.vue  | 299 ++++++++++++++++++
 7 files changed, 605 insertions(+), 39 deletions(-)
 create mode 100644 src/views/services/serviceDirective/components/ServiceDirectiveAuditList.vue

diff --git a/src/components/Form/src/jeecg/components/JDictSelectTag.vue b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
index 0066e73..b499df4 100644
--- a/src/components/Form/src/jeecg/components/JDictSelectTag.vue
+++ b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
@@ -149,7 +149,6 @@ export default defineComponent({
     function handleChange(e) {
       const { mode } = unref<Recordable>(getBindValue);
       let changeValue: any;
-      let changeLabel: any;
       // 兼容多选模式
 
       //update-begin---author:wangshuai ---date:20230216  for：[QQYUN-4290]公文发文：选择机关代字报错,是因为值改变触发了change事件三次，导致数据发生改变------------
@@ -165,13 +164,11 @@ export default defineComponent({
         }
       } else {
         changeValue = e?.target?.value ?? e;
-        // changeLabel = dictOptions.value.filter(d => d.value == changeValue)[0].label
       }
       state.value = changeValue;
 
       //update-begin---author:wangshuai ---date:20230403  for：【issues/4507】JDictSelectTag组件使用时，浏览器给出警告提示：Expected Function, got Array------------
       emit('update:value', changeValue)
-      // emit('upLabel', changeLabel)
       //update-end---author:wangshuai ---date:20230403  for：【issues/4507】JDictSelectTag组件使用时，浏览器给出警告提示：Expected Function, got Array述------------
       //update-end---author:wangshuai ---date:20230216  for：[QQYUN-4290]公文发文：选择机关代字报错,是因为值改变触发了change事件三次，导致数据发生改变------------
 
diff --git a/src/views/services/serviceDirective/ConfigServiceDirective.api.ts b/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
index b42e202..4bcc0fd 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
+++ b/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
@@ -1,19 +1,19 @@
 import { defHttp } from '/@/utils/http/axios';
-import { useMessage } from "/@/hooks/web/useMessage";
+import { useMessage } from '/@/hooks/web/useMessage';
 
 const { createConfirm } = useMessage();
 
 enum Api {
   list = '/services/serviceDirective/list',
-  save='/services/serviceDirective/add',
-  edit='/services/serviceDirective/edit',
+  save = '/services/serviceDirective/add',
+  edit = '/services/serviceDirective/edit',
+  audit = '/services/serviceDirective/audit',
   deleteOne = '/services/serviceDirective/delete',
   deleteBatch = '/services/serviceDirective/deleteBatch',
   importExcel = '/services/serviceDirective/importExcel',
   exportXls = '/services/serviceDirective/exportXls',
   async = '/services/serviceDirective/async',
   departList = '/sys/sysDepart/list',
-
 }
 
 /**
@@ -39,11 +39,11 @@ export const departList = (params) => defHttp.get({ url: Api.departList, params
  * @param params
  * @param handleSuccess
  */
-export const deleteOne = (params,handleSuccess) => {
-  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
     handleSuccess();
   });
-}
+};
 
 /**
  * 批量删除
@@ -58,12 +58,12 @@ export const batchDelete = (params, handleSuccess) => {
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
         handleSuccess();
       });
-    }
+    },
   });
-}
+};
 
 /**
  * 保存或者更新
@@ -73,7 +73,15 @@ export const batchDelete = (params, handleSuccess) => {
 export const saveOrUpdate = (params, isUpdate) => {
   let url = isUpdate ? Api.edit : Api.save;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
-}
+};
+
+/**
+ * 审批
+ * @param params
+ */
+export const audit = (params) => {
+  return defHttp.post({ url: Api.audit, params });
+};
 
 /**
  * 同步数据
@@ -81,4 +89,4 @@ export const saveOrUpdate = (params, isUpdate) => {
  */
 export const asyncFunc = (params) => {
   return defHttp.post({ url: Api.async, params }, { isTransformResponse: false });
-}
\ No newline at end of file
+};
diff --git a/src/views/services/serviceDirective/ConfigServiceDirective.data.ts b/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
index 61ae651..496fe7d 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
+++ b/src/views/services/serviceDirective/ConfigServiceDirective.data.ts
@@ -100,6 +100,164 @@ export const columns: BasicColumn[] = [
     dataIndex: 'serviceDuration',
     width: 135,
   },
+  {
+    title: '指令状态',
+    align: 'center',
+    dataIndex: 'status_dictText',
+    width: 100,
+  },
+  {
+    title: '是否启用',
+    align: 'center',
+    dataIndex: 'izEnabled_dictText',
+    width: 100,
+  },
+  {
+    title: '服务指令图片',
+    align: 'center',
+    dataIndex: 'previewFile',
+    customRender: render.renderImage,
+  },
+  {
+    title: '服务指令描述',
+    align: 'center',
+    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,
+  },
+];
+
+//列表数据
+export const auditColumns: BasicColumn[] = [
+  {
+    title: '机构名称',
+    align: 'center',
+    dataIndex: 'sysOrgCode_dictText',
+    width: 200,
+  },
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId_dictText',
+    ellipsis: false,
+    customCell: (record, index, column) => {
+      if (record.instructionRowSpan != null) {
+        return { rowSpan: record.instructionRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryId_dictText',
+    ellipsis: false,
+    customCell: (record, index, column) => {
+      if (record.categoryRowSpan != null) {
+        return { rowSpan: record.categoryRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeId_dictText',
+    ellipsis: false,
+    customCell: (record, index, column) => {
+      if (record.typeRowSpan != null) {
+        return { rowSpan: record.typeRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务指令',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '体型标签',
+    align: 'center',
+    dataIndex: 'bodyTagList',
+    width: 150,
+    ellipsis: false,
+    // format(text, record, index) {
+    //   if (!!text) {
+    //     return text.map((item) => item.tagName).join('、');
+    //   } else {
+    //     return '-';
+    //   }
+    // },
+  },
+  {
+    title: '情绪标签',
+    align: 'center',
+    dataIndex: 'emotionTagList',
+    width: 150,
+    ellipsis: false,
+    // format(text, record, index) {
+    //   if (!!text) {
+    //     return text.map((item) => item.tagName).join('、');
+    //   } else {
+    //     return '-';
+    //   }
+    // },
+  },
+  {
+    title: '收费价格',
+    align: 'center',
+    dataIndex: 'tollPrice',
+    width: 100,
+  },
+  {
+    title: '提成价格',
+    align: 'center',
+    dataIndex: 'comPrice',
+  },
+  {
+    title: '医保报销',
+    align: 'center',
+    dataIndex: 'izReimbursement_dictText',
+    width: 100,
+  },
+  {
+    title: '机构优惠',
+    align: 'center',
+    dataIndex: 'izPreferential_dictText',
+    width: 100,
+  },
+  {
+    title: '周期类型',
+    align: 'center',
+    dataIndex: 'cycleType_dictText',
+  },
+  {
+    title: '服务时长（分钟）',
+    align: 'center',
+    dataIndex: 'serviceDuration',
+    width: 135,
+  },
+  {
+    title: '指令状态',
+    align: 'center',
+    dataIndex: 'status_dictText',
+    width: 100,
+  },
   {
     title: '是否启用',
     align: 'center',
diff --git a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
index 938a933..4b69359 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
@@ -85,6 +85,8 @@
           preIcon="tabler:settings">配置情绪标签</a-button>
         <a-button type="primary" class="btnPrivate" @click="handleAdd"
           preIcon="ant-design:plus-outlined">新增服务指令</a-button>
+        <a-button type="primary" class="btnPrivate" @click="auditListFunc"
+          preIcon="ant-design:audit-outlined">审核列表</a-button>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -408,10 +410,6 @@ function searchReset() {
   reload();
 }
 
-
-
-
-
 let rangeField = 'tollPrice,comPrice,'
 
 /**
@@ -569,8 +567,15 @@ const stopAudio = () => {
   }
 };
 
-// 添加音频结束监听
+/**
+ * 打开审核列表
+ */
+function auditListFunc() {
+  registerModal.value.openAuditList();
+}
+
 onMounted(() => {
+  // 添加音频结束监听
   if (audioPlayer.value) {
     audioPlayer.value.addEventListener('ended', () => {
       isPlaying.value = false;
@@ -578,8 +583,6 @@ onMounted(() => {
   }
 });
 
-onMounted(() => {
-})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
index 33a7720..83a0333 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
@@ -1,6 +1,27 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="ConfigService2DirectiveForm">
+          <a-row v-show="isAudit">
+            <a-col :span="12">
+              <a-config-provider :disabled="false">
+                <a-form-item label="服务指令审批" v-bind="validateInfos.statusVal" id="ConfigServiceDirectiveForm-statusVal"
+                  name="statusVal">
+                  <a-select v-model:value="formData.statusVal" placeholder="请选择审核状态" style="width: 200px"
+                    :disabled="false">
+                    <a-select-option value="auditPass">审核通过</a-select-option>
+                    <a-select-option value="auditFaild">审核不通过</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-config-provider>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+    <JFormContainer :disabled="disabled" style="margin-top: -30px;">
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="ConfigService2DirectiveForm">
@@ -102,8 +123,9 @@
           <a-row>
             <a-col :span="12">
               <a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
-                <JImageUpload :fileMax="1" v-model:value="formData.previewFile" :disabled="!canUploadPreviewImage"
-                  :bizPath="directiveBizPath">
+                <span v-if="disabled && !formData.previewFile">暂无文件</span>
+                <JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"
+                  :disabled="!canUploadPreviewImage" :bizPath="directiveBizPath">
                 </JImageUpload>
               </a-form-item>
             </a-col>
@@ -114,7 +136,7 @@
               </a-form-item>
             </a-col>
           </a-row>
-          <a-row>
+          <a-row v-show="!disabled">
             <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"
@@ -127,35 +149,44 @@
                   :disabled="!canUploadPreviewImage" :bizPath="directiveBizPath"></j-upload>
               </a-form-item>
             </a-col>
-            <a-row>
-            </a-row>
           </a-row>
         </a-form>
       </template>
     </JFormContainer>
-    <JFormContainer>
+    <JFormContainer style="margin-top: -40px;">
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="ConfigServiceDirectiveForm">
           <a-row>
             <a-col :span="12" v-if="!!formData.mp3File">
-              <a-form-item label="语音预览" id="ConfigServiceDirectiveForm-mp3File">
+              <a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
                 <audio controls disabled="false">
                   <source :src="getFileAccessHttpUrl(formData.mp3File)">
                 </audio>
               </a-form-item>
             </a-col>
+            <a-col :span="12" v-if="disabled && !formData.mp3File">
+              <a-form-item label="指令音频预览">
+                <span>暂无文件</span>
+              </a-form-item>
+            </a-col>
             <a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
-              <a-form-item label="视频预览" id="ConfigServiceDirectiveForm-mp4File">
+              <a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
                 <video controls>
                   <source :src="getFileAccessHttpUrl(formData.mp4File)">
                 </video>
               </a-form-item>
             </a-col>
+            <a-col :span="12" v-if="disabled && !formData.mp3File">
+              <a-form-item label="指令视频预览">
+                <span>暂无文件</span>
+              </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">
+                <span v-if="disabled && !formData.immediateFile">暂无文件</span>
+                <JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"
+                  :disabled="!canUploadPreviewImage || disabled" :bizPath="directiveBizPath">
                 </JImageUpload>
               </a-form-item>
             </a-col>
@@ -175,7 +206,7 @@ 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 } from '../ConfigServiceDirective.api';
+import { saveOrUpdate, audit } from '../ConfigServiceDirective.api';
 import { Form } from 'ant-design-vue';
 import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
@@ -213,6 +244,8 @@ const formData = reactive<Record<string, any>>({
   mp4File: '',
   previewFile: '',
   immediateFile: '',
+  status: '',
+  statusVal: undefined,
 });
 const { createMessage } = useMessage();
 const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
@@ -221,6 +254,7 @@ 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 isAudit = ref(false)
 //表单验证
 const validatorRules = reactive({
   categoryId: [{ required: true, message: '请选择服务类别!' },],
@@ -353,9 +387,12 @@ function add() {
 /**
  * 编辑
  * isEditMedia_是否为编辑指令资源 （隐藏业务字段）
+ * isAudit_是否为服务指令那个审批 （隐藏业务字段）
  */
-function edit(record, isEditMedia_ = false) {
+function edit(record, isEditMedia_ = false, isAudit_ = false) {
+  console.log("🌊 ~ edit ~ record:", record)
   isEditMedia.value = isEditMedia_
+  isAudit.value = isAudit_
   formData.bodyTags = ''
   formData.emotionTags = ''
   nextTick(() => {
@@ -413,7 +450,6 @@ async function submitForm() {
     retrun;
   }
 
-  //
   model.mediaFileSavePath = directiveBizPath
 
   await saveOrUpdate(model, isUpdate.value)
@@ -430,11 +466,34 @@ async function submitForm() {
     });
 }
 
+function submitAudit() {
+  if (formData.statusVal == 'auditPass') {
+    formData.status = 2
+  } else if (formData.statusVal == 'auditFaild') {
+    formData.status = 3
+  } else {
+    createMessage.warning('请选择审批结果！')
+    return
+  }
+  audit(formData)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success('操作成功！');
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
 
 defineExpose({
   add,
   edit,
   submitForm,
+  submitAudit,
 });
 </script>
 
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
index 5cc922a..34c8e2f 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
@@ -1,22 +1,29 @@
 <template>
   <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk"
-    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
+    :okButtonProps="{ class: { 'jee-hidden': (disableSubmit && !isAudit) } }" @cancel="handleCancel" cancelText="关闭"
     :maskClosable="false">
     <ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
       :formBpm="false"></ConfigServiceDirectiveForm>
   </j-modal>
+  <j-modal title="审核列表" width="70vw" :visible="auditVisible" :okButtonProps="{ class: { 'jee-hidden': true } }"
+    @cancel="handleAuditCancel" cancelText="关闭" :maskClosable="false">
+    <ServiceDirectiveAuditList></ServiceDirectiveAuditList>
+  </j-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, nextTick, defineExpose, defineProps } from 'vue';
 import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import ServiceDirectiveAuditList from './ServiceDirectiveAuditList.vue'
 
 const props = defineProps({
 });
 const title = ref<string>('');
 const visible = ref<boolean>(false);
+const auditVisible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
+const isAudit = ref<boolean>(false);
 const registerForm = ref();
 const emit = defineEmits(['register', 'success']);
 
@@ -38,12 +45,33 @@ function add() {
  */
 function edit(record) {
   title.value = disableSubmit.value ? '详情' : '编辑';
+  isAudit.value = false
   visible.value = true;
   nextTick(() => {
     registerForm.value.edit(record);
   });
 }
 
+/**
+ * 审批列表 - 审批
+ * @param record
+ */
+function audit(record) {
+  title.value = '审批';
+  isAudit.value = true
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record, false, true);
+  });
+}
+
+/**
+ * 打开审核列表
+ */
+function openAuditList() {
+  auditVisible.value = true;
+}
+
 /**
  * 编辑指令资源
  * @param record
@@ -52,7 +80,7 @@ function editMedia(record) {
   title.value = '编辑指令资源';
   visible.value = true;
   nextTick(() => {
-    registerForm.value.edit(record,true);
+    registerForm.value.edit(record, true);
   });
 }
 
@@ -60,7 +88,11 @@ function editMedia(record) {
  * 确定按钮点击事件
  */
 function handleOk() {
-  registerForm.value.submitForm();
+  if (isAudit.value) {
+    registerForm.value.submitAudit();
+  } else {
+    registerForm.value.submitForm();
+  }
 }
 
 /**
@@ -78,11 +110,21 @@ function handleCancel() {
   visible.value = false;
 }
 
+/**
+ * 审核列表-关闭按钮回调事件
+ */
+function handleAuditCancel() {
+  auditVisible.value = false;
+}
+
 defineExpose({
   add,
   edit,
   editMedia,
   disableSubmit,
+  audit,
+  isAudit,
+  openAuditList,
 });
 </script>
 
diff --git a/src/views/services/serviceDirective/components/ServiceDirectiveAuditList.vue b/src/views/services/serviceDirective/components/ServiceDirectiveAuditList.vue
new file mode 100644
index 0000000..e033cfc
--- /dev/null
+++ b/src/views/services/serviceDirective/components/ServiceDirectiveAuditList.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="p-2">
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+        <!-- 音频播放控制 -->
+        <template v-if="column.dataIndex === 'mp3File'">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <a-button v-else type="link" class="btnPrivate" @click="openAudioModal(text)">播放</a-button>
+        </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) =>
+            item.tagName).join('、')}}</span>
+        </template>
+        <template v-if="column.dataIndex === 'emotionTagList'">
+          <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
+            item.tagName).join('、')}}</span>
+        </template>
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess">
+    </ConfigServiceDirectiveModal>
+  </div>
+
+  <!-- 音频播放 -->
+  <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' }">
+    <video controls style="width: 100%; max-height: 70vh; display: block; margin: 0 auto;">
+      <source :src="videoUrl">
+      您的浏览器不支持视频播放。
+    </video>
+  </a-modal>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { BasicTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { auditColumns, superQuerySchema } from '../ConfigServiceDirective.data';
+import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from '../ConfigServiceDirective.api';
+import ConfigServiceDirectiveModal from './ConfigServiceDirectiveModal.vue'
+import { cloneDeep } from "lodash-es";
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+const formRef = ref();
+const queryParam = reactive<any>({
+  instructionTagId: '',
+  categoryId: '',
+  typeId: '',
+});
+watch(
+  () => queryParam.instructionTagId,
+  () => {
+    queryParam.categoryId = ''
+    queryParam.typeId = ''
+  }
+)
+
+// 当服务类别变动，清空服务类型
+watch(
+  () => queryParam.categoryId,
+  () => {
+    queryParam.typeId = ''
+  }
+)
+const registerModal = ref();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '服务指令',
+    api: list,
+    columns: auditColumns,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '20', '50', '100'],
+    },
+    actionColumn: {
+      width: 200,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      params.column = 'createTime'
+      params.order = 'desc'
+      params.status = '1,2,3'
+      let rangerQuery = await setRangeQuery();
+      return Object.assign(params, rangerQuery);
+    },
+  },
+  exportConfig: {
+    name: "服务指令",
+    url: getExportUrl,
+    params: queryParam,
+  },
+  importConfig: {
+    url: getImportUrl,
+    success: handleSuccess
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+
+/**
+ * 详情
+ */
+function handleAudit(record: Recordable) {
+  registerModal.value.disableSubmit = true;
+  registerModal.value.isAudit = true;
+  registerModal.value.audit(record);
+}
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+/**
+ * 编辑指令资源
+ */
+function handleMedia(record: Recordable) {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.editMedia(record);
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '审批',
+      onClick: handleAudit.bind(null, record),
+      ifShow: record.status == '1'
+    },
+    {
+      label: '指令资源',
+      onClick: handleMedia.bind(null, record)
+    },
+  ];
+}
+
+/**
+ * 下拉操作栏
+ */
+function getDropDownAction(record) {
+  return [
+
+  ]
+}
+
+let rangeField = 'tollPrice,comPrice,'
+
+/**
+ * 设置范围查询条件
+ */
+async function setRangeQuery() {
+  let queryParamClone = cloneDeep(queryParam);
+  if (rangeField) {
+    let fieldsValue = rangeField.split(',');
+    fieldsValue.forEach(item => {
+      if (queryParamClone[item]) {
+        let range = queryParamClone[item];
+        queryParamClone[item + '_begin'] = range[0];
+        queryParamClone[item + '_end'] = range[1];
+        delete queryParamClone[item];
+      } else {
+        queryParamClone[item + '_begin'] = '';
+        queryParamClone[item + '_end'] = '';
+      }
+    })
+  }
+  return queryParamClone;
+}
+
+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
+
+// 打开视频模态框
+const openVideoModal = (url) => {
+  videoUrl.value = getFileAccessHttpUrl(url);
+  showVideoModal.value = true;
+};
+
+// 关闭视频模态框
+const closeVideoModal = () => {
+  showVideoModal.value = false;
+  videoUrl.value = '';
+};
+
+// 添加以下响应式变量
+const audioPlayer = ref<HTMLAudioElement | null>(null);
+const currentPlayingAudio = ref<string | null>(null);
+const isPlaying = ref(false);
+
+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;
+    });
+  }
+});
+
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+.btnPrivate {
+  height: 34px;
+  margin-left: 4px;
+}
+</style>