src/views/base/components/dialogForm.vue

@@ -1,7 +1,7 @@
 <!-- 
     filename: dialogForm.vue
     author: liubin
-    date: 2023-08-02 10:32:36
+    date: 2023-08-15 10:32:36
     description: 弹窗的表单组件
 -->
 
@@ -45,6 +45,18 @@
 						type="datetime"
 						:placeholder="`请选择${col.label}`"
 						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">点击上传</el-button>
+						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
+							{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
+						</div>
+					</el-upload>
 				</el-form-item>
 			</el-col>
 		</el-row>
@@ -90,6 +102,7 @@ export default {
 		return {
 			formLoading: true,
 			optionListOf: {},
+			uploadedFileList: [],
 		};
 	},
 	computed: {
@@ -196,6 +209,20 @@ export default {
 			}
 			if (!promiseList.length) this.formLoading = false;
 		},
+		// 上传成功的特殊处理
+		// 上传前的验证规则可通过 bind 属性传入
+		handleUploadSuccess(response, file, fileList) {
+			// 保存原始文件名
+			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
+			// 保存完整地址
+			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
+			// console.log('[dialogForm:handleUploadSuccess]', response, file, fileList, this.form);
+			this.$modal.msgSuccess('上传成功');
+		},
+
+		getFileName(fileUrl) {
+			return fileUrl.split('/').pop();
+		}
 	},
 };
 </script>

src/views/base/equipmentType/index.vue

@@ -54,6 +54,8 @@ import {
 	exportEquipmentTypeExcel,
 } from '@/api/base/equipmentType';
 
+import { getAccessToken } from '@/utils/auth';
+
 export default {
 	name: 'EquipmentType',
 	components: {},
@@ -86,40 +88,7 @@ export default {
 				{ prop: 'name', label: '设备类型名称', align: 'center' },
 				{ prop: 'code', label: '检测类型编码', align: 'center' },
 				{ prop: 'remark', label: '备注', align: 'center' },
-				// {
-				// 	label: '操作',
-				// 	alignt: 'center',
-				// 	subcomponent: {
-				// 		render: function (h) {
-				// 			return h('div', null, [
-				// 				h(
-				// 					'el-button',
-				// 					{
-				// 						props: {
-				// 							icon: 'el-icon-edit',
-				// 							size: 'mini',
-				// 							type: 'text',
-				// 						},
-				// 					},
-				// 					' 修改'
-				// 				),
-				// 				h(
-				// 					'el-button',
-				// 					{
-				// 						props: {
-				// 							icon: 'el-icon-edit',
-				// 							size: 'mini',
-				// 							type: 'text',
-				// 						},
-				// 					},
-				// 					' 修改'
-				// 				),
-				// 			]);
-				// 		},
-				// 	},
-				// },
 			],
-			//
 			searchBarFormConfig: [
 				{
 					type: 'input',
@@ -133,11 +102,6 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				// {
-				// 	type: 'button',
-				// 	btnName: '重置',
-				// 	name: 'reset',
-				// },
 				{
 					type: 'separate',
 				},
@@ -159,22 +123,6 @@ export default {
 				// 	color: 'warning',
 				// },
 			],
-			// 表单配置
-			// formRows: [
-			// 	[
-			// 		{
-			// 			input: true,
-			// 			label: '检测类型名称',
-			// 			prop: 'name',
-			// 			rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-			// 			// bind: {
-			// 			// 	disabled: true, // some condition, like detail mode...
-			// 			// }
-			// 		},
-			// 	],
-			// 	[{ input: true, label: '检测类型编码', prop: 'code' }],
-			// 	[{ input: true, label: '备注', prop: 'remark' }],
-			// ],
 			rows: [
 				[
 					{
@@ -198,13 +146,17 @@ export default {
 						select: true,
 						label: '父类',
 						prop: 'parentId',
-						// other...
+						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
 					},
 					{
 						upload: true,
 						label: '上传资料',
 						prop: 'uploadFiles',
-						// other...
+						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+						bind: {
+							headers: { Authorization: 'Bearer ' + getAccessToken() },
+							'show-file-list': false,
+						},
 					},
 				],
 				[{ input: true, label: '备注', prop: 'remark' }],
@@ -221,6 +173,14 @@ export default {
 			form: {},
 		};
 	},
+	watch: {
+		// form: {
+		// 	handler: function (val, oldVal) {
+		// 		console.log('[watch:form]', val, oldVal);
+		// 	},
+		// 	deep: true,
+		// },
+	},
 	created() {
 		this.getList();
 	},
@@ -248,6 +208,8 @@ export default {
 				name: undefined,
 				parentId: undefined,
 				remark: undefined,
+				fileNames: [],
+				fileUrls: [],
 			};
 			this.resetForm('form');
 		},