269 lines
8.7 KiB
Vue
269 lines
8.7 KiB
Vue
<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>
|