Skip to content

B
bigDataSystem
Commit 8486103c authored by 张伯涛's avatar 张伯涛
Browse files
Options

引用文档模块

parent 22cd5d75
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 132 deletions
src/views/dataStandards/referenceDocument/DeptTree.vue
View file @ 8486103c
......@@ -6,25 +6,123 @@
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'key', title: 'title' }"
:fieldNames="{ key: 'value', title: 'label' }"
@select="handleSelect"
:beforeRightClick="getRightMenuList"
:actionList="actionList"
/>
</div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
import {h, nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import {Nullable} from "@vben/types";
import {treeDataList} from "./mock";
import {EllipsisOutlined, FolderOutlined} from "@ant-design/icons-vue";
import {EventDataNode} from "ant-design-vue/es/vc-tree/interface";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
// 树的操作列表
const actionList = [
{
//全部操作按钮
render: (node) => {
return h(EllipsisOutlined, {
class: 'ml-2',
onClick: () => {
getRightMenuList(node)
},
});
},
},
];
function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
const menu = [
{
label: '查看详情',
handler: () => {
handleDetail(node)
},
icon: 'ant-design:eye-outlined',
},
{
label: '编辑',
handler: () => {
handleEdit(node)
},
icon: 'ant-design:edit-outlined',
},
{
label: '标准分类信息',
handler: () => {
classificationInfo(node)
},
icon: 'ant-design:snippets-outlined',
},
{
label: '新建文档分类',
handler: () => {
handleAddDocumentClassification(node)
},
icon: 'bi:plus',
},
{
label: '新建文档管理',
handler: () => {
handleAddDocumentManage(node)
},
icon: 'bi:plus',
},
{
label: '复制到',
handler: () => {
handleCopy(node)
},
icon: 'ant-design:snippets-twotone',
},
{
label: '删除',
handler: () => {
handleDelete(node)
},
icon: 'ant-design:rest-outlined',
},
];
return new Promise((resolve) => {
resolve(menu);
});
}
function handleDetail(data) {
}
function handleEdit(data) {
}
function classificationInfo(data) {
}
function handleAddDocumentClassification(data) {
}
function handleAddDocumentManage(data) {
}
function handleCopy(data) {
}
function handleDelete(data) {
}
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
......
src/views/dataStandards/referenceDocument/index.vue
View file @ 8486103c
......@@ -8,8 +8,8 @@
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >移动</a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >导出</a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >批量发布</a-button>
<a-button type="primary" >新增文档分类</a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >新增文档管理</a-button>
<a-button type="primary" @click="handleAddDocumentClassification" >新增文档分类</a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" @click="handleAddManage" type="primary" >新增文档管理</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
......@@ -32,12 +32,14 @@
</template>
</template>
</BasicTable>
<ReferenceDocumentModal @register="registerModal" @success="handleSuccess"/>
<manage-modal @register="registerModalManage" @success="handleSuccess"/>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import ReferenceDocumentModal from "@/views/dataStandards/referenceDocument/referenceDocumentModal.vue";
import { PageWrapper } from '@/components/Page';
import DeptTree from './DeptTree.vue';
import { useMessage } from '@/hooks/web/useMessage';
......@@ -50,11 +52,14 @@ import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {useUserStore} from "@/store/modules/user";
import {router} from "@/router";
import ManageModal from "@/views/dataStandards/referenceDocument/manageModal.vue";
defineOptions({ name: 'AccountManagement' });
const { createMessage,createConfirm } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerModalManage, { openModal:openModalManage }] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '主体管理列表',
......@@ -98,6 +103,19 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get
},
});
/** 新建文档分类*/
function handleAddDocumentClassification() {
openModal(true, {
isUpdate: false,
});
}
/** 新建文档管理*/
function handleAddManage() {
openModalManage(true, {
isUpdate: false,
});
}
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
......
src/views/dataStandards/referenceDocument/manageModal.vue 0 → 100644
View file @ 8486103c
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
<div class="modalRow">
<div>可见范围</div>
<div class="right">
<div class="clearAll">
清空
</div>
<div>
<a-button type="primary">添加工作组</a-button>
</div>
</div>
</div>
<div class="addDialogBG">
<TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import Icon from '@/components/Icon/Icon.vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchemaManage } from './referenceDocument.data';
import TreeTwo from './treeTwo.vue'
import { useMessage } from '@/hooks/web/useMessage';
import {treeDataList,options} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchemaManage,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
updateSchema([
{
field: 'path',
componentProps: { options:treeDataList },
},
{
field: 'modal',
componentProps: { options:options },
},
]
);
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建文件夹' : '编辑文件夹'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modalRow{
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.clearAll{
padding-right: 10px;
font-size: 16px;
}
.right{
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG{
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: #E8ECF7;
width: 98%;
height: 400px;
}
</style>
src/views/dataStandards/referenceDocument/mock.ts
View file @ 8486103c
......@@ -38,14 +38,42 @@ export const tableList: any[] = [
export const treeDataList = [
{
title: '引用文档管理',
key: 1,
label: '引用文档管理',
value: 1,
icon: 'home|svg',
children: [
{ title: '共享工作区', key: 2 },
{ title: '商城工作区', key: 3 },
{ title: '数据中台工作区02', key: 4 },
{ title: '数据中台工作区03', key: 5 },
{ label: '共享工作区', value: 2 },
{ label: '商城工作区', value: 3 },
{ label: '数据中台工作区02', value: 4 },
{ label: '数据中台工作区03', value: 5 },
],
},
]
export const treeDataListTwo = [
{
label: '默认工作组',
businessId: 1,
children: [
{ label: '默认工作组01', businessId: 2 },
{ label: '默认工作组02', businessId: 3 },
{ label: '默认工作组03', businessId: 4 },
{ label: '默认工作组04', businessId: 5 },
],
},
]
export const options = [
{
value: '标准数据',
label: '标准数据',
children: [
{
value: '引用文档元模型',
label: '引用文档元模型',
children: [
],
},
],
},
];
src/views/dataStandards/referenceDocument/referenceDocument.data.ts
View file @ 8486103c
......@@ -4,7 +4,8 @@ import {h} from "vue";
import {Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
import {changeFlagApi} from "@/api/system/user/user";
import {areaRecord} from "@/api/demo/cascader"; // 引入开关组件
type CheckedType = boolean | string | number;
......@@ -52,164 +53,166 @@ export const searchFormSchema: FormSchema[] = [
},
},
];
export const resetPasswordFormSchema: any[] = [
export const formSchema: FormSchema[] = [
{
field: 'newPassword',
label: '新密码',
component: 'InputPassword',
field: 'path',
component: 'Cascader',
label: '路径',
componentProps: {
placeholder: '请输入8~16位，由字母和数字混合所组成的新密码',
// dataField: 'data',
labelField: 'label',
valueField: 'value',
initFetchParams: {
parentCode: '',
},
isLeaf: (record) => {
return !(record.levelType < 3);
},
onChange: (e, ...v) => {
console.log('ApiCascader====>:', e, v);
},
},
required: true,
// ifShow: false,
},
]
const passwordCheck = (rule, value, callback) => {
const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
if (!pattern.test(value)) {
callback(new Error('新密码必须为数字与字母的组合'))
}
callback()
}
export const accountFormSchema: any[] = [
{
field: 'username',
label: '登录名',
{
field: 'name',
label: '文档分类名称',
component: 'Input',
// helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
rules: [
{
required: true,
message: '请输入登录名',
message: '请输入文档分类名称',
},
],
},
{
field: 'password',
label: '密码',
component: 'InputPassword',
rules: [
{
required: true,
message: '请输入用户密码',
},
{ min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
{
validator: passwordCheck,
trigger: 'blur'
}
],
field: 'describe',
component: 'InputTextArea',
label: '标准分类描述',
required: true,
componentProps: {
placeholder: '请输入标准分类描述',
rows: 4,
},
},
{
field: 'name',
label: '姓名',
component: 'Input',
field: 'modal',
component: 'Cascader',
label: '关联元模型',
required: true,
componentProps: {
// dataField: 'data',
labelField: 'value',
valueField: 'label',
initFetchParams: {
parentCode: '',
},
isLeaf: (record) => {
return !(record.levelType < 3);
},
onChange: (e, ...v) => {
console.log('ApiCascader====>:', e, v);
},
},
},
{
field: 'nickName',
label: '昵称',
component: 'Input',
field: 'flag',
label: '权限模式',
component: 'RadioGroup',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: '本级定义', value: '1' },
{ label: '资源自定义', value: '0' },
],
},
},
{
field: 'sex',
label: '性别',
field: 'group',
label: '权属工作组',
component: 'Select',
componentProps: {
options: [
{ label: '男', value: '1' },
{ label: '女', value: '0' },
{ label: '默认工作组', value: '1' },
{ label: '默认工作组2', value: '0' },
],
},
},
]
export const formSchemaManage: FormSchema[] = [
{
field: 'phone',
label: '手机号码',
component: 'Input',
rules: [
{ required: false, message: '请输入手机号码', trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
],
field: 'path',
component: 'Cascader',
label: '路径',
componentProps: {
// dataField: 'data',
labelField: 'label',
valueField: 'value',
initFetchParams: {
parentCode: '',
},
isLeaf: (record) => {
return !(record.levelType < 3);
},
onChange: (e, ...v) => {
console.log('ApiCascader====>:', e, v);
},
},
},
{
field: 'idNumber',
label: '身份证号',
field: 'name',
label: '文档名称',
component: 'Input',
rules: [
{
required: false,
message: '请输入身份证号',
trigger: 'blur'
required: true,
message: '请输入文档分类名称',
},
{ min: 18, max: 18, message: '长度18字符', trigger: 'blur' }
],
},
{
field: 'email',
label: '邮箱',
field: 'type',
label: '标准类型',
component: 'Input',
rules: [
{ required: false, message: '请输入邮箱地址', trigger: 'blur' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
},
{
field: 'flag',
label: '状态',
component: 'RadioGroup',
colProps: { lg: 24, md: 24 },
defaultValue:'引用文档管理',
componentProps: {
options: [
{ label: '启用', value: '1' },
{ label: '停用', value: '0' },
],
},
required: true,
readonly: true,
disabled: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
}
},
{
field: 'deptId',
label: '所属部门',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
field: 'modal',
label: '目录权属模式',
component: 'Input',
defaultValue:'本级定义',
componentProps: {
fieldNames: {
label: 'deptName',
value: 'businessId',
readonly: true,
disabled: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
getPopupContainer: () => document.body,
},
required: true,
}
},
{
field: 'roleList',
label: '角色',
component: 'ApiSelect',
colProps: { lg: 24, md: 24 },
field: 'group',
label: '权属工作组',
component: 'Input',
defaultValue:'-',
componentProps: {
// placeholder: '公开给',
mode: 'multiple',
api: getAllRoleList,
labelField: 'roleName',
valueField: 'businessId',
resultField:'data',
},
required: true,
},
{
label: '备注',
field: 'remarks',
component: 'InputTextArea',
colProps: { lg: 24, md: 24 },
readonly: true,
disabled: true,
style: {
border: 'none',
backgroundColor: 'transparent',
},
}
},
];
]
src/views/dataStandards/referenceDocument/referenceDocumentModal.vue 0 → 100644
View file @ 8486103c
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
<div class="modalRow">
<div>可见范围</div>
<div class="right">
<div class="clearAll">
清空
</div>
<div>
<a-button type="primary">添加工作组</a-button>
</div>
</div>
</div>
<div class="addDialogBG">
<TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import Icon from '@/components/Icon/Icon.vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './referenceDocument.data';
import TreeTwo from './treeTwo.vue'
import { useMessage } from '@/hooks/web/useMessage';
import {treeDataList,options} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
updateSchema([
{
field: 'path',
componentProps: { options:treeDataList },
},
{
field: 'modal',
componentProps: { options:options },
},
]
);
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建文件夹' : '编辑文件夹'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modalRow{
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.clearAll{
padding-right: 10px;
font-size: 16px;
}
.right{
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG{
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: #E8ECF7;
width: 98%;
height: 400px;
}
</style>
src/views/dataStandards/referenceDocument/treeTwo.vue 0 → 100644
View file @ 8486103c
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="工作组"
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:checkable="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'label' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import {Nullable} from "@vben/types";
import {treeDataListTwo} from "./mock";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataListTwo
await nextTick(() => {
getTree().expandAll(true)
})
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
<style lang="scss" scoped>
.bg-white{
width: 97%;
}
::v-deep(.vben-tree){
background-color: #E8ECF7!important;
}
</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