aiot-app/pages/doc/file-edit.vue

<template>
	<u-popup :show="show" @close="cancel" :closeable="true">
		<view style="width: 750rpx;">
			<u-cell-group>
				<u-cell title="编码分类">
					<u--input slot="value" placeholder="请选择" border="surround" v-model="form.codeTypeName"
						@click.native="codeTypeOpen"></u--input>
				</u-cell>
				<u-cell title="编码方案">
					<uni-data-picker :map="{text:'name',value:'id'}" v-model="form.businessCodeId" slot="value"
						placeholder="请选择" :localdata="options">
					</uni-data-picker>
				</u-cell>
				<u-cell title="文档类型">
					<uni-data-picker v-model="form.type" slot="value" placeholder="请选择" :localdata="doc_type">
					</uni-data-picker>
				</u-cell>
				<u-cell title="文档">
					<fileSelector class="fileList" slot="value" 
						@filesChanged="onFilesChanged" />

				</u-cell>
				<u-cell title="文档位置">
					<u--input slot="value" placeholder="请选择" border="surround" v-model="form.directoryName"
						@click.native="directoryIdOpen">
					</u--input>
				</u-cell>
			</u-cell-group>
			<view class="btn">
				<u-button type="primary" @click="cancel" text="返回"></u-button>
				<u-button @click="save" text="保存"></u-button>
			</view>


		</view>
		<ba-tree-picker ref="codeTypeRef" key="verify" :multiple="false" @select-change="codeTypeBack" title="选择编码分类"
			:localdata="list" valueKey="id" textKey="name" childrenKey='sonDirectoryList' />
		<ba-tree-picker ref="directoryIdRef" :multiple="false" @select-change="directoryIdBack" title="选择文档位置"
			:localdata="folderList" valueKey="id" textKey="name" childrenKey='sonDirectoryList' />
	</u-popup>
</template>

<script>
	import {
		fileSaveAPI,
		selectTreeList,
		listParentId,
		getDocTreeListAPI,
		listCode
	} from './api/index';
	import {
		getByCode
	} from '@/api/pda/common.js'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	// 引入组件
	import fileSelector from '@/uni_modules/zhouquan-fileSelector/components/zhouquan-fileSelector/file-selector.vue';
	export default {
		components: {
			baTreePicker,
			fileSelector
		},
		data() {
			const defaultForm = {
				name: '', //名称
				type: '', //类型
				sizeUnit: '', //大小，
				unit: '', //单位
				remark: '', //备注
				status: '', //状态
				storagePathId: '',
				directoryId: '',
				businessCodeId: '',
				storagePath: [],
				id: '',
				lcyStatus: 1,
				fileType: 0,
				codeTypeName: '',
				directoryName: '',

			};
			return {
				folderList: [],
				files: [],
				// 表单数据
				form: {
					...defaultForm
				},
				list: [],
				options: [],
				show: false,
				doc_type: []
			};
		},

		async created() {
			this.userInfo = uni.getStorageSync('userInfo')
			let query = {
				type: 0,
				currentUserId: this.userInfo.userId
			};
			this.folderList = await getDocTreeListAPI(query);
			const doc_type = await getByCode('doc_type');
			this.doc_type = doc_type.map(item => {
				const key = Object.keys(item)[0]
				return {
					value: key,
					text: item[key]
				}
			})
		},
		methods: {
			async open() {

				this.show = true;
				this.list = await selectTreeList();
				this.options = await listCode();
				if (this.options.length > 0) {
					this.form.businessCodeId = this.options[0].id
				}
				this.setTree(this.list);
			},
			setTree(data) {
				data.forEach((item) => {
					item.sonDirectoryList = item.sonDirectoryList.filter(
						(item) => item.type == 1
					);
					if (item.sonDirectoryList.length > 0) {
						this.setTree(item.sonDirectoryList);
					}
				});
			},

			codeTypeOpen() {
				this.$refs.codeTypeRef._show()
			},
			async codeTypeBack(data, name) {
				let list = await listParentId({
					pageNum: 1,
					size: 100,
					parentId: data[0]
				});
				this.form.codeTypeName = name
				this.form.codeType = data[0]
				this.options = list.list.filter((item) => item.type == 2);
				this.form.businessCodeId = '';
			},
			uploadFile(list) {
				let PromiseAll = []
				const apiUrl = this.apiUrl
				const token = uni.getStorageSync("token"); //取存本地的token
				list.forEach(item => {
					PromiseAll.push(
						new Promise((resolve, reject) => {
							uni.uploadFile({
								url: apiUrl + '/main/file/uploadFile',
								filePath: item.path,
								name: 'multiPartFile',
								header: {
									authorization: token
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									resolve(data.data)
								}
							});
						}),
					)
				})
				return Promise.all(PromiseAll)
			},
			directoryIdOpen() {
				this.$refs.directoryIdRef._show()
			},
			directoryIdBack(data, name) {

				this.form.directoryName = name
				this.form.directoryId = data[0]

			},

			// 当文件发生变化时触发
			onFilesChanged(fileList) {
				this.files = fileList
				// console.log('文件列表：', fileList)
			},
			/* 保存编辑 */
			async save() {
				uni.showLoading({
					title: '加载中'
				})

				this.form.storagePath = await this.uploadFile(this.files)
				fileSaveAPI(this.form)
					.then((msg) => {
						uni.hideLoading()
						console.log(msg,'msg')
						
						this.$emit('success', msg);
						this.cancel()
					})
					.catch((e) => {
						uni.hideLoading()
						this.cancel()
						
					});
			},

			cancel() {
				this.form = {
					...this.defaultForm
				};
				this.files = []
				this.show = false;
			}
		}
	};
</script>
<style scoped lang="scss">
	.aaa {
		width: 100%;

		::v-deep .upload-demo {
			width: 100%;

			.el-upload--text {
				width: 100%;

				button {
					width: 100%;
					background: #ffffff;
					border: 1px solid #dbdbdb;
					border-radius: 5px;
				}
			}

			.el-upload-list {
				transform: translate(10px, -39px);
				position: absolute;
			}
		}
	}

	.fileList {
		padding: 0;

		/deep/.upload-area {
			height: 90rpx;
			width: 140rpx;
		}

		/deep/.file-item {
			padding: 0;
			margin-bottom: 8rpx;
		}
	}
	.btn{
		margin-top: 16rpx;
		margin-bottom: 10rpx;
		display: flex;
		uni-bottom{
			width: 160rpx;
		}
		
	}
</style>