Skip to content

B
bigDataSystem
Commit 0cea01d3 authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改路由 修改指标主体 修改指标管理

parent 488b6595
Show whitespace changes
Inline Side-by-side
Showing with 1109 additions and 58 deletions
src/router/routes/index.ts
View file @ 0cea01d3
......@@ -252,7 +252,8 @@ export const MallSourceFileRoute: AppRouteRecordRaw = {
{
path: 'fileByApply/fileByApplyDetail',
name: 'fileByApplyDetail',
component: () => import('@/views/mallResourceDevelopment/file/fileByApply/fileByApplyDetail.vue'),
component: () =>
import('@/views/mallResourceDevelopment/file/fileByApply/fileByApplyDetail.vue'),
meta: {
title: '我申请的文件详情',
icon: '',
......@@ -726,6 +727,26 @@ export const BenchmarkRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'benchmark/benchmarkMainbody/labelDetail',
name: 'labelDetail',
component: () =>
import('@/views/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail/index.vue'),
meta: {
title: '指标明细',
icon: 'icon-label',
},
},
{
path: 'benchmark/benchmarkManagement/atomLabel',
name: 'atomLabel',
component: () =>
import('@/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/index.vue'),
meta: {
title: '原子标签',
icon: 'icon-atom-label',
},
},
],
};
......
src/views/mallResourceDevelopment/benchmark/benchmarkMainbody/index.vue
View file @ 0cea01d3
......@@ -43,12 +43,15 @@
:actions="[
{
// 编辑
icon: 'ant-design:edit-outlined',
tooltip: '编辑',
onClick: handleBody.bind(null, record),
},
{
// 标签
icon: 'ant-design:book-outlined',
tooltip: '标签',
},
]"
:dropDownActions="[
......@@ -81,7 +84,9 @@
<a @click="handleBody(record)">{{ text }}</a>
</template>
<template #originalSubject="{ text, record }">
<a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
<a-button type="primary" @click="handleBody(record)">{{
text + '明细信息'
}}</a-button>
</template>
</BasicTable>
</template>
......@@ -190,7 +195,7 @@
function handleBody(record) {
console.log('recode', record);
router.push({
path: '/mallResourceDevelopment/label/labelDetail',
path: '/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail',
query: { ...record },
});
}
......@@ -214,9 +219,7 @@
rowKey: 'businessId',
columns: tabTableColumn,
rowSelection: {
type: 'checkbox',
},
rowSelection: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
......
src/views/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail/index.vue
View file @ 0cea01d3
......@@ -60,22 +60,15 @@
<script lang="ts" setup>
import { Input, InputSearch, Select, TabPane, Tabs } from 'ant-design-vue';
import { SlidersOutlined } from '@ant-design/icons-vue';
import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import { useRoute } from 'vue-router';
import BasicForm from '@/components/Form/src/BasicForm.vue';
import { useForm } from '@/components/Form';
import { onMounted, ref } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import {
columnFormSchema,
columnTableColumn,
detailFormSchema,
} from '@/views/mallResourceDevelopment/label/label/labelDetail/detail.data';
import {
columnTableData, gatherData,
gatherDataTableHeader,
} from '@/views/mallResourceDevelopment/label/label/labelDetail/detailData';
import { columnFormSchema, columnTableColumn, detailFormSchema } from './detail.data';
import { columnTableData, gatherData, gatherDataTableHeader } from './detailData';
import SensitiveWayModel from './sensitiveWayModel.vue';
import { useModal } from '@/components/Modal';
import InfoModel from './infoModel.vue';
......
src/views/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail/infoModel.vue
View file @ 0cea01d3
......@@ -21,7 +21,7 @@
import { Input } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { infoFormSchema } from '@/views/mallResourceDevelopment/label/label/labelDetail/detail.data';
import { infoFormSchema } from './detail.data';
const isUpdate = ref(false);
const getTitle = '基本信息';
......
src/views/mallResourceDevelopment/benchmark/benchmarkMainbody/labelDetail/sensitiveWayModel.vue
View file @ 0cea01d3
......@@ -44,8 +44,8 @@
tabTableColumn,
tabTableFormSchema,
} from '@/views/mallResourceDevelopment/label/label/label.data';
import { sensitiveTableColumn } from '@/views/mallResourceDevelopment/label/label/labelDetail/detail.data';
import { columnTableData } from '@/views/mallResourceDevelopment/label/label/labelDetail/detailData';
import { sensitiveTableColumn } from './detail.data';
import { columnTableData } from './detailData';
import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
const getTitle = '脱敏策略';
......
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/addLabelModal.vue
View file @ 0cea01d3
......@@ -56,5 +56,6 @@
async function handleSubmit() {
await validate();
closeModal();
openmodal();
}
</script>
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/atom.data.ts 0 → 100644
View file @ 0cea01d3
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
export const atomFormSchema: FormSchema[] = [
{
field: 'key',
component: 'Input',
},
];
export const atomTableColumn: BasicColumn[] = [
{
title: '字段名称',
dataIndex: 'name',
},
{
title: '字段中文名',
dataIndex: 'chName',
},
{
title: '关联标准',
dataIndex: 'relationStandard',
},
{
title: '原子标签名称',
dataIndex: 'atomLabel',
slots: { customRender: 'atomLabel' },
},
{
title: '数据类型',
dataIndex: 'dataType',
slots: { customRender: 'dataType' },
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/atomData.ts 0 → 100644
View file @ 0cea01d3
export const atomTableData = [
{
businessId: 1,
name: 'id',
chName: '编号',
relationStandard: '',
atomLabel: '编号',
dataType: '数值',
},
{
businessId: 2,
name: 'em_name',
chName: '姓名',
relationStandard: '',
atomLabel: '姓名',
dataType: '字符串',
},
{
businessId: 3,
name: 'em_idcard',
chName: '身份证',
relationStandard: '',
atomLabel: '身份证',
dataType: '字符串',
},
{
businessId: 4,
name: 'em_address',
chName: '地址',
relationStandard: '',
atomLabel: '地址',
dataType: '字符串',
},
{
businessId: 5,
name: 'em_afterschool',
chName: '毕业院校',
relationStandard: '',
atomLabel: '毕业院校',
dataType: '字符串',
},
{
businessId: 6,
name: 'em_age',
chName: '年龄',
relationStandard: '',
atomLabel: '年龄',
dataType: '数量',
},
{
businessId: 7,
name: 'em_ancestralhome',
chName: '祖籍',
relationStandard: '',
atomLabel: '祖籍',
dataType: '字符串',
},
{
businessId: 8,
name: 'em_born',
chName: '出身日期',
relationStandard: '',
atomLabel: '出身日期',
dataType: '字符串',
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel/index.vue 0 → 100644
View file @ 0cea01d3
<template>
<PageWrapper title="生成原子标签" dense contentFullHeight fixedHeight>
<template #extra>
<a-button type="primary">保存</a-button>
</template>
<template #footer>
<BasicTable @register="registerTable">
<template #atomLabel="{ text, record }">
<span v-if="!hasSelect(record)">{{ text }}</span>
<Input v-else v-model:value="record.atomLabel" />
</template>
<template #dataType="{ text, record }">
<span v-if="!hasSelect(record)">{{ text }}</span>
<Select
v-else
v-model:value="record.dataType"
style="width: 120px"
:options="dataTypeOptions"
/>
</template>
</BasicTable>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { Input, Select } from 'ant-design-vue';
import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import {
atomFormSchema,
atomTableColumn,
} from '@/views/mallResourceDevelopment/label/labelDevelop/atomLabel/atom.data';
import { atomTableData } from '@/views/mallResourceDevelopment/label/labelDevelop/atomLabel/atomData';
function hasSelect(record) {
return getAtomSelectKeys().includes(record.businessId);
}
const dataTypeOptions = [
{
label: '数值',
value: '数值',
},
{
label: '字符串',
value: '字符串',
},
];
const [registerTable, { getSelectRowKeys: getAtomSelectKeys }] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: atomTableData.length,
code: '',
message: '',
data: atomTableData,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: true,
columns: atomTableColumn,
showIndexColumn: false,
showTableSetting: false,
pagination: false,
formConfig: {
labelWidth: 80,
schemas: atomFormSchema,
autoSubmitOnEnter: true,
},
} as BasicTableProps);
</script>
<style scoped></style>
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/createLabel/create.data.ts 0 → 100644
View file @ 0cea01d3
import {FormSchema} from "@/components/Form";
export const createHeaderFormSchema: FormSchema[] = [
{
label: '标签类型',
field: 'labelType',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '衍生标签',
value: '衍生标签',
},
{
label: '衍生标签',
value: '衍生标签',
},
],
},
},
{
label: '标签分层',
field: 'labelLayered',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '分层',
value: '分层',
},
],
},
},
{
label: '配置方式',
field: 'configWay',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '规则表达式',
value: '规则表达式',
},
],
},
},
{
label: '更新频率',
field: 'labelType',
required: true,
component: 'Select',
componentProps: {
options: [
{
label: '随主体更新',
value: '随主体更新',
},
],
},
},
];
export const createBodyFormSchema: FormSchema[] = [
{
label: '英文名称',
field: 'enName',
component: 'Input',
},
{
label: '逻辑说明',
field: 'des',
component: 'Input',
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/createLabel/createData.ts 0 → 100644
View file @ 0cea01d3
export const tabList = [
{
id: 1,
name: '全职员工',
},
{
id: 2,
name: '兼职员工',
},
{
id: 3,
name: '其他',
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/createLabel/index.vue 0 → 100644
View file @ 0cea01d3
<template>
<PageWrapper :title="title" dense contentFullHeight fixedHeight>
<template #extra>
<a-button type="primary">关联名单</a-button>
<Divider type="vertical" style="height: 32px; background-color: #eff2f9" />
<a-button type="primary">基本信息</a-button>
<a-button type="primary">保存</a-button>
<a-button type="primary">发布版本</a-button>
<a-button type="primary">版本管理</a-button>
<a-button type="primary">更新记录</a-button>
</template>
<template #footer>
<BasicForm @register="headerForm" />
<div class="flex" style="margin: 0 -24px; border-top: 1px solid #eaecf6">
<!-- 标签分层 -->
<div class="w-1/7" style="padding: 10px">
<div class="flex justify-between">
<span>标签分层</span>
<a-button type="link"><PlusOutlined /></a-button>
</div>
<div>
<List>
<template v-for="item in tabList" :key="item.id">
<List.Item
style="cursor: pointer"
:class="clickId === item.id ? 'select-item' : null"
@click="handleClick(item)"
>
<List.Item.Meta>
<template #avatar>
<Icon icon="ion:layers-outline" style="color: #f6c79a" />
</template>
<template #title>
<div :class="clickId === item.id ? 'select-item' : null">
<span>{{ item.name }}</span>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</div>
</div>
<div class="w-6/7" style="border-left: 1px solid #eaecf6">
<!-- 标题 -->
<div class="flex" style="padding: 5px 24px">
<Icon style="font-size: 22px; color: #f6c79a" icon="ion:layers-outline" />
<span style="font-size: 18px">{{ clickItem.name }}</span>
</div>
<BasicForm @register="bodyForm" />
<div style="margin: 40px 25px">
<div class="flex" v-for="group in groupList" :key="group.key">
<Select
v-model:value="group.logic"
style="width: 65px; height: 32px"
:options="logicOptions"
/>
<div style="border-top: 1px solid #d4d9e6; width: 15px; margin-top: 15px"></div>
<div>
<div
class="flex"
v-for="item in group.fieldList"
:key="item.key"
style="margin-bottom: 20px"
>
<div
style="border-left: 1px solid #d4d9e6; margin-top: 15px; margin-bottom: -36px"
></div>
<div
style="border-bottom: 1px solid #d4d9e6; width: 15px; margin-bottom: 16px"
></div>
<div class="flex" style="gap: 10px">
<Select
v-model:value="item.field"
style="width: 300px"
:options="fieldOptions"
/>
<Select
v-model:value="item.operator"
style="width: 200px"
:options="operatorOptions"
/>
<Input
v-if="!['是NULL', '不是NULL', null, undefined].includes(item.operator)"
v-model:value="item.des"
/>
<CloseOutlined @click="handleDel(group.fieldList, item.key)" />
</div>
</div>
<div class="flex">
<div
style="border-bottom: 1px solid #d4d9e6; width: 15px; margin-bottom: 16px"
></div>
<div class="flex">
<a-button
style="padding-left: 0"
type="link"
@click="handleAddField(group.fieldList)"
>添加条件</a-button
>
<a-button type="link" @click="handleAddGroup">添加组</a-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
import { Divider, List, Select, Input } from 'ant-design-vue';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { tabList } from './createData';
import Icon from '@/components/Icon/Icon.vue';
import BasicForm from '@/components/Form/src/BasicForm.vue';
import { useForm } from '@/components/Form';
import {
createBodyFormSchema,
createHeaderFormSchema,
} from '@/views/mallResourceDevelopment/label/labelDevelop/createLabel/create.data';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const title = route.query.name;
const [headerForm] = useForm({
labelWidth: 100,
baseColProps: { lg: 5, md: 5 },
schemas: createHeaderFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const clickId = ref(tabList[0].id);
const clickItem = ref(tabList[0]);
function handleClick(item) {
clickId.value = item.id;
clickItem.value = { ...item };
}
const [bodyForm] = useForm({
labelWidth: 100,
baseColProps: { span: 11 },
schemas: createBodyFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const logicOptions = [
{
label: '或',
value: '或',
},
{
label: '且',
value: '且',
},
{
label: '非',
value: '非',
},
];
const fieldOptions = [
{
label: '编号',
value: '编号',
},
{
label: '工作类型',
value: '工作类型',
},
];
const operatorOptions = [
{
label: '等于',
value: '等于',
},
{
label: '不等于',
value: '不等于',
},
{
label: '不是NULL',
value: '不是NULL',
},
{
label: '是NULL',
value: '是NULL',
},
];
const groupList = reactive([
{
key: 0,
fieldList: [
{
key: 0,
},
],
},
]);
function handleAddField(fieldList) {
fieldList.push({
key: fieldList.length,
});
}
function handleAddGroup() {
groupList.push({
key: groupList.length,
fieldList: [
{
key: 0,
},
],
});
}
function handleDel(fieldList, item) {
fieldList.splice(item, 1);
}
</script>
<style scoped>
/*点击后样式*/
.select-item {
background-color: #338bfe;
color: #ffffff;
border-radius: 8px;
}
</style>
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/index.vue
View file @ 0cea01d3
......@@ -31,7 +31,9 @@
>
<a-button class="top-button" type="primary">导入</a-button>
<a-button class="top-button" type="primary">新建文件夹</a-button
><a-button class="top-button" type="primary">批量创建原子指标</a-button>
><a-button class="top-button" type="primary" @click="handleAtomLabel"
>批量创建原子指标</a-button
>
<a-button class="top-button" type="primary" @click="handleAddLabel"
>新建指标</a-button
>
......@@ -45,10 +47,12 @@
{
// 编辑
icon: 'ant-design:edit-outlined',
tooltip: '编辑',
onClick: handleBody.bind(null, record),
},
{
// 标签
tooltip: '标签',
icon: 'ant-design:book-outlined',
},
]"
......@@ -82,7 +86,9 @@
<a @click="handleBody(record)">{{ text }}</a>
</template>
<template #originalSubject="{ text, record }">
<a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
<a-button type="primary" @click="handleBody(record)">{{
text + '明细信息'
}}</a-button>
</template>
</BasicTable>
</template>
......@@ -187,6 +193,11 @@
function handleRemove(record) {
createMessage.success('删除成功!');
}
function handleAtomLabel() {
router.push({
path: '/mallResourceDevelopment/benchmark/benchmarkManagement/atomLabel',
});
}
const router = useRouter();
function handleBody(record) {
console.log('recode', record);
......
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/label.data.ts
View file @ 0cea01d3
import { BasicColumn, FormSchema } from '@/components/Table';
import { ManOutlined } from '@ant-design/icons-vue';
import { color } from 'echarts';
export const tabTableColumn: BasicColumn[] = [
{
......@@ -6,57 +8,118 @@ export const tabTableColumn: BasicColumn[] = [
dataIndex: 'name',
},
{
title: '描述',
title: '指标英文名',
dataIndex: 'name',
},
{
title: '指标描述',
dataIndex: 'txt',
},
{
title: '创建者',
dataIndex: 'createdBy',
title: '指标类型',
dataIndex: 'type',
},
{
title: '创建时间',
dataIndex: 'createdTime',
sorter: true,
title: '开发状态',
dataIndex: 'status',
},
{
title: '创建者',
dataIndex: 'createdBy',
},
{
title: '更新时间',
dataIndex: 'updateTime',
sorter: true,
},
{
title: '原始主体',
dataIndex: 'originalSubject',
slots: { customRender: 'originalSubject' },
},
];
export const tabTableFormSchema: FormSchema[] = [
{
field: '输入关键字搜索',
field: '指标名称/英文名搜索',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
placeholder: '指标名称/英文名搜索',
style: {
marginLeft: '10px',
},
},
},
{
field: '开发状态',
component: 'Select',
componentProps: {
placeholder: '开发状态',
options: [
{ label: '开发中', value: '1' },
{ label: '已发布', value: '2' },
],
style: {
marginLeft: '20px',
},
},
},
{
field: '指标类型',
component: 'Select',
componentProps: {
placeholder: '指标类型',
options: [
{ label: '类型1', value: '1' },
{ label: '类型2', value: '2' },
],
style: {
marginLeft: '30px',
},
},
},
{
field: '更新时间范围',
component: 'DatePicker',
componentProps: {
placeholder: '更新时间范围',
style: {
marginLeft: '40px',
},
},
},
];
export const addTabFormSchema: FormSchema[] = [
{
label: '标签主体路径',
field: 'path',
slot: 'path',
label: '选择指标类型',
field: 'type',
component: 'Select',
required: true,
componentProps: {
options: [
{ label: '原子指标', value: '1' },
{ label: '衍生指标', value: '2' },
{ label: '复合指标', value: '3' },
],
},
},
{
label: '名称',
field: 'name',
component: 'Input',
required: true,
label: '原子指标是某一业务行为时间下的度量,是业务定义中不可拆分的指标,例如销售额。',
field: 'atom',
component: 'BasicTitle',
ifShow: ({ values }) => {
return values.type === '1';
},
},
{
label: '描述',
field: 'txt',
component: 'InputTextArea',
componentProps: {
rows: 4,
label: '衍生指标是原子指标通过添加维度、过滤条件卷积而成,例如全国各城市7月份销售额',
field: 'derived',
component: 'BasicTitle',
ifShow: ({ values }) => {
return values.type === '2';
},
},
{
label:
'复合指标是由一个或多个衍生指标叠加计算而成,其中的维度、过滤条件均继承于衍生指标,例如利润=销售额-成本。',
field: 'compound',
component: 'BasicTitle',
ifShow: ({ values }) => {
return values.type === '3';
},
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelData.ts
View file @ 0cea01d3
......@@ -25,7 +25,7 @@ export const labelTreeData = [
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
originalSubject: '111111111',
},
{
title: 'task_611_2',
......@@ -36,7 +36,7 @@ export const labelTreeData = [
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
originalSubject: '22222222222',
},
],
},
......
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/labelDetail/index.vue
View file @ 0cea01d3
......@@ -60,22 +60,15 @@
<script lang="ts" setup>
import { Input, InputSearch, Select, TabPane, Tabs } from 'ant-design-vue';
import { SlidersOutlined } from '@ant-design/icons-vue';
import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import { useRoute } from 'vue-router';
import BasicForm from '@/components/Form/src/BasicForm.vue';
import { useForm } from '@/components/Form';
import { onMounted, ref } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import {
columnFormSchema,
columnTableColumn,
detailFormSchema,
} from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
import {
columnTableData, gatherData,
gatherDataTableHeader,
} from '@/views/mallResourceDevelopment/label/labelDetail/detailData';
import { columnFormSchema, columnTableColumn, detailFormSchema } from './detail.data';
import { columnTableData, gatherData, gatherDataTableHeader } from './detailData';
import SensitiveWayModel from './sensitiveWayModel.vue';
import { useModal } from '@/components/Modal';
import InfoModel from './infoModel.vue';
......
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/upShop/index.vue 0 → 100644
View file @ 0cea01d3
<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>
<Input style="width: 200px; margin-bottom: 15px" placeholder="搜索资源名称">
<template #suffix><SearchOutlined /></template>
</Input>
<div style="border: 1px solid #dde1ee" class="flex">
<div class="w-1/4" style="border-right: 1px solid #dde1ee">
<div class="flex" style="padding: 5px 0; background-color: #f5f7fc"> </div>
<div style="height: 30px; margin-left: 15px; background-color: #f5f7fc">标签名称</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>
<BasicTable @register="gatherDataTable">
<template #headerCell="{ column }">
<template v-if="headerFieldList.includes(column.key)">
<div>{{ column.title }}</div>
<div style="color: #b3b9c5">{{ column.key }}</div>
</template>
</template>
</BasicTable>
</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, DatePicker } from 'ant-design-vue';
import { useForm } from '@/components/Form';
import {
TagOutlined,
RollbackOutlined,
CheckOutlined,
SearchOutlined,
} from '@ant-design/icons-vue';
import { bottomFormSchema, rangeTableColumn, topFormSchema } from './upShop.data';
import { BaseFormatProps } from 'vue-i18n';
import { onMounted, ref } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import { rangeTableData, gatherData, gatherDataTableHeader } from './upShopData';
const visibleRangeOptions = [
{
label: '所有人',
value: '所有人',
},
{
label: '部分人',
value: '部分人',
},
];
const [gatherDataTable, { setColumns: gatherDataSetColumns }] = useTable({
title: '',
scroll: { y: 500 },
api: async (params) => {
// 设置表头
const list = gatherDataTableHeader.map((item) => ({
title: item.name,
dataIndex: item.field,
}));
gatherDataSetColumns(list);
console.log('params:', params);
const response = {
code: '',
message: '',
data: gatherData(10),
};
return { ...response };
},
rowKey: 'businessId',
columns: [],
striped: false,
bordered: true,
showIndexColumn: false,
showTableSetting: false,
useSearchForm: false,
} as BasicTableProps);
function handlePathSelect() {}
const [topForm] = useForm({
labelWidth: 90,
baseColProps: { span: 12 },
schemas: topFormSchema,
showActionButtonGroup: false,
});
const tagList = ['衍生', 'address'];
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,
});
// 动态头listColumn获取
const headerFieldList = [];
onMounted(() => {
gatherDataTableHeader.forEach((item) => {
headerFieldList.push(item.field);
});
});
</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/benchmark/benchmarkManagement/upShop/upShop.data.ts 0 → 100644
View file @ 0cea01d3
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',
},
{
label: '可见范围',
field: 'visibleRange',
defaultValue: '所有人',
required: true,
slot: 'visibleRange',
},
{
label: '共享类型',
field: 'shareType',
required: true,
defaultValue: '有条件共享',
component: 'Select',
componentProps: {
options: [
{
label: '有条件共享',
value: '有条件共享',
},
{
label: '无条件共享',
value: '无条件共享',
},
],
},
},
];
export const bottomFormSchema: FormSchema[] = [
{
label: '资源名称',
field: 'name',
required: true,
defaultValue: '衍生',
component: 'Input',
},
{
label: '描述',
field: 'des',
component: 'InputTextArea',
componentProps: {
rows: 2,
},
},
{
label: '权属机构',
field: 'dept',
required: true,
component: 'Select',
componentProps: {
defaultValue: '机构管理/数据平台治理部',
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: {
defaultValue: '不敏感',
options: [
{
label: '敏感',
value: '敏感',
},
{
label: '不敏感',
value: '不敏感',
},
],
},
},
{
label: '开放权限',
field: 'openPermission',
component: 'Select',
componentProps: {
defaultValue: '取数',
options: [
{
label: '取数',
value: '取数',
},
{
label: '无',
value: '无',
},
],
},
},
];
export const rangeTableColumn: BasicColumn[] = [
{
title: '字段名称',
dataIndex: 'name',
},
{
title: '字段类型',
dataIndex: 'type',
},
];
export const columnTableColumn: BasicColumn[] = [
{
title: '表名',
dataIndex: 'table',
},
{
title: '列名',
dataIndex: 'column',
},
{
title: '中文名',
dataIndex: 'chName',
},
{
title: '字段描述',
dataIndex: 'des',
},
{
title: '字段类型',
dataIndex: 'type',
},
{
title: 'Label分类',
dataIndex: 'labelType',
slots: { customRender: 'labelType' },
},
{
title: '是否脱敏',
dataIndex: 'sensitive',
slots: { customRender: 'sensitive' },
},
];
src/views/mallResourceDevelopment/benchmark/benchmarkManagement/upShop/upShopData.ts 0 → 100644
View file @ 0cea01d3
import Mock from "mockjs";
export const rangeTableData = [
{
name: 'field1',
type: 'varchar(255)',
},
{
name: 'field2',
type: 'varchar(255)',
},
{
name: 'field3',
type: 'varchar(255)',
},
];
export const gatherData = (num) => {
return Mock.mock({
[`users|${num}`]: [
// 根据 num 动态生成用户数量
{
'id|+1': 1,
address: '@county(true)',
create_date: '@date("yyyy-MM-dd")',
id: '@id',
name: '@name',
},
],
}).users;
};
export const columnTableData = [
{
table: 'employee',
column: 'id',
chName: '编号',
des: '编号',
type: 'NUMBER',
labelType: '默认分类',
sensitive: '否',
},
{
table: 'employee',
column: 'em_name',
chName: '姓名',
des: '姓名',
type: 'STRING',
labelType: '默认分类',
sensitive: '否',
},
{
table: 'employee',
column: 'em_idcard',
chName: '身份证',
des: '身份证',
type: 'STRING',
labelType: '默认分类',
sensitive: '是',
},
];
export const gatherDataTableHeader = [
{
name: '城市',
field: 'address',
},
{
name: '创建时间',
field: 'create_date',
},
{
name: '序列',
field: 'id',
},
{
name: '姓名',
field: 'name',
},
];
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