src/components/DialogForm/index.vue

@@ -48,23 +48,6 @@
 						:placeholder="`请选择${col.label}`"
 						value-format="timestamp"
 						v-bind="col.bind"></el-date-picker>
-					<el-upload
-						class="upload-in-dialog"
-						v-if="col.upload"
-						:file-list="uploadedFileList"
-						:action="col.url"
-						:on-success="handleUploadSuccess"
-						v-bind="col.bind">
-						<el-button
-							size="small"
-							type="primary"
-							:disabled="col.bind?.disabled || false">
-							点击上传
-						</el-button>
-						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
-							{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
-						</div>
-					</el-upload>
 					<el-switch
 						v-if="col.switch"
 						v-model="form[col.prop]"
@@ -76,6 +59,43 @@
 						:key="col.key"
 						:is="col.subcomponent"
 						:inlineStyle="col.style"></component>
+
+					<div
+						class="upload-area"
+						:class="uploadOpen ? '' : 'height-48'"
+						ref="uploadArea"
+						v-if="col.upload">
+						<span class="close-icon" :class="uploadOpen ? 'open' : ''">
+							<el-button
+								type="text"
+								icon="el-icon-arrow-right"
+								@click="handleFilesOpen" />
+						</span>
+						<!-- :file-list="uploadedFileList" -->
+						<el-upload
+							class="upload-in-dialog"
+							v-if="col.upload"
+							:action="uploadUrl"
+							:headers="uploadHeaders"
+							:show-file-list="false"
+							icon="el-icon-upload2"
+							:before-upload="beforeUpload"
+							:on-success="handleUploadSuccess"
+							v-bind="col.bind">
+							<el-button size="mini" :disabled="col.bind?.disabled || false">
+								上传文件
+							</el-button>
+							<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
+								{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
+							</div>
+						</el-upload>
+
+						<uploadedFile
+							class="file"
+							v-for="file in form[col.prop] || []"
+							:file="file"
+							@delete="handleDeleteFile(file)" />
+					</div>
 				</el-form-item>
 			</el-col>
 		</el-row>
@@ -83,6 +103,9 @@
 </template>
 
 <script>
+import { getAccessToken } from '@/utils/auth';
+import tupleImg from '@/assets/images/tuple.png';
+
 /**
  * 找到最长的label
  * @param {*} options
@@ -101,6 +124,48 @@ function findMaxLabelWidth(rows) {
 	return max;
 }
 
+const uploadedFile = {
+	name: 'UploadedFile',
+	props: ['file'],
+	data() {
+		return {};
+	},
+	methods: {
+		handleDelete() {
+			console.log('emit delete event')
+			this.$emit('delete', this.file);
+		},
+	},
+	mounted() {},
+	render: function (h) {
+		return (
+			<div
+				title={this.file.fileName}
+				style={{
+					background: `url(${tupleImg}) no-repeat`,
+					backgroundSize: '14px',
+					backgroundPosition: '0 55%',
+					paddingLeft: '20px',
+					paddingRight: '24px',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+					overflow: 'hidden',
+					cursor: 'pointer',
+					display: 'inline-block',
+				}}>
+				{this.file.fileName}
+				<el-button
+					type="text"
+					icon="el-icon-close"
+					style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
+					class="dialog__upload_component__close"
+					onClick={this.handleDelete}
+				/>
+			</div>
+		);
+	},
+};
+
 export default {
 	name: 'DialogForm',
 	model: {
@@ -108,7 +173,7 @@ export default {
 		event: 'update',
 	},
 	emits: ['update'],
-	components: {},
+	components: { uploadedFile },
 	props: {
 		rows: {
 			type: Array,
@@ -133,10 +198,14 @@ export default {
 	},
 	data() {
 		return {
+			uploadOpen: false,
+			form: {},
 			formLoading: true,
 			optionListOf: {},
 			uploadedFileList: [],
 			dataLoaded: false,
+			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
+			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers，url都是固定的
 		};
 	},
 	computed: {
@@ -146,16 +215,6 @@ export default {
 			return max * 20;
 			// return max * 20 + 'px';
 		},
-		form: {
-			get() {
-				// if (this.dataLoaded) return this.dataForm;
-				// else return {}
-				return this.dataForm;
-			},
-			set(val) {
-				console.log('set form', val);
-			},
-		},
 	},
 	watch: {
 		rows: {
@@ -168,6 +227,13 @@ export default {
 			deep: true,
 			immediate: false,
 		},
+		dataForm: {
+			handler(val) {
+				this.form = JSON.parse(JSON.stringify(val));
+			},
+			deep: true,
+			immediate: true,
+		},
 	},
 	mounted() {
 		// 处理 options
@@ -283,23 +349,27 @@ export default {
 		beforeUpload() {},
 		// 上传前的验证规则可通过 bind 属性传入
 		handleUploadSuccess(response, file, fileList) {
-			console.log(
-				'[dialogForm:handleUploadSuccess]',
-				response,
-				file,
-				fileList,
-				this.form
-			);
-			// 保存原始文件名
-			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
-			// 保存完整地址
-			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
+			this.form.files.push({
+				fileName: file.name,
+				fileUrl: response.data,
+				fileType: 2,
+			});
 			this.$modal.msgSuccess('上传成功');
+			this.$emit('update', this.form);
 		},
 
 		getFileName(fileUrl) {
 			return fileUrl.split('/').pop();
 		},
+
+		handleFilesOpen() {
+			this.uploadOpen = !this.uploadOpen;
+		},
+
+		handleDeleteFile(file) {
+			this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
+			this.$emit('update', this.form);
+		},
 	},
 };
 </script>
@@ -309,4 +379,52 @@ export default {
 .el-select {
 	width: 100%;
 }
+
+.upload-area {
+	// background: #ccc;
+	// display: grid;
+	// grid-auto-rows: 34px;
+	// grid-template-columns: repeat(6, minmax(32px, max-content));
+	// gap: 8px;
+	// align-items: center;
+	position: relative;
+	overflow: hidden;
+	transition: height 0.3s ease-out;
+}
+
+.upload-in-dialog {
+	// display: inline-block;
+	margin-right: 24px;
+	// background: #ccc;
+	position: relative;
+	// top: -13px;
+	float: left;
+}
+
+.close-icon {
+	// background: #ccc;
+	position: absolute;
+	top: 0;
+	right: 12px;
+	z-index: 100;
+	transition: transform 0.3s ease-out;
+}
+
+.close-icon.open {
+	transform: rotateZ(90deg);
+}
+</style>
+
+<style>
+.dialog__upload_component__close {
+	color: #ccc;
+}
+.dialog__upload_component__close:hover {
+	/* color: #777; */
+	color: red;
+}
+
+.height-48 {
+	height: 35px !important;
+}
 </style>

src/views/core/base/equipmentType/index.vue

@@ -37,22 +37,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
-			<div style="padding: 12px; background: #ccc">
-				<h3>文件列表</h3>
-				<hr />
-				<ul>
-					<li v-for="item in form.fileUrls" :key="item">
-						{{ JSON.stringify(item) }}
-					</li>
-				</ul>
-				<hr />
-				<ul>
-					<li v-for="item in form.fileNames" :key="item">
-						{{ JSON.stringify(item) }}
-					</li>
-				</ul>
-			</div>
+			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
 		</base-dialog>
 	</div>
 </template>
@@ -70,7 +55,7 @@ import {
 	exportEquipmentTypeExcel,
 } from '@/api/base/equipmentType';
 
-import { getAccessToken } from '@/utils/auth';
+// import { getAccessToken } from '@/utils/auth';
 
 export default {
 	name: 'EquipmentType',
@@ -164,15 +149,13 @@ export default {
 						prop: 'parentId',
 						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
 					},
+					{},
+				],
+				[
 					{
 						upload: true,
 						label: '上传资料',
-						prop: 'uploadFiles',
-						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
-						bind: {
-							headers: { Authorization: 'Bearer ' + getAccessToken() },
-							'show-file-list': false,
-						},
+						prop: 'files',
 					},
 				],
 				[{ input: true, label: '备注', prop: 'remark' }],
@@ -251,7 +234,25 @@ export default {
 			const id = row.id;
 			getEquipmentType(id).then((response) => {
 				this.form = response.data;
-				debugger;
+				// this.form = {
+				// 	code: 'SBLX20230925184444000041',
+				// 	name: '测试131',
+				// 	remark: '测试可删除',
+				// 	id: '1706258479729336322',
+				// 	files: [
+				// 		{ fileName: '1.png', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '2.txt', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.rar', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.kkk', fileUrl: '', fileType: 2 },
+				// 		{ fileName: 'test.file', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '222', fileUrl: '', fileType: 2 },
+				// 		{ fileName: 'g', fileUrl: '', fileType: 2 },
+				// 	],
+				// 	createTime: 1695638697000,
+				// 	parentId: '1701869972319584257',
+				// };
+				// debugger;
 				this.open = true;
 				this.title = '修改设备类型';
 			});