diff --git a/src/views/serviceDirective/directivePackage/DirectivePackage.api.ts b/src/views/serviceDirective/directivePackage/DirectivePackage.api.ts
index 0057c16..cf61547 100644
--- a/src/views/serviceDirective/directivePackage/DirectivePackage.api.ts
+++ b/src/views/serviceDirective/directivePackage/DirectivePackage.api.ts
@@ -5,6 +5,7 @@ const { createConfirm } = useMessage();
 
 enum Api {
   list = '/directivePackage/directivePackage/list',
+  queryById = '/directivePackage/directivePackage/queryById',
   save='/directivePackage/directivePackage/add',
   edit='/directivePackage/directivePackage/edit',
   deleteOne = '/directivePackage/directivePackage/delete',
@@ -30,6 +31,12 @@ export const getImportUrl = Api.importExcel;
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
 
+/**
+ * 详情接口
+ * @param params
+ */
+export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
+
 /**
  * 删除单个
  * @param params
diff --git a/src/views/serviceDirective/directivePackage/DirectivePackageList.vue b/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
index d4fa7b3..0651608 100644
--- a/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
+++ b/src/views/serviceDirective/directivePackage/DirectivePackageList.vue
@@ -2,13 +2,12 @@
   <div class="p-2">
     <!--查询区域-->
     <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
-        :wrapper-col="wrapperCol">
+      <a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-row :gutter="24">
           <a-col :lg="6">
             <a-form-item name="packageName">
               <template #label><span title="服务指令包名称">服务指令包</span></template>
-              <JInput v-model:value="queryParam.packageName" />
+              <a-input v-model:value="searchForm.packageName" allow-clear />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -17,98 +16,40 @@
                 <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-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"
+                  style="margin-left: 8px">新增</a-button>
               </a-col>
             </span>
           </a-col>
         </a-row>
       </a-form>
     </div>
-    <!--引用表格-->
-    <BasicTable @register="registerTable">
-      <!--插槽:table标题-->
-      <template #tableTitle>
-        <a-button type="primary" v-auth="'directivePackage:directive_package:add'" @click="handleAdd"
-          preIcon="ant-design:plus-outlined"> 新增</a-button>
-        <!-- <a-button type="primary" v-auth="'directivePackage:directive_package:exportXls'"
-          preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-        <j-upload-button type="primary" v-auth="'directivePackage:directive_package:importExcel'"
-          preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
-        <a-dropdown v-if="selectedRowKeys.length > 0">
-          <template #overlay>
-            <a-menu>
-              <a-menu-item key="1" @click="batchHandleDelete">
-                <Icon icon="ant-design:delete-outlined"></Icon>
-                删除
-              </a-menu-item>
-            </a-menu>
-          </template>
-          <a-button v-auth="'directivePackage:directive_package:deleteBatch'">批量操作
-            <Icon icon="mdi:chevron-down"></Icon>
-          </a-button>
-        </a-dropdown> -->
-        <!-- 高级查询 -->
-        <!-- <super-query :config="superQueryConfig" @search="handleSuperQuery" /> -->
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
-      </template>
-      <template v-slot:bodyCell="{ column, record, index, text }">
-      </template>
-    </BasicTable>
-    <!-- 表单区域 -->
-    <DirectivePackageModal ref="registerModal" @success="handleSuccess"></DirectivePackageModal>
+    <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">
+        <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>
+        </div>
+      </a-card>
+    </div>
   </div>
+  <!-- 表单区域 -->
+  <DirectivePackageModal ref="registerModal" @success="handleSuccess"></DirectivePackageModal>
 </template>
 
 <script lang="ts" name="directivePackage-directivePackage" setup>
-import { ref, reactive } from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { columns, superQuerySchema } from './DirectivePackage.data';
-import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DirectivePackage.api';
-import { downloadFile } from '/@/utils/common/renderUtils';
+import { ref, reactive, onMounted } from 'vue';
 import DirectivePackageModal from './components/DirectivePackageModal.vue'
-import { useUserStore } from '/@/store/modules/user';
-import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+import { list, queryById } from './DirectivePackage.api'
 
-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,
-    canResize: false,
-    useSearchForm: false,
-    actionColumn: {
-      width: 120,
-      fixed: 'right',
-    },
-    beforeFetch: async (params) => {
-      return Object.assign(params, queryParam);
-    },
-  },
-  exportConfig: {
-    name: "服务指令包",
-    url: getExportUrl,
-    params: queryParam,
-  },
-  importConfig: {
-    url: getImportUrl,
-    success: handleSuccess
-  },
-});
-console.log("🎅 ~ tableContext:", tableContext)
-const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+const searchForm = ref({})
+const tableData = ref({})
 const labelCol = reactive({
   xs: 24,
   sm: 4,
@@ -122,117 +63,65 @@ const wrapperCol = reactive({
   xxl: 14
 });
 
-// 高级查询配置
-const superQueryConfig = reactive(superQuerySchema);
-
 /**
- * 高级查询事件
- */
-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) {
-  await deleteOne({ id: record.id }, handleSuccess);
-}
-
-/**
- * 批量删除事件
- */
-async function batchHandleDelete() {
-  await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
-}
-
-/**
- * 成功回调
- */
-function handleSuccess() {
-  (selectedRowKeys.value = []) && reload();
-}
-
-/**
- * 操作栏
- */
-function getTableAction(record) {
-  return [
-    {
-      label: '编辑',
-      onClick: handleEdit.bind(null, record),
-      auth: 'directivePackage:directive_package:edit'
-    },
-  ];
-}
-
-/**
- * 下拉操作栏
- */
-function getDropDownAction(record) {
-  return [
-    {
-      label: '详情',
-      onClick: handleDetail.bind(null, record),
-    }, {
-      label: '删除',
-      popConfirm: {
-        title: '是否确认删除',
-        confirm: handleDelete.bind(null, record),
-        placement: 'topLeft',
-      },
-      auth: 'directivePackage:directive_package:delete'
-    }
-  ]
-}
-
-/**
- * 查询
+ * 搜索
  */
 function searchQuery() {
-  reload();
+  queryList({})
 }
 
 /**
  * 重置
  */
 function searchReset() {
-  formRef.value.resetFields();
-  selectedRowKeys.value = [];
-  //刷新数据
-  reload();
+  searchForm.value = {}
+  queryList({})
 }
 
+/**
+ * 新增
+ */
+function handleAdd() {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.add();
+}
+/**
+ * 成功回调
+ */
+function handleSuccess() {
 
+}
 
+/**
+ * 数据查询
+ */
+function queryList(params) {
+  list({ pageNo: 1, pageSize: 10, packageName: searchForm.value.packageName }).then(res => {
+    tableData.value = res
+  })
+}
 
+/**
+ * 编辑
+ * @param data
+ */
+function packageEdit(data) {
+  queryById({ id: data.id }).then(item => {
+    registerModal.value.edit(item);
+  })
+}
+
+/**
+ * 移除
+ * @param data
+ */
+function remove(data) {
+
+}
+
+onMounted(() => {
+  queryList({ pageNo: 1, pageSize: 10 })
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.api.ts b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.api.ts
new file mode 100644
index 0000000..2f2fcec
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.api.ts
@@ -0,0 +1,72 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/serviceDirective/configServiceDirective/list',
+  save='/serviceDirective/configServiceDirective/add',
+  edit='/serviceDirective/configServiceDirective/edit',
+  deleteOne = '/serviceDirective/configServiceDirective/delete',
+  deleteBatch = '/serviceDirective/configServiceDirective/deleteBatch',
+  importExcel = '/serviceDirective/configServiceDirective/importExcel',
+  exportXls = '/serviceDirective/configServiceDirective/exportXls',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+}
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts
new file mode 100644
index 0000000..17e37c7
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirective.data.ts
@@ -0,0 +1,130 @@
+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: '服务指令名称',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '指令标签',
+    align: 'center',
+    dataIndex: 'tagList',
+    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: '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' },
+};
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue
new file mode 100644
index 0000000..e5655be
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveForm.vue
@@ -0,0 +1,385 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="ConfigServiceDirectiveForm">
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
+                name="categoryId">
+                <j-dict-select-tag type="list" v-model:value="formData.categoryId"
+                  :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
+                  placeholder="请选择服务类别" allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
+                name="typeId">
+                <j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
+                  placeholder="请选择服务类型" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
+                id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
+                <j-dict-select-tag v-model:value="formData.instructionTagId" dictCode="instruction_tag"
+                  placeholder="请选择分类标签" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
+                id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
+                <a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
+                name="tollPrice">
+                <a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%"
+                  precision="4" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
+                name="comPrice">
+                <a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%"
+                  precision="4" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="医保报销" v-bind="validateInfos.izReimbursement"
+                id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
+                <j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode="med_ins_reimb"
+                  allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="机构优惠" v-bind="validateInfos.izPreferential"
+                id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
+                <j-dict-select-tag type='radio' v-model:value="formData.izPreferential"
+                  dictCode="institutional_discount" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="收费频次" v-bind="validateInfos.chargingFrequency"
+                id="ConfigServiceDirectiveForm-chargingFrequency" name="chargingFrequency">
+                <j-dict-select-tag type="list" v-model:value="formData.chargingFrequency" dictCode="billing_frequency"
+                  placeholder="请选择收费频次" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
+                name="cycleType">
+                <j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
+                  placeholder="请选择周期类型" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="服务时长（分钟）" v-bind="validateInfos.serviceDuration"
+                id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
+                <a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5"
+                  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-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">
+                <JCheckbox v-model:value="formData.tags"
+                  :dictCode="`nu_config_directive_tag,tag_name,id,del_flag = 0 order by sort asc`" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
+                name="izEnabled">
+                <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
+                  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">
+              <a-form-item label="语音文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File"
+                name="mp3File">
+                <j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"></j-upload>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File"
+                name="mp4File">
+                <j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"></j-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+    <JFormContainer>
+      <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" name="mp3File">
+                <audio controls disabled="false">
+                  <source :src="getFileAccessHttpUrl(formData.mp3File)">
+                </audio>
+              </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" name="mp4File">
+                <video controls>
+                  <source :src="getFileAccessHttpUrl(formData.mp4File)">
+                </video>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { JCheckbox } from '/@/components/Form';
+import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from './ConfigServiceDirective.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  categoryId: '',
+  typeId: '',
+  instructionTagId: '',
+  directiveName: '',
+  tollPrice: 0,
+  comPrice: 0,
+  izReimbursement: '0',
+  izPreferential: '0',
+  chargingFrequency: '',
+  cycleType: '',
+  sort: 99,
+  serviceContent: '',
+  serviceDuration: '5',
+  izEnabled: '0',
+  createBy: '',
+  createTime: '',
+  updateBy: '',
+  updateTime: '',
+  mp3File: '',
+  mp4File: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
+const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  categoryId: [{ required: true, message: '请选择服务类别!' },],
+  typeId: [{ required: true, message: '请选择服务类型!' },],
+  instructionTagId: [{ required: true, message: '请选择分类标签!' },],
+  directiveName: [{ required: true, message: '请输入服务指令名称!' },],
+  tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
+  comPrice: [{ required: false }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
+  izReimbursement: [{ required: true, message: '请选择是否参与医保报销!' },],
+  izPreferential: [{ required: true, message: '请选择是否参与机构优惠!' },],
+  // chargingFrequency: [{ required: true, message: '请选择收费频次!' },],
+  cycleType: [{ required: true, message: '请选择周期类型!' },],
+  // sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
+  serviceDuration: [
+    { required: true, message: '请输入服务时长（分钟）!' },
+    { pattern: /^\d+$/, message: '请输入正整数!' },
+    {
+      validator: (_, value) => {
+        if (value % 5 !== 0) {
+          return Promise.reject('请输入5的倍数!');
+        }
+        return Promise.resolve();
+      },
+    },
+    {
+      validator: (_, value) => {
+        if (value < 5 || value > 55) {
+          return Promise.reject('请输入5到55之间的值!');
+        }
+        return Promise.resolve();
+      },
+    },
+  ],
+  izEnabled: [{ required: true, message: '请选择是否启用!' },],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+const typeDictCode = ref('')
+
+watch(
+  () => formData.categoryId,
+  (newCategoryId) => {
+    if (!newCategoryId) {
+      formData.typeId = '';
+      typeDictCode.value = 'nu_config_service_type,type_name,id,del_flag = 99 order by sort asc';
+    } else {
+      typeDictCode.value = `nu_config_service_type,type_name,id,del_flag = 0 and category_id = '${newCategoryId}' order by sort asc`;
+    }
+  }
+);
+
+/**
+ * 新增
+ */
+function add() {
+  edit({});
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  formData.tags = ''
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+
+  //提成价格不能高于收费价格
+  if (model.tollPrice <= model.comPrice) {
+    createMessage.warning('提成价格不能高于收费价格！');
+    confirmLoading.value = false;
+    retrun;
+  }
+
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  padding: 14px;
+}
+</style>
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue
new file mode 100644
index 0000000..6b3a6fe
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveList.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="p-2">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
+        :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="categoryId">
+              <template #label><span title="服务类别">服务类别</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
+                :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
+                :ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="typeId">
+              <template #label><span title="服务类型">服务类型</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.typeId"
+                :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 order by sort asc`" placeholder="请选择服务类型"
+                :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>
+        </a-row>
+      </a-form>
+    </div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" @row-click="handleRowClick"
+      :scroll="{ x: '100%', y: '60vh' }">
+      <!--插槽: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 }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+      </template>
+    </BasicTable>
+
+    <a-table :columns="selectedColumns" :data-source="selected" :scroll="{ x: '100%', y: '60vh' }" :pagination="false">
+      <template #action="{ record }">
+        <a @click="deleteDirective(record.id)">移除</a>
+      </template>
+    </a-table>
+
+    <!-- 表单区域 -->
+    <ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess"></ConfigServiceDirectiveModal>
+  </div>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+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 { 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';
+
+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,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    actionColumn: {
+      width: 160,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      params.column = 'categoryId,typeId,instructionTagId'
+      params.order = 'asc,asc,asc'
+      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;
+const selected = computed(() => {
+  console.log("🎅 ~ selected ~ rowSelection:", rowSelection)
+  return rowSelection.selectedRows;
+});
+const labelCol = reactive({
+  xs: 24,
+  sm: 4,
+  xl: 8,
+  xxl: 6
+});
+const wrapperCol = reactive({
+  xs: 24,
+  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);
+}
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    }
+  ];
+}
+
+/**
+ * 下拉操作栏
+ */
+function getDropDownAction(record) {
+  return [
+
+  ]
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  formRef.value.resetFields();
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
+
+
+
+
+
+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;
+}
+
+//服务类别抽屉打开
+function handleCategory() {
+  categoryOpen.value = true
+}
+//服务类型抽屉打开
+function handleType() {
+  typeOpen.value = true
+}
+//指令标签抽屉打开
+function handleTag() {
+  tagOpen.value = true
+}
+//服务类别抽屉关闭
+function onCategoryClose() {
+  categoryOpen.value = false
+}
+
+//服务类型抽屉关闭
+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);
+  } 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)
+  }
+}
+defineExpose({
+  selected,
+  deleteDirective
+});
+</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;
+}
+</style>
diff --git a/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue
new file mode 100644
index 0000000..0aecc0f
--- /dev/null
+++ b/src/views/serviceDirective/directivePackage/components/ConfigServiceDirectiveModal.vue
@@ -0,0 +1,78 @@
+<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>
+</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 { 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']);
+
+
+  /**
+   * 新增
+   */
+  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;
+  }
+</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 63d0d6b..66caa4c 100644
--- a/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue
+++ b/src/views/serviceDirective/directivePackage/components/DirectivePackageForm.vue
@@ -2,28 +2,33 @@
   <a-spin :spinning="confirmLoading">
     <JFormContainer :disabled="disabled">
       <template #detail>
-        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="DirectivePackageForm">
+        <a-form ref="formRef" class="antd-modal-form" layout="vertical" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="DirectivePackageForm">
           <a-row>
-						<a-col :span="24">
-							<a-form-item label="服务指令包名称" v-bind="validateInfos.packageName" id="DirectivePackageForm-packageName" name="packageName">
-								<a-input v-model:value="formData.packageName" placeholder="请输入服务指令包名称"  allow-clear ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="备注" v-bind="validateInfos.description" id="DirectivePackageForm-description" name="description">
-								<a-textarea v-model:value="formData.description" :rows="4" placeholder="请输入备注" />
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="排序" v-bind="validateInfos.sort" id="DirectivePackageForm-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="是否启用 0启用 1未启用" v-bind="validateInfos.izEnabled" id="DirectivePackageForm-izEnabled" name="izEnabled">
-								<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled" placeholder="请选择是否启用 0启用 1未启用"  allow-clear />
-							</a-form-item>
-						</a-col>
+            <a-col :span="24">
+              <a-form-item label="服务指令包名称" v-bind="validateInfos.packageName" id="DirectivePackageForm-packageName"
+                name="packageName">
+                <a-input v-model:value="formData.packageName" placeholder="请输入服务指令包名称" allow-clear></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="备注" v-bind="validateInfos.description" id="DirectivePackageForm-description"
+                name="description">
+                <a-textarea v-model:value="formData.description" :rows="4" placeholder="请输入备注" />
+              </a-form-item>
+            </a-col>
+            <!-- <a-col :span="24">
+              <a-form-item label="排序" v-bind="validateInfos.sort" id="DirectivePackageForm-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="是否启用" v-bind="validateInfos.izEnabled" id="DirectivePackageForm-izEnabled"
+                name="izEnabled">
+                <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
+                  placeholder="是否启用" allow-clear />
+              </a-form-item>
+            </a-col>
           </a-row>
         </a-form>
       </template>
@@ -32,135 +37,148 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-  import { getValueType } from '/@/utils';
-  import { saveOrUpdate } from '../DirectivePackage.api';
-  import { Form } from 'ant-design-vue';
-  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
-  const props = defineProps({
-    formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: () => ({})},
-    formBpm: { type: Boolean, default: true }
-  });
-  const formRef = ref();
-  const useForm = Form.useForm;
-  const emit = defineEmits(['register', 'ok']);
-  const formData = reactive<Record<string, any>>({
-    id: '',
-    packageName: '',   
-    description: '',   
-    sort: 99,
-    izEnabled: '0',   
-  });
-  const { createMessage } = useMessage();
-  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
-  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
-  const confirmLoading = ref<boolean>(false);
-  //表单验证
-  const validatorRules = reactive({
-    packageName: [{ required: true, message: '请输入服务指令包名称!'},],
-    sort: [{ required: true, message: '请输入排序!'}, { pattern: /^-?\d+$/, message: '请输入整数!'},],
-  });
-  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from '../DirectivePackage.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  packageName: '',
+  description: '',
+  sort: 99,
+  izEnabled: '0',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({
+  xs: { span: 24 },
+  sm: { span: 5 },
+  xl: 16,
+  xxl: 16
+});
+const wrapperCol = ref<any>({
+  xs: { span: 24 },
+  sm: { span: 16 },
+  xl: 24,
+  xxl: 24
+});
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  packageName: [{ required: true, message: '请输入服务指令包名称!' },],
+  sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入整数!' },],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
 
-  // 表单禁用
-  const disabled = computed(()=>{
-    if(props.formBpm === true){
-      if(props.formData.disabled === false){
-        return false;
-      }else{
-        return true;
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  edit({});
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm(directives) {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
       }
     }
-    return props.formDisabled;
-  });
-
-  
-  /**
-   * 新增
-   */
-  function add() {
-    edit({});
+    return Promise.reject(errorFields);
   }
-
-  /**
-   * 编辑
-   */
-  function edit(record) {
-    nextTick(() => {
-      resetFields();
-      const tmpData = {};
-      Object.keys(formData).forEach((key) => {
-        if(record.hasOwnProperty(key)){
-          tmpData[key] = record[key]
-        }
-      })
-      //赋值
-      Object.assign(formData, tmpData);
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  if (directives.value.length > 0) {
+    model.directives = directives.value
+  }
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
-  }
-
-  /**
-   * 提交数据
-   */
-  async function submitForm() {
-    try {
-      // 触发表单验证
-      await validate();
-    } catch ({ errorFields }) {
-      if (errorFields) {
-        const firstField = errorFields[0];
-        if (firstField) {
-          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
-        }
-      }
-      return Promise.reject(errorFields);
-    }
-    confirmLoading.value = true;
-    const isUpdate = ref<boolean>(false);
-    //时间格式化
-    let model = formData;
-    if (model.id) {
-      isUpdate.value = true;
-    }
-    //循环数据
-    for (let data in model) {
-      //如果该数据是数组并且是字符串类型
-      if (model[data] instanceof Array) {
-        let valueType = getValueType(formRef.value.getProps, data);
-        //如果是字符串类型的需要变成以逗号分割的字符串
-        if (valueType === 'string') {
-          model[data] = model[data].join(',');
-        }
-      }
-    }
-    await saveOrUpdate(model, isUpdate.value)
-      .then((res) => {
-        if (res.success) {
-          createMessage.success(res.message);
-          emit('ok');
-        } else {
-          createMessage.warning(res.message);
-        }
-      })
-      .finally(() => {
-        confirmLoading.value = false;
-      });
-  }
+}
 
 
-  defineExpose({
-    add,
-    edit,
-    submitForm,
-  });
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
 </script>
 
 <style lang="less" scoped>
-  .antd-modal-form {
-    padding: 14px;
-  }
+.antd-modal-form {
+  padding: 14px;
+}
 </style>
diff --git a/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue b/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
index 846a2e1..1c4e1ab 100644
--- a/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
+++ b/src/views/serviceDirective/directivePackage/components/DirectivePackageModal.vue
@@ -1,77 +1,187 @@
 <template>
-  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+  <!-- <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>
+  </j-modal> -->
+  <a-drawer v-model:open="visible" v-if="visible" :title="title" width="85vw" :closable="false"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <div style="display:flex;justify-content:space-between">
+      <div>
+        <a-card title="服务指令包详情" style="width: 27vw">
+          <DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+          </DirectivePackageForm>
+        </a-card>
+      </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"
+            :class="{ 'selected': selectedDirective === directive.id }" @click="directiveInfo(directive)">
+            {{ directive.directiveName }}
+            <div style="float:right;">
+              <a href="#" @click="deleteDirective(directive.id)">移除</a>
+            </div>
+          </div>
+        </a-card>
+      </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="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">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
+          <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
+          <div class="directiveInfoClass">指令标签：{{ derectiveInfo.tags }}</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>
+    </div>
+
+
+    <a-drawer v-model:open="childrenDrawer" title="选择服务指令" width="80vw" :closable="false"
+      :footer-style="{ textAlign: 'right' }">
+      <ConfigServiceDirectiveList ref="configServiceDirectiveListRef"></ConfigServiceDirectiveList>
+      <template #footer>
+        <a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
+        <a-button type="primary" @click="handleDirectiveOk">确定</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>
+    </template>
+  </a-drawer>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, defineExpose } from 'vue';
-  import DirectivePackageForm from './DirectivePackageForm.vue'
-  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
-  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(['register', 'success']);
+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';
 
-  /**
-   * 新增
-   */
-  function add() {
-    title.value = '新增';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.add();
-    });
+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 configServiceDirectiveListRef = ref()
+const derectiveInfo = ref({})
+const directives = computed(() => {
+  if (configServiceDirectiveListRef.value) {
+    return configServiceDirectiveListRef.value.selected
+  } else {
+    return []
   }
-  
-  /**
-   * 编辑
-   * @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,
+})
+const selectedDirective = ref()
+/**
+ * 新增
+ */
+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(directives);
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+const showChildrenDrawer = () => {
+  childrenDrawer.value = true;
+};
+
+function handleDirectiveCancel() {
+  childrenDrawer.value = false;
+}
+
+function handleDirectiveOk() {
+  childrenDrawer.value = false;
+}
+
+function directiveInfo(directive) {
+  selectedDirective.value = directive.id
+  derectiveInfo.value = directive
+}
+
+function deleteDirective(directiveId) {
+  setTimeout(() => {
+    derectiveInfo.value = {}
+  }, 200)
+  configServiceDirectiveListRef.value.deleteDirective(directiveId)
+}
+
+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>
+.selected {
+  background-color: lightgreen;
+}
+
+.directiveInfoClass {
+  margin-top: 10px;
+}
 </style>
-<style lang="less" scoped></style>
diff --git a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
index 447e1b5..05011b2 100644
--- a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveList.vue
@@ -61,13 +61,21 @@
                   dictCode="institutional_discount" :ignoreDisabled="true" placeholder="请选择机构优惠" allowClear />
               </a-form-item>
             </a-col>
-            <a-col :lg="6">
+            <!-- <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>
@@ -205,6 +213,7 @@ import ConfigServiceCategoryList from '../serviceCategory/ConfigServiceCategoryL
 import ConfigServiceTypeList from '../serviceType/ConfigServiceTypeList.vue';
 import DirectiveTagList from '../directiveTag/DirectiveTagList.vue';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
 
 const formRef = ref();
 const queryParam = reactive<any>({});