修改页面

src/views/dataService/serviceManage/callerManage/GroupTree.vue

+<template>
+  <div class="m-5 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title=""
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { TreeData } from './mock.ts';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+
+  defineOptions({ name: 'DataSourceTree' });
+
+  const emit = defineEmits(['select']);
+  const { createMessage } = useMessage();
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  const [registerModal, { openModal }] = useModal();
+  async function fetch() {
+    treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  // function handleSelect() {
+  //   const keys = getTree().getSelectedKeys();
+  //   const node = getTree().getSelectedNode(keys[0]);
+  //   // console.log('node', node);
+  //   emit('select', node);
+  // }
+
+  /**选中的数据*/
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/dataService/serviceManage/callerManage/details.vue

 <template>
   <div class="callerManage_details">
-    <div class="header">
-      <Icon @click="handleGoBack" class="backBtn" icon="ant-design:left-outlined" :size="20"  :color="'#666C81'" />
-      <Icon icon="ant-design:user-switch-outlined" :size="20"  :color="'#AFBAFE'" />
+    <div class="header title_left">
+      <Icon @click="handleGoBack" class="backBtn" icon="ant-design:left-outlined" :size="20" />
+      <Icon icon="ant-design:user-switch-outlined" :size="32" :color="'#7360e2'" />
       <div class="header_info">
         <div>admin</div>
         <div>调用方管理/admin</div>
       </div>
     </div>
-    <step-header title="基本信息"/>
+    <step-header title="基本信息" />
     <BasicForm @register="registerForm">
       <template #tokenTime="{ field, model }">
-        <InputNumber style="width: 55px" v-if="tokenTimeEidt" v-model:value="model[field]"></InputNumber>
+        <InputNumber style="width: 55px" v-if="tokenTimeEidt" v-model:value="model[field]" />
         <span v-else>&nbsp;&nbsp;&nbsp;{{ model[field] }} 天 </span>&nbsp;
         <EditOutlined @click="handleTokenTimeEdit" />
       </template>
       <template #userKey="{ field, model }">
-        <Input style="width: 300px" v-if="userKeyEidt" v-model:value="model[field]"></Input>
+        <Input style="width: 300px" v-if="userKeyEidt" v-model:value="model[field]" />
         <span v-else>&nbsp;&nbsp;&nbsp;{{ model[field] }}&nbsp;</span>&nbsp;
         <EditOutlined @click="handleUserKeyEdit" />
       </template>
     </BasicForm>
-    <step-header title="已使用服务"/>
-    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+    <step-header title="已使用服务" />
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
@@ -40,89 +40,111 @@
 </template>
 
 <script lang="ts" setup>
-import { InputNumber,Input } from 'ant-design-vue';
-import Icon from '@/components/Icon/Icon.vue';
-import { EditOutlined } from '@ant-design/icons-vue';
-import {router} from "@/router";
-import { BasicForm, useForm } from '@/components/Form';
-import {detailsColumns, formSchema, detailSchemas} from "./callerManage.data";
-import StepHeader from "@/components/stepHeader.vue";
-import {tableListDetails} from "./mock";
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import {ref} from "vue";
+  import { InputNumber, Input } from 'ant-design-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { EditOutlined } from '@ant-design/icons-vue';
+  import { router } from '@/router';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { detailsColumns, formSchema, detailSchemas } from './callerManage.data';
+  import StepHeader from '@/components/stepHeader.vue';
+  import { tableListDetails } from './mock';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { ref } from 'vue';
 
-const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
-  labelWidth: 100,
-  baseColProps: { lg: 12, md: 24 },
-  schemas: formSchema,
-  showActionButtonGroup: false,
-  actionColOptions: {
-    span: 23,
-  },
-});
-const tokenTimeEidt = ref(false);
-function handleTokenTimeEdit() {
-  tokenTimeEidt.value = !tokenTimeEidt.value
-}
-const userKeyEidt = ref(false);
-function handleUserKeyEdit() {
-  userKeyEidt.value = !userKeyEidt.value
-}
-const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
-  title: ' ',
-  api: async (params) => {
-    const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
-      total: tableListDetails.length,
-      code:'',
-      message:'',
-      data: tableListDetails,
-    };
-
-    return { ...response};
-  },
-  columns:detailsColumns,
-  formConfig: {
-    showActionButtonGroup:false,
-    labelWidth: 120,
-    schemas: detailSchemas,
-    autoSubmitOnEnter: true,
-  },
-  useSearchForm: true,
-  showTableSetting: false,
-  bordered: true,
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-  },
-});
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const tokenTimeEidt = ref(false);
+  function handleTokenTimeEdit() {
+    tokenTimeEidt.value = !tokenTimeEidt.value;
+  }
+  const userKeyEidt = ref(false);
+  function handleUserKeyEdit() {
+    userKeyEidt.value = !userKeyEidt.value;
+  }
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: ' ',
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableListDetails.length,
+        code: '',
+        message: '',
+        data: tableListDetails,
+      };
 
-function handleGoBack() {
-  router.go(-1);
-}
-function handleCancelCall() {
+      return { ...response };
+    },
+    columns: detailsColumns,
+    formConfig: {
+      showActionButtonGroup: false,
+      labelWidth: 120,
+      schemas: detailSchemas,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
 
-}
+  function handleGoBack() {
+    router.go(-1);
+  }
+  function handleCancelCall() {}
 </script>
 
 <style scoped lang="scss">
-.callerManage_details{
-  background-color: white;
-  padding: 20px;
-  .header{
+  .callerManage_details {
+    padding: 20px;
+    background-color: white;
+
+    .header {
+      display: flex;
+      align-items: center;
+      padding-bottom: 20px;
+
+      .backBtn {
+        cursor: pointer;
+      }
+
+      .header_info {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  .title {
     display: flex;
     align-items: center;
-    padding-bottom: 20px;
-    .backBtn{
-      cursor: pointer;
-    }
-    .header_info{
-      padding-left: 15px;
+    justify-content: space-between;
+
+    .title_left {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: 20px;
+
+      .name {
+        padding-bottom: 5px;
+        font-size: 17px;
+        font-weight: 600;
+      }
     }
   }
-
-}
 </style>

src/views/dataService/serviceManage/callerManage/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
-
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                onClick: handleDetails.bind(null, record),
-              },
-            ]"
-          />
-        </template>
+    <PageWrapper class="w-1/3 xl:w-2/9" dense style="height: 100vh">
+      <GroupTree @select="onNodeSelect" style="height: 100%; overflow-y: auto" />
+    </PageWrapper>
+    <PageWrapper class="w-2/3 xl:w-7/9 enter-y" dense
+      ><template #headerContent>
+        <div style="display: flex; justify-content: space-between">
+          <div class="title">
+            <div class="title_left">
+              <div>
+                <Icon icon="dashicons:admin-settings" :size="32" :color="'#0960BD'" />
+              </div>
+              <div style="padding-left: 10px">
+                <div class="name">调用方管理</div>
+                <div style="color: darkgray">数据服务/服务管理</div>
+              </div>
+            </div>
+          </div>
+          <!-- <a-button type="primary" @click="handleLog">调用日志</a-button> -->
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <BasicTable @register="registerTable" :rowSelection="rowSelection">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      label: '详情',
+                      onClick: handleDetails.bind(null, record),
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </div>
       </template>
-    </BasicTable>
+    </PageWrapper>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-import { reactive, onMounted,ref } from 'vue';
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import { PageWrapper } from '@/components/Page';
-import { useMessage } from '@/hooks/web/useMessage';
-import { columns, searchFormSchema } from './callerManage.data';
-import {tableList} from "./mock";
-
-import { useRoute, onBeforeRouteLeave } from 'vue-router';
-import { router } from '@/router';
+  import { reactive, onMounted, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { columns, searchFormSchema } from './callerManage.data';
+  import { tableList } from './mock';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { router } from '@/router';
+  import GroupTree from './GroupTree.vue';
+  import Icon from '@/components/Icon/Icon.vue';
 
-defineOptions({ name: 'safetyLevelManage' });
-const { createMessage,createConfirm } = useMessage();
-const route = useRoute();
+  defineOptions({ name: 'SafetyLevelManage' });
+  const { createMessage, createConfirm } = useMessage();
+  const route = useRoute();
 
-const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
-  title: '调用方管理列表',
-  api: async (params) => {
-    const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
-      total: tableList.length,
-      code:'',
-      message:'',
-      data: tableList,
-    };
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '调用方管理列表',
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableList.length,
+        code: '',
+        message: '',
+        data: tableList,
+      };
 
-    return { ...response};
-  },
-  rowKey: 'businessId',
-  rowSelection: true,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    autoSubmitOnEnter: true,
-  },
-  useSearchForm: true,
-  showTableSetting: false,
-  bordered: true,
-  handleSearchInfoFn(info) {
-    console.log('handleSearchInfoFn', info);
-    return info;
-  },
-  actionColumn: {
-    width: 120,
-    title: '操作',
-    dataIndex: 'action',
-    // slots: { customRender: 'action' },
-  },
-});
-
-function handleDeleteIds() {
-  createConfirm({
-    iconType: 'warning',
-    title: '确认删除',
-    content: '确认批量删除选中数据吗？',
-    onOk() {
-      createMessage.success('批量删除成功!');
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      console.log('handleSearchInfoFn', info);
+      return info;
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
     },
   });
-}
-
-function handleDetails() {
-  router.push({
-    path: '/dataService/serviceManage/callerManage/details',
-  });
-}
 
+  function handleDeleteIds() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认批量删除选中数据吗？',
+      onOk() {
+        createMessage.success('批量删除成功!');
+      },
+    });
+  }
 
+  function handleDetails() {
+    router.push({
+      path: '/dataService/serviceManage/callerManage/details',
+    });
+  }
 
-onMounted(() => {
+  onMounted(() => {});
+</script>
+<style scoped lang="scss">
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-});
+    .title_left {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
 
-</script>
+      .name {
+        padding-bottom: 5px;
+        font-size: 17px;
+        font-weight: 600;
+      }
+    }
+  }
+</style>

src/views/dataService/serviceManage/callerManage/mock.ts

-
-
+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    parentWorkSpaceName: '调用方管理',
+    workSpaceName: '调用方管理',
+    parentId: 0,
+    'code:': '001',
+    ancestors: '0',
+    orderNum: 0,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    parentWorkSpaceName: 'admin-个人工作区',
+    workSpaceName: 'admin-个人工作区',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 102,
+    parentWorkSpaceName: '共享工作区',
+    workSpaceName: '共享工作区',
+    parentId: 100,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '0',
+    businessId: 103,
+    parentWorkSpaceName: '高级工作区',
+    workSpaceName: '高级工作区',
+    parentId: 100,
+    'code:': '010',
+    ancestors: '0,100,107',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 201,
+    parentWorkSpaceName: 'admin-个人工作区',
+    workSpaceName: '独导',
+    parentId: 101,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 202,
+    parentWorkSpaceName: '共享工作区',
+    workSpaceName: 'test',
+    parentId: 102,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 203,
+    parentWorkSpaceName: '高级工作区',
+    workSpaceName: 'sql_api',
+    parentId: 103,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 301,
+    parentWorkSpaceName: 'admin-个人工作区',
+    workSpaceName: '向导API',
+    parentId: 201,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 302,
+    parentWorkSpaceName: '共享工作区',
+    workSpaceName: '托管系统',
+    parentId: 202,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];
 export const tableList: any[] = [
   {
     businessId: 1,
-    account:'admin',
-    name:'admin',
-    serviceNum:'17',
-    callNum:'28',
-    callSuccessNum:'18',
-    callFailNum:'10',
+    account: 'admin',
+    name: 'admin',
+    serviceNum: '17',
+    callNum: '28',
+    callSuccessNum: '18',
+    callFailNum: '10',
   },
   {
     businessId: 1,
-    account:'admin',
-    name:'admin',
-    serviceNum:'17',
-    callNum:'28',
-    callSuccessNum:'18',
-    callFailNum:'10',
+    account: 'admin',
+    name: 'admin',
+    serviceNum: '17',
+    callNum: '28',
+    callSuccessNum: '18',
+    callFailNum: '10',
   },
   {
     businessId: 1,
-    account:'admin',
-    name:'admin',
-    serviceNum:'17',
-    callNum:'28',
-    callSuccessNum:'18',
-    callFailNum:'10',
+    account: 'admin',
+    name: 'admin',
+    serviceNum: '17',
+    callNum: '28',
+    callSuccessNum: '18',
+    callFailNum: '10',
   },
-]
+];
 
 export const tableListDetails: any[] = [
   {
     businessId: 1,
-    name:'test1',
-    callNum:'0',
-    callSuccessNum:'0',
-    callFailNum:'0',
-    flag:'调用中',
-    startTime:'2023-12-05',
-    endTime:'2023-12-05',
+    name: 'test1',
+    callNum: '0',
+    callSuccessNum: '0',
+    callFailNum: '0',
+    flag: '调用中',
+    startTime: '2023-12-05',
+    endTime: '2023-12-05',
   },
   {
     businessId: 1,
-    name:'test1',
-    callNum:'0',
-    callSuccessNum:'0',
-    callFailNum:'0',
-    flag:'调用中',
-    startTime:'2023-12-05',
-    endTime:'2023-12-05',
+    name: 'test1',
+    callNum: '0',
+    callSuccessNum: '0',
+    callFailNum: '0',
+    flag: '调用中',
+    startTime: '2023-12-05',
+    endTime: '2023-12-05',
   },
   {
     businessId: 1,
-    name:'test1',
-    callNum:'0',
-    callSuccessNum:'0',
-    callFailNum:'0',
-    flag:'调用中',
-    startTime:'2023-12-05',
-    endTime:'2023-12-05',
+    name: 'test1',
+    callNum: '0',
+    callSuccessNum: '0',
+    callFailNum: '0',
+    flag: '调用中',
+    startTime: '2023-12-05',
+    endTime: '2023-12-05',
   },
-]
+];

src/views/dataService/serviceManage/onlineManage/productionDrawer.vue

@@ -3,61 +3,84 @@
     <template #title>
       <div style="display: flex; justify-content: space-between">
         <div class="flex">
-          <Icon icon="ant-design:setting-outlined" :size="30" style="color:#0960BD;"/>
+          <Icon icon="ant-design:setting-outlined" :size="30" style="color: #0960bd" />
           <div style="margin-left: 10px">
             <span>上线设置</span>
-            <h4 style="color: #BFBFBF">API / 验收 / SAL API</h4>
+            <h4 style="color: #bfbfbf">API / 验收 / SAL API</h4>
           </div>
         </div>
         <div class="flex" style="gap: 15px">
           <a-button type="link" @click="handleTest">
-            <Icon icon="ant-design:bug-outlined" :size="24"/>
+            <Icon icon="ant-design:bug-outlined" :size="24" />
             <p style="color: black">调试</p>
           </a-button>
           <a-button type="link" @click="handleSave">
-            <Icon icon="ant-design:inbox-outlined" :size="24"/>
+            <Icon icon="ant-design:inbox-outlined" :size="24" />
             <p style="color: black">保存</p>
           </a-button>
         </div>
       </div>
     </template>
     <div>
-      <BasicForm @register="registerForm"  style="padding:0  0 0 40px">
-        <template #dynamicRouting="{ field,model, }">
+      <BasicForm @register="registerForm" style="padding: 0 0 0 40px">
+        <template #dynamicRouting="{ field, model }">
           <div>
-          <Select style="width: 30%" placeholder="请选择"
-                  v-model:value="model['dynamic']" :options="routeList"/>
-          <Input style="width: 70%"
-                 v-model:value="model[field]" placeholder="请输入"/>
+            <Select
+              style="width: 30%"
+              placeholder="请选择"
+              v-model:value="model['dynamic']"
+              :options="routeList"
+            />
+            <Input style="width: 70%" v-model:value="model[field]" placeholder="请输入" />
           </div>
         </template>
-        <template #expirationDuration="{ field,model, }">
-          <FormItem :name="field" label="有效期持续时间"
-                    :rules="[{ required: true, message: '请输入有效期持续时间',type: 'string' }]"
-                    style="margin-left: 0">
+        <template #expirationDuration="{ field, model }">
+          <FormItem
+            :name="field"
+            label="有效期持续时间"
+            :rules="[{ required: true, message: '请输入有效期持续时间', type: 'string' }]"
+            style="margin-left: 0"
+          >
             <Input.Group>
               <FormItemRest>
-                <Input style="width: calc(100% - 380px); margin-left: -1px;"
-                       v-model:value="model[field]" placeholder="请输入"/>
+                <Input
+                  style="width: calc(100% - 380px); margin-left: -1px"
+                  v-model:value="model[field]"
+                  placeholder="请输入"
+                />
               </FormItemRest>
               <FormItemRest>
-                <Select style="width: 380px" placeholder="请选择"
-                        v-model:value="model['expiration']" :options="timeList"/>
+                <Select
+                  style="width: 380px"
+                  placeholder="请选择"
+                  v-model:value="model['expiration']"
+                  :options="timeList"
+                />
               </FormItemRest>
             </Input.Group>
           </FormItem>
         </template>
-        <template #rateLimitPolicy="{ field,model, }">
-          <FormItem :name="field" label="流控策略"
-                    :rules="[{ required: true, message: '请输入流控策略',type: 'string' }]"
-                    style="margin-left: 45px">
+        <template #rateLimitPolicy="{ field, model }">
+          <FormItem
+            :name="field"
+            label="流控策略"
+            :rules="[{ required: true, message: '请输入流控策略', type: 'string' }]"
+            style="margin-left: 45px"
+          >
             <Input.Group>
               <FormItemRest>
-                <Input style="width: calc(100% - 380px); margin-left: -1px;"
-                       v-model:value="model[field]" placeholder="请输入"/>
+                <Input
+                  style="width: calc(100% - 380px); margin-left: -1px"
+                  v-model:value="model[field]"
+                  placeholder="请输入"
+                />
               </FormItemRest>
-              <Select style="width: 380px" placeholder="请选择"
-                      v-model:value="model['rateLimit']" :options="timesDataList"/>
+              <Select
+                style="width: 380px"
+                placeholder="请选择"
+                v-model:value="model['rateLimit']"
+                :options="timesDataList"
+              />
             </Input.Group>
           </FormItem>
         </template>
@@ -67,29 +90,28 @@
   <ProductionTestModal @register="productionTestModal" />
 </template>
 <script lang="ts" setup>
-/**上线设置页面*/
-import {PageWrapper} from '@/components/Page';
-import {tableList, routeList, timeList, timesDataList} from './mock';
-import {schemas} from './onlineManage.data';
-import Icon from "@/components/Icon/Icon.vue";
-import {onMounted, reactive, ref} from "vue";
-import {router} from '@/router';
-import {useRoute} from "vue-router";
-import {BasicForm, FormSchema, useForm} from "@/components/Form";
-import {useMessage} from "@/hooks/web/useMessage";
-import {FormItem, FormItemRest} from "ant-design-vue";
-import {Select, Input} from "ant-design-vue";
-import {BasicDrawer, useDrawerInner} from "@/components/Drawer";
-import ProductionTestModal from "./productionTestModal.vue";
-import {useModal} from "@/components/Modal";
-const [productionTestModal, { openModal: openProductionTestModal }] = useModal();
+  /**上线设置页面*/
+  import { PageWrapper } from '@/components/Page';
+  import { tableList, routeList, timeList, timesDataList } from './mock';
+  import { schemas } from './onlineManage.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted, reactive, ref } from 'vue';
+  import { router } from '@/router';
+  import { useRoute } from 'vue-router';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { FormItem, FormItemRest, Select, Input } from 'ant-design-vue';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import ProductionTestModal from './productionTestModal.vue';
+  import { useModal } from '@/components/Modal';
 
-const title = ref();
-const route = useRoute();
-/**上线设置表单配置*/
-const {createMessage} = useMessage();
-const [registerForm, {getFieldsValue, resetFields, setFieldsValue}] =
-  useForm({
+  const [productionTestModal, { openModal: openProductionTestModal }] = useModal();
+
+  const title = ref();
+  const route = useRoute();
+  /**上线设置表单配置*/
+  const { createMessage } = useMessage();
+  const [registerForm, { getFieldsValue, resetFields, setFieldsValue }] = useForm({
     labelWidth: 120,
     schemas,
     showActionButtonGroup: false,
@@ -97,63 +119,61 @@ const [registerForm, {getFieldsValue, resetFields, setFieldsValue}] =
       span: 24,
     },
   });
-const [register,{closeDrawer}] = useDrawerInner((data) => {
-  // 方式1
-  setFieldsValue({
-    field2: data.data,
-    field1: data.info,
-  });
-});
-
-/**测试按钮*/
-function handleTest() {
-  openProductionTestModal(true, {
-    isUpdate: false,
+  const [register, { closeDrawer }] = useDrawerInner((data) => {
+    // 方式1
+    setFieldsValue({
+      field2: data.data,
+      field1: data.info,
+    });
   });
-}
 
-/**保存按钮*/
-function handleSave() {
-  closeDrawer();
-  createMessage.success('保存成功！！');
-}
+  /**测试按钮*/
+  function handleTest() {
+    openProductionTestModal(true, {
+      isUpdate: false,
+    });
+  }
 
+  /**保存按钮*/
+  function handleSave() {
+    closeDrawer();
+    createMessage.success('保存成功');
+  }
 </script>
 <style lang="scss" scoped>
-.modal_top {
-  padding: 20px 0 20px 20px;
-  display: flex;
-  align-items: center;
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 20px 0 20px 20px;
 
-  .title {
-    font-size: 16px;
-    font-weight: 500;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
   }
-}
-
-.save-button {
 
-  position: absolute; /* 绝对定位 */
-  top: 15px; /* 顶部对齐 */
-  right: 10px; /* 右侧对齐 */
-  margin: 10px 60px 10px 10px; /* 可选：增加一些边缘间距 */
-}
+  .save-button {
+    position: absolute; /* 绝对定位 */
+    top: 15px; /* 顶部对齐 */
+    right: 10px; /* 右侧对齐 */
+    margin: 10px 60px 10px 10px; /* 可选：增加一些边缘间距 */
+  }
 
-.save-button1 {
-  position: absolute; /* 绝对定位 */
-  top: 15px; /* 顶部对齐 */
-  right: 10px; /* 右侧对齐 */
-  margin: 10px; /* 可选：增加一些边缘间距 */
-}
+  .save-button1 {
+    position: absolute; /* 绝对定位 */
+    top: 15px; /* 顶部对齐 */
+    right: 10px; /* 右侧对齐 */
+    margin: 10px; /* 可选：增加一些边缘间距 */
+  }
 
-.local_typeValue {
-  width: calc(100% - 120px);
-  margin-bottom: 0;
-  margin-left: -1px;
-  border-right: 0;
+  .local_typeValue {
+    width: calc(100% - 120px);
+    margin-bottom: 0;
+    margin-left: -1px;
+    border-right: 0;
 
-  .ant-input {
-    border-radius: 0 6px 6px 0;
+    .ant-input {
+      border-radius: 0 6px 6px 0;
+    }
   }
-}
 </style>