服务指令树

src/views/services/instructiontag/components/InstructionTagForm.vue

@@ -46,7 +46,7 @@ const props = defineProps({
 });
 const formRef = ref();
 const useForm = Form.useForm;
-const emit = defineEmits(['register', 'ok']);
+const emit = defineEmits(['register', 'ok', 'refresh']);
 const formData = reactive<Record<string, any>>({
   id: '',
   instructionName: '',

src/views/services/instructiontag/components/InstructionTagModal.vue

@@ -1,6 +1,9 @@
 <template>
-  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
-    <InstructionTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></InstructionTagForm>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk"
+    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <InstructionTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
+      :formBpm="false">
+    </InstructionTagForm>
   </j-modal>
 </template>
 
@@ -8,13 +11,16 @@
 import { ref, nextTick, defineExpose } from 'vue';
 import InstructionTagForm from './InstructionTagForm.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { saveOrUpdate } from '../InstructionTag.api';
 
+const { createMessage } = 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(['register', 'success']);
+const emit = defineEmits(['register', 'success', 'refresh']);
 
 /**
  * 新增
@@ -61,10 +67,26 @@
   visible.value = false;
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('success')
+  })
+}
+
 defineExpose({
   add,
   edit,
   disableSubmit,
+  usingOrStop,
 });
 </script>
 

src/views/services/serviceCategory/components/ConfigServiceCategoryForm.vue

@@ -55,7 +55,7 @@ const props = defineProps({
 });
 const formRef = ref();
 const useForm = Form.useForm;
-const emit = defineEmits(['register', 'ok']);
+const emit = defineEmits(['register', 'ok', 'refresh']);
 const formData = reactive<Record<string, any>>({
   id: '',
   categoryName: '',
@@ -161,11 +161,26 @@ async function submitForm() {
     });
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('refresh')
+  })
+}
 
 defineExpose({
   add,
   edit,
   submitForm,
+  usingOrStop,
 });
 </script>
 

src/views/services/serviceCategory/components/ConfigServiceCategoryModal.vue

@@ -1,6 +1,9 @@
 <template>
-  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
-    <ConfigServiceCategoryForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigServiceCategoryForm>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk"
+    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <ConfigServiceCategoryForm ref="registerForm" @ok="submitCallback" 
+      :formDisabled="disableSubmit" :formBpm="false">
+    </ConfigServiceCategoryForm>
   </j-modal>
 </template>
 
@@ -8,13 +11,16 @@
 import { ref, nextTick, defineExpose } from 'vue';
 import ConfigServiceCategoryForm from './ConfigServiceCategoryForm.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { saveOrUpdate } from '../ConfigServiceCategory.api';
 
+const { createMessage } = 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(['register', 'success']);
+const emit = defineEmits(['register', 'success', 'refresh']);
 
 /**
  * 新增
@@ -61,10 +67,26 @@
   visible.value = false;
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('success')
+  })
+}
+
 defineExpose({
   add,
   edit,
   disableSubmit,
+  usingOrStop,
 });
 </script>
 

src/views/services/serviceDirective/ConfigServiceDirective.api.ts

@@ -13,7 +13,8 @@ enum Api {
   exportXls = '/services/serviceDirective/exportXls',
   async = '/services/serviceDirective/async',
   departList = '/sys/sysDepart/list',
-
+  tree = '/services/serviceDirective/tree',
+  queryById = '/services/serviceDirective/queryById',
 }
 
 /**
@@ -33,7 +34,7 @@ export const getImportUrl = Api.importExcel;
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
 export const departList = (params) => defHttp.get({ url: Api.departList, params });
-
+export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
 /**
  * 删除单个
  * @param params
@@ -82,3 +83,10 @@ export const saveOrUpdate = (params, isUpdate) => {
 export const asyncFunc = (params) => {
   return defHttp.post({ url: Api.async, params }, { isTransformResponse: false });
 }
+
+/**
+ * 获取树结构
+ * @param params 
+ * @returns 
+ */
+export const tree = () => defHttp.get({ url: Api.tree });

src/views/services/serviceDirective/ConfigServiceDirectiveList.vue

@@ -5,7 +5,7 @@
       <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-col :lg="6">
             <a-form-item name="instructionTagId">
               <template #label><span title="分类标签">分类标签</span></template>
 <j-dict-select-tag v-model:value="queryParam.instructionTagId"
@@ -30,7 +30,7 @@
       :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = '${queryParam.categoryId || ''}' order by sort asc`"
       placeholder="请选择服务类型" allowClear :ignoreDisabled="true" />
   </a-form-item>
-          </a-col>
+</a-col> -->
           <a-col :lg="6">
             <a-form-item name="directiveName">
               <template #label><span title="服务指令">服务指令</span></template>
@@ -72,15 +72,47 @@
         </a-row>
       </a-form>
     </div>
+    <div>
+      <div style="width:350px;float: left;max-height:77vh; overflow:auto;">
+        <a-empty v-if="treeLoading" />
+        <a-tree v-else :tree-data="treeData" v-model:expandedKeys="expandedKeys" expandAction="click">
+          <template #title="{ data }">
+            <span class="node-title" @mouseenter="onNodeEnter(data, data.children)" @mouseleave="onNodeLeave(data)">
+              <span v-if="data.level == 4">{{ data?.title + '(' + data?.cycleTypeName + ')' }}</span>
+              <span v-else>{{ data?.title }}</span>
+              <span v-if="data?.izEnabled == '1'" style="color:red;">(已停用)</span>
+              <!-- 下拉菜单 -->
+              <a-dropdown :open="menuState[data?.key]?.open" @openChange="onMenuOpenChange(data.key, $event)">
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item v-for="item in menuItems(data)" :key="item.key"
+                      @click="() => { closeAllMenus(); item.action(data) }">
+                      <Icon style="color:#1890FF;" :icon="item.icon" class="action-icon"></Icon>
+                      <span style=" color:#1890FF;margin-left: 5px;">{{ item.label }}</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+                <!-- 图标 -->
+                <Icon style="color:#1890FF;" :icon="iconClass(data.level)" class="action-icon"
+                  @click.stop="openMenu(data, data.children, $event)"
+                  @contextmenu.prevent="openMenu(data, data.children, $event)"></Icon>
+              </a-dropdown>
+            </span>
+          </template>
+        </a-tree>
+      </div>
+      <div style="width:calc(100% - 360px);float: left;margin-left: 10px;">
         <!--引用表格-->
         <BasicTable @register="registerTable">
           <!--插槽:table标题-->
           <template #tableTitle>
             <a-button type="primary" class="btnPrivate" @click="handleinstructionTag"
               preIcon="tabler:settings">配置分类标签</a-button>
-        <a-button type="primary" class="btnPrivate" @click="handleCategory" preIcon="tabler:settings">配置服务类别</a-button>
+            <a-button type="primary" class="btnPrivate" @click="handleCategory"
+              preIcon="tabler:settings">配置服务类别</a-button>
             <a-button type="primary" class="btnPrivate" @click="handleType" preIcon="tabler:settings">配置服务类型</a-button>
-        <a-button type="primary" class="btnPrivate" @click="handleBodyTag" preIcon="tabler:settings">配置体型标签</a-button>
+            <a-button type="primary" class="btnPrivate" @click="handleBodyTag"
+              preIcon="tabler:settings">配置体型标签</a-button>
             <a-button type="primary" class="btnPrivate" @click="handleEmotionTag"
               preIcon="tabler:settings">配置情绪标签</a-button>
             <a-button type="primary" class="btnPrivate" @click="handleAdd"
@@ -137,6 +169,10 @@
             </template>
           </template>
         </BasicTable>
+      </div>
+
+    </div>
+
     <!-- 表单区域 -->
     <ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess">
     </ConfigServiceDirectiveModal>
@@ -199,14 +235,19 @@
       您的浏览器不支持视频播放。
     </video>
   </a-modal>
+
+  <!-- 分类标签 -->
+  <InstructionTagModal ref="insRegisterModal" @success="reloadTree"></InstructionTagModal>
+  <ConfigServiceCategoryModal ref="catRegisterModal" @success="reloadTree"></ConfigServiceCategoryModal>
+  <ConfigServiceTypeModal ref="typRegisterModal" @success="reloadTree"></ConfigServiceTypeModal>
 </template>
 
 <script lang="ts" name="serviceDirective-configServiceDirective" setup>
-import { ref, reactive, watch, onMounted } from 'vue';
+import { ref, reactive, watch, onMounted, computed } from 'vue';
 import { BasicTable, 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 { list, deleteOne, batchDelete, getImportUrl, getExportUrl, tree } from './ConfigServiceDirective.api';
 import ConfigServiceDirectiveModal from './components/ConfigServiceDirectiveModal.vue'
 import { useUserStore } from '/@/store/modules/user';
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
@@ -218,7 +259,15 @@ import ConfigServiceTypeList from '../serviceType/ConfigServiceTypeList.vue';
 import BodyTagList from '/@/views/services/directivetag/bodytag/BodyTagList.vue';
 import EmotionTagList from '/@/views/services/directivetag/emotiontag/EmotionTagList.vue';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { Empty } from 'ant-design-vue';
+import InstructionTagModal from '/@/views/services/InstructionTag/components/InstructionTagModal.vue'
+import ConfigServiceCategoryModal from '/@/views/services/serviceCategory/components//ConfigServiceCategoryModal.vue'
+import ConfigServiceTypeModal from '/@/views/services/serviceType/components//ConfigServiceTypeModal.vue'
 
+const insRegisterModal = ref();
+const catRegisterModal = ref();
+const typRegisterModal = ref();
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const formRef = ref();
 const queryParam = reactive<any>({
   instructionTagId: '',
@@ -242,6 +291,7 @@ watch(
 )
 const toggleSearchStatus = ref<boolean>(false);
 const registerModal = ref();
+const treeData = ref<any>([]);
 const userStore = useUserStore();
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@@ -252,6 +302,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     canResize: false,
     useSearchForm: false,
     showIndexColumn: true,
+    scroll: { y: '58vh' },
     pagination: {
       current: 1,
       pageSize: 10,
@@ -341,25 +392,13 @@ function handleDetail(record: Recordable) {
   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();
+  reloadTree()
 }
 
 /**
@@ -375,10 +414,10 @@ function getTableAction(record) {
       label: '编辑',
       onClick: handleEdit.bind(null, record)
     },
-    // {
-    //   label: '指令资源',
-    //   onClick: handleMedia.bind(null, record)
-    // },
+    {
+      label: '指令资源',
+      onClick: handleMedia.bind(null, record)
+    },
   ];
 }
 
@@ -387,7 +426,6 @@ function getTableAction(record) {
  */
 function getDropDownAction(record) {
   return [
-
   ]
 }
 
@@ -408,10 +446,6 @@ function searchReset() {
   reload();
 }
 
-
-
-
-
 let rangeField = 'tollPrice,comPrice,'
 
 /**
@@ -569,6 +603,237 @@ const stopAudio = () => {
   }
 };
 
+
+const clickCount = ref(0);
+const treeChildData = ref<any>([]);
+const expandedKeys = ref<string[]>([]);
+
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys);
+});
+
+// 为每个 node 维护一个菜单状态和 hover 定时器
+const menuState = reactive<Record<string, { timer?: number, openedByClick: boolean, open: boolean }>>({
+
+})
+
+function onNodeEnter(node, level) {
+  const key = node.key
+  if (!menuState[key]) {
+    menuState[key] = { openedByClick: false, open: false }
+  }
+  // 只有前三级需要自动弹
+  if (level <= 3 && !menuState[key].openedByClick) {
+    menuState[key].timer = window.setTimeout(() => {
+      menuState[key].open = true
+    }, 2000)
+  }
+}
+
+function onNodeLeave(node) {
+  const s = menuState[node.key]
+  if (s?.timer) {
+    clearTimeout(s.timer)
+    delete s.timer
+  }
+}
+
+// 用户点击图标手动打开
+function openMenu(node, level, ev) {
+  const key = node.key
+  if (!menuState[key]) menuState[key] = { openedByClick: false, open: false }
+  menuState[key].openedByClick = true
+  menuState[key].open = true
+}
+
+// 鼠标悬浮：打开或关闭，但不覆盖由点击打开后的状态切换
+function onNodeHover(key: string, level: number, enter: boolean) {
+  if (!menuState[key]) menuState[key] = { open: false, openedByClick: false }
+  // 只有鼠标移入时，且不是由点击保持打开时，才打开
+  if (enter && !menuState[key].openedByClick) {
+    closeAllMenus()
+    menuState[key].open = true
+  }
+  // 鼠标移出时，如果不是点击打开的，就关闭
+  if (!enter && !menuState[key].openedByClick) {
+    menuState[key].open = false
+  }
+}
+
+// 点击图标：切换状态，并且每次点击前先关闭其它菜单
+function onIconClick(key: string, level: number) {
+  if (!menuState[key]) menuState[key] = { open: false, openedByClick: false }
+  // 先关掉其它
+  closeAllMenus()
+  // 再切换当前
+  menuState[key].openedByClick = !menuState[key].openedByClick
+  menuState[key].open = menuState[key].openedByClick
+}
+
+// 当 Dropdown 自身触发 openChange（比如点击外部关闭）时，同步状态
+function onMenuOpenChange(key: string, open: boolean) {
+  if (!menuState[key]) menuState[key] = { open: false, openedByClick: false }
+  menuState[key].open = open
+  // 如果是外部关闭，则重置 clicked 状态
+  if (!open) menuState[key].openedByClick = false
+}
+
+// 关闭所有菜单工具函数
+function closeAllMenus() {
+  Object.keys(menuState).forEach(k => {
+    menuState[k].open = false
+    menuState[k].openedByClick = false
+  })
+}
+
+// 根据层级返回图标 class
+function iconClass(level: number) {
+  switch (level) {
+    case 1: return 'ant-design:setting-twotone'
+    case 2: return 'ant-design:setting-twotone'
+    case 3: return 'ant-design:setting-twotone'
+    case 4: return 'ant-design:setting-outlined'
+    default: return 'ant-design:setting-outlined'
+  }
+}
+
+//新增分类标签
+function addInstruction() {
+  insRegisterModal.value.disableSubmit = false;
+  insRegisterModal.value.add();
+}
+//启用分类标签
+function usingInstruction(data) {
+  insRegisterModal.value.usingOrStop(data.instructionId, '0')
+}
+//停用分类标签
+function stopInstruction(data) {
+  insRegisterModal.value.usingOrStop(data.instructionId, '1')
+}
+//新增服务类别
+function addCategory(data) {
+  catRegisterModal.value.disableSubmit = false;
+  catRegisterModal.value.edit({ instructionId: data.instructionId });
+}
+//启用服务类别
+function usingCategory(data) {
+  catRegisterModal.value.usingOrStop(data.categoryId, '0')
+}
+//停用服务类别
+function stopCategory(data) {
+  catRegisterModal.value.usingOrStop(data.categoryId, '1')
+}
+//新增服务类型
+function addType(data) {
+  typRegisterModal.value.disableSubmit = false;
+  typRegisterModal.value.edit({ instructionId: data.instructionId, categoryId: data.categoryId });
+}
+//启用服务类型
+function usingType(data) {
+  typRegisterModal.value.usingOrStop(data.typeId, '0')
+}
+//停用服务类型
+function stopType(data) {
+  typRegisterModal.value.usingOrStop(data.typeId, '1')
+}
+//新增服务指令
+function addDirective(data) {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.edit({ instructionTagId: data.instructionId, categoryId: data.categoryId, typeId: data.typeId });
+}
+//编辑务指令
+function editDirective(data) {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.queryByIdFunc(data.key);
+}
+//启用服务指令
+function usingDirective(data) {
+  registerModal.value.usingOrStop(data.key, '0');
+}
+//停用服务指令
+function stopDirective(data) {
+  registerModal.value.usingOrStop(data.key, '1');
+}
+
+// 根据层级返回菜单项
+function menuItems(data) {
+  if (data.level === 1) {
+    const items = [
+      { key: 'addIns', label: '新增分类标签', icon: 'ant-design:plus-outlined', action: addInstruction },
+    ]
+    if (data.canAdd) {
+      items.push({ key: 'addCat', label: '新增服务类别', icon: 'ant-design:plus-outlined', action: addCategory })
+    }
+    if (data.izEnabled === '1') {
+      items.push({ key: 'usingIns', label: '启用分类标签', icon: 'ant-design:check-circle-outlined', action: usingInstruction })
+    } else if (data.izEnabled === '0') {
+      items.push({ key: 'stopIns', label: '停用分类标签', icon: 'ant-design:stop-outlined', action: stopInstruction })
+    }
+    return items
+  }
+  else if (data.level === 2) {
+    const items = [
+      { key: 'addCat', label: '新增服务类别', icon: 'ant-design:plus-outlined', action: addCategory },
+    ]
+    if (data.canAdd) {
+      items.push({ key: 'addTyp', label: '新增服务类型', icon: 'ant-design:plus-outlined', action: addType })
+    }
+    if (data.izEnabled === '1') {
+      items.push({ key: 'usingCat', label: '启用服务类别', icon: 'ant-design:check-circle-outlined', action: usingCategory })
+    } else if (data.izEnabled === '0') {
+      items.push({ key: 'stopCat', label: '停用服务类别', icon: 'ant-design:stop-outlined', action: stopCategory })
+    }
+    return items
+  }
+  else if (data.level === 3) {
+    const items = [
+      { key: 'addTyp', label: '新增服务类型', icon: 'ant-design:plus-outlined', action: addType },
+    ]
+    if (data.canAdd) {
+      items.push({ key: 'addDir', label: '新增服务指令', icon: 'ant-design:plus-outlined', action: addDirective })
+    }
+    if (data.izEnabled === '1') {
+      items.push({ key: 'usingTyp', label: '启用服务类型', icon: 'ant-design:check-circle-outlined', action: usingType })
+    } else if (data.izEnabled === '0') {
+      items.push({ key: 'stopTyp', label: '停用服务类型', icon: 'ant-design:stop-outlined', action: stopType })
+    }
+    return items
+  }
+  else if (data.level === 4) {
+    const items = [
+      { key: 'editDir', label: '编辑服务指令', icon: 'ant-design:edit-outlined', action: editDirective },
+    ]
+    if (data.canAdd) {
+      items.push({ key: 'addDir', label: '新增服务指令', icon: 'ant-design:plus-outlined', action: addDirective })
+    }
+    if (data.izEnabled === '1') {
+      items.push({ key: 'usingDir', label: '启用服务指令', icon: 'ant-design:check-circle-outlined', action: usingDirective })
+    } else if (data.izEnabled === '0') {
+      items.push({ key: 'stopDir', label: '停用服务指令', icon: 'ant-design:stop-outlined', action: stopDirective })
+    }
+    return items
+  }
+  return []
+}
+
+
+// 递归取每级第一个 key
+function setDefaultExpanded(nodes: any[]) {
+  if (!nodes?.length) return
+  const first = nodes[0]
+  expandedKeys.value.push(first.key)
+  if (first.children?.length) {
+    setDefaultExpanded(first.children)
+  }
+}
+const treeLoading = ref(false)
+
+function reloadTree() {
+  console.log(3333)
+  tree().then(res => {
+    treeData.value = res;
+  })
+}
 // 添加音频结束监听
 onMounted(() => {
   if (audioPlayer.value) {
@@ -576,10 +841,18 @@ onMounted(() => {
       isPlaying.value = false;
     });
   }
+  treeLoading.value = true
+  tree().then(res => {
+    treeData.value = res;
+    expandedKeys.value = []
+    //默认展开每级第一个
+    setDefaultExpanded(res)
+  })
+    .finally(() => {
+      treeLoading.value = false
+    })
 });
 
-onMounted(() => {
-})
 </script>
 
 <style lang="less" scoped>
@@ -626,4 +899,14 @@ audio::-webkit-media-controls-time-remaining-display {
   height: 34px;
   margin-left: 4px;
 }
+
+.node-title {
+  display: inline-flex;
+  align-items: center;
+}
+
+.action-icon {
+  margin-left: 4px;
+  cursor: pointer;
+}
 </style>

src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue

@@ -2,8 +2,18 @@
   <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk"
     :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
     :maskClosable="false">
+    <template #footer>
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="handleOk" :loading="loading">确定</a-button>
+      <!-- <a-button @click="handleOk" v-show="opeType == 'edit' || opeType == 'audit'">确定</a-button>
+      <a-button @click="handleSave" v-show="opeType == 'editMedia' || opeType == 'auditMedia'">暂存</a-button>
+      <a-button type="primary" @click="handleMediaAsync" v-show="opeType == 'auditMedia'">同步</a-button>
+      <a-button type="primary" @click="handleMediaSyncAllPlat" v-show="opeType == 'editMedia'">同步</a-button> -->
+    </template>
+    <a-spin :spinning="loading">
       <ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
         :formBpm="false"></ConfigServiceDirectiveForm>
+    </a-spin>
   </j-modal>
 </template>
 
@@ -11,7 +21,11 @@
 import { ref, nextTick, defineExpose, defineProps } from 'vue';
 import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { saveOrUpdate, queryById } from '../ConfigServiceDirective.api';
 
+const loading = ref(false)
+const { createMessage } = useMessage();
 const props = defineProps({
 });
 const title = ref<string>('');
@@ -78,11 +92,37 @@ function handleCancel() {
   visible.value = false;
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('success')
+  })
+}
+
+function queryByIdFunc(id) {
+  loading.value = true
+  queryById({ id }).then(res => {
+    edit(res)
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
 defineExpose({
   add,
   edit,
   editMedia,
   disableSubmit,
+  usingOrStop,
+  queryByIdFunc,
 });
 </script>
 

src/views/services/serviceType/components/ConfigServiceTypeForm.vue

@@ -63,7 +63,7 @@ const props = defineProps({
 });
 const formRef = ref();
 const useForm = Form.useForm;
-const emit = defineEmits(['register', 'ok']);
+const emit = defineEmits(['register', 'ok', 'refresh']);
 const formData = reactive<Record<string, any>>({
   id: '',
   instructionId: '',
@@ -184,10 +184,26 @@ async function submitForm() {
     });
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('refresh')
+  })
+}
+
 defineExpose({
   add,
   edit,
   submitForm,
+  usingOrStop,
 });
 </script>
 

src/views/services/serviceType/components/ConfigServiceTypeModal.vue

@@ -10,13 +10,16 @@
 import { ref, nextTick, defineExpose } from 'vue';
 import ConfigServiceTypeForm from './ConfigServiceTypeForm.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { saveOrUpdate } from '../ConfigServiceType.api';
 
+const { createMessage } = 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(['register', 'success']);
+const emit = defineEmits(['register', 'success', 'refresh']);
 
 /**
  * 新增
@@ -63,10 +66,26 @@ function handleCancel() {
   visible.value = false;
 }
 
+function usingOrStop(id, izEnabled) {
+  let params = {
+    id,
+    izEnabled
+  }
+  saveOrUpdate(params, true).then((res) => {
+    if (res.success) {
+      createMessage.success(res.message);
+    } else {
+      createMessage.warning(res.message);
+    }
+    emit('success')
+  })
+}
+
 defineExpose({
   add,
   edit,
   disableSubmit,
+  usingOrStop,
 });
 </script>