<template>
|
<div>
|
<el-dialog
|
v-model="dialogPayableFormVisible"
|
:title="title"
|
width="600"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="auto"
|
class="production-form"
|
label-position="right"
|
style="max-width: 400px; margin: 0 auto"
|
>
|
<el-form-item label="发票号" prop="ticketNo">
|
<el-input
|
v-model.number="form.ticketNo"
|
placeholder="请输入发票号"
|
:disabled="isViewMode"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="付款金额" prop="paymentAmount">
|
<el-input
|
v-model.number="form.paymentAmount"
|
placeholder="请输入付款金额"
|
:disabled="isViewMode"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="付款类型" prop="payableType">
|
<el-select
|
v-model="form.payableType"
|
placeholder="请选择类型"
|
:disabled="isViewMode"
|
>
|
<el-option
|
v-for="item in payableTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="Number(item.value)"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="上传附件" prop="attachUpload">
|
<el-upload
|
class="upload-demo"
|
drag
|
:fileList="form.fileList"
|
:action="uploadFileUrl"
|
:headers="headers"
|
:http-request="UploadImage"
|
:on-success="handleUploadSuccess"
|
:on-remove="handleUploadRemove"
|
:on-preview="handleUploadPreview"
|
multiple>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="登记人" prop="registrantId">
|
<el-input
|
:value="match(form.registrantId)"
|
v-model.number="form.registrantId"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<el-form-item label="登记日期" prop="registrationDate">
|
<el-date-picker
|
disabled
|
v-model="form.registrationDate"
|
type="date"
|
placeholder="YYYY-MM-DD"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<!-- 重置和取消 -->
|
<el-button
|
@click="handleClose"
|
v-if="title.includes('新增') || title.includes('查看')"
|
>取消
|
</el-button>
|
<el-button @click="handleReset" v-if="title.includes('编辑')"
|
>重置
|
</el-button>
|
<el-button type="primary" v-if="!isViewMode" @click="handleSubmit"
|
>确认</el-button
|
>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="ProductionDialog">
|
import {ref, defineProps, watch, onMounted, nextTick, computed,reactive,defineEmits} from "vue";
|
import axios from "axios";
|
import {addDuePayable} from "@/api/payable/index.js"
|
import {ElMessage} from "element-plus";
|
|
import useUserStore from "@/store/modules/user.js";
|
import useDictStore from "@/store/modules/dict.js"
|
import {getToken} from "@/utils/auth.js";
|
const uploadFileUrl = computed(() => import.meta.env.VITE_APP_BASE_API + "/common/minioUploads");
|
const headers = computed(() => ({ Authorization: "Bearer " + getToken() }));
|
|
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
statusType: { type: Number, default: 0 },
|
dialogPayableFormVisible: {
|
type: Boolean,
|
required: true
|
},
|
});
|
|
const handleUploadRemove = (it)=>{
|
form.value.fileList = form.value.fileList.filter(f => f.uid !== it.uid);
|
|
}
|
const handleUploadPreview = (it)=>{
|
const link = document.createElement("a");
|
if(it.url){
|
link.href = it.url
|
}else {
|
link.href = form.value.fileList.value.find(fl=>fl.uid === it.uid).url;
|
}
|
link.download = it.name;
|
link.click();
|
}
|
|
const handleUploadSuccess = (res,file)=>{
|
form.value.fileList.push(...res.data.map((it,index)=>{
|
return {
|
id:it.id,
|
url:it.downloadUrl,
|
name:it.originalFilename,
|
status:"success",
|
uid:file.uid
|
}
|
}))
|
}
|
|
// 文件上传处理
|
const UploadImage = (param) => {
|
const formData = new FormData();
|
formData.append("files", param.file);
|
formData.append("type", props.statusType);
|
axios.post(uploadFileUrl.value, formData, {
|
headers: {
|
"Content-Type": "multipart/form-data",
|
...headers.value,
|
},
|
onUploadProgress: (progressEvent) => {
|
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
param.onProgress({ percent });
|
},
|
})
|
.then((response) => {
|
if (response.data.code === 200) {
|
handleUploadSuccess(response.data, param.file);
|
ElMessage.success("上传成功");
|
} else {
|
param.onError(new Error(response.data.msg));
|
ElMessage.error(response.data.msg);
|
}
|
})
|
.catch((error) => {
|
param.onError(error);
|
});
|
};
|
const emit = defineEmits(["update:dialogPayableFormVisible", "success"]);
|
const dialogPayableFormVisible = defineModel("dialogPayableFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
const form = defineModel("form", {
|
required: true,
|
type: Object,
|
});
|
|
|
const payableTypeList = ref([])
|
const isViewMode = computed(() => props.title.includes("查看"));
|
|
const userStore = useUserStore();
|
const userInfo = ref({});
|
const match = () => {
|
return userInfo.value.nickName || "未知用户";
|
};
|
|
|
|
|
//###
|
|
onMounted(async () => {
|
|
payableTypeList.value = useDictStore().getDictTypeList("payable_type").map((item) => ({
|
value: item.value,
|
label: item.label,
|
}))
|
|
let res = await userStore.getInfo();
|
userInfo.value = res.user;
|
|
});
|
const rules = {
|
|
payableType: [
|
{required: true, message: "请选择类型", trigger: "change"}
|
],
|
paymentAmount: [
|
{required: true, message: "请输入金额", trigger: "blur"}
|
],
|
ticketNo: [
|
{required: true, message: "请输入发票号", trigger: "blur"}
|
]
|
|
};
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogPayableFormVisible.value = false;
|
form.value.fileList.value = []
|
};
|
|
const handleReset = async ()=>{
|
|
}
|
|
const formRef = ref(null);
|
// 提交表单
|
const handleSubmit = async () => {
|
// 文件处理只获取id 进行拼接
|
if (!formRef.value) return;
|
formRef.value.validate((valid) => {
|
if (valid) {
|
const obj = ref({});
|
form.value.attachUpload = ""
|
if (form.value.fileList.length > 0){
|
form.value.attachUpload = form.value.fileList.map(it => it.id).join(",")
|
}
|
|
let result = addDuePayable({
|
...form.value
|
})
|
|
obj.value = {
|
...form.value,
|
result
|
}
|
emit("success", obj.value);
|
}
|
})
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
</style>
|
