<script setup lang="ts">
|
import { UploadFilled } from "@element-plus/icons-vue";
|
import { genFileId } from "element-plus";
|
import type { FormInstance, UploadProps, UploadRawFile, UploadUserFile } from "element-plus";
|
import SoftwareApi from "@/api/software";
|
|
const props = defineProps(["data"]);
|
const emit = defineEmits(["update:close", "success"]);
|
|
const paramsRef = ref({
|
id: "",
|
snCode: "",
|
serialNumber: "",
|
description: "",
|
});
|
const rulesRef = ref({
|
snCode: [
|
{ required: true, message: "请输入SN码", trigger: "blur" },
|
{
|
validator: (rule: any, value: any, callback: Function) => {
|
if (value !== props.data.snCode) {
|
callback(new Error("SN码与当前包SN码不匹配！！！"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
serialNumber: [
|
{ required: true, message: "请输入序列号", trigger: "blur" },
|
{
|
validator: (rule: any, value: any, callback: Function) => {
|
if (value !== props.data.serialNumber) {
|
callback(new Error("序列号与当前包序列号不匹配！！！"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
description: [{ required: true, message: "请输入版本更新内容", trigger: "blur" }],
|
});
|
const layout = reactive({
|
gutter: 16,
|
span: 24,
|
});
|
|
const fileList = ref([]);
|
const uploadRef = ref();
|
const formRef = ref();
|
const handleExceed: UploadProps["onExceed"] = (files) => {
|
uploadRef.value!.clearFiles();
|
const file = files[0] as UploadRawFile;
|
file.uid = genFileId();
|
uploadRef.value!.handleStart(file);
|
};
|
|
// 提交表单
|
function submitForm(formEl: FormInstance) {
|
if (fileList.value.length === 0) {
|
ElMessage({
|
message: "请选择上传的文件！！！",
|
type: "error",
|
});
|
return;
|
}
|
if (!formEl) return;
|
formEl.validate((valid, fields) => {
|
if (valid) {
|
ElMessageBox.confirm("确认上传软件升级包?", "系统提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "info",
|
})
|
.then(() => {
|
uploadFile();
|
})
|
.catch(() => {});
|
} else {
|
ElMessage({
|
message: "存在不合法数据，请修改！！！",
|
type: "warning",
|
});
|
console.log("error submit!", fields);
|
}
|
});
|
}
|
|
function uploadFile() {
|
SoftwareApi.uploadSoftware(paramsRef.value.id, paramsRef.value.description, fileList.value[0].raw)
|
.then((result) => {
|
const { code } = result;
|
if (code === 1) {
|
ElMessage({
|
message: "上传成功！！！",
|
type: "success",
|
});
|
emit("success", true);
|
} else {
|
ElMessage({
|
message: "上传失败！！！",
|
type: "success",
|
});
|
}
|
})
|
.catch((error) => {
|
ElMessage({
|
message: error,
|
type: "error",
|
});
|
})
|
.finally(() => {});
|
}
|
|
function close() {
|
emit("update:close", false);
|
}
|
|
onMounted(() => {
|
paramsRef.value.id = props.data.id;
|
paramsRef.value.description = props.data.description;
|
});
|
</script>
|
|
<template>
|
<div class="dialog-wrapper">
|
<el-form
|
ref="formRef"
|
label-position="top"
|
:model="paramsRef"
|
:rules="rulesRef"
|
label-width="auto"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="12">
|
<el-form-item label="序列号" prop="serialNumber">
|
<el-input v-model="paramsRef.serialNumber"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="SN码" prop="snCode">
|
<el-input v-model="paramsRef.snCode"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="版本更新内容" prop="description">
|
<el-input
|
v-model="paramsRef.description"
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 10 }"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-upload
|
ref="uploadRef"
|
v-model:file-list="fileList"
|
drag
|
class="upload-demo"
|
action="#"
|
:auto-upload="false"
|
:on-exceed="handleExceed"
|
:limit="1"
|
>
|
<el-icon class="el-icon--upload">
|
<upload-filled />
|
</el-icon>
|
<div class="el-upload__text">点击上传/移除文件</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<div class="from-footer">
|
<el-button type="primary" @click="submitForm(formRef)">确定</el-button>
|
<el-button type="danger" @click="close">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.dialog-wrapper {
|
width: 620px;
|
.from-footer {
|
text-align: right;
|
}
|
}
|
</style>
|
