优化

src/api/model/system.ts

@@ -85,6 +85,9 @@ export default {
 		option: async function (data = {}) {
 			return await http.get("post/option", data);
 		},
+		import: async function (data = {}) {
+			return await http.get("post/import", data);
+		},
 	},
 	upload: async function (data, config = {}) {
 		return await http.post("upload", data, config);

src/api/model/tools.ts

@@ -34,5 +34,10 @@ export default {
 		build: async function (data = {}) {
 			return await http.post("form/build", data);
 		},
+	},
+	file: {
+		export: async function (data = {}) {
+			return await http.get("file/export", data);
+		},
 	}
 }

src/components/piExport/index.vue

@@ -0,0 +1,45 @@
+<template>
+	<el-button type="warning" plain icon="el-icon-download" @click="download" :loading="loading"></el-button>
+</template>
+
+<script setup>
+import api from "@/api"
+import {ref, getCurrentInstance} from "vue"
+import tools from "@/utils/tools"
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+	apiObj: {
+		type: Object, default: () => {
+		}
+	},
+	params: {
+		type: Object, default: () => {
+		}
+	},
+	module: {type: String, default: "demo"},
+	name: {type: String, default: "数据导出"},
+})
+
+let loading = ref(false)
+
+async function download() {
+	const data = {module: props.module, name: props.name, params: props.params}
+	let apiObj = props.apiObj
+	if (!apiObj) {
+		apiObj = api.tools.file.export
+	}
+	loading.value = true
+	const [res, err] = await tools.go(apiObj(data))
+	loading.value = false
+	if (err) {
+		proxy.$message.error(res.msg)
+		return
+	}
+	proxy.$message.success(res.msg)
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/piImport/index.vue

@@ -0,0 +1,136 @@
+<template>
+	<section>
+		<slot :open="open">
+			<el-button type="info" plain icon="el-icon-upload" @click="open()"></el-button>
+		</slot>
+		<el-dialog v-model="dialog" title="导入" :width="550" :close-on-click-modal="false" append-to-body destroy-on-close>
+			<el-progress v-if="loading" :text-inside="true" :stroke-width="20" :percentage="percentage"
+						 style="margin-bottom: 15px;"/>
+			<div v-loading="loading">
+				<el-upload ref="uploaderRef"
+						   drag
+						   :accept="accept"
+						   :maxSize="maxSize"
+						   :limit="1"
+						   :data="data"
+						   :show-file-list="false"
+						   :http-request="request"
+						   :before-upload="before"
+						   :on-progress="progress"
+						   :on-success="success"
+						   :on-error="error"
+				>
+					<slot name="uploader">
+						<el-icon class="el-icon--upload">
+							<el-icon-upload-filled/>
+						</el-icon>
+						<div class="el-upload__text">
+							将文件拖到此处或 <em>点击选择文件上传</em>
+						</div>
+					</slot>
+					<template #tip>
+						<div class="el-upload__tip">
+							<template v-if="tip">{{ tip }}</template>
+							<template v-else>请上传小于或等于 {{ maxSize }}M 的 {{ accept }} 格式文件</template>
+							<p v-if="templateUrl" style="margin-top: 7px;">
+								<el-link :href="templateUrl" target="_blank" type="primary" :underline="false">
+									下载导入模板
+								</el-link>
+							</p>
+						</div>
+					</template>
+				</el-upload>
+				<el-form v-if="$slots.form" inline label-width="100px" label-position="left" style="margin-top: 18px;">
+					<slot name="form" :formData="formData"></slot>
+				</el-form>
+			</div>
+		</el-dialog>
+	</section>
+</template>
+
+<script setup>
+import {getCurrentInstance, ref} from "vue"
+
+const emit = defineEmits(["success"])
+const uploaderRef = ref(null)
+const props = defineProps({
+	apiObj: {type: Function, required: true},
+	data: {
+		type: Object, default: () => {
+		}
+	},
+	accept: {type: String, default: ".xls, .xlsx"},
+	maxSize: {type: Number, default: 10},
+	tip: {type: String, default: ""},
+	templateUrl: {type: String, default: ""}
+})
+const {proxy} = getCurrentInstance()
+
+let dialog = ref(false)
+let loading = ref(false)
+let percentage = ref(0)
+let formData = ref({})
+
+function open() {
+	dialog.value = true
+	formData.value = {}
+}
+
+function close() {
+	dialog.value = false
+}
+
+function before(file) {
+	const maxSize = file.size / 1024 / 1024 < props.maxSize;
+	if (!maxSize) {
+		proxy.$message.warning(`上传文件大小不能超过 ${props.maxSize}MB!`);
+		return false;
+	}
+	loading.value = true
+}
+
+function progress(e) {
+	percentage.value = e.percent
+}
+
+function success(res, file) {
+	uploaderRef.value.handleRemove(file)
+	uploaderRef.value.clearFiles()
+	loading.value = false
+	percentage.value = 0
+	emit('success', res, close)
+}
+
+function error(err) {
+	loading.value = false
+	percentage.value = 0
+	proxy.$notify.error({
+		title: '上传文件未成功',
+		message: err
+	})
+}
+
+
+function request(param) {
+	Object.assign(param.data, formData.value)
+	const data = new FormData();
+	data.append(param.filename, param.file);
+	for (const key in param.data) {
+		data.append(key, param.data[key]);
+	}
+	props.apiObj.post(data, {
+		onUploadProgress: e => {
+			const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+			param.onProgress({percent: complete})
+		}
+	}).then(res => {
+		param.onSuccess(res)
+	}).catch(err => {
+		param.onError(err)
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/style/fix.scss

@@ -29,9 +29,10 @@
 .el-aside {border-right: 1px solid var(--el-border-color-light);}
 .el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
 .el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
-.el-header .left-panel {display: flex;align-items: center;}
+.el-header .left-panel {display: flex;align-items: center;gap: 12px}
+.el-header .left-panel > .el-button+.el-button {margin-left: auto}
 .el-header .right-panel {display: flex;align-items: center;}
-.el-header .right-panel > * + * {margin-left:10px;}
+.el-header .right-panel > * + * {margin-left:12px;}
 .el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;height: 51px;}
 .el-main {padding:15px;}
 .el-main.nopadding {padding:0;background: #fff;}

src/views/system/post/index.vue

@@ -4,6 +4,8 @@
 			<el-button v-auth="'post:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
 			<el-button v-auth="'post:del'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0"
 					   @click="batch_del"></el-button>
+			<pi-export v-auth="'post:export'" module="post_export" :params="search"></pi-export>
+			<pi-import v-auth="'post:import'" :api-obj="api.system.post.import"></pi-import>
 		</template>
 		<template #search>
 			<el-input v-model="search.post_name" placeholder="岗位名称" clearable style="width: 200px;"></el-input>
@@ -44,7 +46,9 @@
 <script setup>
 import saveDialog from './save'
 import api from "@/api/index";
-import {getCurrentInstance, nextTick, ref} from "vue";
+import {getCurrentInstance, nextTick, ref} from "vue"
+import piImport from "@/components/piImport"
+import piExport from "@/components/piExport"
 
 defineOptions({
 	name: "systemPost"
@@ -106,6 +110,13 @@ async function batch_del() {
 	})
 }
 
+async function download() {
+	const loading = proxy.$loading();
+	const res = await api.system.post.export(search.value);
+	loading.close();
+	proxy.$message.success(res.msg)
+}
+
 //表格选择后回调事件
 function selectionChange(e) {
 	selection.value = e;