2025-03-26
This commit is contained in:
268
src/views/downloadManagement/list/edit.vue
Normal file
268
src/views/downloadManagement/list/edit.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div style="padding-bottom: 16px">
|
||||
<el-button @click="handleResetClick()"> 重置 </el-button>
|
||||
<el-button type="primary" @click="handleConfirmClick()"> 提交 </el-button>
|
||||
</div>
|
||||
<div class="card table-main">
|
||||
<div style="width: 900px">
|
||||
<rulesForm
|
||||
:ruleForm="dataStore.editRuleForm"
|
||||
:formData="dataStore.editFormData"
|
||||
:rules="dataStore.rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleEditAdd">添加行</el-button>
|
||||
<FormTable :columns="dataStore.editColumns" :tableData="dataStore.editTableData" :height="200">
|
||||
<template #up="scope">
|
||||
<el-upload
|
||||
action="#"
|
||||
class="upload"
|
||||
:limit="1"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="param => uploadExcel(param)"
|
||||
:before-upload="file => beforeExcelUpload(file)"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="(response, file, fileList) => excelUploadSuccess(response, scope.row)"
|
||||
:on-error="excelUploadError"
|
||||
:accept="filesType!.join(',')"
|
||||
ref="uploadRef"
|
||||
>
|
||||
<el-button type="primary" size="small">文件上传</el-button>
|
||||
</el-upload>
|
||||
<!-- 显示文件名 -->
|
||||
<div v-if="scope.row.file_path" style="display: flex; align-items: center; justify-content: center">
|
||||
<span style="padding: 0 10px; margin-right: 20px; border: 1px solid #eeeeee">
|
||||
{{ scope.row.file_path }}</span
|
||||
>
|
||||
<el-icon style="cursor: pointer" @click="handleDelete(scope.row)"><Delete /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #operation="scope">
|
||||
<el-button type="danger" size="small" @click="handleEditDelete(scope)">删除行</el-button>
|
||||
</template>
|
||||
</FormTable>
|
||||
</rulesForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import FormTable from "@/components/FormTable/index.vue";
|
||||
import { EDIT_TABLE_DATA, RULES, EDIT_RULE_FORM, EDIT_FORM_DATA } from "./constant/index";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
import { Delete } from "@element-plus/icons-vue";
|
||||
const $route = useRoute();
|
||||
import { getCategorysApi } from "@/api/modules/downloadClass";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import {
|
||||
getAttachmentUpFileApi,
|
||||
getAttachmentSaveApi,
|
||||
getAttachmentUpdateApi,
|
||||
getAttachmentReadApi
|
||||
} from "@/api/modules/downloadList";
|
||||
//上传文件格式
|
||||
const filesType = ref([".inf", ".sys", ".dll", ".exe", ".cat", ".ko", ".rpm", ".kext", ".zip", ".bin", ".rar", ".tar", ".gz"]);
|
||||
const dataStore = reactive<any>({
|
||||
rules: cloneDeep(RULES), //抽屉表单验证
|
||||
editRuleForm: cloneDeep(EDIT_RULE_FORM),
|
||||
editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
|
||||
editTableData: cloneDeep(EDIT_TABLE_DATA), //添加|编辑里的表格数据
|
||||
editColumns: [
|
||||
{
|
||||
label: "文件",
|
||||
prop: "file_path",
|
||||
disabled: false,
|
||||
formType: "up",
|
||||
width: "350",
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "文件格式",
|
||||
prop: "file_ext",
|
||||
disabled: false,
|
||||
formType: "input",
|
||||
maxLength: 50,
|
||||
width: "150"
|
||||
},
|
||||
//operation
|
||||
{
|
||||
label: "按钮名称",
|
||||
prop: "btn_name",
|
||||
disabled: false,
|
||||
formType: "input",
|
||||
maxLength: 50,
|
||||
width: "150"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
prop: "operation",
|
||||
|
||||
width: "112"
|
||||
}
|
||||
] //添加|编辑里的表格配置项
|
||||
});
|
||||
const formRef: any = ref(null);
|
||||
const uploadRef = ref<any>(null);
|
||||
// 文件上传
|
||||
const uploadExcel = async (param: any) => {
|
||||
let excelFormData = new FormData();
|
||||
excelFormData.append("attachment", param.file);
|
||||
const result = await getAttachmentUpFileApi(excelFormData);
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 文件上传之前判断
|
||||
* @param file 上传的文件
|
||||
* @param row 当前行数据
|
||||
* */
|
||||
const beforeExcelUpload = (file: any) => {
|
||||
const maxSize = 50 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
setTimeout(() => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${50}MB！`,
|
||||
type: "warning"
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
// return isExcel && fileSize;
|
||||
};
|
||||
|
||||
// 上传错误提示
|
||||
const excelUploadError = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件上传失败，请您重新上传！`,
|
||||
type: "error"
|
||||
});
|
||||
};
|
||||
|
||||
// 上传成功提示
|
||||
const excelUploadSuccess = (response: any, row: any) => {
|
||||
console.log(response, "=response=");
|
||||
// 假设后端返回的数据中有文件路径和文件格式
|
||||
if (response?.code === 0) {
|
||||
row.file_path = response.data.path; // 假设后端返回的文件路径在 data.path 中
|
||||
}
|
||||
console.log(row, "====row========");
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件上传成功！`,
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
// 文件数超出提示
|
||||
const handleExceed = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "最多只能上传一个文件！",
|
||||
type: "warning"
|
||||
});
|
||||
};
|
||||
//添加
|
||||
const getAttachmentSave = async () => {
|
||||
const result = await getAttachmentSaveApi({ ...dataStore.editRuleForm, attach: JSON.stringify(dataStore.editTableData) });
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
}
|
||||
};
|
||||
// //更新
|
||||
const getAttachmentUpdate = async () => {
|
||||
const result = await getAttachmentUpdateApi({ ...dataStore.editRuleForm, attach: JSON.stringify(dataStore.editTableData) });
|
||||
if (result?.code === 0) {
|
||||
useMsg("success", result?.msg);
|
||||
}
|
||||
};
|
||||
//抽屉确认
|
||||
const handleConfirmClick = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef!.validate((valid: any) => {
|
||||
if (valid) {
|
||||
console.log("submit!");
|
||||
$route.query.title === "添加下载" ? getAttachmentSave() : getAttachmentUpdate();
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
//抽屉重置
|
||||
const handleResetClick = () => {
|
||||
if ($route.query.title === "添加下载") {
|
||||
resetFields();
|
||||
} else {
|
||||
getAttachmentRead();
|
||||
}
|
||||
};
|
||||
//重置验证状态
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
};
|
||||
|
||||
const handleEditDelete = (scope: any) => {
|
||||
dataStore.editTableData.splice(scope.$index, 1);
|
||||
};
|
||||
const handleEditAdd = () => {
|
||||
dataStore.editTableData.push({
|
||||
file_path: "", //文件路径
|
||||
btn_name: "", //按钮名字
|
||||
file_ext: "" //文件格式
|
||||
});
|
||||
};
|
||||
//详情
|
||||
const getAttachmentRead = async () => {
|
||||
let id = $route.query.id;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const result = await getAttachmentReadApi(id);
|
||||
if (result?.code === 0) {
|
||||
dataStore.editRuleForm = result?.data;
|
||||
dataStore.editTableData = result?.data.attach;
|
||||
}
|
||||
};
|
||||
getAttachmentRead();
|
||||
|
||||
//分类
|
||||
const getCategorys = async () => {
|
||||
const result = await getCategorysApi();
|
||||
|
||||
if (result?.code === 0) {
|
||||
let arr: any[] = [];
|
||||
result?.data?.forEach((item: any) => {
|
||||
let obj = {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
};
|
||||
arr.push(obj);
|
||||
});
|
||||
dataStore.editFormData[1].options = arr;
|
||||
}
|
||||
};
|
||||
getCategorys();
|
||||
const handleDelete = async (row: any) => {
|
||||
row.file_path = "";
|
||||
// 清空上传组件的文件列表
|
||||
|
||||
if (uploadRef.value) {
|
||||
uploadRef.value.clearFiles();
|
||||
}
|
||||
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件已删除！`,
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user