Skip to content

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

商城资源开发-标签主体

parent 36fe541d
Hide whitespace changes
Inline Side-by-side
Showing with 1064 additions and 0 deletions
src/views/mallResourceDevelopment/label/addLabelModal.vue 0 → 100644
View file @ 2e40a842
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm">
<template #path="{ field, model }">
<div class="flex">
<Input v-model:value="model[field]" />
<a-button type="primary">选择</a-button>
</div>
</template>
</BasicForm>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { addTabFormSchema } from '@/views/mallResourceDevelopment/label/label.data';
import { Input } from 'ant-design-vue';
const isUpdate = ref(false);
const rowId = ref('');
const getTitle = '新建标签主体';
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
await setFieldsValue({
...data.record,
});
}
});
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: addTabFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**确定按钮*/
async function handleSubmit() {
await validate();
closeModal();
}
</script>
src/views/mallResourceDevelopment/label/index.vue 0 → 100644
View file @ 2e40a842
<template>
<PageWrapper dense>
<template #footer>
<div class="flex">
<div style="flex: 2" class="flex">
<BasicTree
class="flex-1"
:treeData="labelTreeData"
defaultExpandLevel="1"
@select="handleSelect"
ref="treeData"
/>
<!-- 刷新 -->
<a-button type="link" style="padding: 0"><SyncOutlined /></a-button>
</div>
<div style="flex: 9">
<PageWrapper v-if="tabName" :title="tabName">
<template #extra>
<a-button class="top-button" type="primary" :disabled="topButtonDisabled()"
>移动</a-button
>
<a-button
class="top-button"
type="primary"
:disabled="topButtonDisabled()"
@click="handleDelete"
>删除</a-button
>
<a-button class="top-button" type="primary">新建文件夹</a-button>
<a-button class="top-button" type="primary" @click="handleAddLabel"
>新建标签主体</a-button
>
</template>
<template #footer>
<BasicTable @register="tabTable" ref="tabTableRef">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
// 编辑
icon: 'ant-design:edit-outlined',
onClick: handleBody.bind(null, record),
},
{
// 标签
icon: 'ant-design:book-outlined',
},
]"
:dropDownActions="[
{
// 重命名
icon: 'ant-design:credit-card-outlined',
label: '重命名',
},
{
// 删除
icon: 'ant-design:delete-outlined',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleRemove.bind(null, record),
},
color: 'error',
},
{
// 移动
icon: 'ion-move-outline',
label: '移动',
},
]"
/>
</template>
</template>
<template #name="{ text, record }">
<a @click="handleBody(record)">{{ text }}</a>
</template>
<template #originalSubject="{ text, record }">
<a-button type="link" @click="handleBody(record)">{{ text }}</a-button>
</template>
</BasicTable>
</template>
</PageWrapper>
</div>
</div>
</template>
<AddLabelModel @register="addLabelModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import {
SyncOutlined,
TableOutlined,
InsertRowAboveOutlined,
SolutionOutlined,
FilePdfOutlined,
RollbackOutlined,
SaveOutlined,
DownCircleOutlined,
DeleteOutlined,
CloudUploadOutlined,
EditOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import { labelTreeData, tabTableData } from './labelData';
import { h, ref, unref } from 'vue';
import { Divider } from 'ant-design-vue';
import type { BasicTableProps, TableActionType } from '@/components/Table';
import PageWrapper from '../../../components/Page/src/PageWrapper.vue';
import BasicTree from '../../../components/Tree/src/BasicTree.vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { TreeActionItem } from '@/components/Tree';
import { tableListViewThree } from '@/views/dataQuality/agentClass/global/details/setup/mock';
import { Threecolumns } from '@/views/dataQuality/agentClass/global/details/setup/mainBody.data';
import {
tabTableColumn,
tabTableFormSchema,
} from '@/views/mallResourceDevelopment/label/label.data';
import { searchFormSchema } from '@/views/auditLog/audi.data';
import { useMessage } from '@/hooks/web/useMessage';
import { useRoute, useRouter } from 'vue-router';
import { useModal } from '@/components/Modal';
import AddLabelModel from './addLabelModal.vue';
const [addLabelModal, { openModal: openAddLabelModel }] = useModal();
const tabName = ref('');
const treeData = ref();
function handleSelect() {
const keys = unref(treeData).getSelectedKeys();
const node = unref(treeData).getSelectedNode(keys[0]);
console.log('node', node);
// 获取标题
tabName.value = node.title;
// 获取列表
// console.log('key', key);
// tabName.value = findTitleById(labelTreeData[0], key[0]);
// console.log('tabName', tabName.value);
}
// 嵌套 -获取树title
function findTitleById(tree, key) {
if (tree.key === key) {
return tree.title;
}
if (tree.children && tree.children.length > 0) {
for (let child of tree.children) {
const result = findTitleById(child, key);
if (result) {
return result;
}
}
}
}
const tabTableRef = ref(null);
function topButtonDisabled() {
if (tabTableRef.value) {
return tabGetRowSelection().selectedRowKeys <= 0;
} else {
return false;
}
}
const { createMessage, createConfirm } = useMessage();
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
},
});
}
function handleAddLabel() {
openAddLabelModel(true, {
isUpdate: false,
});
}
function handleRemove(record) {
createMessage.success('删除成功!');
}
const router = useRouter();
function handleBody(record) {
console.log('recode', record);
router.push({
path: '/mallResourceDevelopment/label/labelDetail',
query: { ...record },
});
}
const [tabTable, { getRowSelection: tabGetRowSelection }] = useTable({
title: '',
api: async (params) => {
console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tabTableData.length,
code: '',
message: '',
data: tabTableData,
};
return { ...response };
},
rowKey: 'businessId',
columns: tabTableColumn,
rowSelection: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
useSearchForm: true,
formConfig: {
labelWidth: 80,
baseColProps: { span: 6 },
schemas: tabTableFormSchema,
autoSubmitOnEnter: true,
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
fixed: undefined,
},
} as BasicTableProps);
</script>
<style scoped>
.top-button {
padding: 0 5px;
}
</style>
src/views/mallResourceDevelopment/label/label.data.ts 0 → 100644
View file @ 2e40a842
import {BasicColumn, FormSchema} from "@/components/Table";
export const tabTableColumn: BasicColumn[] = [
{
title: '文件名称',
dataIndex: 'name',
slots: { customRender: 'name' },
},
{
title: '描述',
dataIndex: 'txt',
},
{
title: '创建者',
dataIndex: 'createdBy',
},
{
title: '创建时间',
dataIndex: 'createdTime',
},
{
title: '更新时间',
dataIndex: 'updateTime',
},
{
title: '原始主体',
dataIndex: 'originalSubject',
slots: { customRender: 'originalSubject' },
},
];
export const tabTableFormSchema: FormSchema[] = [
{
field: '输入关键字搜索',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
},
},
];
export const addTabFormSchema: FormSchema[] = [
{
label: '标签主体路径',
field: 'path',
slot: 'path',
required: true,
},
{
label: '名称',
field: 'name',
component: 'Input',
required: true,
},
{
label: '描述',
field: 'txt',
component: 'InputTextArea',
componentProps: {
rows: 4,
},
},
];
src/views/mallResourceDevelopment/label/labelData.ts 0 → 100644
View file @ 2e40a842
export const labelTreeData = [
{
title: '我的创建',
key: '-1',
icon: 'ant-design:table-outlined',
children: [
{
title: '611',
key: '0',
icon: 'ion:folder-outline',
name: '611',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
children: [
{
title: 'task_611_1',
key: '0-1',
icon: 'ant-design:table-outlined',
name: 'task_611_1',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
},
{
title: 'task_611_2',
key: '0-2',
icon: 'ant-design:table-outlined',
name: 'task_611_2',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
},
],
},
{
title: 'YLW数据资产',
key: '1',
icon: 'ion:folder-outline',
name: 'YLW数据资产',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
children: [
{
title: 'assets_1',
key: '1-1',
icon: 'ant-design:table-outlined',
name: 'assets_10',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
},
{ title: 'assets_2', key: '1-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '数据中台演示',
key: '2',
icon: 'ion:folder-outline',
children: [
{ title: 'middle_1', key: '2-1', icon: 'ant-design:table-outlined' },
{ title: 'middle_2', key: '2-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '数据资产-华东',
key: '3',
icon: 'ion:folder-outline',
children: [
{ title: 'assets_EC_1', key: '3-1', icon: 'ant-design:table-outlined' },
{ title: 'assets_EC_2', key: '3-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '54所网络部',
key: '4',
icon: 'ion:folder-outline',
children: [
{ title: 'ntd_1', key: '4-1', icon: 'ant-design:table-outlined' },
{ title: 'ntd_2', key: '4-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '54WLB',
key: '5',
icon: 'ion:folder-outline',
children: [
{ title: 'wlb_1', key: '5-1', icon: 'ant-design:table-outlined' },
{ title: 'wlb_2', key: '5-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '人力资源管理',
key: '6',
icon: 'ion:folder-outline',
children: [
{ title: 'hrm_1', key: '6-1', icon: 'ant-design:table-outlined' },
{ title: 'hrm_2', key: '6-2', icon: 'ant-design:table-outlined' },
],
},
{
title: '文化休闲',
key: '7',
icon: 'ion:folder-outline',
children: [
{ title: 'culture_leisure_1', key: '7-1', icon: 'ant-design:table-outlined' },
{ title: 'culture_leisure_2', key: '7-2', icon: 'ant-design:table-outlined' },
],
},
],
},
];
export const tabTableData = [
{
businessId: 1,
name: '测试',
txt: '',
createdBy: 'admin',
createTime: '2023/05/05 14:22:56',
updateTime: '2023/05/05 14:22:56',
originalSubject: '',
},
{
businessId: 2,
name: 'qwert',
txt: 'qwert',
createdBy: 'admin',
createTime: '2023/05/08 10:36:30',
updateTime: '2023/05/08 10:36:30',
originalSubject: 'zqq-6.9-原始主体',
},
{
businessId: 3,
name: '111',
txt: '',
createdBy: 'admin',
createTime: '2023/04/19 11:28:35',
updateTime: '2023/04/19 11:28:35',
originalSubject: '',
},
{
businessId: 4,
name: 'zqq-test-tag2',
txt: '',
createdBy: 'admin',
createTime: '2023/04/18 17:01:18',
updateTime: '2023/04/18 17:01:18',
originalSubject: 'zq-6.9-原始主体',
},
{
businessId: 5,
name: 'test123',
txt: '',
createdBy: 'admin',
createTime: '2023/04/11 17:22:09',
updateTime: '2023/04/11 17:22:09',
originalSubject: '',
},
];
src/views/mallResourceDevelopment/label/labelDetail/detail.data.ts 0 → 100644
View file @ 2e40a842
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
import Mock from 'mockjs';
export const detailFormSchema: FormSchema[] = [
{
label: '原始主体',
field: 'originalSubject',
slot: 'originalSubject',
},
{
label: '标签存储库',
field: 'tagLibrary',
slot: 'tagLibrary',
},
];
export const columnFormSchema: FormSchema[] = [
{
field: 'key',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
},
},
];
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' },
},
];
export const sensitiveTableColumn: BasicColumn[] = [
{
title: '表名',
dataIndex: 'table',
width: 100,
},
{
title: '列名',
dataIndex: 'column',
width: 100,
},
{
title: '是否脱敏',
dataIndex: 'sensitive',
slots: { customRender: 'sensitive' },
width: 100,
},
{
title: '脱敏算法',
dataIndex: 'algoritm',
slots: { customRender: 'algoritm' },
width: 100,
},
{
title: '脱敏参数',
dataIndex: 'params',
slots: { customRender: 'params' },
width: 200,
},
];
export const infoFormSchema: FormSchema[] = [
{
label: '主体名称',
field: 'name',
component: 'Input',
},
{
label: '描述',
field: 'des',
component: 'InputTextArea',
componentProps: {
rows: 4,
},
},
{
label: '记录保留时间',
field: 'time',
slot: 'time',
},
];
src/views/mallResourceDevelopment/label/labelDetail/detailData.ts 0 → 100644
View file @ 2e40a842
import Mock from "mockjs";
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: 'id',
},
{
name: '姓名',
field: 'em_name',
},
{
name: '身份证',
field: 'em_idcard',
},
{
name: '地址',
field: 'em_address',
},
{
name: '毕业院校',
field: 'em_afterschool',
},
{
name: '年龄',
field: 'em_age',
},
{
name: '祖籍',
field: 'em_ancestralhome',
},
{
name: '出生日期',
field: 'em_bom',
},
];
export const gatherData = (num) => {
return Mock.mock({
[`users|${num}`]: [
// 根据 num 动态生成用户数量
{
'id|+1': 1,
em_name: '@name',
em_idcard: '@id',
em_address: '@county(true)',
em_afterschool: '@ctitle(5, 10)大学',
'em_age|18-60': 1,
em_ancestralhome: '@county(true)',
em_bom: '@date("yyyy-MM-dd")',
},
],
}).users;
};
src/views/mallResourceDevelopment/label/labelDetail/index.vue 0 → 100644
View file @ 2e40a842
<template>
<PageWrapper :title="tabName" dense contentFullHeight fixedHeight>
<template #extra>
<a-button type="primary">发布</a-button>
<a-button type="primary">下载</a-button>
<a-button type="primary" @click="handleInfo">基本信息</a-button>
<a-button type="primary">查看关联标签</a-button>
<a-button type="primary">保存</a-button>
</template>
<template #footer>
<BasicForm @register="detailForm">
<template #originalSubject="{ field, model }">
<InputSearch
class="w-1/2"
v-model:value="model[field]"
enter-button="选择"
@search="onSearch"
/>
</template>
<template #tagLibrary="{ field, model }">
<InputSearch
class="w-1/2"
v-model:value="model[field]"
enter-button="选择"
@search="onSearch"
/>
</template>
</BasicForm>
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="列信息">
<BasicTable @register="columnTable">
<template #labelType="{ text, record }">
<Input v-model:value="record.labelType" />
</template>
<template #sensitive="{ text, record }">
<Select v-model:value="record.sensitive" :options="sensitiveOption" />
<a-button v-if="record.sensitive === '是'" type="link" @click="handleOpenSensitive"
><SlidersOutlined
/></a-button>
</template>
</BasicTable>
</TabPane>
<TabPane key="2" tab="采样数据">
<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>
</TabPane>
</Tabs>
</template>
<SensitiveWayModel @register="sensitiveWayModel" />
<InfoModel @register="infoModel" />
</PageWrapper>
</template>
<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 { 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 SensitiveWayModel from './sensitiveWayModel.vue';
import { useModal } from '@/components/Modal';
import InfoModel from './infoModel.vue';
const [sensitiveWayModel, { openModal: openSensitiveWayModel }] = useModal();
const [infoModel, { openModal: openInfoModel }] = useModal();
function handleInfo() {
openInfoModel(true, {
isUpdate: false,
});
}
const route = useRoute();
const tabName = route.query.name;
function onSearch() {}
const [detailForm] = useForm({
labelWidth: 90,
baseColProps: { span: 24 },
schemas: detailFormSchema,
showActionButtonGroup: false,
});
const activeKey = ref('1');
const sensitiveOption = [
{
label: '是',
value: '是',
},
{
label: '否',
value: '否',
},
];
function handleOpenSensitive() {
openSensitiveWayModel(true, {
isUpdate: false,
});
}
const [columnTable] = useTable({
title: '',
api: async (params) => {
console.log('params:', params);
const response = {
code: '',
message: '',
data: columnTableData,
};
return { ...response };
},
rowKey: 'businessId',
columns: columnTableColumn,
striped: false,
bordered: true,
showIndexColumn: false,
showTableSetting: false,
useSearchForm: true,
formConfig: {
labelWidth: 120,
baseColProps: { span: 4 },
schemas: columnFormSchema,
autoSubmitOnEnter: true,
},
} as BasicTableProps);
const [gatherDataTable, { setColumns: gatherDataSetColumns }] = useTable({
title: '',
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: true,
formConfig: {
labelWidth: 120,
baseColProps: { span: 4 },
schemas: columnFormSchema,
autoSubmitOnEnter: true,
},
} as BasicTableProps);
// 动态头listColumn获取
const headerFieldList = [];
onMounted(() => {
gatherDataTableHeader.forEach((item) => {
headerFieldList.push(item.field);
});
});
</script>
<style scoped></style>
src/views/mallResourceDevelopment/label/labelDetail/infoModel.vue 0 → 100644
View file @ 2e40a842
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm">
<template #time="{ field, model }">
<div class="flex">
<Input v-model:value="model[field]" />
<span>天</span>
</div>
</template>
</BasicForm>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { Input } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { infoFormSchema } from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
const isUpdate = ref(false);
const getTitle = '基本信息';
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: infoFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
});
// const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
/**确定按钮*/
async function handleSubmit() {
await validate();
closeModal();
}
</script>
src/views/mallResourceDevelopment/label/labelDetail/sensitiveWayModel.vue 0 → 100644
View file @ 2e40a842
<template>
<BasicModal
width="70%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicTable @register="sensitiveTable">
<template #sensitive="{ text, record }">
<Select style="width: 120px" v-model:value="record.sensitive" :options="sensitiveOptions" />
</template>
<template #algoritm="{ text, record }">
<div v-if="record.sensitive === '是'">
<Select style="width: 120px" v-model:value="record.algoritm" :options="algoritmOptions" />
<BasicHelp
text="通过将敏感数据的一部分替换为特定的符号（如*、#）来遮掩敏感信息，保留数据的部分结构或格式。常用于保护信用卡号、身份证号等。"
/>
</div>
</template>
<template #params="{ text, record }">
<div v-if="record.sensitive === '是'" style="display: flex">
<Select style="width: 120px" v-model:value="record.params" :options="paramsOptions" />
<div v-if="record.params" class="flex">
<div style="line-height: 30px">{{ record.params === '1' ? '自' : '前' }}</div>
<Input v-model:value="record.m" />
<div style="line-height: 30px">{{ record.params === '1' ? '至' : '后' }}</div>
<Input v-model:value="record.n" />
</div>
</div>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { Input, Select } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { BasicTable, useTable, TableAction, BasicTableProps } from '@/components/Table';
import { useMessage } from '@/hooks/web/useMessage';
import { tabTableData } from '@/views/mallResourceDevelopment/label/labelData';
import {
tabTableColumn,
tabTableFormSchema,
} from '@/views/mallResourceDevelopment/label/label.data';
import { sensitiveTableColumn } from '@/views/mallResourceDevelopment/label/labelDetail/detail.data';
import { columnTableData } from '@/views/mallResourceDevelopment/label/labelDetail/detailData';
import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
const getTitle = '脱敏策略';
const isUpdate = ref(true);
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
});
const sensitiveOptions = [
{
label: '是',
value: '是',
},
{
label: '否',
value: '否',
},
];
const algoritmOptions = [
{
label: '掩码遮盖',
value: '掩码遮盖',
},
{
label: '字符替换',
value: '字符替换',
},
{
label: '数据加密',
value: '数据加密',
},
];
const paramsOptions = [
{
label: '自m至n',
value: '1',
},
{
label: '前m后n',
value: '2',
},
];
const [sensitiveTable] = useTable({
title: '',
api: async (params) => {
console.log(params);
const response = {
code: '',
message: '',
data: columnTableData,
};
return { ...response };
},
rowKey: 'businessId',
columns: sensitiveTableColumn,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
} as BasicTableProps);
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
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