更新采购申请
This commit is contained in:
吴红兵
271
src/views/purchase/purchasingtemplate/index.vue
Normal file
271
src/views/purchase/purchasingtemplate/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<el-card class="content-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
|
||||
<div class="header-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="FolderAdd"
|
||||
@click="openUploadDialog()"
|
||||
v-auth="'purchase_template_add'">
|
||||
新增模板
|
||||
</el-button>
|
||||
<el-alert type="info" :closable="false" class="mb3 mt-3" show-icon>
|
||||
此处模版中的模版编码对应用户端下载模版匹配，请勿随意修改或删除。正常情况下如有发生模版变化，重新上传即可。如有新增模版，请联系管理员进行处理。
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tableData" v-loading="loading" stripe class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="templateTitle" label="模板类型名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="templateType" label="模板类型编码" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="templateName" label="模板名称" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column prop="updateTime" label="更新时间" width="180" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="260" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Download"
|
||||
@click="handleDownload(row)"
|
||||
v-auth="'purchase_template_view'">
|
||||
下载
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="UploadFilled"
|
||||
@click="openUploadDialog(row)"
|
||||
v-auth="'purchase_template_add'">
|
||||
重新上传
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Edit"
|
||||
@click="openEditDialog(row)"
|
||||
v-auth="'purchase_template_add'">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="uploadDialogVisible" title="上传模板" width="450px" destroy-on-close>
|
||||
<el-form :model="uploadForm" label-width="100px">
|
||||
<el-form-item label="模板类型编码" required>
|
||||
<el-input
|
||||
v-model="uploadForm.templateType"
|
||||
placeholder="例如: business_negotiation, inquiry"
|
||||
:disabled="!!uploadForm.lockType"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板类型名称">
|
||||
<el-input
|
||||
v-model="uploadForm.templateTitle"
|
||||
placeholder="例如: 部门采购询价模版"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板文件" required>
|
||||
<el-upload
|
||||
class="upload-block"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
>
|
||||
<el-button type="primary" icon="UploadFilled">选择文件</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">支持 doc、docx 等 Word 模板文件，上传后前端下载将使用该文件。</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="uploadDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="uploading" @click="handleUploadConfirm">上 传</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="editDialogVisible" title="编辑模板" width="420px" destroy-on-close>
|
||||
<el-form :model="editForm" label-width="100px">
|
||||
<el-form-item label="模板类型编码">
|
||||
<el-input v-model="editForm.templateType" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="模板类型名称" required>
|
||||
<el-input v-model="editForm.templateTitle" placeholder="请输入模板类型名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="editDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="editing" @click="handleEditConfirm">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="PurchasingTemplateManage">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Document, List, UploadFilled, Download, Edit } from '@element-plus/icons-vue';
|
||||
import { listTemplates, uploadTemplate, getTemplateDownloadUrl, updateTemplateTitle } from '/@/api/purchase/purchasingtemplate';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
|
||||
const loading = ref(false);
|
||||
const tableData = ref<any[]>([]);
|
||||
|
||||
const uploadDialogVisible = ref(false);
|
||||
const uploading = ref(false);
|
||||
const uploadForm = reactive<{
|
||||
templateType: string;
|
||||
templateTitle: string;
|
||||
lockType?: boolean;
|
||||
}>({
|
||||
templateType: '',
|
||||
templateTitle: '',
|
||||
lockType: false,
|
||||
});
|
||||
const editDialogVisible = ref(false);
|
||||
const editing = ref(false);
|
||||
const editForm = reactive<{
|
||||
id: number | null;
|
||||
templateType: string;
|
||||
templateTitle: string;
|
||||
}>({
|
||||
id: null,
|
||||
templateType: '',
|
||||
templateTitle: '',
|
||||
});
|
||||
|
||||
const fileList = ref<any[]>([]);
|
||||
const currentFile = ref<File | null>(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await listTemplates();
|
||||
tableData.value = (res && res.data) || [];
|
||||
} catch (e) {
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(fetchData);
|
||||
|
||||
const openUploadDialog = (row?: any) => {
|
||||
uploadDialogVisible.value = true;
|
||||
uploadForm.templateType = row?.templateType || '';
|
||||
uploadForm.templateTitle = row?.templateTitle || '';
|
||||
uploadForm.lockType = !!row?.templateType;
|
||||
fileList.value = [];
|
||||
currentFile.value = null;
|
||||
};
|
||||
|
||||
const handleFileChange = (file: any, files: any[]) => {
|
||||
fileList.value = files.slice(-1);
|
||||
currentFile.value = file.raw || null;
|
||||
};
|
||||
|
||||
const handleFileRemove = () => {
|
||||
fileList.value = [];
|
||||
currentFile.value = null;
|
||||
};
|
||||
|
||||
const handleUploadConfirm = async () => {
|
||||
if (!uploadForm.templateType || !uploadForm.templateType.trim()) {
|
||||
useMessage().error('请填写模板类型编码');
|
||||
return;
|
||||
}
|
||||
if (!currentFile.value) {
|
||||
useMessage().error('请选择要上传的模板文件');
|
||||
return;
|
||||
}
|
||||
uploading.value = true;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('type', uploadForm.templateType.trim());
|
||||
if (uploadForm.templateTitle && uploadForm.templateTitle.trim()) {
|
||||
formData.append('title', uploadForm.templateTitle.trim());
|
||||
}
|
||||
formData.append('file', currentFile.value);
|
||||
await uploadTemplate(formData);
|
||||
useMessage().success('模板上传成功');
|
||||
uploadDialogVisible.value = false;
|
||||
await fetchData();
|
||||
} catch (e) {
|
||||
useMessage().error('模板上传失败');
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = async (row: any) => {
|
||||
if (!row?.templateType) {
|
||||
useMessage().error('缺少模板类型编码');
|
||||
return;
|
||||
}
|
||||
const url = getTemplateDownloadUrl(row.templateType);
|
||||
const fileName = row.templateName || row.templateTitle || row.templateType;
|
||||
try {
|
||||
await (window as any).other?.downBlobFile?.(url, {}, fileName) ||
|
||||
// 兼容直接使用工具函数
|
||||
(await import('/@/utils/other')).default.downBlobFile(url, {}, fileName);
|
||||
} catch (e) {
|
||||
// 如果工具函数不可用，则退回 window.open
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
const openEditDialog = (row: any) => {
|
||||
editDialogVisible.value = true;
|
||||
editForm.id = row?.id ?? null;
|
||||
editForm.templateType = row?.templateType || '';
|
||||
editForm.templateTitle = row?.templateTitle || '';
|
||||
};
|
||||
|
||||
const handleEditConfirm = async () => {
|
||||
if (!editForm.id) {
|
||||
useMessage().error('缺少模板ID');
|
||||
return;
|
||||
}
|
||||
if (!editForm.templateTitle || !editForm.templateTitle.trim()) {
|
||||
useMessage().error('请输入模板类型名称');
|
||||
return;
|
||||
}
|
||||
editing.value = true;
|
||||
try {
|
||||
await updateTemplateTitle({
|
||||
id: editForm.id,
|
||||
templateTitle: editForm.templateTitle.trim(),
|
||||
});
|
||||
useMessage().success('保存成功');
|
||||
editDialogVisible.value = false;
|
||||
await fetchData();
|
||||
} catch (e) {
|
||||
useMessage().error('保存失败');
|
||||
} finally {
|
||||
editing.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-block {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user