创建模块—任务调度-执行器管理

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

@@ -43,7 +43,7 @@
               },
               {
                 icon:'ant-design:fund-projection-screen-outlined',
-                tooltip:'详情',
+                tooltip:'',
                 /*label: '详情',*/
                 onClick: other.bind(null, record),
                 ifShow: () => {
@@ -70,7 +70,7 @@
               },
              {
                 icon:'ant-design:container-twotone',
-                tooltip:'API',
+                tooltip:'',
                 /*label: 'API',*/
                 onClick: apiDetail.bind(null, record),
                 ifShow: () => {

src/views/taskScheduling/schedulingExecution/calendar/index.vue

+<template>
+  <PageWrapper>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/taskScheduling/schedulingExecution/executorManagement/executorManagement.data.ts

+import {BasicColumn, FormSchema} from "@/components/Table";
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '任务数',
+    dataIndex: 'taskCount',
+    width: 60,
+  },
+  {
+    title: '组别',
+    dataIndex: 'groupName',
+    width: 220,
+  },
+  {
+    title: '状态',
+    dataIndex: 'flag',
+    width: 80,
+    slots: { customRender: 'flag' },
+  },
+  {
+    title: '运行环境路径',
+    dataIndex: 'runtimeEnvironmentPath',
+    width: 200,
+  },
+];
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'InputSearch',
+    colProps: { span: 20},
+    componentProps: {
+      placeholder: '输入关键字搜索',
+      onChange: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+];
+/** 左上*/
+export const groupSchema: BasicColumn[] = [
+  {
+    title: '',
+    width: 150,
+    dataIndex: 'name',
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '',
+    width: 30,
+    dataIndex: 'number',
+  },
+];
+/** 左下*/
+export const pathSchema: BasicColumn[] = [
+  {
+    title: '',
+    width: 150,
+    dataIndex: 'name',
+  },
+];

src/views/taskScheduling/schedulingExecution/executorManagement/index.vue

+<template>
+  <PageWrapper contentBackground dense contentClass="flex">
+    <template #headerContent>
+      <div style="border-bottom: 2px solid #EBEFF6;">
+        <p style="margin: -20px 0 10px 0;color: #DCDCDC; ">调度/执行器管理/</p>
+        <div style="display: flex;align-items: center;margin-bottom:10px;">
+          <div>
+            <Icon icon="ant-design:apartment-outlined" :size="25" style="color:#5689E5;"/>
+          </div>
+          <span style="font-size: 20px">执行器编辑器</span>
+        </div>
+        <div type="primary" class="save-button" @click="resourceReplacement">
+          <a-button type="text" style="color: #169aff;border-color:#169aff;">执行器资源替换
+          </a-button>
+        </div>
+        <div type="primary" class="save-button1" @click="downloadAndInstallPackage">
+          <a-button type="text" style="color: #169aff;border-color:#169aff;">下载执行器rpm安装包
+          </a-button>
+        </div>
+      </div>
+    </template>
+    <div style="display:flex;">
+      <div style="width: 20%;border-right: 2px solid #EBEFF6;">
+        <div>
+          <BasicTable @register="registerGroupTable" :searchInfo="searchInfo">
+            <template #tableTitle>
+              <div style="display: flex;align-items: center">
+                <div class="container ">
+                  <span class="executor-text">组别</span>
+                </div>
+              </div>
+            </template>
+            <template #toolbar>
+              <Icon icon="ant-design:plus-outlined"
+                    :size="20" @click="Delete"/>
+              <Icon icon="ant-design:clear-outlined"
+
+                    :size="20" @click="Delete"/>
+            </template>
+          </BasicTable>
+        </div>
+        <div>
+          <BasicTable @register="registerPathTable" :searchInfo="searchInfo">
+            <template #tableTitle>
+              <div style="display: flex;align-items: center">
+                <div class="container1">
+                  <span class="executor-text">运行环境路径</span>
+                </div>
+              </div>
+            </template>
+            <template #toolbar>
+              <Icon icon="ant-design:plus-outlined"
+                    :size="20" @click="Delete"/>
+              <Icon icon="ant-design:clear-outlined"
+
+                    :size="20" @click="Delete"/>
+            </template>
+          </BasicTable>
+        </div>
+      </div>
+      <div style="width: 80%">
+        <BasicTable @register="registerTable" :searchInfo="searchInfo">
+          <template #tableTitle>
+            <div style="display: flex;align-items: center">
+              <div class="container ">
+              <span class="executor-text">执行器</span>
+              </div>
+              <BasicForm @register="registerForm" style="margin-bottom: -20px"/>
+            </div>
+          </template>
+          <template #toolbar>
+            <a-button :disabled="getRowSelection().selectedRowKeys <=0"
+                      type="primary" @click="addEnvironmentPath">
+              <Icon icon="ant-design:plus-outlined" :size="15"/>
+              添加运行环境路径
+            </a-button>
+            <a-button :disabled="getRowSelection().selectedRowKeys <=0"
+                      type="primary" @click="addGroup">添加到组别
+            </a-button>
+            <a-button :disabled="getRowSelection().selectedRowKeys <=0"
+                      type="primary" @click="Delete">
+              <Icon icon="ant-design:clear-outlined"></Icon>
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+              {
+                label: '添加到组别',
+                onClick: addGroup.bind(null, record),
+              },
+              {
+                icon:'ant-design:clear-outlined',
+                /*label: '删除',*/
+                 type:'text',
+                onClick: Delete.bind(null, record),
+              },
+            ]"
+              />
+            </template>
+          </template>
+          <template #flag="{ text }">
+        <span v-if="text === '正常'">
+          <Icon icon="ant-design:check-circle-filled" :size="15" style="color:#82BD9D;"/>
+          正常
+        </span>
+            <span v-else-if="text === '不正常'">
+          <Icon icon="ant-design:close-circle-filled" :size="15" style="color:#C02C20;"/>
+          不正常
+        </span>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import {PageWrapper} from "@/components/Page";
+import Icon from "@/components/Icon/Icon.vue";
+import {groupTable, pathTable, tableList} from './mock';
+import {columns, groupSchema, pathSchema, searchFormSchema} from './executorManagement.data';
+import {BasicTable, useTable, TableAction} from '@/components/Table';
+import {reactive} from "vue";
+import {Divider} from "ant-design-vue";
+import BasicForm from "@/components/Form/src/BasicForm.vue";
+
+const searchInfo = reactive<Recordable>({});
+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,
+  showIndexColumn: false,
+  columns,
+/*  formConfig: {
+    schemas: searchFormSchema,
+    //在 input 中输入时按回车自动提交
+    autoSubmitOnEnter: true,
+    //是否显示操作按钮(重置/提交)
+    showActionButtonGroup: false,
+    baseRowStyle: {
+      /!*position: 'absolute',*!/
+      margin: '0 0 -20px 0',
+    }
+  },
+  useSearchForm: true,*/
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 180,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+/**右上*/
+const [registerForm] = useTable({
+  schemas: searchFormSchema,
+  //在 input 中输入时按回车自动提交
+  autoSubmitOnEnter: true,
+  //是否显示操作按钮(重置/提交)
+  showActionButtonGroup: false,
+  rowSelection: true,
+  pagination: false,
+  showIndexColumn: false,
+  scroll: {y: 300},
+  showSummary: true,
+});
+/**左上*/
+const [registerGroupTable, {}] = useTable({
+  rowKey: 'pathId',
+  title: '组别',
+  dataSource: groupTable,
+  columns: groupSchema,
+  rowSelection: true,
+  pagination: false,
+  showIndexColumn: false,
+  scroll: {y: 300},
+  showSummary: true,
+});
+/**左下*/
+const [registerPathTable] = useTable({
+  title: '运行环境路径',
+  rowKey: 'groupId',
+  dataSource: pathTable,
+  columns: pathSchema,
+  rowSelection: true,
+  pagination: false,
+  showIndexColumn: false,
+  scroll: {y: 300},
+  showSummary: true,
+});
+
+/**执行器资源替换*/
+function resourceReplacement() {
+
+}
+/**搜索*/
+function search() {
+
+}
+/**下载执行器rpm安装包*/
+function downloadAndInstallPackage() {
+
+}
+
+/**添加运行环境路径*/
+function addEnvironmentPath() {
+
+}
+
+/**添加到组别*/
+function addGroup() {
+
+}
+
+/**删除Delete*/
+function Delete() {
+  console.log('打印加号按钮')
+}
+
+</script>
+<style lang="scss" scoped>
+.save-button {
+  position: absolute; /* 绝对定位 */
+  top: 15px;
+  right: 10px;
+  margin: 25px 200px 10px 10px;
+}
+
+.save-button1 {
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  margin: 25px 10px 10px 10px;
+}
+
+
+.container {
+  width: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;  /* 让内容垂直居中 */
+}
+.container1 {
+  width: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;  /* 让内容垂直居中 */
+}
+.executor-text {
+  display: inline-flex;  /* 保持内联样式 */
+  align-items: center;   /* 确保文本垂直居中 */
+}
+
+.executor-text::before {
+  content: '';  /* 伪元素的内容为空 */
+  display: inline-block;
+  width: 4px;  /* 伪元素的宽度 */
+  height: 20px; /* 伪元素的高度 */
+  background-color:#5689E5;  /* 蓝色 */
+  margin-right: 5px; /* 与文字的间距 */
+}
+</style>

src/views/taskScheduling/schedulingExecution/executorManagement/mock.ts

+/**表格数据*/
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name: 'ceshiceschiceshciec',
+    taskCount: '0',
+    groupName: 'default group',
+    flag: '正常',
+    runtimeEnvironmentPath: '',
+  },
+  {
+    businessId: 2,
+    name: 'fafafafafafafafafaf',
+    taskCount: '1',
+    groupName: 'default group，agent_executor',
+    flag: '正常',
+    runtimeEnvironmentPath: 'java_path.python3',
+  },
+];
+
+/**左上表格数据*/
+export const groupTable: any[] = [
+  {
+    groupId: 1,
+    name: 'default group',
+    number:'2',
+  },
+  {
+    groupId: 2,
+    name: 'agent_executor',
+    number:'1',
+  },
+];
+/**左下表格数据*/
+export const pathTable: any[] = [
+  {
+    pathId: 1,
+    name: 'java_path',
+  },
+  {
+    pathId: 2,
+    name: 'python3',
+  },
+];