Skip to content

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

群组管理

parent ac0db2b6
Hide whitespace changes
Inline Side-by-side
Showing with 576 additions and 0 deletions
src/views/mallResourceDevelopment/labelDevelop/group/addGroup/add.data.ts 0 → 100644
View file @ b5010e76
import { FormSchema } from '@/components/Form';
import {BasicColumn} from "@/components/Table";
import {DatePickerProps} from "ant-design-vue";
export const topFormSchema: FormSchema[] = [
{
label: '路径',
field: 'path',
required: true,
slot: 'path',
colProps: { span: 24 },
},
{
field: 'title1',
slot: 'title1',
colProps: { span: 24 },
},
{
label: '自动下架日期',
field: 'downloadDate',
slot: 'downloadDate',
component: 'DatePicker',
},
{
label: '可见范围',
field: 'visibleRange',
required: true,
slot: 'visibleRange',
},
{
label: '共享类型',
field: 'shareType',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '有条件共享',
value: '有条件共享',
},
{
label: '无条件共享',
value: '无条件共享',
},
],
},
},
];
export const bottomFormSchema: FormSchema[] = [
{
label: '资源名称',
field: 'name',
required: true,
component: 'Input',
},
{
label: '描述',
field: 'des',
component: 'InputTextArea',
componentProps: {
rows: '2',
},
},
{
label: '权属机构',
field: 'dept',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '机构管理/数据平台治理部',
value: '机构管理/数据平台治理部',
},
],
},
},
{
label: '业务标签',
field: 'businessTag',
component: 'Select',
componentProps: {
options: [
{
label: '业务标签1',
value: '业务标签1',
},
{
label: '业务标签2',
value: '业务标签2',
},
],
},
},
{
label: '敏感状态',
field: 'sensitiveStatus',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '敏感',
value: '敏感',
},
{
label: '不敏感',
value: '不敏感',
},
],
},
},
];
export const rangeTableColumn: BasicColumn[] = [
{
title: '字段名称',
dataIndex: 'name',
},
{
title: '字段类型',
dataIndex: 'type',
},
];
src/views/mallResourceDevelopment/labelDevelop/group/addGroup/addData.ts 0 → 100644
View file @ b5010e76
export const rangeTableData = [
{
name: 'field1',
type: 'varchar(255)',
},
{
name: 'field2',
type: 'varchar(255)',
},
{
name: 'field3',
type: 'varchar(255)',
},
];
src/views/mallResourceDevelopment/labelDevelop/group/addGroup/index.vue 0 → 100644
View file @ b5010e76
<template>
<PageWrapper title="新建数据集" dense content-full-height fixed-height>
<template #extra>
<a-button type="link">
<div><RollbackOutlined /></div>取消
</a-button>
<a-button type="link">
<div><CheckOutlined /></div>创建
</a-button>
</template>
<template #footer>
<BasicForm @register="topForm">
<template #path="{ field, model }">
<InputSearch
v-model:value="model[field]"
placeholder="请选择"
enter-button="选择"
@search="handlePathSelect"
/>
</template>
<template #title1="{ field, model }">
<span style="font-size: 15px; font-weight: bolder">默认上架配置</span>
</template>
<template #downloadDate="{ field, model }">
<DatePicker style="width: 100%" v-model:value="model[field]" />
</template>
<template #visibleRange="{ field, model }">
<div class="flex">
<Select
placeholder="请选择"
v-model:value="model[field]"
:options="visibleRangeOptions"
/>
<a-button type="primary">选择范围 </a-button>
</div>
</template>
</BasicForm>
<div class="title">资源信息</div>
<div style="border: 1px solid #dde1ee" class="flex">
<div class="w-1/4">
<div class="flex" style="padding: 5px 0; background-color: #f5f7fc">
<span style="padding: 5px 15px">群组</span>
<Input style="width: 200px" placeholder="搜索名称" />
</div>
<div>
<div v-for="item in tagList" :key="item">
<div
class="flex"
style="cursor: pointer; padding: 10px 15px"
:class="selectItem === item ? 'select-class' : null"
@click="handleItem(item)"
>
<TagOutlined style="color: #e28c34; margin: 0 10px" />
<span>{{ item }}</span>
</div>
</div>
</div>
</div>
<div class="w-3/4" style="padding: 0 10px">
<div>
<div class="title">资源信息</div>
</div>
<div>
<BasicForm @register="bottomForm" />
</div>
<div>
<div class="title">开放权限</div>
<div class="flex">
<div class="bottom-label">下载</div>
<Switch v-model:checked="authority.downLoad" />
</div>
<Divider />
<div class="flex">
<div class="bottom-label">API调用-拉取</div>
<Switch v-model:checked="authority.apiPull" />
</div>
<Divider />
<div>
<div class="title">选择字段范围</div>
<BasicTable @register="rangeTable" />
</div>
</div>
</div>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
import BasicForm from '../../../../../components/Form/src/BasicForm.vue';
import { InputSearch, Select, Input, Switch, Divider, DatePicker } from 'ant-design-vue';
import { useForm } from '@/components/Form';
import { formSchema } from '@/views/auditLog/audi.data';
import { TagOutlined, RollbackOutlined, CheckOutlined } from '@ant-design/icons-vue';
import {
bottomFormSchema,
rangeTableColumn,
topFormSchema,
} from '@/views/mallResourceDevelopment/labelDevelop/group/addGroup/add.data';
import { BaseFormatProps } from 'vue-i18n';
import { ref } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { getMetadataColumns } from '@/views/dataIntegration/dataLoading/dataEntryLake/offlineLoading.data';
import { rangeTableData } from '@/views/mallResourceDevelopment/labelDevelop/group/addGroup/addData';
const visibleRangeOptions = [
{
label: '所有人',
value: '所有人',
},
{
label: '部分人',
value: '部分人',
},
];
function handlePathSelect() {}
const [topForm] = useForm({
labelWidth: 90,
baseColProps: { span: 12 },
schemas: topFormSchema,
showActionButtonGroup: false,
});
const tagList = ['员工类型信息缺失的男员工'];
const selectItem = ref('员工类型信息缺失的男员工');
function handleItem(item) {
selectItem.value = item;
}
const [bottomForm] = useForm({
labelWidth: 90,
baseColProps: { span: 12 },
schemas: bottomFormSchema,
showActionButtonGroup: false,
} as BaseFormatProps);
const authority = ref({
downLoad: null,
apiPull: null,
});
const [rangeTable] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: rangeTableData.length,
code: '',
message: '',
data: rangeTableData,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: true,
columns: rangeTableColumn,
showTableSetting: false,
showIndexColumn: false,
bordered: false,
});
</script>
<style scoped>
.select-class {
background-color: #e3f1fe;
}
.title {
font-size: 15px;
font-weight: bolder;
margin: 10px 0;
}
.bottom-label {
text-align: right;
padding-right: 10px;
}
</style>
src/views/mallResourceDevelopment/labelDevelop/group/group.data.ts 0 → 100644
View file @ b5010e76
import {BasicColumn, FormSchema} from '@/components/Table';
import {InputProps} from "ant-design-vue";
export const gourpTableFormSchema: FormSchema[] = [
{
field: 'key',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
} as InputProps,
},
];
export const groupTableColumn: BasicColumn[] = [
{
title: '群组名称',
dataIndex: 'name',
},
{
title: '拥有者',
dataIndex: 'owner',
},
{
title: '更新时间',
dataIndex: 'updateTime',
},
{
title: '执行时间',
dataIndex: 'runTime',
},
{
title: '执行状态',
dataIndex: 'runStatus',
},
{
title: '数据量',
dataIndex: 'dataNum',
},
{
title: '新建数据集状态',
dataIndex: 'newDataGroupStatus',
},
];
src/views/mallResourceDevelopment/labelDevelop/group/groupData.ts 0 → 100644
View file @ b5010e76
export const groupTreeData = [
{
title: '群组管理',
key: '0',
name: '群组管理',
list: [
{
businessId: 1,
name: '共享工作区',
updateTime: '2023/06/08 20:19:33',
},
],
children: [
{
title: '共享工作区',
name: '共享工作区',
key: '0-0',
list: [
{
businessId: 2,
name: '员工主体',
updateTime: '2023/06/08 20:19:33',
},
],
children: [
{
title: '员工主体',
key: '0-0-0',
name: '员工主体',
list: [
{
businessId: 3,
name: '员工类型信息',
owner: 'admin',
updateTime: '2023/06/08 20:19:33',
runTime: '2023/06/08 20:19:33',
runStatus: '执行成功',
dataNum: '41',
newDataGroupStatus: '未新建',
},
{
businessId: 4,
name: '特殊退役人员',
owner: 'admin',
updateTime: '2023/06/08 17:43:11',
runTime: '2023/06/08 17:43:11',
runStatus: '执行成功',
dataNum: '0',
newDataGroupStatus: '已新建',
},
],
},
],
},
]
}
]
src/views/mallResourceDevelopment/labelDevelop/group/index.vue 0 → 100644
View file @ b5010e76
<template>
<PageWrapper dense>
<template #footer>
<div class="flex">
<div class="w-1/6">
<BasicTree
class="flex-1"
:treeData="groupTreeData"
@select="handleSelect"
ref="treeData"
/>
</div>
<div class="w-5/6">
<PageWrapper dense contentFullHeight fixedHeight>
<template #extra>
<a-button type="primary" :disabled="selectDisabled" @click="handleNewDataGroup">新建数据集</a-button>
<a-button type="primary" :disabled="selectDisabled">删除</a-button>
<a-button type="primary">新建群组</a-button>
</template>
<template #footer>
<BasicTable @register="groupTable" :searchInfo="searchInfo" ref="basicTable">
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
//编辑
icon: 'ant-design:edit-outlined',
},
{
//运行
icon: 'ion:play-outline',
},
{
//终止
icon: 'ion:power-outline',
},
{
//下载
icon: 'ant-design:download-outlined',
},
{
//删除
icon: 'ant-design:delete-outlined',
},
{
//添加表格
icon: 'ant-design:file-add-outlined',
},
{
//表格详情查询
icon: 'ant-design:file-search-outlined',
},
]"
/>
</template>
</template>
</BasicTable>
</template>
</PageWrapper>
</div>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
import BasicTree from '../../../../components/Tree/src/BasicTree.vue';
import { groupTreeData } from './groupData';
import { BasicTableProps, useTable, BasicTable, TableAction } from '@/components/Table';
import { labelTableData } from '@/views/dataStandards/labelDropInspection/labelData';
import {
labelColumn,
labelFormSchemas,
} from '@/views/dataStandards/labelDropInspection/label.data';
import {computed, reactive, ref, unref} from 'vue';
import {
gourpTableFormSchema,
groupTableColumn,
} from '@/views/mallResourceDevelopment/labelDevelop/group/group.data';
import { FormProps } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import {useRouter} from "vue-router";
const treeData = ref();
const tabName = ref();
const basicTable = ref(null);
const selectDisabled = computed(() => {
if (tabName.value) {
return getGroupRowSelection().selectedRowKeys <= 0;
} else {
return true;
}
});
const router = useRouter();
function handleNewDataGroup() {
router.push({
path: '/mallResourceDevelopment/labelDevelop/group/addGroup',
});
}
function handleSelect() {
const keys = unref(treeData).getSelectedKeys();
const node = unref(treeData).getSelectedNode(keys[0]);
console.log('node', node);
// 获取标题
tabName.value = node.title;
if (node.list) {
const list = cloneDeep(node.list);
console.log('children', list);
setGroupData(list);
} else {
setGroupData([]);
}
// 获取列表
// console.log('key', key);
// tabName.value = findTitleById(labelTreeData[0], key[0]);
// console.log('tabName', tabName.value);
}
const searchInfo = reactive<Recordable>({});
const [groupTable, { setTableData: setGroupData, getRowSelection: getGroupRowSelection }] = useTable({
title: '',
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: [].length,
code: '',
message: '',
data: [],
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: groupTableColumn,
showIndexColumn: false,
rowSelection: true,
striped: false,
// 搜索
formConfig: {
labelWidth: 120,
baseColProps: { span: 6 },
schemas: gourpTableFormSchema,
autoSubmitOnEnter: true,
} as FormProps,
useSearchForm: true,
showTableSetting: false,
bordered: true,
actionColumn: {
width: 300,
title: '操作',
dataIndex: 'action',
},
} as BasicTableProps);
</script>
<style scoped></style>
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