页面设置名字、logo、存储路径等

jeecgboot-vue3-master/src/api/sys/user.ts

@@ -44,6 +44,25 @@ enum Api {
   getLoginQrcode = '/sys/getLoginQrcode',
   //监控二维码扫描状态
   getQrcodeToken = '/sys/getQrcodeToken',
+  path = '/online/cgform/head/rootFile',
+  pathTree = '/online/cgform/head/fileTree',
+  dataList = '/sysconfiguration/sysConfiguration/list',
+  updPath = '/sysconfiguration/sysConfiguration/add',
+}
+
+export function getPathApi() {
+  return defHttp.get({ url: Api.path });
+}
+export function getPathTreeApi(parentPath: string) {
+  return defHttp.get({ url: Api.pathTree, params: { parentPath } });
+}
+
+export function getDataListApi() {
+  return defHttp.get({ url: Api.dataList });
+}
+type updPathPar = { name: string; logo: string; newsPage: string; recordNumber: string; copyright: string; certificate: string; composition: string }
+export function updPathApi(params: updPathPar) {
+  return defHttp.post({ url: Api.updPath, params });
 }
 
 /**

jeecgboot-vue3-master/src/views/setPath/Modal.vue

@@ -1,69 +1,64 @@
 <template>
-  <BasicModal v-bind="$attrs" title="配置路径">
-    <a-directory-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" multiple
-      :tree-data="treeData"></a-directory-tree>
+  <BasicModal v-bind="$attrs" @register="register" title="配置路径" @visible-change="visChange" @ok="hanOk">
+    <a-tree v-if="ifTree" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
+      :load-data="onLoadData" @select="hanSelect" :tree-data="treeData" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { BasicModal } from '/@/components/Modal';
+import { getPathApi, getPathTreeApi } from '/@/api/sys/user';
+import { BasicModal, useModalInner } from '/@/components/Modal';
 
+const [register, { closeModal, setModalProps }] = useModalInner((data: any) => {
+  currentlySelecte.value = data.path
+  target.value = data.target
+})
 
+const ifTree = ref(true)
 // tree
-
-import type { TreeProps } from 'ant-design-vue';
 import { ref } from 'vue';
-
-const expandedKeys = ref<string[]>(['0-0', '0-1']);
+import type { TreeProps } from 'ant-design-vue';
+const expandedKeys = ref<string[]>([]);
 const selectedKeys = ref<string[]>([]);
-const treeData: TreeProps['treeData'] = [
-  {
-    title: 'C:\\',
-    key: '0-0',
-    children: [
-      {
-        title: 'leaf 0-0',
-        key: '0-0-0',
-        children: [
-          {
-            title: 'child:\\',
-            key: '0-0-0-0',
-            children: [
-              {
-                title: 'leaf 0-0',
-                key: '0-0-0-0-0',
-                isLeaf: true,
-              },
-              {
-                title: 'leaf 0-1',
-                key: '0-0-0-0-1',
-                isLeaf: true,
-              },
-            ],
-          },
-        ]
-      },
-      {
-        title: 'leaf 0-1',
-        key: '0-0-1',
-        isLeaf: true,
-      },
-    ],
-  },
-  {
-    title: 'parent 1',
-    key: '0-1',
-    children: [
-      {
-        title: 'leaf 1-0',
-        key: '0-1-0',
-        isLeaf: true,
-      },
-      {
-        title: 'leaf 1-1',
-        key: '0-1-1',
-        isLeaf: true,
-      },
-    ],
-  },
-];
+const currentlySelecte = ref('')
+const target = ref('')
+
+const emit = defineEmits(['confirmPath'])
+function hanOk() {
+  closeModal()
+  emit('confirmPath', currentlySelecte.value, target.value)
+}
+
+const treeData = ref<TreeProps['treeData']>();
+const onLoadData: TreeProps['loadData'] = treeNode => {
+  return new Promise<void>(resolve => {
+    if (treeNode.dataRef.children) {
+      resolve();
+      return;
+    }
+    asGetPathApi(treeNode.key).then(res => {
+      treeNode.dataRef.children = res;
+      treeData.value = [...treeData.value];
+      resolve();
+    })
+  });
+};
+
+
+
+let isOne = true;
+function visChange(visible) {
+  if (visible && isOne) {
+    getPathApi().then(res => {
+      treeData.value = res
+      isOne = false
+    })
+  }
+}
+
+function asGetPathApi(path) {
+  return getPathTreeApi(path);
+}
+function hanSelect(selectedKeys: any[]) {
+  currentlySelecte.value = selectedKeys[0]
+}
 </script>

jeecgboot-vue3-master/src/views/setPath/index.vue

@@ -1,43 +1,44 @@
 <template>
     <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish"
         @validate="handleValidate" @finishFailed="handleFinishFailed">
-        <a-form-item class="h-item" has-feedback label="作品上传路径" name="pass">
-            <a-input v-model:value="formState.pass" type="password" autocomplete="off" />
-            <a-button :icon="h(FolderOpenOutlined)" @click="openModal(true, {})">浏览</a-button>
+        <a-form-item label="名称" name="name">
+            <a-input v-model:value="formState.name" />
         </a-form-item>
-        <a-form-item class="h-item" has-feedback label="比赛证书上传路径" name="checkPass">
-            <a-input v-model:value="formState.checkPass" type="password" autocomplete="off" />
-            <a-button :icon="h(FolderOpenOutlined)" @click="openModal(true, {})">浏览</a-button>
+        <a-form-item label="新闻首页" name="newsPage">
+            <a-input v-model:value="formState.newsPage" />
         </a-form-item>
-        <a-form-item label="需要配置的标题" name="title">
-            <a-input v-model:value="formState.title" />
+        <a-form-item label="备案号" name="recordNumber">
+            <a-textarea v-model:value="formState.recordNumber" placeholder="Basic usage" :rows="4" />
         </a-form-item>
-        <a-form-item has-feedback label="LOGO" name="age">
-            <div class="clearfix">
-                <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-                    list-type="picture-card" @preview="handlePreview">
-                    <div v-if="fileList.length < 8">
-                        <plus-outlined />
-                        <div style="margin-top: 8px">Upload</div>
-                    </div>
-                </a-upload>
-                <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
-                    <img alt="example" style="width: 100%" :src="previewImage" />
-                </a-modal>
-            </div>
+        <a-form-item label="版权信息" name="copyright">
+            <a-textarea v-model:value="formState.copyright" placeholder="Basic usage" :rows="4" />
+        </a-form-item>
+
+        <a-form-item has-feedback label="LOGO" name="logo">
+            <j-image-upload v-model:value="formState.logo"  />
+        </a-form-item>
+        <a-form-item class="h-item" has-feedback label="作品上传路径" name="composition">
+            <a-input v-model:value="formState.composition" type="text" autocomplete="off" />
+            <a-button :icon="h(FolderOpenOutlined)"
+                @click="openModal(true, { path: 'sadsad', target: 'composition' })">浏览</a-button>
+        </a-form-item>
+        <a-form-item class="h-item" has-feedback label="比赛证书上传路径" name="certificate">
+            <a-input v-model:value="formState.certificate" type="text" autocomplete="off" />
+            <a-button :icon="h(FolderOpenOutlined)"
+                @click="openModal(true, { path: 'sadsad', target: 'certificate' })">浏览</a-button>
         </a-form-item>
         <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
-            <a-button type="primary" html-type="submit">Submit</a-button>
+            <a-button type="primary" html-type="submit" @click="submit">Submit</a-button>
         </a-form-item>
     </a-form>
     <div class="px-10">
-        <Modal @register="register" />
+        <Modal @register="register" @confirmPath="hanConPat" />
     </div>
 </template>
 <script lang="ts" setup>
+import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
 import { useModal } from '/@/components/Modal';
 import Modal from './Modal.vue';
-
 import { PlusOutlined } from '@ant-design/icons-vue';
 import type { UploadProps } from 'ant-design-vue';
 
@@ -45,18 +46,62 @@ import { FolderOpenOutlined } from '@ant-design/icons-vue';
 import { reactive, ref, h } from 'vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormInstance } from 'ant-design-vue';
+import { getDataListApi, updPathApi } from '/@/api/sys/user';
+getDataListApi().then(res => {
+    Object.assign(formState, res.records[0]);
+})
+
+const fileList = ref<UploadProps['fileList']>([]);
+
+const handleCancel = () => {
+    previewVisible.value = false;
+    previewTitle.value = '';
+};
+const handlePreview = async (file: UploadProps['fileList'][number]) => {
+    if (!file.url && !file.preview) {
+        file.preview = (await getBase64(file.originFileObj)) as string;
+    }
+    previewImage.value = file.url || file.preview;
+    previewVisible.value = true;
+    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+};
+
+// LOGO upload
+function getBase64(file: File) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+}
+
+const previewVisible = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+
+
+
+
 interface FormState {
-    pass: string;
-    checkPass: string;
-    age: number | undefined;
-    title: string;
+    name: string;
+    logo: any;
+    newsPage: string;
+    recordNumber: string;
+    copyright: string;
+    certificate: string;
+    composition: string;
 }
 const formRef = ref<FormInstance>();
 const formState = reactive<FormState>({
-    pass: '',
-    checkPass: '',
-    age: undefined,
-    title: ''
+    name: '',
+    logo: previewImage.value,
+    newsPage: '',
+    recordNumber: '',
+    copyright: '',
+    certificate: '',
+    composition: '',
 });
 const checkAge = async (_rule: Rule, value: number) => {
     if (!value) {
@@ -72,6 +117,12 @@ const checkAge = async (_rule: Rule, value: number) => {
         }
     }
 };
+
+function submit() {
+    updPathApi(formState).then(res => {
+        console.log(res, 'res');
+    })
+}
 const validatePass = async (_rule: Rule, value: string) => {
     if (value === '') {
         return Promise.reject('Please input the password');
@@ -110,38 +161,12 @@ const handleValidate = (...args) => {
 };
 
 
-// LOGO upload
-function getBase64(file: File) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = error => reject(error);
-    });
-}
-
-const previewVisible = ref(false);
-const previewImage = ref('');
-const previewTitle = ref('');
-
-const fileList = ref<UploadProps['fileList']>([]);
-
-const handleCancel = () => {
-    previewVisible.value = false;
-    previewTitle.value = '';
-};
-const handlePreview = async (file: UploadProps['fileList'][number]) => {
-    if (!file.url && !file.preview) {
-        file.preview = (await getBase64(file.originFileObj)) as string;
-    }
-    previewImage.value = file.url || file.preview;
-    previewVisible.value = true;
-    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
-};
-
 
 // 弹窗
 const [register, { openModal }] = useModal();
+function hanConPat(currentlySelecte, target) {
+    formState[target] = currentlySelecte;
+}
 </script>
 <style scoped lang="less">
 .h-item {