业务分组-分组详情功能

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails/callerManage.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const detailSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+/** api列表展示字段*/
+export const detailsColumns: BasicColumn[] = [
+  {
+    title: 'API名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'flag',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'upDateTime',
+    width: 120,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'Owner',
+    width: 120,
+  },
+]
+
+/** executor列表展示字段*/
+export const detailsColumns2: BasicColumn[] = [
+  {
+    title: 'IP地址',
+    dataIndex: 'IP',
+    width: 120,
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 120,
+  },
+]
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '业务分组名称',
+    dataIndex: 'name',
+    width: 120,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '关联API路由数',
+    dataIndex: 'apiRoutNum',
+    width: 120,
+  },
+  {
+    title: '关联executor数',
+    dataIndex: 'executorNum',
+    width: 120,
+  },
+];
+
+/**详情基本信息-展示字段*/
+export const refundSchema: DescItem[] = [
+  {
+    field: 'groupingName',
+    label: '业务分组名称',
+  },
+  {
+    field: 'description',
+    label: '描述',
+  },
+  {
+    field: 'bind',
+    label: '绑定运行环境',
+  },
+];
+export const refundData = {
+  groupingName: '默认业务分组',
+  description: '-',
+  bind: '否',
+};
+
+
+/**新建文件夹 表单*/
+export const createDocumentFormSchema: FormSchema[] = [
+  {
+    field: 'moveTo',
+    label: '移动至',
+    component: 'Select',
+    defaultValue: '默认分组',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请选择移动目标文件夹',
+      },
+    ],
+    componentProps: {
+      options: [
+        {
+          label: '默认分组',
+          value: '默认分组',
+        },
+        {
+          label: 'test1',
+          value: 'test1',
+        },
+        {
+          label: 'test2',
+          value: 'test2',
+        },
+      ],
+    },
+  },
+];
+  // const [registerTable] = useTable({
+  //   title: '可编辑单元格示例',
+  //   api: demoListApi,
+  //   columns: columns,
+  //   showIndexColumn: false,
+  //   bordered: true,
+  // });

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails/index.vue

 <template>
-  <page-wrapper>
-    分组详情
-  </page-wrapper>
-</template>
+  <PageWrapper >
+  <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:partition-outlined" :size="20"  :color="'#AFBAFE'" />
+      <div class="header_info">
+        <div>默认业务分组</div>
+        <div>业务分组</div>
+      </div>
+    </div>
+    <step-header title="基本信息"/>
+<!--    <BasicForm @register="registerForm">-->
+<!--      <template #tokenTime="{ field, model }">-->
+<!--        <InputNumber style="width: 55px" v-if="tokenTimeEidt" v-model:value="model[field]"></InputNumber>-->
+<!--        <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>-->
+<!--        <span v-else>&nbsp;&nbsp;&nbsp;{{ model[field] }}&nbsp;</span>&nbsp;-->
+<!--        <EditOutlined @click="handleUserKeyEdit" />-->
+<!--      </template>-->
+<!--    </BasicForm>-->
+    <Description
+      size="middle"
+      :bordered="false"
+      :column="2"
+      :data="refundData"
+      :schema="refundSchema"
+    />
+    <step-header title="关联API"/>
+    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '移动',
+                onClick: mobile.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+      <template #toolbar>
+        <a-button type="primary" :disabled="getRowSelectionApi().selectedRowKeys<=0" @click="mobile">移动</a-button>
+      </template>
+    </BasicTable>
 
+    <step-header title="关联executor"/>
+    <BasicTable @register="registerTable2"  :rowSelection="rowSelection">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
 
-<script setup lang="ts">
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+                }
+            ]"
+          />
+        </template>
+      </template>
+      <template #toolbar>
+        <a-button type="primary" :disabled="getRowSelectionExecutor().selectedRowKeys<=0" @click="handleDelete">删除</a-button>
+        <a-button type="primary" @click="handleAdd">添加</a-button>
+      </template>
+    </BasicTable>
+  </div>
+    <mobileModal @register="registerMobileModal" />
+  </PageWrapper>
+</template>
 
+<script lang="ts" setup>
+import { InputNumber,Input } from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+  import { useModal } from '@/components/Modal';
+import mobileModal from "./mobileModal.vue"
+import { EditOutlined } from '@ant-design/icons-vue';
+import {router} from "@/router";
+  import { Description } from '@/components/Description';
+import { BasicForm, useForm } from '@/components/Form';
+import {detailsColumns, refundSchema, detailSchemas,refundData,detailsColumns2} from "./callerManage.data";
+import StepHeader from "@/components/stepHeader.vue";
+import {tableListDetails ,tableListDetails2} from "./mock";
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import {ref} from "vue";
 import PageWrapper from "@/components/Page/src/PageWrapper.vue";
-</script>
 
+// 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
+}
+/**API 表格 */
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection:getRowSelectionApi }] = useTable({
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListDetails.length,
+      code:'',
+      message:'',
+      data: tableListDetails,
+    };
+
+    return { ...response};
+  },
+  columns:detailsColumns,
+  formConfig: {
+    showActionButtonGroup:true,//搜索栏Button取消
+    labelWidth: 120,
+    schemas: detailSchemas,
+    autoSubmitOnEnter: true,
+  },
+  showIndexColumn: false,//列表序号取消
+  rowSelection:true,//列表复选框
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+/**Executor 表格 */
+const [registerTable2, { getRowSelection:getRowSelectionExecutor }] = useTable({
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListDetails2.length,
+      code:'',
+      message:'',
+      data: tableListDetails2,
+    };
+
+    return { ...response};
+  },
+  rowSelection:true,
+  columns:detailsColumns2,
+  formConfig: {
+    showActionButtonGroup:true,
+    labelWidth: 120,
+    schemas: detailSchemas,
+    autoSubmitOnEnter: true,
+  },
+
+  showIndexColumn: false,//列表序号取消
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+function handleGoBack() {
+  router.go(-1);
+}
+
+/**API表单 移动  弹窗 */
+const [registerMobileModal,{ openModal: openMobileModal}] = useModal();
+function mobile(){
+  openMobileModal(true, {});
+}
+
+/**Executor表单 删除 */
+function handleDelete() {
+  console.log('点击了删除')
+}
+</script>
 
+<style scoped lang="scss">
+.callerManage_details{
+  background-color: white;
+  padding: 20px;
+  .header{
+    display: flex;
+    align-items: center;
+    padding-bottom: 20px;
+    .backBtn{
+      cursor: pointer;
+    }
+    .header_info{
+      padding-left: 15px;
+    }
+  }
 
+}
+</style>

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails/mobileModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {createDocumentFormSchema} from './callerManage.data.ts';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: createDocumentFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    var formData = {}
+    if (data.record === null || data.record === undefined){
+      formData = {
+        standardsTree: '100'
+      }
+    } else {
+      formData = {
+        standardsTree: data.record.businessId
+      }
+    }
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+  });
+
+  const getTitle = computed(() => ('移动'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal()
+  }
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails/mock.ts

+/**api */
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name:'默认分组',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+  {
+    businessId: 2,
+    name:'test1',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+  {
+    businessId: 3,
+    name:'test2',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+
+]
+
+export const tableListDetails: any[] = [
+  {
+    businessId: 1,
+    name:'赛文',
+    path:'M78/07',
+    flag:'以上线',
+    createTime:'2023-12-05 15:00:00',
+    upDateTime:'2023-12-05 15:00:00',
+    Owner:'团',
+  },
+  {
+    businessId: 1,
+    name:'赛文',
+    path:'M78/07',
+    flag:'以上线',
+    createTime:'2023-12-05 15:00:00',
+    upDateTime:'2023-12-05 15:00:00',
+    Owner:'团',
+  },{
+    businessId: 1,
+    name:'赛文',
+    path:'M78/07',
+    flag:'以上线',
+    createTime:'2023-12-05 15:00:00',
+    upDateTime:'2023-12-05 15:00:00',
+    Owner:'团',
+  },
+]
+
+/** executor */
+export const tableListDetails2: any[] = [
+  {
+    businessId: 1,
+    IP:'雷欧',
+    path:'L77/06',
+  },
+  {
+    businessId: 1,
+    IP:'雷欧',
+    path:'L77/06',
+  },
+  {
+    businessId: 1,
+    IP:'雷欧',
+    path:'L77/06',
+  },
+
+]
+

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/index.vue

@@ -9,10 +9,12 @@
           <TableAction
             :actions="[
               {
+                // label: '编辑',
                 icon: 'clarity:note-edit-line',
                 onClick: handleEdit.bind(null, record),
               },
               {
+                // label: '删除',
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
 
@@ -89,7 +91,7 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,ge
 });
 
 /**新建按钮 */
-  const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
+const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
 function handleNew(){
     openCreateDocumentModal(true, {
     });
@@ -112,6 +114,9 @@ function editApi(record: any) {
   console.log('点击触发editApi',record)
   router.push({
     path: '/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails',
+    query: {
+      businessId: record.businessId,
+    }
   });
 }