新增前端vue
This commit is contained in:
@@ -37,7 +37,10 @@ export interface FolderItem {
|
||||
|
||||
export const bizFoldersList = (params?: BizFolders | any) =>
|
||||
defHttp.get<BizFolders>({ url: adminPath + '/biz/folders/list', params });
|
||||
|
||||
|
||||
export const bizFoldersListAll = (params?: BizFolders | any) =>
|
||||
defHttp.get<BizFolders[]>({ url: adminPath + '/biz/folders/listAll', params });
|
||||
|
||||
export const bizFolderItemAll = (params?: BizFolders | any) =>
|
||||
defHttp.get<FolderItem[]>({ url: adminPath + '/biz/folders/foldersAll', params });
|
||||
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
field: 'provinceCode',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
api: bizProvinceListAll,
|
||||
params: {},
|
||||
fieldNames: { label: 'provinceName', value: 'provinceCode' },
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
api: bizProvinceListAll,
|
||||
params: {},
|
||||
fieldNames: { label: 'provinceName', value: 'provinceCode' },
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
onChange: (value: string) => {
|
||||
provListParams.value.provinceCode = value;
|
||||
},
|
||||
|
||||
@@ -119,8 +119,8 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
listData,
|
||||
register,
|
||||
openModal,
|
||||
register,
|
||||
openModal,
|
||||
getUsageClass,
|
||||
getProgressClass,
|
||||
};
|
||||
|
||||
@@ -17,8 +17,10 @@
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
|
||||
import { BizMyfiles, bizMyfilesSave, bizMyfilesForm } from '@jeesite/biz/api/biz/myfiles';
|
||||
|
||||
import { FolderItem, bizFoldersListAll } from '@jeesite/biz/api/biz/folders';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal, BasicForm },
|
||||
emits: ['modalClose'],
|
||||
@@ -29,28 +31,56 @@
|
||||
const record = ref<BizMyfiles>({} as BizMyfiles);
|
||||
|
||||
const inputFormSchemas: FormSchema<BizMyfiles>[] = [
|
||||
{
|
||||
label: t('上级目录'),
|
||||
field: 'parentId',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
api: bizFoldersListAll,
|
||||
params: { parentId : '0' },
|
||||
fieldNames: { label: 'folderName', value: 'folderId' },
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: t('文件夹标识'),
|
||||
label: t('目录名称'),
|
||||
field: 'folderId',
|
||||
component: 'Input',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
maxlength: 52,
|
||||
api: bizFoldersListAll,
|
||||
params: {},
|
||||
fieldNames: { label: 'folderName', value: 'folderId' },
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
},
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: t('用户编码'),
|
||||
field: 'loginCode',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 52,
|
||||
},
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: t('用户名称'),
|
||||
field: 'userName',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 52,
|
||||
},
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: t('文件夹名称'),
|
||||
field: 'folderName',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 52,
|
||||
},
|
||||
required: true,
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: t('附件上传'),
|
||||
label: t('上传文件'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
@@ -59,6 +89,7 @@
|
||||
bizType: 'bizMyfiles_file',
|
||||
uploadType: 'all',
|
||||
},
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
@@ -72,36 +103,40 @@
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const [register, { closeModal }] = useModalInner(async (data: any) => {
|
||||
const dddd = {
|
||||
... data
|
||||
}
|
||||
console.log(dddd)
|
||||
resetFields();
|
||||
const [register, { setModalProps, closeModal }] = useModalInner(async (data: any) => {
|
||||
setModalProps({ loading: true });
|
||||
await resetFields();
|
||||
record.value = (data || {}) as BizMyfiles;
|
||||
record.value.__t = new Date().getTime();
|
||||
if (data) {
|
||||
setFieldsValue({ ...data });
|
||||
await setFieldsValue(record.value);
|
||||
}
|
||||
setModalProps({ loading: false });
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const data = await validate();
|
||||
setModalProps({ confirmLoading: true });
|
||||
const params: any = {
|
||||
isNewRecord: true,
|
||||
tid : Date.now(),
|
||||
};
|
||||
const res = await bizMyfilesSave(params, data);
|
||||
showMessage(res.message);
|
||||
handleCancel(data);
|
||||
handleCancel();
|
||||
} catch (error: any) {
|
||||
console.error('上传文件保存失败:', error);
|
||||
}
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮逻辑
|
||||
const handleCancel = (data: any) => {
|
||||
resetFields(); // 取消时重置表单
|
||||
emit('modalClose',data);
|
||||
closeModal(); // 关闭模态框
|
||||
const handleCancel = () => {
|
||||
resetFields();
|
||||
emit('modalClose');
|
||||
closeModal();
|
||||
};
|
||||
|
||||
return {
|
||||
@@ -110,11 +145,11 @@
|
||||
handleCancel,
|
||||
registerForm,
|
||||
inputFormSchemas,
|
||||
handleSubmit
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -68,8 +68,8 @@
|
||||
v-model:value="fileSearchText"
|
||||
placeholder="文件搜索框"
|
||||
class="file-search-input"
|
||||
enter-button
|
||||
@search="onSearch"
|
||||
enter-button
|
||||
@search="onSearch"
|
||||
/>
|
||||
<div class="header-btn-group">
|
||||
<a-button type="default" class="header-btn" @click="openfolderModal(true, ParamsFolders)"><Icon icon="ant-design:folder-add-outlined" />新建文件夹</a-button>
|
||||
@@ -88,7 +88,7 @@
|
||||
<div class="card-inner-content">
|
||||
<div class="file-card-header">
|
||||
<div class="file-name-wrap">
|
||||
<span class="file-card-icon">📄</span>
|
||||
<span class="file-card-icon"><Icon icon="i-svg:moon" size="24" /></span>
|
||||
<span class="file-card-name" :title="file.fileName">{{ file.fileName }}</span>
|
||||
</div>
|
||||
<span class="file-card-size">{{ file.fileSize }}</span>
|
||||
@@ -105,7 +105,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UploadModal @register="uploadregister" />
|
||||
<UploadModal @register="uploadregister" @modalClose="getFileList({ params: ParamsFolders})"/>
|
||||
<FolderModal @register="folderregister" />
|
||||
</template>
|
||||
|
||||
@@ -121,6 +121,10 @@ import FolderModal from './components/folder.vue';
|
||||
import { FolderItem, bizFolderItemAll } from '@jeesite/biz/api/biz/folders';
|
||||
import { BizMyfiles, bizMyfilesListAll } from '@jeesite/biz/api/biz/myfiles';
|
||||
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
const [uploadregister, { openModal: openUploadModal }] = useModal();
|
||||
const [folderregister, { openModal: openfolderModal }] = useModal();
|
||||
|
||||
@@ -217,34 +221,47 @@ watch(folderSearchText, (newVal) => {
|
||||
searchAndExpandParents(newVal);
|
||||
});
|
||||
|
||||
const getDataList = async () => {
|
||||
const getDataList = async (params: {}) => {
|
||||
try {
|
||||
const result = await bizFolderItemAll();
|
||||
const reqParams = {
|
||||
... params,
|
||||
loginCode :userinfo.value.loginCode,
|
||||
}
|
||||
const result = await bizFolderItemAll(reqParams);
|
||||
const folders = (result || []) as FolderItem[];
|
||||
folders.forEach(folder => {
|
||||
folder.expanded = false;
|
||||
});
|
||||
bindParentReferences(folders); // 绑定父级引用
|
||||
folderList.value = folders;
|
||||
getFileList({});
|
||||
getFileList({});
|
||||
} catch (error) {
|
||||
console.error('获取文件夹信息失败:', error);
|
||||
folderList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getFileList = async (params: {}) => {
|
||||
try {
|
||||
const result = await bizMyfilesListAll(params);
|
||||
fileList.value = result || [];
|
||||
const reqParams = {
|
||||
... params,
|
||||
folderId: ParamsFolders?.value?.folderId || '',
|
||||
loginCode :userinfo.value.loginCode,
|
||||
}
|
||||
const result = await bizMyfilesListAll(reqParams);
|
||||
fileList.value = result || [];
|
||||
} catch (error) {
|
||||
console.error('获取文件信息失败:', error);
|
||||
fileList.value = [];
|
||||
console.error('获取文件信息失败:', error);
|
||||
fileList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const onSearch = (searchValue: string) => {
|
||||
UploadFile = true;
|
||||
ParamsFolders.value = {};
|
||||
const params = {
|
||||
fileName: searchValue,
|
||||
}
|
||||
@@ -275,6 +292,8 @@ const handleChildClick = (child: ChildFolder) => {
|
||||
ParamsFolders.value = child;
|
||||
const params = {
|
||||
folderId: child.id,
|
||||
userName: userinfo.value.userName,
|
||||
loginCode :userinfo.value.loginCode,
|
||||
}
|
||||
getFileList(params);
|
||||
};
|
||||
@@ -289,7 +308,7 @@ watch(folderSearchText, () => {
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getDataList();
|
||||
getDataList({});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -687,4 +706,4 @@ onMounted(() => {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user