gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件模板

Browse Source
This commit is contained in:
陈红丽 2024-07-13 15:59:44 +08:00
parent 16e11a2b1e
commit 09eb91d4b4
8 changed files with 642 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/api/file/fileTemplate.ts Normal file
View File

@ -0,0 +1,60 @@
import { http } from '@/utils/http/axios';
/**
* @description: 列表
*/
export function getFileTemplateList(params?) {
return http.request({
url: '/file/template/page',
method: 'GET',
params,
});
}
/**
* @description: 根据ID获取详情
*/
export function getFileTemplateDetail(id) {
return http.request({
url: '/file/template/detail/'+id,
method: 'get',
});
}
/**
* @description: 添加
*/
export function fileTemplateAdd(data:any) {
return http.request({
url: '/file/template/add',
method: 'POST',
data,
});
}
/**
* @description: 更新
*/
export function fileTemplateUpdate(data:any) {
return http.request({
url: '/file/template/update',
method: 'PUT',
data
});
}
/**
* @description: 删除
*/
export function fileTemplateDelete(id) {
return http.request({
url: '/file/template/delete/'+id,
method: 'DELETE',
});
}
/**
* @description: 批量删除
*/
export function fileTemplateBatchDelete(data:any) {
return http.request({
url: '/file/template/batchDelete',
method: 'DELETE',
data
});
}

222
src/components/Upload/file.vue Normal file
View File

@ -0,0 +1,222 @@
<template>
<el-upload
action="#"
style="width: 220px"
:id="uuid"
class="upload-demo my-upload-file"
:class="fileList.length>0&&!loading?'success-file':''"
:multiple="multiple"
ref="uploadRef"
:disabled="loading?true:self_disabled"
:http-request="handleHttpUpload"
:file-list="fileList"
:on-preview="onPreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:drag="isBtn?false:true"
:limit="limit"
>
<template v-if="isBtn">
<el-tooltip
v-if="isBtn&&btnTip"
class="box-item"
effect="dark"
:content="btnTip"
placement="top"
>
<el-button icon="Upload" type="primary">点击上传</el-button>
</el-tooltip>
<el-button v-else icon="Upload" type="primary">点击上传</el-button>
</template>
<template v-else>
<el-icon class="el-icon--upload">
<Finished style="color: var(--el-color-success)" v-if="fileList.length>0&&!loading"/>
<upload-filled v-else/>
</el-icon>
<div v-if="!self_disabled" class="el-upload__text">{{loading?'上传中':(fileList.length>0?'上传成功':'点击或将文件拖拽到这里上传')}}</div>
</template>
<template #tip>
<template v-if="!isBtn">
<div v-if="props.fileType" class="el-upload__tip">支持扩展名：{{ props.fileType }}</div>
<div v-if="props.multiple" class="el-upload__tip">最多上传{{props.limit}}个文件</div>
</template>
</template>
</el-upload>
</template>
<script setup lang="ts">
import { computed,ref} from "vue";
import {ElNotification, UploadFile, UploadInstance} from "element-plus";
import type {UploadProps, UploadRequestOptions} from "element-plus";
import {generateUUID} from "@/utils/auth";
const uploadRef = ref<UploadInstance>();
import {upload} from '@/api/common'
// 接受父组件参数
const props = defineProps({
zIndex: {
default: -1
},
multiple: {
type: Boolean,
default: false
},
isBtn: {
type: Boolean,
default: false
},
btnTip: {
type: String,
default: ''
},
limit: {
type: Number,
default: 2
},
fileList: {
type: Array,
required: true,
default: []
},
disabled: {
default: false
},
fileSize: {
default: 200
},
orderNo: {
default: ''
},
fileType: {
default: ""
},
name: {
default: ""
}
});
// 生成组件唯一id
const uuid = ref("id-" + generateUUID());
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled;
});
const emit = defineEmits(["upload"]);
const loading = ref(false);
const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true;
try {
const formData = new FormData()
formData.append('file',options.file)
formData.append('name',props.name)
const res =await upload(formData)
if(props.multiple){
let list=JSON.parse(JSON.stringify(props.fileList))
list.push({
url: res.fileUrl,
name: res.fileName,
filePath: res.fileUrl,
fileName: res.fileName,
})
emit('upload', list)
}else{
emit("upload", res.fileUrl,res.fileName, props.zIndex);
}
} catch (error) {
ElNotification({
title: "温馨提示",
message: "上传文件失败！",
type: "error"
});
if(props.multiple){
emit('upload', props.fileList)
}else{
uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex);
}
options.onError(error as any);
} finally {
loading.value = false;
}
};
const onPreview=(uploadFile: UploadFile)=> {
window.open( uploadFile?.url)
}
const handleRemove: UploadProps["onRemove"] = (file:any) => {
if(props.multiple){
emit("upload",props.fileList.filter((f) => !(f === file.url)))
}else{
uploadRef.value!.clearFiles();
emit("upload", "", "", props.zIndex);
}
};
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
if (!imgSize) {
ElNotification({
title: "温馨提示",
message: `上传文件大小不能超过 ${props.fileSize}M！`,
type: "warning"
});
return false;
}
if( props.fileType){
let fileType = props.fileType.replace(/\s/g, "");
fileType.split('.').join('|')
let fileIndex = rawFile.name.lastIndexOf('.')
let substrName = rawFile.name.substr(fileIndex)
if (fileType.indexOf(substrName)==-1) {
ElNotification({
title: "温馨提示",
message: "上传文件不符合所需的格式！",
type: "warning"
});
return false;
}
}
return true;
};
</script>
<style lang="scss">
.success-file {
.el-upload {
.el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-success) !important;
}
}
}
.my-upload-file{
.el-upload-dragger{
padding: var(--el-upload-dragger-padding-vertical);
}
.el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to{
display: none;
}
.el-icon--close-tip{
display: none!important;
}
}
.el-form-item.is-error{
.el-upload-dragger {
border-width: 3px;
border-color: var(--el-color-error) !important;
}
}
</style>

28
src/utils/auth.ts
View File

@ -211,7 +211,33 @@ export function filterDatetime(value: any, format: string = "yyyy-MM-dd") {
}
}
export function generateUUID() {
if (typeof crypto === "object") {
if (typeof crypto.randomUUID === "function") {
return crypto.randomUUID();
}
if (typeof crypto.getRandomValues === "function" && typeof Uint8Array === "function") {
const callback = (c: any) => {
const num = Number(c);
return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
};
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback);
}
}
let timestamp = new Date().getTime();
let performanceNow = (typeof performance !== "undefined" && performance.now && performance.now() * 1000) || 0;
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
let random = Math.random() * 16;
if (timestamp > 0) {
random = (timestamp + random) % 16 | 0;
timestamp = Math.floor(timestamp / 16);
} else {
random = (performanceNow + random) % 16 | 0;
performanceNow = Math.floor(performanceNow / 16);
}
return (c === "x" ? random : (random & 0x3) | 0x8).toString(16);
});
}
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份

27
src/views/data/notice/edit.vue
View File

@ -1,8 +1,9 @@
<template>
<el-dialog
<el-drawer
v-model="props.visible"
:title="props.noticeId?'编辑':'新增'"
width="500"
direction="rtl"
:size="size"
:close-on-click-modal="false"
:before-close="dialogClose"
>
@ -44,13 +45,7 @@
prop="content"
:rules="{ required: true, message: '请输入通知内容', trigger: 'blur' }"
>
<el-input
class="ls-input"
type="textarea"
v-model="formData.content"
placeholder="请输入通知内容"
clearable
/>
<Editor ref="editorRef" :height="600"/>
</el-form-item>
</el-form>
<template #footer>
@ -61,17 +56,20 @@
</el-button>
</span>
</template>
</el-dialog>
</el-drawer>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getNoticeDetail,noticeAdd,noticeUpdate} from "@/api/data/notice";
import {onMounted, reactive, shallowRef} from "vue";
import {onMounted, reactive, shallowRef,ref} from "vue";
import Editor from '@/components/Editor/tinymce.vue'
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";
const size = document.body.clientWidth - 500;
const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const editorRef=ref()
const formData = reactive({
id: "",
title: "",
@ -94,8 +92,11 @@ const props = defineProps({
});
const handleSubmit = async () => {
formData.content=editorRef.value.myValue
await formRef.value?.validate();
props.noticeId ? await noticeUpdate(formData) : await noticeAdd(formData);
let ruleForm = JSON.parse(JSON.stringify(formData));
ruleForm.content=editorRef.value.myValue
props.noticeId ? await noticeUpdate(ruleForm) : await noticeAdd(ruleForm);
message("操作成功");
emit("update:visible", false);
emit("success");
@ -116,12 +117,14 @@ const setFormData = async () => {
formData[key] = data[key];
}
}
editorRef.value.myValue=formData.content
};
onMounted(() => {
if (props.noticeId) {
setFormData();
}
});
</script>

24
src/views/file/fileTemplate/columns.ts Normal file
View File

@ -0,0 +1,24 @@
import { h } from 'vue';
import { ElTag } from 'element-plus';
export const columns = [
{
type: 'selection',
},
{
label: '模板名称',
prop: 'name',
},
{
label: '模板编码',
prop: 'code',
},
{
label: '创建人',
prop: 'createUser',
},
{
label: '创建时间',
prop: 'createTime',
},
];

125
src/views/file/fileTemplate/edit.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<el-dialog v-model="props.visible" :title="dialogTitle" :append-to-body="true" width="800" :close-on-click-modal="false"
:before-close="dialogClose">
<el-form ref="formRef" :model="formData" label-width="90px">
<el-form-item
label="模板名称"
prop="name"
:rules="{ required: true, message: '请输入模板名称', trigger: 'blur' }"
>
<el-input
:maxlength="50"
placeholder="请输入模板名称"
clearable
v-model.trim="formData.name"
/>
</el-form-item>
<el-form-item
label="模板code"
prop="code"
:rules="{ required: true, message: '请输入模板code', trigger: 'blur' }"
>
<el-input
v-if="!formData.id"
:maxlength="100"
placeholder="请输入模板code"
clearable
v-model.trim="formData.code"
/>
<span v-else>{{formData.code}}</span>
</el-form-item>
<el-form-item
label="模板文件"
prop="filePath"
:rules="{ required: true, message: '模板文件', trigger: 'blur' }"
>
<UploadFile @upload="fileUpload" file-type=".xlsx.xls.doc.docx" name="file"
:file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button :loading="subLoading" type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { fileTemplateAdd,fileTemplateUpdate,getFileTemplateDetail } from '@/api/file/fileTemplate';
import { computed, onMounted,shallowRef,reactive,ref,nextTick } from "vue";
import { FormInstance } from "element-plus";
import { message } from "@/utils/auth";
const formRef = shallowRef<FormInstance>();
import { useLockFn } from "@/utils/useLockFn";
import UploadFile from '@/components/Upload/file.vue';
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
},
id: {
type: Number,
required: true,
default: 0
}
});
const emit = defineEmits(["success", "update:visible"]);
const dialogTitle = computed(() => {
return props.id ? '编辑模板文件' : '新增模板文件';
});
const formData = reactive({
id: "",
name:'',
code:'',
filePath:'',
fileName:''
});
const fileUpload = async (filePath: any, fileName: any) => {
formData.filePath = filePath;
formData.fileName = fileName;
await nextTick(()=>{
formRef.value?.validateField("filePath");
})
};
const dialogClose = () => {
emit("update:visible", false);
};
const setFormData = async (id: any) => {
const data = await getFileTemplateDetail(id);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
formData[key] = data[key];
}
}
};
const handleSubmit = async () => {
await formRef.value?.validate();
props.id ? await fileTemplateUpdate(formData) : await fileTemplateAdd(formData);
message("操作成功");
emit("update:visible", false);
emit("success");
};
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
onMounted(() => {
if (props.id) {
setFormData( props.id );
}
});
</script>

158
src/views/file/fileTemplate/index.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<PageWrapper>
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
</el-card>
<el-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@selection-change="onSelectionChange"
>
<template #tableTitle>
<el-button type="primary" @click="handleAdd">
<template #icon>
<el-icon class="el-input__icon">
<Plus />
</el-icon>
</template>
添加
</el-button>
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
<template #icon>
<el-icon class="el-input__icon">
<Delete />
</el-icon>
</template>
删除
</el-button>
</template>
<template #action>
<TableAction />
</template>
</BasicTable>
</el-card>
<editDialog
v-if="editVisible"
:id="fileId"
v-model:visible="editVisible"
@success="reloadTable"
>
</editDialog>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
import { ColProps } from 'element-plus';
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { TableAction } from '@/components/Table';
import { getFileTemplateList,fileTemplateDelete,fileTemplateBatchDelete } from '@/api/file/fileTemplate';
import { columns } from './columns';
import {message,confirm} from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
import('./edit.vue')
)
const fileId =ref(0)
const editVisible=ref(false)
const selectionData = ref([])
const tableRef = ref();
const formParams = reactive({
name:'',
});
const actionColumn = reactive({
width: 250,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '编辑',
type: 'warning',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
// auth: ['sys:fileLog:detail'],
},
{
label: '删除',
type: 'danger',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
// auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
const result = await getFileTemplateList({ ...formParams, ...res });
return result;
};
function reloadTable() {
tableRef.value.reload({pageNo:1});
}
const [register, {}] = useForm({
labelWidth: 80,
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
submitOnReset:true,
schemas
});
function handleSubmit(values: Recordable) {
for (const key in formParams) {
if (values[key] != null && values[key] != undefined) {
formParams[key] = values[key];
}
}
reloadTable();
}
function handleReset() {
for (const key in formParams) {
formParams[key] ='';
}
}
const handleAdd =async (record: Recordable) => {
fileId.value=0
await nextTick();
editVisible.value=true
};
const handleEdit = async (record: Recordable) => {
fileId.value=record.row.id
await nextTick();
editVisible.value=true
};
async function handleDelete(record: Recordable) {
let ids = []
if(!record){
ids = selectionData.value.map(({id}) => id);
}
await confirm('确定要删除？');
record? await fileTemplateDelete(record.row.id):await fileTemplateBatchDelete(ids);
message("删除成功");
reloadTable()
}
function onSelectionChange(value){
selectionData.value = value
}
</script>
<style lang="scss" scoped></style>

11
src/views/file/fileTemplate/querySchemas.ts Normal file
View File

@ -0,0 +1,11 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'name',
component: 'Input',
label: '模板名称',
componentProps: {
placeholder: '请输入模板名称',
},
}
];