app管理

src/api/modules/jxjview.ts

@@ -75,3 +75,21 @@ export const deleteDictionary = (params: { id: number }) => {
 export const deleteDia = (params: { id: number }) => {
 	return http.post(PORT1 + `/xmgl/systemDictData/delete`, params);
 };
+
+// app管理
+export const getAppList = (params: User.ReqUserParams) => {
+	return http.post<ResPage<User.ResUserList>>(PORT1 + `/xmgl/appVersion/page`, params);
+};
+// app增加
+export const addApp = (params: FormData) => {
+	return http.post(PORT1 + `/xmgl/appVersion/add`, params);
+};
+// * 编辑app
+export const editApp = (params: { id: string }) => {
+	return http.post(PORT1 + `/xmgl/appVersion/edit`, params);
+};
+
+// 文件下载
+export const exportApp = (params: User.ReqUserParams) => {
+	return http.download(PORT1 + `/xmgl/file/download`, params);
+};

src/assets/json/dynamicRouter.json

@@ -29,8 +29,8 @@
 			}
 		},
 		{
-			"path": "/system",
+			"path": "/appmanage",
-
+			"name": "appmanage",
 			"meta": {
 				"icon": "Tools",
 				"title": "APP管理",

src/routers/modules/staticRouter.ts

@@ -34,7 +34,8 @@ export const staticRouter: RouteRecordRaw[] = [
 				name: "dictionary",
 				component: () => import("@/views/jxjview/dictionary/index.vue")
 			},
-			{ path: "/dictionary/detail", name: "dicDetail", component: () => import("@/views/jxjview/dictionary/detail.vue") }
+			{ path: "/dictionary/detail", name: "dicDetail", component: () => import("@/views/jxjview/dictionary/detail.vue") },
+			{ path: "/appmanage", name: "appManage", component: () => import("@/views/jxjview/appmanage/index.vue") }
 		]
 	}
 ];

src/views/jxjview/appmanage/index.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="table-box">
+		<ProTable
+			ref="proTable"
+			title="用户列表"
+			:columns="columns"
+			:requestApi="getTableList"
+			:initParam="initParam"
+			:dataCallback="dataCallback"
+			:tool-button="false"
+			:pagination="true"
+			background
+		>
+			<!-- 表格操作 -->
+			<template #downloadPath="scope">
+				<el-button type="primary" link @click="handleEditItem(scope.row)">下载</el-button>
+				<el-button type="primary" link v-copy="scope.row.downloadPath">复制apk地址</el-button>
+			</template>
+			<template #operation="{ row }">
+				<el-button type="primary" link @click="onUpload(row)"
+					><el-icon><RefreshRight /></el-icon>更新版本</el-button
+				>
+			</template>
+		</ProTable>
+		<el-dialog v-model="visible" title="更新版本" width="40%">
+			<el-form :data="formData" center>
+				<el-form-item label="版本名称:">
+					<el-input v-model="formData.versionName" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="版本号:">
+					<el-input v-model="formData.versionNum" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="版本描述:">
+					<el-input v-model="formData.versionDesc" type="textarea" />
+				</el-form-item>
+				<el-form-item label="上传apk:">
+					<el-upload
+						:headers="headers"
+						v-model:file-list="fileList"
+						class="upload-demo"
+						action="http://192.168.34.122:6688/xmgl/file/upload"
+						multiple
+						:limit="1"
+						:on-success="uploadSuccess"
+					>
+						<el-button type="primary">点击上传</el-button>
+						<template #tip>
+							<div class="el-upload__tip">apk文件大小不能超过500KB.</div>
+						</template>
+					</el-upload>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="visible = false">取消</el-button>
+					<el-button type="primary" @click="onSave(formData)">保存</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="tsx" name="jxjSystem">
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+import { GlobalStore } from "@/stores";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { useHandleData } from "@/hooks/useHandleData";
+import { useDownload } from "@/hooks/useDownload";
+import ProTable from "@/components/ProTable/index.vue";
+import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
+import { getAppList, editApp, addApp, exportApp } from "@/api/modules/jxjview";
+
+const router = useRouter();
+const globalStore = GlobalStore();
+const data = ref<string>("复制成功");
+const headers = ref({ Authorization: "Bearer " + globalStore.token });
+const fileList = ref([]);
+
+const visible = ref(false);
+const formData = ref({
+	versionName: "",
+	versionNum: "",
+	versionDesc: "",
+	fileName: "",
+	downloadPath: "",
+	versionId: 0
+});
+
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTable = ref();
+
+// 修改数据按钮
+const handleEditItem = async (row: any) => {
+	ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
+		useDownload(exportApp, "用户列表", { fileUrl: row.downloadPath })
+	);
+};
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{
+		prop: "versionId",
+		label: "序号"
+	},
+	{
+		prop: "versionName",
+		label: "版本名称"
+		// search: { el: "input" }
+	},
+	// 多级 prop
+	{ prop: "versionNum", label: "版本号" },
+	{ prop: "versionDesc", label: "版本描述" },
+	{ prop: "downloadPath", label: "apk地址" },
+	{ prop: "operation", label: "操作", fixed: "right", width: 330 }
+];
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({
+	type: 1
+});
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+	// console.log(data);
+	return {
+		list: data.records,
+		total: Number(data.total),
+		pageNo: Number(data.current),
+		pageSize: Number(data.size)
+	};
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+	let newParams = JSON.parse(JSON.stringify(params));
+	return getAppList(newParams);
+};
+
+const onUpload = (row: any) => {
+	visible.value = true;
+	formData.value.versionId = row.versionId;
+	fileList.value = [{ name: row.fileName, url: row.downloadPath }];
+	formData.value = reactive(row);
+	// formData.value?.resetFields();
+};
+const onSave = async (params: any) => {
+	const res = await editApp(params);
+	proTable.value.getAppList();
+};
+const uploadSuccess = (response: any) => {
+	ElMessage.success("上传成功");
+	formData.value.fileName = response.result.filename;
+	formData.value.downloadPath = response.result.url;
+};
+</script>

src/views/jxjview/system/index.vue

@@ -10,6 +10,7 @@
 			:tool-button="false"
 			:pagination="true"
 			background
+			:isShowSearch="false"
 		>
 			<!-- 表格 header 按钮 -->
 			<!-- <template #tableHeader="scope">

vite.config.ts

@@ -39,16 +39,16 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
 			host: "0.0.0.0",
 			port: viteEnv.VITE_PORT,
 			open: viteEnv.VITE_OPEN,
-			cors: true
+			cors: true,
 			// 跨域代理配置
-			// proxy: {
+			proxy: {
-			// 	"/api": {
+				"/api": {
-			// 		target: "http://10.0.1.49:6688", // easymock
+					target: "http://192.168.34.122:6688", // easymock
-			// 		// target: "https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0", // fastmock
+					// target: "https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0", // fastmock
-			// 		changeOrigin: true,
+					changeOrigin: true,
-			// 		rewrite: path => path.replace(/^\/api/, "")
+					rewrite: path => path.replace(/^\/api/, "")
-			// 	}
+				}
-			// }
+			}
 		},
 		plugins: [
 			vue(),