Skip to content

B
bigDataSystem
Commit 1fd922ae authored by liwei's avatar liwei
Browse files
Options

通用文件管理页面

parent a13dfe57
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1861 additions and 0 deletions
src/router/routes/index.ts
View file @ 1fd922ae
...@@ -83,6 +83,30 @@ export const UserRoute: AppRouteRecordRaw = { ...@@ -83,6 +83,30 @@ export const UserRoute: AppRouteRecordRaw = {
], ],
}; };
export const CommonFileRoute: AppRouteRecordRaw = {
path: '/commonFile',
name: 'commonFile',
component: LAYOUT,
meta: {
title: '通用文件操作',
icon: '',
hidden: true,
currentActiveMenu: '/commonFile',
},
children: [
{
path: 'fileDetail',
name: 'fileDetail',
component: () => import('@/views/commonFile/fileDetail.vue'),
meta: {
title: '文件详情',
icon: '',
},
},
],
};
export const WorkSpaceRoute: AppRouteRecordRaw = { export const WorkSpaceRoute: AppRouteRecordRaw = {
path: '/workspace', path: '/workspace',
name: 'Workspace', name: 'Workspace',
...@@ -112,6 +136,7 @@ export const basicRoutes = [ ...@@ -112,6 +136,7 @@ export const basicRoutes = [
DictRoute, DictRoute,
UserRoute, UserRoute,
WorkSpaceRoute, WorkSpaceRoute,
CommonFileRoute,
// RootRoute, // RootRoute,
...mainOutRoutes, ...mainOutRoutes,
REDIRECT_ROUTE, REDIRECT_ROUTE,
......
src/views/commonFile/AddUserModal.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicTable @register="registerTable"></BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import {addUserData, columns, searchFormSchema, TreeData} from './institutionData';
import { useGo } from '@/hooks/web/usePage';
import { downloadByData } from '@/utils/file/download';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {useUserStore} from "@/store/modules/user";
import { userData } from "@/views/system/institution/institutionData";
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const emit = defineEmits(['success', 'register']);
const tableData = ref([])
const isAdd = ref(true)
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '添加用户',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code:'',
message:'',
data: [],
};
var data = []
data = tableData.value
if (params.name != undefined && params.name != '' && params.name != null){
//过滤出名字包含params.name的数据
data = data.filter((item) => item.name.includes(params.name));
}
if (params.username != undefined && params.username != '' && params.username != null){
data = data.filter((item) => item.username.includes(params.username));
}
return { ...response, data: data };
},
rowKey: 'businessId',
columns,
rowSelection: true,
formConfig: {
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
isAdd.value = !!data?.isAdd;
});
/** 新增成功*/
function handleSubmit() {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length>0){
//已选中
//根据选中的查询用户 然后进行添加
let data = []
data = tableData.value.filter((item) => rowSelection.includes(item.businessId));
emit('success', { isAdd: unref(isAdd), values: { ...data },length: rowSelection.length });
closeModal();
}
}
onMounted(() => {
tableData.value = addUserData
});
</script>
src/views/commonFile/DetailTree.vue 0 → 100644
View file @ 1fd922ae
<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"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'fileName' }"
@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 { DetailTreeData } from "@/views/commonFile/institutionData";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = DetailTreeData
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
await nextTick(() => {
getTree().expandAll(true)
})
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
src/views/commonFile/FileModal.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { accountFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
import { encryptTwo } from '../../../../src/utils/jsencrypt.js'
import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/system/institution/institutionData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
setModalProps({ showCancelBtn: false });
setModalProps({ showOkBtn: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
setFieldsValue({
...data.record,
});
}
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([
{
field: 'institutionId',
componentProps: {
treeData: treeList
},
},
]);
});
const getTitle = computed(() => ('查看属性'));
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
src/views/commonFile/FileTree.vue 0 → 100644
View file @ 1fd922ae
<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"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'fileName' }"
@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 { TreeData } from "@/views/commonFile/institutionData";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = TreeData
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
await nextTick(() => {
getTree().expandAll(true)
})
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
src/views/commonFile/account.data.ts 0 → 100644
View file @ 1fd922ae
import {getAllRoleList} from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
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"; // 引入开关组件
type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'fileName',
width: 150,
slots: { customRender: 'fileName' },
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 150,
},
{
title: '拥有者',
dataIndex: 'holder',
width: 150,
},
{
title: '大小',
dataIndex: 'fileSize',
width: 150,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入名称',
},
colProps: { span: 7 },
},
];
export const accountFormSchema: any[] = [
{
field: 'fileName',
label: '文件名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true
}
},
{
field: 'location',
label: '保存位置',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true
}
},
{
field: 'createDate',
label: '创建时间',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true
}
},
{
field: 'updateDate',
label: '最近修改',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true
}
},
{
field: 'fileSize',
label: '大小',
component: 'Input',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true
}
},
];
/**移动*/
export const MoveFormSchema: any[] = [
{
field: 'institutionId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'fileName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
]
export const resetNameFormSchema: FormSchema[] = [
{
field: 'fileName',
label: '文件名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
colProps: { span: 8 },
},
];
export const createFileFormSchema: FormSchema[] = [
{
field: 'name',
label: '路径',
component: 'Input',
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入路径',
},
],
componentProps: {
placeholder: '请输入路径',
},
},
{
field: 'fileName',
label: '文件名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
},
];
export const createTaskFormSchema: FormSchema[] = [
{
field: 'institutionId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'institutionName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'fileName',
label: '文件名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入文件名称',
},
],
componentProps: {
placeholder: '请输入文件名称',
},
colProps: { lg: 24, md: 24 },
},
{
field: 'name',
label: '文件类型',
component: 'Input',
defaultValue: '任务流',
componentProps: {
disabled: true,
placeholder: '请输入路径',
},
colProps: { lg: 24, md: 24 },
},
];
src/views/commonFile/createFile.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {accountFormSchema, resetNameFormSchema} from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
import {createFileFormSchema} from './account.data';
import {TreeData} from "@/views/system/institution/institutionData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: createFileFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
});
const getTitle = computed(() => ('重命名'));
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</script>
src/views/commonFile/createTask.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {accountFormSchema, resetNameFormSchema} from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/system/institution/institutionData";
import {createTaskFormSchema} from './account.data';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: createTaskFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([
{
field: 'institutionId',
componentProps: {
treeData: treeList
},
},
]);
});
const getTitle = computed(() => ('重命名'));
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</script>
src/views/commonFile/fileDetail.vue 0 → 100644
View file @ 1fd922ae
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DetailTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="">运行</a-button>
<a-button type="primary" @click="">调试</a-button>
<a-button type="primary" @click="">保存</a-button>
<a-button type="primary" @click="">发布</a-button>
<a-button type="primary" @click="">任务列表</a-button>
<a-button type="primary" @click="">任务流依赖</a-button>
<a-button type="primary" @click="">参数设置</a-button>
<a-button type="primary" @click="">任务流配置</a-button>
</template>
<template #fileName="{ text, record }">
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable>
<FileModal @register="registerModal" @success="handleSuccess" />
<MoveFile @register="registerMoveFile" @success="handleMoveSuccess" />
<AddUserModal @register="registerAddUserModal" @success="handleAddSuccess" />
<ResetName @register="registerResetNameModal" @success="handleAddSuccess" />
<CreateFile @register="registerCreateFileModal" @success="handleAddSuccess" />
<CreateTask @register="registerCreateTaskModal" @success="handleAddSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {getAccountList, deleteUser,exportUserList} from '@/api/system/user/user';
import { PageWrapper } from '@/components/Page';
import DetailTree from './DetailTree.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import FileModal from './FileModal.vue';
import ResetName from './resetName.vue';
import importModal from './importModal.vue';
import MoveFile from './moveFile.vue';
import CreateTask from './createTask.vue';
import CreateFile from './createFile.vue';
import { columns, searchFormSchema } from './account.data';
import { useGo } from '@/hooks/web/usePage';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {useUserStore} from "@/store/modules/user";
import {getMenuListByPage} from "@/api/system/menu/menu";
import {fileData, TreeData} from "@/views/commonFile/institutionData";
import AddUserModal from './AddUserModal.vue';
import {forEach} from "lodash-es";
import { router } from '@/router';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerAddUserModal, { openModal:addUserModal }] = useModal();
const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
const [registerResetNameModal, { openModal: openResetNameModal }] = useModal();
const [registerCreateTaskModal, { openModal: openCreateTaskModal }] = useModal();
const [registerCreateFileModal, { openModal: openCreateFileModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([])
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code:'',
message:'',
data: [],
};
//过滤掉tableData.value中，businessId等于100的
var data = [];
data = tableData.value.filter((item) => item.businessId !== 100);
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: data };
},
rowKey: 'businessId',
columns,
rowSelection: true,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.institutionId=''
},
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
});
/**查看详情*/
function showDetails() {
router.push({
path: '/user/AccountDetail',
query: {
},
});
}
/**复制按钮*/
function copyButton() {
createMessage.success('复制成功!');
}
/**粘贴按钮*/
function stickButton() {
createMessage.success('粘贴成功!');
}
/**删除按钮*/
function deleteButton() {
createMessage.success('删除成功!');
}
/**新建文件夹*/
function createFileButton() {
openCreateFileModal(true, {
isAdd: true,
});
}
/**新建任务流*/
function createTaskButton() {
openCreateTaskModal(true, {
isAdd: true,
});
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
//修改表单的值
const result = updateTableDataRecord(values.businessId, values);
reload();
} else {
tableData.value.push(values)
reload();
}
}
/** 添加用户*/
function handleAddSuccess({ isAdd, values,length }) {
if (length > 0){
//批量添加
for (let i = 0; i < length; i++){
tableData.value.push(values[i])
}
}
reload();
}
/** 部门树的select*/
function handleSelect(institutionId = '') {
searchInfo.institutionId = institutionId;
reload();
}
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 重命名按钮*/
function handleResetName(record: Recordable) {
openResetNameModal(true, {
record,
isReset: true,
});
}
/** 删除按钮*/
function handleDelete(record: Recordable) {
tableData.value.splice(tableData.value.findIndex(item => item.businessId === record.businessId), 1);
createMessage.success('删除成功!');
reload();
}
/** 移动按钮*/
function handleMove(record: Recordable) {
openMoveFileModal(true, {
record,
isMove: true,
});
}
/** 移动*/
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0){
//批量移动
for (let i = 0; i < rowSelection.length; i++){
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
}else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
onMounted(() => {
tableData.value = TreeData
console.log('tableData.value :',tableData.value )
const path = route.path
if(filterStore.getSearchParams[path]) {
if(JSON.parse(filterStore.getSearchParams[path] !== {})){
const params = JSON.parse(filterStore.getSearchParams[path])
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
})
searchInfo.institutionId = params.institutionId
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({},getSearchInfo(),getForm().getFieldsValue());
filterStore.setSearchParams(
{
path: from.path,
param: {
...params
}
}
)
next(); // 允许导航
});
</script>
src/views/commonFile/index.vue 0 → 100644
View file @ 1fd922ae
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="copyButton">复制</a-button>
<a-button type="primary" @click="stickButton">粘贴</a-button>
<a-button type="primary" @click="deleteButton">删除</a-button>
<a-button type="primary" @click="handleMove">移动</a-button>
<a-button type="primary" @click="createTaskButton">新建任务流</a-button>
<a-button type="primary" @click="createFileButton">新建文件夹</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
// icon: 'clarity:note-edit-line',
label: '复制',
onClick: copyButton.bind(null, record),
},
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
label: '移动',
onClick: handleMove.bind(null, record),
},
{
label: '重命名',
onClick: handleResetName.bind(null, record),
},
{
label: '查看属性',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
<template #fileName="{ text, record }">
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable>
<FileModal @register="registerModal" @success="handleSuccess" />
<MoveFile @register="registerMoveFile" @success="handleMoveSuccess" />
<AddUserModal @register="registerAddUserModal" @success="handleAddSuccess" />
<ResetName @register="registerResetNameModal" @success="handleAddSuccess" />
<CreateFile @register="registerCreateFileModal" @success="handleAddSuccess" />
<CreateTask @register="registerCreateTaskModal" @success="handleAddSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {getAccountList, deleteUser,exportUserList} from '@/api/system/user/user';
import { PageWrapper } from '@/components/Page';
import DeptTree from './FileTree.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import FileModal from './FileModal.vue';
import ResetName from './resetName.vue';
import importModal from './importModal.vue';
import MoveFile from './moveFile.vue';
import CreateTask from './createTask.vue';
import CreateFile from './createFile.vue';
import { columns, searchFormSchema } from './account.data';
import { useGo } from '@/hooks/web/usePage';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {useUserStore} from "@/store/modules/user";
import {getMenuListByPage} from "@/api/system/menu/menu";
import {fileData, TreeData} from "@/views/commonFile/institutionData";
import AddUserModal from './AddUserModal.vue';
import {forEach} from "lodash-es";
import { router } from '@/router';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerAddUserModal, { openModal:addUserModal }] = useModal();
const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
const [registerResetNameModal, { openModal: openResetNameModal }] = useModal();
const [registerCreateTaskModal, { openModal: openCreateTaskModal }] = useModal();
const [registerCreateFileModal, { openModal: openCreateFileModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([])
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code:'',
message:'',
data: [],
};
//过滤掉tableData.value中，businessId等于100的
var data = [];
data = tableData.value.filter((item) => item.businessId !== 100);
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: data };
},
rowKey: 'businessId',
columns,
rowSelection: true,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.institutionId=''
},
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 280,
title: '操作',
dataIndex: 'action',
},
});
/**查看详情*/
function showDetails(record) {
console.log('record:',record)
router.push({
path: '/commonFile/fileDetail',
query: {
},
});
}
/**复制按钮*/
function copyButton() {
createMessage.success('复制成功!');
}
/**粘贴按钮*/
function stickButton() {
createMessage.success('粘贴成功!');
}
/**删除按钮*/
function deleteButton() {
createMessage.success('删除成功!');
}
/**新建文件夹*/
function createFileButton() {
openCreateFileModal(true, {
isAdd: true,
});
}
/**新建任务流*/
function createTaskButton() {
openCreateTaskModal(true, {
isAdd: true,
});
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
//修改表单的值
const result = updateTableDataRecord(values.businessId, values);
reload();
} else {
tableData.value.push(values)
reload();
}
}
/** 添加用户*/
function handleAddSuccess({ isAdd, values,length }) {
if (length > 0){
//批量添加
for (let i = 0; i < length; i++){
tableData.value.push(values[i])
}
}
reload();
}
/** 部门树的select*/
function handleSelect(institutionId = '') {
searchInfo.institutionId = institutionId;
reload();
}
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 重命名按钮*/
function handleResetName(record: Recordable) {
openResetNameModal(true, {
record,
isReset: true,
});
}
/** 删除按钮*/
function handleDelete(record: Recordable) {
tableData.value.splice(tableData.value.findIndex(item => item.businessId === record.businessId), 1);
createMessage.success('删除成功!');
reload();
}
/** 移动按钮*/
function handleMove(record: Recordable) {
openMoveFileModal(true, {
record,
isMove: true,
});
}
/** 移动*/
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0){
//批量移动
for (let i = 0; i < rowSelection.length; i++){
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
}else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
onMounted(() => {
tableData.value = TreeData
console.log('tableData.value :',tableData.value )
const path = route.path
if(filterStore.getSearchParams[path]) {
if(JSON.parse(filterStore.getSearchParams[path] !== {})){
const params = JSON.parse(filterStore.getSearchParams[path])
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
})
searchInfo.institutionId = params.institutionId
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({},getSearchInfo(),getForm().getFieldsValue());
filterStore.setSearchParams(
{
path: from.path,
param: {
...params
}
}
)
next(); // 允许导航
});
</script>
src/views/commonFile/institutionData.ts 0 → 100644
View file @ 1fd922ae
This diff is collapsed.
src/views/commonFile/moveFile.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" minHeight="50">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {accountFormSchema, MoveFormSchema } from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {resetUserPwd} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from "./institutionData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const idList = ref([])
const rowData = ref([])
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: MoveFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
//每次点击弹窗 需要清空存储的数据
rowData.value = []
//重置表单数据
resetFields();
setModalProps({ confirmLoading: false });
if (data.idList != null && data.idList != undefined && data.idList.length > 0){
} else {
rowData.value.push(data.record)
//单个移动
rowId.value = data.record.businessId;
data.record.institutionId = data.record.parentId
setFieldsValue({
...data.record,
});
}
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([
{
field: 'institutionId',
componentProps: {
treeData: treeList
},
},
]);
console.log('treeList:',treeList)
});
const getTitle = computed(() => ('移动'));
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
src/views/commonFile/resetName.vue 0 → 100644
View file @ 1fd922ae
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {accountFormSchema, resetNameFormSchema} from './account.data';
import { getDeptList } from '@/api/system/dept/dept';
import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/system/institution/institutionData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: resetNameFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
setFieldsValue({
...data.record,
})
});
const getTitle = computed(() => ('重命名'));
/**确定按钮*/
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