审核配置/通用配置

src/views/dataSharingAndExchange/auditConfig/ProcessEditModal.vue

@@ -8,7 +8,7 @@
     width="60%"
     @ok="handleSubmit"
   >
-    <Tabs v-model:activeKey="activeKey">
+    <Tabs v-model:activeKey="activeKey" style="margin-left: 20px">
       <TabPane key="1" tab="最新版本">
         <BasicTable @register="registerLatestVersionTable">
           <template #bodyCell="{ column, record }">
@@ -28,12 +28,16 @@
               />
             </template>
           </template>
-          <template #toolbar>
-            <a-button type="primary" @click="addNode()">新增节点</a-button>
+        </BasicTable>
+        <div class="button-group">
+          <div class="bt-g-left">
+            <a-button type="primary" @click="addNode()"><PlusOutlined />新增节点</a-button>
+          </div>
+          <div class="bt-g-right">
             <a-button type="primary" @click="startWork()">立即生效</a-button>
             <a-button type="primary" @click="handleSave()">保存</a-button>
-          </template>
-        </BasicTable>
+          </div>
+        </div>
       </TabPane>
       <TabPane key="2" tab="生效版本">
         <BasicTable @register="registerVersionHistoryTable">
@@ -47,7 +51,7 @@
                       title: '是否应用该版本',
                       placement: 'left',
                       confirm: handleApply.bind(null, record),
-                  disabled: record.workStatus === '生效中'
+                      disabled: record.workStatus === '生效中',
                     },
                   },
                 ]"
@@ -60,30 +64,31 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import {ref, unref} from 'vue';
-import {BasicModal, useModalInner} from '@/components/Modal';
-import {useMessage} from "@/hooks/web/useMessage";
-import {BasicTable, TableAction, useTable} from "@/components/Table";
-import {Tabs, TabPane} from 'ant-design-vue';
-import {
+  import { ref, unref } from 'vue';
+  import {BasicModal, ModalProps, useModalInner} from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import {
     processEditListData,
     processVersionColumns,
     versionHistoryListData,
     versionHistoryColumns,
-} from "@/views/dataSharingAndExchange/auditConfig/auditConfig.data.ts"
+  } from '@/views/dataSharingAndExchange/auditConfig/auditConfig.data.ts';
 
-defineOptions({name: 'ProcessEditModal'});
-const emit = defineEmits(['success', 'register']);
-const {createMessage} = useMessage();
-const isUpdate = ref(false);
-const activeKey = ref('1');
-const TabPane = Tabs.TabPane;
-const processEditDataList = ref([]);
+  defineOptions({ name: 'ProcessEditModal' });
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(false);
+  const activeKey = ref('1');
+  const TabPane = Tabs.TabPane;
+  const processEditDataList = ref([]);
 
-//初始化 "最新版本" 表格
-const [registerLatestVersionTable, {reload}] = useTable({
+  //初始化 "最新版本" 表格
+  const [registerLatestVersionTable, { reload }] = useTable({
     api: async () => {
-    processEditDataList.value = processEditListData
+      processEditDataList.value = processEditListData;
       const response = {
         pageNum: '1',
         pageSize: '10',
@@ -93,7 +98,7 @@ const [registerLatestVersionTable, {reload}] = useTable({
         message: '',
         data: [],
       };
-    return {...response, data: processEditDataList.value};
+      return { ...response, data: processEditDataList.value };
     },
     pagination: false,
     columns: processVersionColumns,
@@ -110,23 +115,21 @@ const [registerLatestVersionTable, {reload}] = useTable({
     showTableSetting: false,
     bordered: true,
     showIndexColumn: false,
-});
+  });
 
-//初始化 "生效版本" 表格
-const [registerVersionHistoryTable, {
-  reload: reloadVersionHistory
-}] = useTable({
+  //初始化 "生效版本" 表格
+  const [registerVersionHistoryTable, { reload: reloadVersionHistory }] = useTable({
     api: async (params) => {
       const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
         total: versionHistoryListData.length,
         code: '',
         message: '',
         data: versionHistoryListData,
       };
-    return {...response, data: versionHistoryListData};
+      return { ...response, data: versionHistoryListData };
     },
     columns: versionHistoryColumns,
     rowSelection: false,
@@ -139,53 +142,74 @@ const [registerVersionHistoryTable, {
       title: '操作',
       dataIndex: 'action',
     },
-});
+  });
 
-// 初始化弹窗
-const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
-  setModalProps({loading: false, confirmLoading: false});
-});
+  // 初始化弹窗
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      loading: false,
+      confirmLoading: false,
+      showOkBtn: false,
+      cancelText: '关闭',
+    } as ModalProps);
+  });
 
-/**新增节点*/
-function addNode() {
+  /**新增节点*/
+  function addNode() {
     const data = {
-    "nodeIndex": Math.max(...processEditDataList.value.map(item => item.nodeIndex)) + 1,
-    "approver": [],
-    "approveType": "1",
+      nodeIndex: Math.max(...processEditDataList.value.map((item) => item.nodeIndex)) + 1,
+      approver: [],
+      approveType: '1',
     };
     processEditDataList.value.push(data);
     reload();
-};
+  }
 
-/** 立即生效 */
-function startWork() {
+  /** 立即生效 */
+  function startWork() {
     createMessage.success('成功生效!');
     reload();
-};
+  }
 
-/** 保存 */
-function handleSave() {
+  /** 保存 */
+  function handleSave() {
     createMessage.success('保存成功!');
     reload();
-};
+  }
 
-/** 删除 按钮 */
-function handleDelete(record: Recordable) {
+  /** 删除 按钮 */
+  function handleDelete(record: Recordable) {
     processEditDataList.value.splice(
       processEditDataList.value.findIndex((item) => item.nodeIndex === record.nodeIndex),
       1,
     );
     createMessage.success('删除成功!');
     reload();
-}
+  }
 
-/** 应用 按钮 */
-function handleApply(record: Recordable) {
+  /** 应用 按钮 */
+  function handleApply(record: Recordable) {
     createMessage.success('应用成功');
-}
+  }
 
-/** 确认按钮 */
-async function handleSubmit() {
-  closeModal()
-}
+  /** 确认按钮 */
+  async function handleSubmit() {
+    closeModal();
+  }
 </script>
+<style scoped lang="scss">
+  ::v-deep .vben-basic-table {
+    height: auto;
+  }
+  .button-group {
+    display: flex;
+    margin-top: 15px;
+    .bt-g-left {
+      flex: 1;
+    }
+    .bt-g-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+</style>

src/views/dataSharingAndExchange/auditConfig/auditConfig.data.ts

@@ -32,6 +32,7 @@ export const columns: BasicColumn[any] = [
     title: '需要审批的资产类型',
     dataIndex: 'assetType',
     width: 150,
+    slots: { customRender: 'assetType' },
   },
   {
     title: '流程发布状态',

src/views/dataSharingAndExchange/auditConfig/auditConfigData.ts

 // 权限管理 列表数据
 export const auditConfigListData: any[] = [
   {
-    "id": 0,
-    "applicationType": "上架",
-    "assetType": ['数据集', '标签', '文件'],
-    "processReleaseStatus": "已发布",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-24 10:04:04",
-    "updateBy": "admin",
-    "updateDate": "2024-10-24 10:04:04"
-  },
-  {
-    "id": 1,
-    "applicationType": "下架",
-    "assetType": ['数据集', '标签', '文件'],
-    "processReleaseStatus": "已发布",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-24 18:44:16",
-    "updateBy": "admin",
-    "updateDate": "2024-10-24 18:44:16"
-  },
-  {
-    "id": 2,
-    "applicationType": "下载",
-    "assetType": ['数据集', '标签', '文件'],
-    "processReleaseStatus": "已发布",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-25 11:05:05",
-    "updateBy": "admin",
-    "updateDate": "2024-10-25 11:05:05"
-  },
-  {
-    "id": 3,
-    "applicationType": "推送",
-    "assetType": ['数据集', '标签'],
-    "processReleaseStatus": "已发布",
-    "delFlag": "0",
-    "flag": "1",
-    "createBy": "admin",
-    "createDate": "2024-10-27 09:27:29",
-    "updateBy": "admin",
-    "updateDate": "2024-10-27 09:27:29"
-  }
+    id: 0,
+    applicationType: '上架',
+    assetType: [
+      {
+        name: '数据集',
+        checked: true,
+        icon: 'ant-design:insert-row-above-outlined',
+      },
+      {
+        name: '标签',
+        checked: true,
+        icon: 'ant-design:tag-outlined',
+      },
+      {
+        name: '文件',
+        checked: true,
+        icon: 'ant-design:file-text-outlined',
+      },
+    ],
+    processReleaseStatus: '已发布',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    id: 1,
+    applicationType: '下架',
+    assetType: [
+      {
+        name: '数据集',
+        checked: true,
+        icon: 'ant-design:insert-row-above-outlined',
+      },
+      {
+        name: '标签',
+        checked: true,
+        icon: 'ant-design:tag-outlined',
+      },
+      {
+        name: '文件',
+        checked: true,
+        icon: 'ant-design:file-text-outlined',
+      },
+    ],
+    processReleaseStatus: '已发布',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-24 18:44:16',
+    updateBy: 'admin',
+    updateDate: '2024-10-24 18:44:16',
+  },
+  {
+    id: 2,
+    applicationType: '下载',
+    assetType: [
+      {
+        name: '数据集',
+        checked: true,
+        icon: 'ant-design:insert-row-above-outlined',
+      },
+      {
+        name: '标签',
+        checked: true,
+        icon: 'ant-design:tag-outlined',
+      },
+      {
+        name: '文件',
+        checked: true,
+        icon: 'ant-design:file-text-outlined',
+      },
+    ],
+    processReleaseStatus: '已发布',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-25 11:05:05',
+    updateBy: 'admin',
+    updateDate: '2024-10-25 11:05:05',
+  },
+  {
+    id: 3,
+    applicationType: '推送',
+    assetType: [
+      {
+        name: '数据集',
+        checked: true,
+        icon: 'ant-design:insert-row-above-outlined',
+      },
+      {
+        name: '标签',
+        checked: true,
+        icon: 'ant-design:tag-outlined',
+      },
+    ],
+    processReleaseStatus: '已发布',
+    delFlag: '0',
+    flag: '1',
+    createBy: 'admin',
+    createDate: '2024-10-27 09:27:29',
+    updateBy: 'admin',
+    updateDate: '2024-10-27 09:27:29',
+  },
+];
+export const typeOptions = [
+  { label: '上架', value: '1' },
+  { label: '下架', value: '2' },
+  { label: '下载', value: '3' },
+  { label: '推送', value: '4' },
+  { label: 'API调用-拉取', value: '5' },
+  { label: 'API调用-推送', value: '6' },
 ];

src/views/dataSharingAndExchange/auditConfig/index.vue

 <template>
   <!-- 审核配置 -->
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <template #headerContent>
+      <div class="flex">
+        <div class="flex-1 header">
+          <AuditOutlined class="h-icon" />
+          <div class="h-des">审核配置</div>
+        </div>
+        <a-button type="link" style="font-size: 20px" @click="handleRefresh"
+          ><SyncOutlined
+        /></a-button>
+      </div>
+    </template>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
+      <template #headerTop>
+        <Select
+          style="width: 200px"
+          v-model:value="queryParams.type"
+          placeholder="申请类型"
+          :options="typeOptions"
+        />
       </template>
+      <template #toolbar> </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'assetType'">
-          <Tag
-            color="blue"
-            v-for="item in record.assetType"
-            :key="item"
-            style="margin: 2px;"
-          >
+          <Tag color="blue" v-for="item in record.assetType" :key="item" style="margin: 2px">
             {{ item }}
           </Tag>
         </template>
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
-              {
-                icon: 'ant-design:tool-outlined',
-                // label: '审批总产配置',
-                onClick: handleConfig.bind(null, record),
-              },
+              // {
+              //   icon: 'ant-design:tool-outlined',
+              //   // label: '审批总产配置',
+              //   onClick: handleConfig.bind(null, record),
+              // },
               {
                 icon: 'clarity:note-edit-line',
                 // label: '编辑',
@@ -32,64 +45,77 @@
           />
         </template>
       </template>
+      <template #assetType="{ record }">
+        <div class="asset-list" v-for="item in record.assetType" :key="item">
+          <div class="asset-type">
+            <div class="t-d">
+              <Icon class="t-icon" v-if="item.icon" :icon="item.icon" />
+              <div class="t-des">
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="t-bt">
+              <Switch class="t-switch" v-model:checked="item.checked" />
+            </div>
+          </div>
+        </div>
+      </template>
     </BasicTable>
   </PageWrapper>
   <!-- 流程编辑 - 弹窗 -->
-  <ProcessEditModal @register="registerProcessEditModal" @success="handleSuccess"/>
+  <ProcessEditModal @register="registerProcessEditModal" @success="handleSuccess" />
   <!-- 需要审批的资产类型 - 弹窗 -->
-  <AssetTypeModal @register="registerAssetTypeModal" @success="handleSuccess"/>
+  <AssetTypeModal @register="registerAssetTypeModal" @success="handleSuccess" />
 </template>
 <script lang="ts" setup>
-import {reactive, ref} from 'vue';
-import {BasicTable, useTable, TableAction} from '@/components/Table';
-import {Tag} from 'ant-design-vue';
-import {PageWrapper} from '@/components/Page';
-import {useMessage} from '@/hooks/web/useMessage';
-import {useModal} from '@/components/Modal';
-import ProcessEditModal from '@/views/dataSharingAndExchange/auditConfig/ProcessEditModal.vue'
-import AssetTypeModal from '@/views/dataSharingAndExchange/auditConfig/AssetTypeModal.vue'
-import {
-  columns,
-  searchFormSchema
-} from "@/views/dataSharingAndExchange/auditConfig/auditConfig.data";
-import {auditConfigListData} from "@/views/dataSharingAndExchange/auditConfig/auditConfigData";
+  import { reactive, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { Tag, Select, Switch } from 'ant-design-vue';
+  import { AuditOutlined, SyncOutlined } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import ProcessEditModal from '@/views/dataSharingAndExchange/auditConfig/ProcessEditModal.vue';
+  import AssetTypeModal from '@/views/dataSharingAndExchange/auditConfig/AssetTypeModal.vue';
+  import { columns } from '@/views/dataSharingAndExchange/auditConfig/auditConfig.data';
+  import {
+    auditConfigListData,
+    typeOptions,
+  } from '@/views/dataSharingAndExchange/auditConfig/auditConfigData';
 
-defineOptions({name: 'AuditConfig'});
-const {createMessage} = useMessage();
-const [registerProcessEditModal, {openModal: openProcessEditModal}] = useModal();
-const [registerAssetTypeModal, {openModal: openAssetTypeModal}] = useModal();
-const searchInfo = reactive<Recordable>({});
-const tableData = ref([])
-const [registerTable, {
-  reload,
-  updateTableDataRecord,
-  getSearchInfo,
-  getForm,
-  getRowSelection
-}] = useTable({
+  const queryParams = {};
+  const { createMessage } = useMessage();
+  const [registerProcessEditModal, { openModal: openProcessEditModal }] = useModal();
+  const [registerAssetTypeModal, { openModal: openAssetTypeModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
     title: '',
     api: async (params) => {
       var data = [];
       const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
         total: data.length,
         code: '',
         message: '',
         data: [],
       };
-    return {...response, data: auditConfigListData};
+      return { ...response, data: auditConfigListData };
     },
     rowKey: 'id',
     columns,
-  rowSelection: true,
-  formConfig: {
-    labelWidth: 10,
-    schemas: searchFormSchema,
-    autoSubmitOnEnter: false,
-  },
-  useSearchForm: true,
+    // formConfig: {
+    //   labelWidth: 10,
+    //   schemas: searchFormSchema,
+    //   autoSubmitOnEnter: false,
+    // },
+    // useSearchForm: true,
     showTableSetting: false,
     showIndexColumn: false,
     bordered: true,
@@ -101,26 +127,67 @@ const [registerTable, {
       title: '操作',
       dataIndex: 'action',
     },
-});
+  });
 
-/** 刷新 按钮 */
-function handleReload() {
-  createMessage.success('刷新成功！')
+  /** 刷新 按钮 */
+  function handleReload() {
+    createMessage.success('刷新成功！');
     reload();
-}
+  }
 
-/** 审批总产配置 按钮 */
-function handleConfig(record: Recordable) {
+  /** 审批总产配置 按钮 */
+  function handleConfig(record: Recordable) {
     openAssetTypeModal(true, {});
-}
+  }
 
-/** 编辑 按钮 */
-function handleEdit(record: Recordable) {
+  /** 编辑 按钮 */
+  function handleEdit(record: Recordable) {
     openProcessEditModal(true, {});
-}
+  }
 
-/** 成功时返回的方法 */
-function handleSuccess() {
+  /** 成功时返回的方法 */
+  function handleSuccess() {
     reload();
-}
+  }
+  function handleRefresh() {
+    createMessage.success('刷新成功！');
+  }
 </script>
+<style scoped>
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-icon {
+      font-size: 30px;
+      color: #03aabb;
+    }
+    .h-des {
+      font-size: 18px;
+      font-weight: bolder;
+    }
+  }
+  .asset-list {
+    margin: 5px 0;
+    .asset-type {
+      display: flex;
+      gap: 10px;
+      padding: 0 20px;
+      .t-d {
+        display: flex;
+        gap: 10px;
+        flex: 1;
+        text-align: left;
+        .t-icon {
+          font-size: 18px;
+          color: #1ab3c5;
+        }
+        .t-des {}
+      }
+      .t-bt {
+        flex: 1;
+        .t-switch {}
+      }
+    }
+  }
+</style>

src/views/dataSharingAndExchange/commonSetting/index.vue

@@ -3,9 +3,9 @@
     <PageWrapper class="page-wrapper">
       <template #headerContent>
         <div class="headerContent">
-          <div>
+          <div style="display: flex">
             <Icon icon="grommet-icons:settings-option" :size="40" :color="'#61aaff'" />
-            <span class="title">通用配置</span>
+            <div class="title" style="margin-left: 10px; line-height: 40px">通用配置</div>
           </div>
         </div>
       </template>