74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" :title="title" :before-close="fnClose">
|
||
<el-form ref="formRef" :model="form" :rules="rules" :label-width="labelWidth">
|
||
<slot :form="form"></slot>
|
||
<el-form-item label="附件" prop="file">
|
||
<app-upload v-model="form.file" accept=".xls,.xlsx" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button v-if="templateUrl" @click="fnExportTemplates">
|
||
导出模板
|
||
</el-button>
|
||
<el-button type="primary" @click="fnSubmit">确定</el-button>
|
||
<el-button @click="fnClose">取消</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import { debounce } from "throttle-debounce";
|
||
import { useVModel } from "@vueuse/core";
|
||
import { ElDialog, ElForm, ElFormItem, ElButton, ElMessageBox } from "element-plus";
|
||
import "element-plus/es/components/dialog/style/css";
|
||
import "element-plus/es/components/form/style/css";
|
||
import "element-plus/es/components/form-item/style/css";
|
||
import "element-plus/es/components/button/style/css";
|
||
import AppUpload from "../upload/index.vue";
|
||
import useForm from "../../hooks/useForm/index.js";
|
||
import { getFileUrl } from "../../utils/index.js";
|
||
|
||
defineOptions({
|
||
name: "AppImportFile",
|
||
});
|
||
const props = defineProps({
|
||
labelWidth: { type: String, default: "80px" },
|
||
title: { type: String, default: "导入" },
|
||
templateUrl: { type: String, default: "" },
|
||
customForm: { type: Boolean, default: false },
|
||
form: { type: Object, default: () => ({ file: [] }) },
|
||
rules: {
|
||
type: Object,
|
||
default: () => ({
|
||
file: [{ required: true, message: "附件不能为空", trigger: "change" }],
|
||
}),
|
||
},
|
||
});
|
||
const emits = defineEmits(["submit", "update:form"]);
|
||
const visible = defineModel("visible", { type: Boolean, required: true });
|
||
const form = props.customForm
|
||
? useVModel(props, "form", emits)
|
||
: ref({ file: [] });
|
||
const { formRef, validate, reset } = useForm();
|
||
const fnExportTemplates = async () => {
|
||
await ElMessageBox.confirm("确定要下载excel模板吗？", { type: "warning" });
|
||
window.open(getFileUrl() + props.templateUrl);
|
||
};
|
||
const fnClose = () => {
|
||
reset();
|
||
visible.value = false;
|
||
};
|
||
const fnSubmit = debounce(
|
||
1000,
|
||
async () => {
|
||
await validate();
|
||
emits("submit", form.value);
|
||
reset();
|
||
},
|
||
{ atBegin: true }
|
||
);
|
||
</script>
|
||
|
||
<style scoped lang="scss"></style>
|