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

---
 .../directivePackage/DirectivePackageList.vue |  14 +-
 .../components/ConfigServiceDirective.data.ts | 143 +++------
 .../components/ConfigServiceDirectiveForm.vue |  31 --
 .../components/ConfigServiceDirectiveList.vue | 300 ++++--------------
 .../ConfigServiceDirectiveModal.vue           | 131 ++++----
 .../components/DirectivePackageForm.vue       |   4 +-
 .../components/DirectivePackageModal.vue      | 152 +++++++--
 .../components/PackageList.vue                | 270 ++++++++++++++++
 .../ConfigServiceDirectiveList.vue            |   4 +-
 9 files changed, 582 insertions(+), 467 deletions(-)
 create mode 100644 src/views/serviceDirective/directivePackage/components/PackageList.vue

diff --git a/src/views/serviceDirective/directivePackage/DirectivePackageList.vue b/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
index 0651608..d3bf860 100644
--- a/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
+++ b/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
@@ -30,10 +30,10 @@
         <div>{{ directive.description }}</div>
         <div>{{ directive.createTime }} - {{ directive.createBy }}</div>
         <div>
-          <a-button type="primary" preIcon="ant-design:reload-outlined" @click="packageEdit(directive)"
-            style="margin-left: 8px">编辑</a-button>
-          <a-button type="primary" preIcon="ant-design:reload-outlined" @click="remove(directive)"
-            style="margin-left: 8px">删除</a-button>
+          <a type="primary" @click="packageEdit(directive)" style="margin-right: 8px">编辑</a>
+          <a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(directive)">
+            <a href="#">删除</a>
+          </a-popconfirm>
         </div>
       </a-card>
     </div>
@@ -45,7 +45,7 @@
 <script lang="ts" name="directivePackage-directivePackage" setup>
 import { ref, reactive, onMounted } from 'vue';
 import DirectivePackageModal from './components/DirectivePackageModal.vue'
-import { list, queryById } from './DirectivePackage.api'
+import { list, queryById, deleteOne } from './DirectivePackage.api'
 
 const registerModal = ref();
 const searchForm = ref({})
@@ -89,7 +89,7 @@ function handleAdd() {
  * 成功回调
  */
 function handleSuccess() {
-
+  queryList({})
 }
 
 /**
@@ -116,7 +116,7 @@ function packageEdit(data) {
  * @param data
  */
 function remove(data) {
-
+  deleteOne({ id: data.id }, handleSuccess())
 }
 
 onMounted(() => {
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts
index 17e37c7..afe4f1b 100644
--- a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts
@@ -1,42 +1,20 @@
 import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
-import { rules } from '/@/utils/helper/validator';
-import { render } from '/@/utils/common/renderUtils';
-import { getWeekMonthQuarterYear } from '/@/utils';
 //列表数据
 export const columns: BasicColumn[] = [
   {
     title: '分类标签',
     align: 'center',
     dataIndex: 'instructionTagId_dictText',
-    width: 100,
-    // customCell: (record, index, column) => {
-    //   if (record.instructionRowSpan != null) {
-    //     return { rowSpan: record.instructionRowSpan };
-    //   }
-    // },
   },
   {
     title: '服务类别',
     align: 'center',
-    width:140,
     dataIndex: 'categoryId_dictText',
-    // customCell: (record, index, column) => {
-    //   if (record.categoryRowSpan != null) {
-    //     return { rowSpan: record.categoryRowSpan };
-    //   }
-    // },
   },
   {
     title: '服务类型',
     align: 'center',
-    width:140,
     dataIndex: 'typeId_dictText',
-    // customCell: (record, index, column) => {
-    //   if (record.typeRowSpan != null) {
-    //     return { rowSpan: record.typeRowSpan };
-    //   }
-    // },
   },
   {
     title: '服务指令名称',
@@ -47,84 +25,67 @@ export const columns: BasicColumn[] = [
     title: '指令标签',
     align: 'center',
     dataIndex: 'tagList',
-    width:150,
     ellipsis: false,
     format(text, record, index) {
-      if(!!text){
-        return text.map(item => item.tagName).join('、');
-      }else{
-        return '-'
+      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: 'chargingFrequency_dictText',
-  // },
   {
     title: '周期类型',
     align: 'center',
-    width:140,
     dataIndex: 'cycleType_dictText',
   },
-  {
-    title: '服务时长（分钟）',
-    align: 'center',
-    dataIndex: 'serviceDuration',
-    width: 135,
-  },
-  // {
-  //   title: '是否启用',
-  //   align: 'center',
-  //   dataIndex: 'izEnabled_dictText',
-  //   width: 100,
-  // },
 ];
 
-// 高级查询数据
-export const superQuerySchema = {
-  categoryId: { title: '服务类别', order: 0, view: 'list', type: 'string', dictCode: '' },
-  typeId: { title: '服务类型', order: 1, view: 'list', type: 'string', dictCode: '' },
-  instructionTagId: { title: '分类标签', order: 2, view: 'list', type: 'string', dictCode: 'instruction_tag' },
-  directiveName: { title: '服务指令名称', order: 3, view: 'text', type: 'string' },
-  tollPrice: { title: '收费价格', order: 4, view: 'number', type: 'number' },
-  comPrice: { title: '提成价格', order: 5, view: 'number', type: 'number' },
-  izReimbursement: { title: '医保报销', order: 6, view: 'radio', type: 'string', dictCode: '' },
-  izPreferential: { title: '机构优惠', order: 7, view: 'radio', type: 'string', dictCode: '' },
-  chargingFrequency: { title: '收费频次', order: 8, view: 'list', type: 'string', dictCode: '' },
-  cycleType: { title: '周期类型', order: 9, view: 'list', type: 'string', dictCode: '' },
-  sort: { title: '排序', order: 10, view: 'number', type: 'number' },
-  serviceContent: { title: '服务说明', order: 11, view: 'textarea', type: 'string' },
-  serviceDuration: { title: '服务时长（分钟）', order: 12, view: 'text', type: 'string' },
-  izEnabled: { title: '是否启用', order: 13, view: 'radio', type: 'string', dictCode: '' },
-  createBy: { title: '创建人', order: 14, view: 'text', type: 'string' },
-  createTime: { title: '创建日期', order: 15, view: 'datetime', type: 'string' },
-  updateBy: { title: '更新人', order: 16, view: 'text', type: 'string' },
-  updateTime: { title: '更新日期', order: 17, view: 'datetime', type: 'string' },
-  mp3File: { title: '语音文件', order: 18, view: 'file', type: 'string' },
-  mp4File: { title: '视频文件', order: 19, view: 'file', type: 'string' },
-};
+export const selectedColumns: BasicColumn[] = [
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId',
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryName',
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeName',
+  },
+  {
+    title: '服务指令名称',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '指令标签',
+    align: 'center',
+    dataIndex: 'tagList',
+    ellipsis: false,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
+  },
+  {
+    title: '周期类型',
+    align: 'center',
+    dataIndex: 'cycleType',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right', // 如果需要固定在右侧
+    align:'center',
+    width:100
+  },
+];
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue
index e5655be..169425b 100644
--- a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue
@@ -90,11 +90,6 @@
             </a-col>
           </a-row>
           <a-row>
-            <!-- <a-col :span="12">
-              <a-form-item label="排序" v-bind="validateInfos.sort" id="ConfigServiceDirectiveForm-sort" name="sort">
-                <a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
-              </a-form-item>
-            </a-col> -->
             <a-col :span="24">
               <a-form-item label="指令标签" id="ConfigServiceDirectiveForm-typeId" :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2" name="typeId">
@@ -109,32 +104,6 @@
                   placeholder="请选择是否启用"  allowClear />
               </a-form-item>
             </a-col>
-            <!-- <a-col :span="12">
-              <a-form-item label="创建人" v-bind="validateInfos.createBy" id="ConfigServiceDirectiveForm-createBy"
-                name="createBy">
-                <a-input v-model:value="formData.createBy" placeholder="请输入创建人" disabled allow-clear></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="创建日期" v-bind="validateInfos.createTime" id="ConfigServiceDirectiveForm-createTime"
-                name="createTime">
-                <a-date-picker placeholder="请选择创建日期" v-model:value="formData.createTime" showTime
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="更新人" v-bind="validateInfos.updateBy" id="ConfigServiceDirectiveForm-updateBy"
-                name="updateBy">
-                <a-input v-model:value="formData.updateBy" placeholder="请输入更新人" disabled allow-clear></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="更新日期" v-bind="validateInfos.updateTime" id="ConfigServiceDirectiveForm-updateTime"
-                name="updateTime">
-                <a-date-picker placeholder="请选择更新日期" v-model:value="formData.updateTime" showTime
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled allow-clear />
-              </a-form-item>
-            </a-col> -->
           </a-row>
           <a-row>
             <a-col :span="12">
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue
index 6b3a6fe..a5932f3 100644
--- a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue
@@ -21,86 +21,18 @@
                 :ignoreDisabled="true" allowClear />
             </a-form-item>
           </a-col>
-          <!-- <template v-if="toggleSearchStatus"> -->
           <a-col :lg="6">
             <a-form-item name="directiveName">
               <template #label><span title="服务指令">服务指令</span></template>
               <JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
             </a-form-item>
           </a-col>
-          <!-- <a-col :lg="6">
-              <a-form-item name="instructionTagId">
-                <template #label><span title="分类标签">分类标签</span></template>
-                <j-dict-select-tag v-model:value="queryParam.instructionTagId" dictCode="instruction_tag"
-                  :ignoreDisabled="true" placeholder="请选分类标签" allowClear />
-              </a-form-item>
-            </a-col> -->
-          <!-- <a-col :lg="6">
-              <a-form-item name="tollPrice">
-                <template #label><span title="收费价格">收费价格</span></template>
-                <JRangeNumber v-model:value="queryParam.tollPrice" class="query-group-cust"></JRangeNumber>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="6">
-              <a-form-item name="comPrice">
-                <template #label><span title="提成价格">提成价格</span></template>
-                <JRangeNumber v-model:value="queryParam.comPrice" class="query-group-cust"></JRangeNumber>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="6">
-              <a-form-item name="izReimbursement">
-                <template #label><span title="医保报销">医保报销</span></template>
-                <j-dict-select-tag type='list' v-model:value="queryParam.izReimbursement" dictCode="med_ins_reimb"
-                  :ignoreDisabled="true" placeholder="请选择医保报销" allowClear />
-              </a-form-item>
-            </a-col>
-            <a-col :lg="6">
-              <a-form-item name="izPreferential">
-                <template #label><span title="机构优惠">机构优惠</span></template>
-                <j-dict-select-tag type='list' v-model:value="queryParam.izPreferential"
-                  dictCode="institutional_discount" :ignoreDisabled="true" placeholder="请选择机构优惠" allowClear />
-              </a-form-item>
-            </a-col> -->
-          <!-- <a-col :lg="6">
-              <a-form-item name="chargingFrequency">
-                <template #label><span title="收费频次">收费频次</span></template>
-                <j-dict-select-tag type="list" v-model:value="queryParam.chargingFrequency" dictCode="billing_frequency"
-                  :ignoreDisabled="true" placeholder="请选择收费频次" allowClear />
-              </a-form-item>
-            </a-col> -->
-          <!-- <a-col :lg="6">
-              <a-form-item name="tags">
-                <template #label><span title="指令标签">指令标签</span></template>
-                <JSelectMultiple type="list" v-model:value="queryParam.tags"
-                  :dictCode="`nu_config_directive_tag,tag_name,id,del_flag = '0' order by sort asc`"
-                  :ignoreDisabled="true" placeholder="请选择指令标签" allowClear />
-              </a-form-item>
-            </a-col>
-            <a-col :lg="6">
-              <a-form-item name="cycleType">
-                <template #label><span title="周期类型">周期类型</span></template>
-                <j-dict-select-tag type="list" v-model:value="queryParam.cycleType" dictCode="period_type"
-                  :ignoreDisabled="true" placeholder="请选择周期类型" allowClear />
-              </a-form-item>
-            </a-col> -->
-          <!-- <a-col :lg="6">
-              <a-form-item name="izEnabled">
-                <template #label><span title="是否启用">是否启用</span></template>
-                <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
-                  :ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
-              </a-form-item>
-            </a-col> -->
-          <!-- </template> -->
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-col :lg="6">
                 <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                 <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
                   style="margin-left: 8px">重置</a-button>
-                <!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
-                  {{ toggleSearchStatus ? '收起' : '展开' }}
-                  <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
-                </a> -->
               </a-col>
             </span>
           </a-col>
@@ -108,18 +40,9 @@
       </a-form>
     </div>
     <!--引用表格-->
-    <BasicTable @register="registerTable" :rowSelection="rowSelection" @row-click="handleRowClick"
-      :scroll="{ x: '100%', y: '60vh' }">
+    <BasicTable @register="registerTable" :scroll="{ x: '100%', y: '32vh' }">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <!-- <a-button type="primary" v-auth="'serviceDirective:config_service_directive:add'" @click="handleCategory"
-          preIcon="tabler:settings">配置服务类别</a-button>
-        <a-button type="primary" v-auth="'serviceDirective:config_service_directive:add'" @click="handleType"
-          preIcon="tabler:settings">配置服务类型</a-button>
-        <a-button type="primary" v-auth="'serviceDirective:config_service_directive:add'" @click="handleTag"
-          preIcon="tabler:settings">配置指令标签</a-button>
-        <a-button type="primary" v-auth="'serviceDirective:config_service_directive:add'" @click="handleAdd"
-          preIcon="ant-design:plus-outlined">新增服务指令</a-button> -->
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -129,9 +52,27 @@
       </template>
     </BasicTable>
 
-    <a-table :columns="selectedColumns" :data-source="selected" :scroll="{ x: '100%', y: '60vh' }" :pagination="false">
+    <a-table :columns="selectedColumns" :data-source="directiveList" :scroll="{ x: '100%', y: '32vh' }"
+      :pagination="false" size="small">
+      <template v-slot:bodyCell="{ column, record, index, text }">
+        <span v-if="column.dataIndex === 'instructionTagId'">
+          {{ filterDictTextByCache('instruction_tag', text) }}
+        </span>
+        <span v-if="column.dataIndex === 'categoryName'">
+          {{ text || record.categoryId_dictText }}
+        </span>
+        <span v-if="column.dataIndex === 'typeName'">
+          {{ text || record.typeId_dictText }}
+        </span>
+        <span v-if="column.dataIndex === 'tagList'">
+          {{ handleTags('', text, '') }}
+        </span>
+        <span v-if="column.dataIndex === 'cycleType'">
+          {{ filterDictTextByCache('period_type', text) }}
+        </span>
+      </template>
       <template #action="{ record }">
-        <a @click="deleteDirective(record.id)">移除</a>
+        <a @click="removeDirective(record.id)">移除</a>
       </template>
     </a-table>
 
@@ -144,38 +85,36 @@
 import { ref, reactive, computed, defineExpose } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
-import { columns, superQuerySchema } from './ConfigServiceDirective.data';
+import { columns, selectedColumns } from './ConfigServiceDirective.data';
 import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './ConfigServiceDirective.api';
-import { useUserStore } from '/@/store/modules/user';
-import JRangeNumber from "/@/components/Form/src/jeecg/components/JRangeNumber.vue";
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 import { cloneDeep } from "lodash-es";
-import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
 import ConfigServiceDirectiveModal from './ConfigServiceDirectiveModal.vue'
-import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
+import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
 
+const emit = defineEmits(['deleteDirective', 'addDirective']);
 const formRef = ref();
 const queryParam = reactive<any>({});
-const toggleSearchStatus = ref<boolean>(false);
 const registerModal = ref();
-const userStore = useUserStore();
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
     title: '服务指令',
     api: list,
     columns,
+    size: 'small',
     canResize: false,
     useSearchForm: false,
     showIndexColumn: true,
+    showTableSetting: false,
     actionColumn: {
-      width: 160,
-      fixed: 'right',
+      width: 90,
+      fixed: 'center',
     },
     beforeFetch: async (params) => {
-      params.column = 'categoryId,typeId,instructionTagId'
-      params.order = 'asc,asc,asc'
+      params.column = 'createTime'
+      params.order = 'desc'
       let rangerQuery = await setRangeQuery();
       return Object.assign(params, rangerQuery);
     },
@@ -191,10 +130,10 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   },
 });
 const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
-const selected = computed(() => {
-  console.log("🎅 ~ selected ~ rowSelection:", rowSelection)
-  return rowSelection.selectedRows;
+const props = defineProps({
+  directiveList: [],
 });
+
 const labelCol = reactive({
   xs: 24,
   sm: 4,
@@ -206,74 +145,6 @@ const wrapperCol = reactive({
   sm: 20,
 });
 
-// 高级查询配置
-const superQueryConfig = reactive(superQuerySchema);
-
-const categoryOpen = ref(false)//服务类别抽屉
-const typeOpen = ref(false)//服务类型抽屉
-const tagOpen = ref(false)//指令标签抽屉
-const selectedColumns = computed(() => {
-  // 复制原始列配置，避免直接修改props
-  const cols = [...columns];
-
-  // 添加操作列
-  cols.push({
-    title: '操作',
-    key: 'action',
-    slots: { customRender: 'action' },
-    width: 150,  // 可以设置固定宽度
-    fixed: 'right'  // 如果需要固定在右侧
-  });
-
-  return cols;
-})
-/**
- * 高级查询事件
- */
-function handleSuperQuery(params) {
-  Object.keys(params).map((k) => {
-    queryParam[k] = params[k];
-  });
-  searchQuery();
-}
-
-/**
- * 新增事件
- */
-function handleAdd() {
-  registerModal.value.disableSubmit = false;
-  registerModal.value.add();
-}
-
-/**
- * 编辑事件
- */
-function handleEdit(record: Recordable) {
-  registerModal.value.disableSubmit = false;
-  registerModal.value.edit(record);
-}
-
-/**
- * 详情
- */
-function handleDetail(record: Recordable) {
-  registerModal.value.disableSubmit = true;
-  registerModal.value.edit(record);
-}
-
-/**
- * 删除事件
- */
-async function handleDelete(record) {
-  selectedRowKeys.value = selectedRowKeys.value.filter(item => item != record.id)
-}
-
-/**
- * 批量删除事件
- */
-async function batchHandleDelete() {
-  await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
-}
 
 /**
  * 成功回调
@@ -282,14 +153,22 @@ function handleSuccess() {
   (selectedRowKeys.value = []) && reload();
 }
 
+/**
+ * 选择
+ * @param directive_ 
+ */
+function handleSelect(directive_) {
+  emit('addDirective', directive_)
+}
+
 /**
  * 操作栏
  */
 function getTableAction(record) {
   return [
     {
-      label: '详情',
-      onClick: handleDetail.bind(null, record),
+      label: '选择',
+      onClick: handleSelect.bind(null, record),
     }
   ];
 }
@@ -320,10 +199,6 @@ function searchReset() {
   reload();
 }
 
-
-
-
-
 let rangeField = 'tollPrice,comPrice,'
 
 /**
@@ -348,78 +223,27 @@ async function setRangeQuery() {
   return queryParamClone;
 }
 
-//服务类别抽屉打开
-function handleCategory() {
-  categoryOpen.value = true
-}
-//服务类型抽屉打开
-function handleType() {
-  typeOpen.value = true
-}
-//指令标签抽屉打开
-function handleTag() {
-  tagOpen.value = true
-}
-//服务类别抽屉关闭
-function onCategoryClose() {
-  categoryOpen.value = false
+/**
+ * 移除
+ * @param directiveId 
+ */
+function removeDirective(directiveId) {
+  emit('deleteDirective', directiveId)
 }
 
-//服务类型抽屉关闭
-function onTypeClose() {
-  typeOpen.value = false
-}
-//指令标签抽屉关闭
-function onTagClose() {
-  tagOpen.value = false
-}
-
-
-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 = '';
-};
-
-function deleteDirective(directiveId) {
-  selectedRowKeys.value = selectedRowKeys.value.filter(item => item != directiveId)
-}
-
-function handleRowClick(record) {
-  const key = record.id; // 假设每一行的唯一标识是 `id`
-  const selectedKeys = selectedRowKeys.value;
-  const index = selectedKeys.indexOf(key);
-
-  if (index >= 0) {
-    // 如果已选中，则取消选中
-    selectedKeys.splice(index, 1);
+/**
+ * 处理服务指令标签翻译
+ */
+function handleTags(prefix, tagList, suffix) {
+  if (!!tagList && tagList.length > 0) {
+    let str = tagList.map(item => item.tagName).join('、 ');
+    return prefix + str + suffix
   } else {
-    // 如果未选中，则选中
-    selectedKeys.push(key);
-  }
-
-  // 更新选中的行 key
-  selectedRowKeys.value = selectedKeys;
-
-  //处理另外一个必要的组件对象，否则组件无法实时更新导致数据异常
-  if (rowSelection.selectedRows.filter(item => item.id == key).length > 0) {
-    rowSelection.selectedRows = rowSelection.selectedRows.filter(item => item.id != key)
-  } else {
-    rowSelection.selectedRows.push(record)
+    return ' - '
   }
 }
+
 defineExpose({
-  selected,
-  deleteDirective
 });
 </script>
 
@@ -429,7 +253,6 @@ defineExpose({
 
   .table-page-search-submitButtons {
     display: block;
-    margin-bottom: 24px;
     white-space: nowrap;
   }
 
@@ -444,8 +267,7 @@ defineExpose({
   }
 
   .ant-form-item:not(.ant-form-item-with-help) {
-    margin-bottom: 16px;
-    height: 32px;
+    height: 0px;
   }
 
   :deep(.ant-picker),
@@ -462,4 +284,8 @@ audio::-webkit-media-controls-current-time-display,
 audio::-webkit-media-controls-time-remaining-display {
   display: none;
 }
+
+:deep(.ant-table-title) {
+  display: none !important;
+}
 </style>
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue
index 0aecc0f..c22ff52 100644
--- a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue
@@ -1,78 +1,81 @@
 <template>
-  <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
-    <ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigServiceDirectiveForm>
+  <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk"
+    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
+    :maskClosable="false">
+    <ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
+      :formBpm="false"></ConfigServiceDirectiveForm>
   </j-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, defineExpose } from 'vue';
-  import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
-  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { ref, nextTick, defineExpose } from 'vue';
+import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 import { array } from 'vue-types';
-  
-  const title = ref<string>('');
-  const visible = ref<boolean>(false);
-  const disableSubmit = ref<boolean>(false);
-  const registerForm = ref();
-  const emit = defineEmits(['register', 'success']);
+
+const title = ref<string>('');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const emit = defineEmits(['register', 'success']);
 
 
-  /**
-   * 新增
-   */
-  function add() {
-    title.value = '新增';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.add();
-    });
-  }
-  
-  /**
-   * 编辑
-   * @param record
-   */
-  function edit(record) {
-    title.value = disableSubmit.value ? '详情' : '编辑';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.edit(record);
-    });
-  }
-  
-  /**
-   * 确定按钮点击事件
-   */
-  function handleOk() {
-    registerForm.value.submitForm();
-  }
-
-  /**
-   * form保存回调事件
-   */
-  function submitCallback() {
-    handleCancel();
-    emit('success');
-  }
-
-  /**
-   * 取消按钮回调事件
-   */
-  function handleCancel() {
-    visible.value = false;
-  }
-
-  defineExpose({
-    add,
-    edit,
-    disableSubmit,
+/**
+ * 新增
+ */
+function add() {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add();
   });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
 </script>
 
 <style lang="less">
-  /**隐藏样式-modal确定按钮 */
-  .jee-hidden {
-    display: none !important;
-  }
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
 </style>
 <style lang="less" scoped></style>
diff --git a/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue b/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue
index 66caa4c..b6241f9 100644
--- a/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue
+++ b/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue
@@ -152,8 +152,8 @@ async function submitForm(directives) {
       }
     }
   }
-  if (directives.value.length > 0) {
-    model.directives = directives.value
+  if (directives.length > 0) {
+    model.directives = directives
   }
   await saveOrUpdate(model, isUpdate.value)
     .then((res) => {
diff --git a/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue b/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
index 1c4e1ab..e031972 100644
--- a/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
+++ b/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
@@ -2,7 +2,7 @@
   <!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
     <DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DirectivePackageForm>
   </j-modal> -->
-  <a-drawer v-model:open="visible" v-if="visible" :title="title" width="85vw" :closable="false"
+  <a-drawer v-model:open="visible" v-if="visible" :title="title" width="90vw" :closable="false"
     :footer-style="{ textAlign: 'right' }" @close="handleCancel">
     <div style="display:flex;justify-content:space-between">
       <div>
@@ -13,10 +13,13 @@
       </div>
       <div>
         <a-card title="服务指令" style="width: 27vw">
-          <template #extra><a href="#" @click="showChildrenDrawer">新增</a></template>
-          <div style="padding:10px;margin-top:10px;border:1px solid red;" v-for="directive of directives"
+          <template #extra>
+            <a href="#" @click="handleQuoteDirectives">引用 </a>
+            <a href="#" @click="handleAddDirectives">新增</a>
+          </template>
+          <div style="padding:10px;margin-top:10px;border:1px solid red;" v-for="directive of seletedRecord.directives"
             :class="{ 'selected': selectedDirective === directive.id }" @click="directiveInfo(directive)">
-            {{ directive.directiveName }}
+            {{ directive.directiveName + handleTags('（', directive, '）') }}
             <div style="float:right;">
               <a href="#" @click="deleteDirective(directive.id)">移除</a>
             </div>
@@ -25,18 +28,14 @@
       </div>
       <div>
         <a-card title="服务指令详情" style="width: 27vw">
-          <div class="">分类标签：{{ derectiveInfo.instructionTagId_dictText }}</div>
-          <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryId_dictText }}</div>
-          <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeId_dictText }}</div>
+          <div class="">分类标签：{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
+          <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName }}</div>
+          <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName }}</div>
           <div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
-          <!-- <div class="directiveInfoClass">收费价格(元)：{{ derectiveInfo.tollPrice }}</div>
-          <div class="directiveInfoClass">提成价格(元)：{{ derectiveInfo.comPrice }}</div>
-          <div class="directiveInfoClass">医保报销：{{ derectiveInfo.izReimbursement }}</div>
-          <div class="directiveInfoClass">机构优惠：{{ derectiveInfo.izPreferential }}</div> -->
-          <div class="directiveInfoClass">周期类型：{{ derectiveInfo.cycleType }}</div>
+          <div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}</div>
           <div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
           <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
-          <div class="directiveInfoClass">指令标签：{{ derectiveInfo.tags }}</div>
+          <div class="directiveInfoClass">指令标签：{{ handleTags('', derectiveInfo, '') }}</div>
           <div class="directiveInfoClass">语音文件：
             <span v-if="!derectiveInfo.mp3File">暂无文件</span>
             <audio controls disabled="false" v-else>
@@ -53,16 +52,28 @@
       </div>
     </div>
 
-
-    <a-drawer v-model:open="childrenDrawer" title="选择服务指令" width="80vw" :closable="false"
-      :footer-style="{ textAlign: 'right' }">
-      <ConfigServiceDirectiveList ref="configServiceDirectiveListRef"></ConfigServiceDirectiveList>
+    <!-- 服务指令列表编辑页 -->
+    <a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="70vw" :closable="false"
+      :footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
+      <ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
+        @deleteDirective="deleteDirective" @addDirective="addDirective">
+      </ConfigServiceDirectiveList>
       <template #footer>
         <a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
         <a-button type="primary" @click="handleDirectiveOk">确定</a-button>
       </template>
     </a-drawer>
 
+    <!-- 引用 -->
+    <a-drawer v-model:open="directiveQuoteDrawer" title="引用服务指令包" width="80vw" :closable="false"
+      :footer-style="{ textAlign: 'right' }">
+      <PackageList ref="directivePackageListRef"></PackageList>
+      <template #footer>
+        <a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
+        <a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
+      </template>
+    </a-drawer>
+
     <template #footer>
       <a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
       <a-button type="primary" @click="handleOk">确定</a-button>
@@ -73,33 +84,46 @@
 <script lang="ts" setup>
 import { ref, nextTick, defineExpose, computed } from 'vue';
 import DirectivePackageForm from './DirectivePackageForm.vue'
-import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import PackageList from './PackageList.vue'
+import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
+import { useMessage } from '/@/hooks/web/useMessage';
 
 const title = ref<string>('');
-const width = ref<number>(800);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
 const emit = defineEmits(['directiveOk', 'register', 'success']);
-const childrenDrawer = ref<boolean>(false);
+const directiveEditDrawer = ref<boolean>(false);
 const configServiceDirectiveListRef = ref()
 const derectiveInfo = ref({})
-const directives = computed(() => {
-  if (configServiceDirectiveListRef.value) {
-    return configServiceDirectiveListRef.value.selected
-  } else {
-    return []
-  }
-})
 const selectedDirective = ref()
+const directiveQuoteDrawer = ref(false)
+const directivePackageListRef = ref()
+const seletedRecord = ref({ directives: [] })//里面记录了已选择的服务指令，其他页面都需要操作这个对象
+const { createMessage } = useMessage();
+
+/**
+ * 处理服务指令标签翻译
+ * @param directive_ 
+ */
+function handleTags(prefix, directive_, suffix) {
+  if (!!directive_.tagList && directive_.tagList.length > 0) {
+    let str = directive_.tagList.map(item => item.tagName).join('、 ');
+    return prefix + str + suffix
+  } else {
+    return ' - '
+  }
+}
+
 /**
  * 新增
  */
 function add() {
   title.value = '新增服务指令包';
   visible.value = true;
+  seletedRecord.value = { directives: [] }
   nextTick(() => {
     registerForm.value.add();
   });
@@ -110,6 +134,7 @@ function add() {
  * @param record
  */
 function edit(record) {
+  seletedRecord.value = record
   title.value = disableSubmit.value ? '详情' : '编辑';
   visible.value = true;
   nextTick(() => {
@@ -121,7 +146,7 @@ function edit(record) {
  * 确定按钮点击事件
  */
 function handleOk() {
-  registerForm.value.submitForm(directives);
+  registerForm.value.submitForm(seletedRecord.value.directives);
 }
 
 /**
@@ -139,28 +164,89 @@ function handleCancel() {
   visible.value = false;
 }
 
-const showChildrenDrawer = () => {
-  childrenDrawer.value = true;
+/**
+ * 新增/编辑服务指令
+ */
+const handleAddDirectives = () => {
+  directiveEditDrawer.value = true;
 };
 
+/**
+ * 管理服务指令编辑页
+ */
 function handleDirectiveCancel() {
-  childrenDrawer.value = false;
+  directiveEditDrawer.value = false;
 }
 
+/**
+ * 保存服务指令编辑结果
+ */
 function handleDirectiveOk() {
-  childrenDrawer.value = false;
+  directiveEditDrawer.value = false;
 }
 
+/**
+ * 点击服务指令卡片时触发：右侧展示指令详细信息
+ * @param directive 
+ */
 function directiveInfo(directive) {
   selectedDirective.value = directive.id
   derectiveInfo.value = directive
 }
 
+/**
+ * 移除单个服务指令
+ * @param directiveId 
+ */
 function deleteDirective(directiveId) {
   setTimeout(() => {
     derectiveInfo.value = {}
   }, 200)
-  configServiceDirectiveListRef.value.deleteDirective(directiveId)
+  seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
+}
+
+/**
+ * 新增单个服务指令
+ * @param directive_ 
+ */
+function addDirective(directive_) {
+  let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
+  if (res_.length > 0) {
+    createMessage.warning('服务指令已选择');
+  } else {
+    seletedRecord.value.directives.push(directive_)
+  }
+}
+
+/**
+ * 引用
+ */
+function handleQuoteDirectives() {
+  directiveQuoteDrawer.value = true
+}
+
+/**
+ * 处理引用确认操作
+ */
+function handleQuoteDrawOk() {
+  directiveQuoteDrawer.value = false
+  //将数据合并（有去重操作）
+  seletedRecord.value.directives = [
+    ...seletedRecord.value.directives,
+    ...directivePackageListRef.value.selectedDirective.directives.reduce((acc, current) => {
+      if (!seletedRecord.value.directives.some((item) => item.id === current.id)) {
+        acc.push(current);
+      }
+      return acc;
+    }, []),
+  ];
+}
+
+/**
+ * 处理引用取消操作
+ */
+function handleQuoteDrawCancel() {
+  directiveQuoteDrawer.value = false
 }
 
 defineExpose({
diff --git a/src/views/serviceDirective/directivePackage/components/PackageList.vue b/src/views/serviceDirective/directivePackage/components/PackageList.vue
new file mode 100644
index 0000000..61159c3
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/PackageList.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="p-2">
+    <a-row>
+      <a-col :span="10">
+        <!--查询区域-->
+        <div class="jeecg-basic-table-form-container">
+          <a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-row :gutter="24">
+              <a-col :lg="10">
+                <a-form-item name="packageName">
+                  <template #label><span title="服务指令包名称">服务指令包</span></template>
+                  <a-input v-model:value="searchForm.packageName" allow-clear />
+                </a-form-item>
+              </a-col>
+              <a-col :xl="5" :lg="6" :md="9" :sm="24">
+                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                  <a-col :lg="9">
+                    <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                    <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
+                      style="margin-left: 8px">重置</a-button>
+                  </a-col>
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <div style="background-color: #000;padding: 20px;">
+          <a-card :title="directive.packageName" :key="directive.id" :bordered="false"
+            style="width: 300px;margin: 10px;" v-for="directive of tableData.records"
+            :class="{ 'selected': selectedDirective.id === directive.id }" @click="handlePackageClick(directive)">
+            <div>{{ directive.description }}</div>
+            <div>{{ directive.createTime }} - {{ directive.createBy }}</div>
+          </a-card>
+        </div>
+      </a-col>
+      <a-col :span="8">
+        <div>
+          <a-card title="服务指令" style="width: 100%">
+            <div v-for="derectiveInfo of selectedDirective.directives" :key="derectiveInfo.id"
+              class="derectiveInfoClass" @click="directiveInfo(derectiveInfo)"
+              :class="{ 'selected': directiveId === derectiveInfo.id }">
+              <div class="">分类标签：{{ derectiveInfo.instructionTagId_dictText }}</div>
+              <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName }}</div>
+              <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName }}</div>
+              <div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
+              <div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}
+              </div>
+              <div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
+              <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
+              <div class="directiveInfoClass">指令标签：{{ handleTags('', derectiveInfo, '') }}</div>
+              <div class="directiveInfoClass">语音文件：
+                <span v-if="!derectiveInfo.mp3File">暂无文件</span>
+                <audio controls disabled="false" v-else>
+                  <source :src="getFileAccessHttpUrl(derectiveInfo.mp3File)">
+                </audio>
+              </div>
+              <div class="directiveInfoClass">视频文件：
+                <span v-if="!derectiveInfo.mp4File">暂无文件</span>
+                <video controls v-else>
+                  <source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
+                </video>
+              </div>
+            </div>
+          </a-card>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div>
+          <a-card title="服务指令详情" style="width: 100%">
+            <div class="">分类标签：{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
+            <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName }}</div>
+            <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName }}</div>
+            <div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
+            <div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}
+            </div>
+            <div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
+            <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
+            <div class="directiveInfoClass">指令标签：{{ handleTags('', derectiveInfo, '') }}</div>
+            <div class="directiveInfoClass">语音文件：
+              <span v-if="!derectiveInfo.mp3File">暂无文件</span>
+              <audio controls disabled="false" v-else>
+                <source :src="getFileAccessHttpUrl(derectiveInfo.mp3File)">
+              </audio>
+            </div>
+            <div class="directiveInfoClass">视频文件：
+              <span v-if="!derectiveInfo.mp4File">暂无文件</span>
+              <video controls v-else>
+                <source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
+              </video>
+            </div>
+          </a-card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, defineExpose } from 'vue';
+import { list, queryById, deleteOne } from '../DirectivePackage.api'
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
+
+const selectedDirective = ref({ id: '' })
+const registerModal = ref();
+const searchForm = ref({})
+const tableData = ref({})
+const derectiveInfo = ref({})
+const labelCol = reactive({
+  xs: 24,
+  sm: 4,
+  xl: 16,
+  xxl: 16
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 20,
+  xl: 18,
+  xxl: 18
+});
+
+/**
+ * 搜索
+ */
+function searchQuery() {
+  queryList({})
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  searchForm.value = {}
+  queryList({})
+}
+
+/**
+ * 新增
+ */
+function handleAdd() {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.add();
+}
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  queryList({})
+}
+
+/**
+ * 数据查询
+ */
+function queryList(params) {
+  resetSeletedDirectiveInfo()
+  list({ pageNo: 1, pageSize: 10, packageName: searchForm.value.packageName }).then(res => {
+    tableData.value = res
+    selectedDirective.value = { id: '' }
+  })
+}
+
+/**
+ * 编辑
+ * @param data
+ */
+function packageEdit(data) {
+  queryById({ id: data.id }).then(item => {
+    registerModal.value.edit(item);
+  })
+}
+
+/**
+ * 移除
+ * @param data
+ */
+function remove(data) {
+  deleteOne({ id: data.id }, handleSuccess())
+}
+
+/**
+ * 处理服务指令标签翻译
+ * @param directive_ 
+ */
+function handleTags(prefix, directive_, suffix) {
+  if (!!directive_.tagList && directive_.tagList.length > 0) {
+    let str = directive_.tagList.map(item => item.tagName).join('、 ');
+    return prefix + str + suffix
+  } else {
+    return ''
+  }
+}
+
+const directiveId = ref('')
+/**
+ * 点击服务指令卡片时触发：右侧展示指令详细信息
+ * @param directive 
+ */
+function directiveInfo(directive_) {
+  derectiveInfo.value = directive_
+  directiveId.value = directive_.id
+}
+
+/**
+ * 指令包点击事件
+ * @param directive_ 
+ */
+function handlePackageClick(directive_) {
+  resetSeletedDirectiveInfo()
+  //重新赋值当前选择的包信息
+  selectedDirective.value = directive_
+}
+
+/**
+ * 重置已选择服务指令及服务指令详情
+ */
+function resetSeletedDirectiveInfo() {
+  //重置已选择服务指令及服务指令详情
+  derectiveInfo.value = {}
+  directiveId.value = ''
+}
+
+onMounted(() => {
+  queryList({ pageNo: 1, pageSize: 10 })
+})
+
+defineExpose({
+  selectedDirective
+});
+</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%;
+  }
+}
+
+.selected {
+  background-color: lightgreen;
+}
+
+.derectiveInfoClass {
+  border: 1px solid grey;
+  margin: 5px;
+}
+</style>
diff --git a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
index 05011b2..dd7ac7f 100644
--- a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
@@ -234,8 +234,8 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
       fixed: 'right',
     },
     beforeFetch: async (params) => {
-      params.column = 'categoryId,typeId,instructionTagId'
-      params.order = 'asc,asc,asc'
+      params.column = 'createTime'
+      params.order = 'desc'
       let rangerQuery = await setRangeQuery();
       return Object.assign(params, rangerQuery);
     },