<template>
<a-modal title="新增/编辑" :width="750" :visible="visible" :confirmLoading="loading" @ok="
() => {
$emit('ok');
}
" @cancel="
() => {
$emit('cancel');
}
">
<a-spin :spinning="loading">
<a-form :form="form">
<a-row :gutter="16">
<a-form-item class="hiddenItem">
<!-- uuid隐藏 -->
<a-input v-decorator="['uuid']" disabled type="hidden" />
<a-input v-decorator="['filePath']" disabled type="hidden" />
</a-form-item>
<a-col class="gutter-row" :span="24">
<a-form-item label="报销类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
<TDictSelectTag @change="testChange" placeholder="请选择报销类别" type="select"
dictCode="reimburse_category" v-decorator="[
'reimburseCategory',
{
rules: [
{
required: true,
message: '请输入正确参数',
},
],
},
]"></TDictSelectTag>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="24" v-if="
reimburseCategory === 'reimburse_category01' ||
reimburseCategory === 'reimburse_category03'
">
<a-form-item label="项目信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select style="width: 100%" placeholder="请选择项目" @change="projectInput" v-decorator="[
'project',
{
rules: [
{
required: true,
message: '请输入正确参数',
},
],
},
]">
<a-select-option v-for="(item, key) in projectOptions" :key="key"
:value="item.projectCode" :label="item.projectName">
<span style="display: inline-block; width: 100%" :title="item.projectName">
{{ item.projectName }}
</span>
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="24">
<a-form-item label="报销说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea v-decorator="[
'description',
{
rules: [
{
required: true,
message: '本项不可为空',
},
{
max: 255,
message: '超出最大允许值',
},
],
},
]" />
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="24">
<a-form-item label="报销总金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input-number v-decorator="[
'totalAmount',
{
rules: [
{
required: true,
message: '请输入正确参数',
},
],
},
]" :min="1" />
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="24">
<a-form-item label="报销凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-upload :action="uploadAction" list-type="picture-card" accept="image/*"
:file-list="fileListA" :headers="headers" @preview="previewA" @change="handleChangeA">
<a-button>
<a-icon type="upload" /> 上传
</a-button>
</a-upload>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="24">
<a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-upload :action="uploadAction" :multiple="true" :file-list="fileList" :headers="headers"
:previewFile="previewFile" @preview="preview" @change="handleChange">
<a-button>
<a-icon type="upload" /> 上传
</a-button>
</a-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
"uuid",
"project",
"reimburseCategory",
"description",
"totalAmount",
"filePath",
];
import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import TMultiSelectTag from "@/components/TopVUI/dict/TMultiSelectTag";
import {
baseUrl
} from "@/services/baseUrl";
import Vue from "vue";
import {
ACCESS_TOKEN
} from "@/store/mutation-types";
export default {
props: {
visible: {
type: Boolean,
required: true,
},
loading: {
type: Boolean,
default: () => false,
},
model: {
type: Object,
default: () => null,
},
},
components: {
TDictSelectTag,
TMultiSelectTag
},
data() {
return {
title: "",
labelCol: {
xs: {
span: 24,
},
sm: {
span: 5,
},
},
wrapperCol: {
xs: {
span: 24,
},
sm: {
span: 16,
},
},
form: this.$form.createForm(this),
projectOptions: [], //项目列表
headers: {
token: Vue.ls.get(ACCESS_TOKEN),
},
uploadAction: baseUrl + "/system/attachment/upload",
downFileUrl: baseUrl + "/system/attachment/download",
fileList: [],
filePath: [],
reimburseCategory: "",
fileListA: [],
filePathA: [],
};
},
methods: {
testChange(val) {
this.reimburseCategory = val;
},
add(m, data) {
this.fileList = [];
this.filePath = [];
this.form.setFieldsValue({
filePath: "",
});
console.log(m, data);
},
edit(m, data) {
this.fileList = [];
if (m.filePath) {
this.filePath = JSON.parse(m.filePath);
for (var i = 0; i < this.filePath.length; i++) {
let path = this.filePath[i];
path.uid = Math.random();
this.fileList.push(path);
}
}
this.reimburseCategory = m.reimburseCategory; //初始化报销类别
console.log(m, data);
},
handleChange(info) {
let fileList = [...info.fileList];
//fileList = fileList.slice(-5);//截取倒数5个元素
this.filePath = [];
fileList = fileList.map((file) => {
if (file.url || (file.response && file.response.statusCode == 200)) {
let path = this.filePath;
if (!file.url) {
file.url = file.response.filePath;
}
if (file.url && path.indexOf(file.url) == -1) {
this.filePath.push({
name: file.name,
url: file.url,
status: "done",
uid: file.uid,
});
}
}
return file;
});
this.fileList = fileList;
// if (info.file.status == "removed") {
// fileList.map((file) => {
// this.filePath.push({
// name: file.name,
// url: file.url,
// status: "done",
// uid: file.uid,
// });
// });
// }
this.form.setFieldsValue({
filePath: JSON.stringify(this.filePath),
});
},
handleChangeA(info) {
let fileList = [...info.fileList];
//fileList = fileList.slice(-5);//截取倒数5个元素
this.filePathA = [];
fileList = fileList.map((file) => {
if (file.url || (file.response && file.response.statusCode == 200)) {
let path = this.filePathA;
if (!file.url) {
file.url = file.response.filePath;
}
if (file.url && path.indexOf(file.url) == -1) {
this.filePathA.push({
name: file.name,
url: file.url,
status: "done",
uid: file.uid,
});
}
}
return file;
});
this.fileListA = fileList;
// if (info.file.status == "removed") {
// fileList.map((file) => {
// this.filePathA.push({
// name: file.name,
// url: file.url,
// status: "done",
// uid: file.uid,
// });
// });
// }
this.form.setFieldsValue({
filePath: JSON.stringify(this.filePathA),
});
console.log(this.filePathA)
console.log(this.fileListA)
},
async preview(file) {
this.downloadFile(file.url);
},
async previewA(file) {
this.downloadFile(file.url);
},
//文件下载
downloadFile(url) {
if (url) {
window.location.href =
baseUrl + url + "&token=" + Vue.ls.get(ACCESS_TOKEN);
} else {
this.$message.warn("未获取到文件路径!", 1.5);
}
},
previewFile(file) {
return fetch(this.downFileUrl, {
method: "POST",
body: file,
})
.then((res) => res.json())
.then(({
thumbnail
}) => thumbnail);
},
//获取项目下拉
initProjectData() {
this.$get("ztoa/ztoaProject/getProjectList").then((res) => {
if (res) {
this.projectOptions = res;
}
});
},
projectInput(e) {
for (let i = 0; i < this.projectOptions.length; i++) {
if (this.projectOptions[i].projectCode == e) {
this.form.setFieldsValue({
project: this.projectOptions[i].projectCode,
});
break;
}
}
},
},
created() {
// 防止表单未注册
fields.forEach((v) => this.form.getFieldDecorator(v));
// 当 model 发生改变时,为表单设置值
this.$watch("model", () => {
this.model && this.form.setFieldsValue(pick(this.model, fields));
});
this.initProjectData();
},
};
</script>
antDesign图片上传Upload
于 2023-02-10 15:03:29 首次发布