Skip to content

B
bigDataSystem
Commit 18e954ba authored by LiXuyang's avatar LiXuyang
Browse files
Options

审核配置/通用配置

parent c21f4104
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 278 deletions
src/views/dataSharingAndExchange/auditConfig/ProcessEditModal.vue
View file @ 18e954ba
......@@ -8,32 +8,36 @@
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 }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
color: 'error',
icon: 'ant-design:delete-outlined',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
{
color: 'error',
icon: 'ant-design:delete-outlined',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</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">
......@@ -41,16 +45,16 @@
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:file-sync-outlined',
popConfirm: {
title: '是否应用该版本',
placement: 'left',
confirm: handleApply.bind(null, record),
disabled: record.workStatus === '生效中'
},
},
]"
{
icon: 'ant-design:file-sync-outlined',
popConfirm: {
title: '是否应用该版本',
placement: 'left',
confirm: handleApply.bind(null, record),
disabled: record.workStatus === '生效中',
},
},
]"
/>
</template>
</template>
......@@ -60,132 +64,152 @@
</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 {
processEditListData,
processVersionColumns,
versionHistoryListData,
versionHistoryColumns,
} from "@/views/dataSharingAndExchange/auditConfig/auditConfig.data.ts"
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';
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({
api: async () => {
processEditDataList.value = processEditListData
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: processEditDataList.value.length,
code: '',
message: '',
data: [],
};
return {...response, data: processEditDataList.value};
},
pagination: false,
columns: processVersionColumns,
useSearchForm: false,
actionColumn: {
width: 50,
title: '操作',
dataIndex: 'action',
},
scroll: {
y: 300,
},
editRow: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
});
//初始化 "最新版本" 表格
const [registerLatestVersionTable, { reload }] = useTable({
api: async () => {
processEditDataList.value = processEditListData;
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: processEditDataList.value.length,
code: '',
message: '',
data: [],
};
return { ...response, data: processEditDataList.value };
},
pagination: false,
columns: processVersionColumns,
useSearchForm: false,
actionColumn: {
width: 50,
title: '操作',
dataIndex: 'action',
},
scroll: {
y: 300,
},
editRow: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
});
//初始化 "生效版本" 表格
const [registerVersionHistoryTable, {
reload: reloadVersionHistory
}] = useTable({
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: versionHistoryListData.length,
code: '',
message: '',
data: versionHistoryListData,
};
return {...response, data: versionHistoryListData};
},
columns: versionHistoryColumns,
rowSelection: false,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: true,
bordered: true,
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
});
//初始化 "生效版本" 表格
const [registerVersionHistoryTable, { reload: reloadVersionHistory }] = useTable({
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: versionHistoryListData.length,
code: '',
message: '',
data: versionHistoryListData,
};
return { ...response, data: versionHistoryListData };
},
columns: versionHistoryColumns,
rowSelection: false,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: true,
bordered: true,
actionColumn: {
width: 100,
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() {
const data = {
"nodeIndex": Math.max(...processEditDataList.value.map(item => item.nodeIndex)) + 1,
"approver": [],
"approveType": "1",
};
processEditDataList.value.push(data);
reload();
};
/**新增节点*/
function addNode() {
const data = {
nodeIndex: Math.max(...processEditDataList.value.map((item) => item.nodeIndex)) + 1,
approver: [],
approveType: '1',
};
processEditDataList.value.push(data);
reload();
}
/** 立即生效 */
function startWork() {
createMessage.success('成功生效!');
reload();
};
/** 立即生效 */
function startWork() {
createMessage.success('成功生效!');
reload();
}
/** 保存 */
function handleSave() {
createMessage.success('保存成功!');
reload();
};
/** 保存 */
function handleSave() {
createMessage.success('保存成功!');
reload();
}
/** 删除 按钮 */
function handleDelete(record: Recordable) {
processEditDataList.value.splice(
processEditDataList.value.findIndex((item) => item.nodeIndex === record.nodeIndex),
1,
);
createMessage.success('删除成功!');
reload();
}
/** 删除 按钮 */
function handleDelete(record: Recordable) {
processEditDataList.value.splice(
processEditDataList.value.findIndex((item) => item.nodeIndex === record.nodeIndex),
1,
);
createMessage.success('删除成功!');
reload();
}
/** 应用 按钮 */
function handleApply(record: Recordable) {
createMessage.success('应用成功');
}
/** 应用 按钮 */
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
View file @ 18e954ba
......@@ -32,6 +32,7 @@ export const columns: BasicColumn[any] = [
title: '需要审批的资产类型',
dataIndex: 'assetType',
width: 150,
slots: { customRender: 'assetType' },
},
{
title: '流程发布状态',
......
src/views/dataSharingAndExchange/auditConfig/auditConfigData.ts
View file @ 18e954ba
// 权限管理 列表数据
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: 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": ['数据集', '标签', '文件'],
"processReleaseStatus": "已发布",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-24 18:44:16",
"updateBy": "admin",
"updateDate": "2024-10-24 18:44:16"
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": ['数据集', '标签', '文件'],
"processReleaseStatus": "已发布",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-25 11:05:05",
"updateBy": "admin",
"updateDate": "2024-10-25 11:05:05"
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": ['数据集', '标签'],
"processReleaseStatus": "已发布",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-27 09:27:29",
"updateBy": "admin",
"updateDate": "2024-10-27 09:27:29"
}
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
View file @ 18e954ba
<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,95 +45,149 @@
/>
</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({
title: '',
api: async (params) => {
var data = [];
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: data.length,
code: '',
message: '',
data: [],
};
return {...response, data: auditConfigListData};
},
rowKey: 'id',
columns,
rowSelection: true,
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: false,
},
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
});
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',
total: data.length,
code: '',
message: '',
data: [],
};
return { ...response, data: auditConfigListData };
},
rowKey: 'id',
columns,
// formConfig: {
// labelWidth: 10,
// schemas: searchFormSchema,
// autoSubmitOnEnter: false,
// },
// useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
});
/** 刷新 按钮 */
function handleReload() {
createMessage.success('刷新成功！')
reload();
}
/** 刷新 按钮 */
function handleReload() {
createMessage.success('刷新成功！');
reload();
}
/** 审批总产配置 按钮 */
function handleConfig(record: Recordable) {
openAssetTypeModal(true, {});
}
/** 审批总产配置 按钮 */
function handleConfig(record: Recordable) {
openAssetTypeModal(true, {});
}
/** 编辑 按钮 */
function handleEdit(record: Recordable) {
openProcessEditModal(true, {});
}
/** 编辑 按钮 */
function handleEdit(record: Recordable) {
openProcessEditModal(true, {});
}
/** 成功时返回的方法 */
function handleSuccess() {
reload();
}
/** 成功时返回的方法 */
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
View file @ 18e954ba
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment