xg_total_process_master_cloud_vue/src/views/attachment/Form.vue

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" draggable width="50%" @close="close"
			@keyup.enter.native="" v-model="visible" @open="handleOpen">
			<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
				:disabled="status === 'audit' || status === 'taskFormDetail' || method === 'view'" label-width="100px"
				@submit.native.prevent>
				<el-divider content-position="left"><i class="el-icon-document"></i>
					上传附件
				</el-divider>
				<el-row :gutter="15">
					<el-col :span="24">
						<el-form-item label="收藏分类" prop="classification">
							<el-select v-model="inputForm.classification" clearable filterable @blur="selectMethod">
								<el-option v-for="(item, index) in dictList" :key="index" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="文件描述" prop="fileDescription">
							<el-input maxlength="500" type="textarea" placeholder="请填写文件描述"
								v-model="inputForm.fileDescription" show-word-limit></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="24">
						<UpLoadComponent ref="uploadComponent"></UpLoadComponent>
					</el-col>
				</el-row>


			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check"
						v-noMoreClick>确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import workCollectAccessoryService from "@/api/workCollectAccessory/index"
import UpLoadComponent from '@/views/common/UpLoadComponentWorkCollect'
import { ElDatePicker } from 'element-plus';
// eslint-disable-next-line no-unused-vars
import OSSSerivce from '@/api/sys/OSSService'
import moment from 'moment'
export default {
	props: {
		formReadOnly: {
			type: Boolean,
			default: false
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			title: '',
			method: '',
			loading: false,
			visible: false,
			inputForm: {
				classification: "",
				fileDescription: "",
				workAttachments: []
			},
			baseKey: '',
			keyWatch: '',
			dateList: [],
			dictList: [],
			ossService: null
		}
	},
	created() {
		this.ossService = new OSSSerivce()

	},
	mounted() {
	},
	activated() {
	},
	components: {
		ElDatePicker,
		UpLoadComponent
	},
	methods: {
		selectMethod(e) {
			if (e.target.value !== '') {
				this.inputForm.classification = e.target.value;
				this.$forceUpdate(); // 强制更新 
			}
		},
		init(method, id) {
			this.method = method
			this.visible = true
			this.inputForm = {
				classification: "",
				fileDescription: "",
				workAttachments: []
			}
			if (method === 'add') {
				this.title = `上传附件`
			} else if (method === 'edit') {
				this.inputForm.id = id
				this.title = '修改附件'
			}
			this.loading = false
			this.visible = true
			this.$nextTick(() => {
				this.$refs.inputForm.resetFields()
				this.loading = true
				this.loading = false
				if (this.commonJS.isNotEmpty(this.inputForm.id)) {
					workCollectAccessoryService.queryById(this.inputForm.id).then((res) => {
						this.ossService.getFileSizeByUrl(res.url).then((data) => {
							let file = {
								lsUrl: data.url,
								size: data.size,
								createBy: {
									id: this.$store.state.user.id,
									name: this.$store.state.user.name,
								},
								createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
								name: res.fileName,
								url: res.url
							}
							this.inputForm.workAttachments.push(file)
							this.inputForm.classification = res.classification
							this.inputForm.fileDescription = res.fileDescription
							console.log(this.inputForm.workAttachments);

							this.$refs.uploadComponent.newUpload(method, this.inputForm.workAttachments, 'workCollect')

						})
					})
				}
			})
		},
		// 表单提交
		async doSubmit() {
			let files = this.$refs.uploadComponent.getDataList()
			console.log(files);
			if (files.length <= 0) {
				this.loading = false
				this.$message.error(`请上传附件后提交`);
				return
			}
			if (this.$refs.uploadComponent.checkProgress()) {
				this.loading = false
				this.$message.error(`待附件上传完毕后提交`);
				return
			}
			this.loading = true
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.inputForm.workAttachments = this.$refs.uploadComponent.getDataList()
					this.loading = true
					if (this.inputForm.id) {
						workCollectAccessoryService.updateById(this.inputForm).then((data) => {
							this.visible = false
							this.$emit('refreshList')
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					} else {
						workCollectAccessoryService.saveForm(this.inputForm).then((data) => {
							this.visible = false
							this.$emit('refreshList')
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					}
				} else {
					this.loading = false
				}
			})
		},
		close() {
			this.inputForm = {
				id: '',
			}
			this.visible = false
			this.$refs.uploadComponent.clearUpload()
		},
		async updateStatusById(type, callback) {
			this.loading = true
			workCollectAccessoryService.updateStatusById(param).then(() => {
				this.loading = false
				callback()
			})
		},
	}

}
</script>
<style scoped>
/deep/ .el-input-number .el-input__inner {
	text-align: left;
}

/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
	font-weight: 700;
}
</style>