antDesign图片上传Upload

<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>