feat: base 添加scuploadfiled组件

src/components/scUpload/filed.vue

@@ -0,0 +1,177 @@
+<template>
+	<div class="sc-upload-file">
+		<el-upload
+			:disabled="disabled"
+			:auto-upload="autoUpload"
+			:action="action"
+			:name="name"
+			:data="data"
+			:http-request="request"
+			v-model:file-list="defaultFileList"
+			:show-file-list="showFileList"
+			:drag="drag"
+			:accept="accept"
+			:multiple="multiple"
+			:limit="limit"
+			:before-upload="before"
+			:on-success="success"
+			:on-error="error"
+			:on-preview="handlePreview"
+			:on-exceed="handleExceed">
+			<slot>
+				<el-button type="primary" :disabled="disabled">上传</el-button>
+			</slot>
+			<template #tip>
+				<div v-if="tip" class="el-upload__tip">{{tip}}</div>
+			</template>
+		</el-upload>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/upload"
+
+	export default {
+		props: {
+			modelValue: { type: [String, Array], default: "" },
+			tip: { type: String, default: "" },
+			action: { type: String, default: "" },
+			apiObj: { type: Object, default: () => {} },
+			name: { type: String, default: config.filename },
+			data: { type: Object, default: () => {} },
+			accept: { type: String, default: "" },
+			maxSize: { type: Number, default: config.maxSizeFile },
+			limit: { type: Number, default: 0 },
+			autoUpload: { type: Boolean, default: true },
+			showFileList: { type: Boolean, default: true },
+			drag: { type: Boolean, default: false },
+			multiple: { type: Boolean, default: true },
+			disabled: { type: Boolean, default: false },
+			onSuccess: { type: Function, default: () => { return true } },
+			file_: {type: [Array, Object], default: () => { return [] } }
+		},
+		data() {
+			return {
+				defaultFileList: []
+			}
+		},
+		watch:{
+			file_: {
+				handler(newVal, oldVal) {
+					if (Array.isArray(newVal)) {
+						this.defaultFileList = this.formatArr(newVal)
+					} else if (newVal) { // 修复：改为 newVal
+						// 如果是单个文件对象，包装成数组
+						this.defaultFileList = this.formatArr([newVal])
+					} else {
+						// 处理空值情况
+						this.defaultFileList = []
+					}
+				},
+				deep: true,
+				immediate: true // 添加立即执行，确保初始值被处理
+			},
+			defaultFileList: {
+				handler(newVal) {
+					let val = null;
+					if (this.multiple) {
+						val = [];
+						newVal.forEach(item => {
+							if(item.id) {
+								val.push(item.id);
+							}
+						})
+					}else{
+						if(newVal.length > 0) {
+							val = newVal[0].id
+						}
+					}
+					this.$emit('update:modelValue', val)
+				},
+				deep: true,
+			}
+		},
+		mounted() {
+		},
+		methods: {
+			//格式化数组值
+			formatArr(arr){
+				var _arr = []
+				arr.forEach(item => {
+					if(item){
+						_arr.push({
+							name: item.name,
+							url: item.path
+						})
+					}
+				})
+				return _arr
+			},
+			before(file){
+				const maxSize = file.size / 1024 / 1024 < this.maxSize;
+				if (!maxSize) {
+					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+					return false;
+				}
+			},
+			success(res, file){
+				var os = this.onSuccess(res, file)
+				if(os!=undefined && os==false){
+					return false
+				}
+				file.name = res.name
+				file.url = res.path
+				file.id = res.id
+			},
+			error(err){
+				this.$notify.error({
+					title: '上传文件未成功',
+					message: err
+				})
+			},
+			beforeRemove(uploadFile){
+				return this.$confirm(`是否移除 ${uploadFile.name} ?`, '提示', {
+					type: 'warning',
+				}).then(() => {
+					return true
+				}).catch(() => {
+					return false
+				})
+			},
+			handleExceed(){
+				this.$message.warning(`当前设置最多上传 ${this.limit} 个文件，请移除后上传!`)
+			},
+			handlePreview(uploadFile){
+				window.open(uploadFile.url)
+			},
+			request(param){
+				var apiObj = config.apiObjFile;
+				if(this.apiObj){
+					apiObj = this.apiObj;
+				}
+				const data = new FormData();
+				data.append(param.filename, param.file);
+				for (const key in param.data) {
+					data.append(key, param.data[key]);
+				}
+				apiObj.post(data, {
+					onUploadProgress: e => {
+						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+						param.onProgress({percent: complete})
+					}
+				}).then(res => {
+					config.parseData(res);
+					param.onSuccess(res)
+				}).catch(err => {
+					param.onError(err)
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-form-item.is-error .sc-upload-file:deep(.el-upload-dragger) {border-color: var(--el-color-danger);}
+	.sc-upload-file {width: 100%;}
+	.sc-upload-file:deep(.el-upload-list__item) {transition: none !important;}
+</style>

src/config/upload.js

@@ -10,6 +10,7 @@ export default {
 	parseData: function (res) {
 		return {
 			// code: res.code,				//分析状态字段结构
+			id: res.id,
 			fileName: res.name,//分析文件名称
 			src: res.path,			//分析图片远程地址结构
 			// msg: res.message			//分析描述字段结构

src/scui.js

@@ -11,6 +11,7 @@ import scFilterBar from './components/scFilterBar'
 import scUpload from './components/scUpload'
 import scUploadMultiple from './components/scUpload/multiple'
 import scUploadFile from './components/scUpload/file'
+import scUploadFiled from './components/scUpload/filed'
 import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
 import scPageHeader from './components/scPageHeader'
@@ -60,6 +61,7 @@ export default {
 		app.component('scUpload', scUpload);
 		app.component('scUploadMultiple', scUploadMultiple);
 		app.component('scUploadFile', scUploadFile);
+		app.component('scUploadFiled', scUploadFiled);
 		app.component('scFormTable', scFormTable);
 		app.component('scTableSelect', scTableSelect);
 		app.component('scPageHeader', scPageHeader);