tenghui-ui 2.4.21 → 2.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenghui-ui",
-  "version": "2.4.21",
+  "version": "2.4.23",
   "description": "vue 2x, tenghui-ui",
   "files": [
     "dist",

package/packages/form-item/src/index.vue

@@ -155,7 +155,11 @@
 					<el-cascader :class="{ inline_content: inlineLabel }" :ref="type" v-model="modelForm" 
 						:options="options" :props="props" 
 						:filter-method="filterMethod"
-						:filterable="filterable" :collapseTags="collapseTags" v-bind="setDefaultAttrs($attrs)" v-on="$listeners"></el-cascader>
+						:filterable="filterable" :collapseTags="collapseTags" v-bind="setDefaultAttrs($attrs)" v-on="$listeners">
+						<slot name="empty">
+							<template v-slot:empty></template>
+						</slot>
+					</el-cascader>
 				</div>
 			</template>
 			<template v-else-if="type === 'daterange'">
@@ -285,6 +289,38 @@
 					v-on="$listeners"
 					v-model="modelForm"></check-cell>
 			</template>
+			<template v-else-if="type === 'upload'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-upload 
+					ref="UploadRef"
+					action="#"
+					list-type="picture-card"
+					:http-request="handleUploadReqeust"
+					:file-list="uploadFileList"
+					:limit="1"
+					:on-exceed="() => $message.warning('超出可上传数量，请删除后再试！')"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners">
+					<i slot="default" class="el-icon-plus"></i>
+					<div slot="file" slot-scope="{file}">
+						<!-- clickHandler -->
+						<el-image ref="UploadImage" :src="file.url" :preview-src-list="[file.url]"></el-image>
+						<span class="el-upload-list__item-actions">
+							<span
+								class="el-upload-list__item-preview"
+								@click="handleUploadOperation('zoom', file)">
+								<i class="el-icon-zoom-in"></i>
+							</span>
+							
+							<span
+								class="el-upload-list__item-delete"
+								@click="handleUploadOperation('remove', file)">
+								<i class="el-icon-delete"></i>
+							</span>
+						</span>
+					</div>
+				</el-upload>
+			</template>
 		</div>
 	</div>
 </template>
@@ -412,12 +448,16 @@ export default {
 		optionLimit: {
 			type: Number,
 			default: 150
+		},
+
+		uploadApi: {
+			type: Function
 		}
 	},
 	data() {
 
 		let defaultModel = this.model;
-		if (this.type == 'select') {
+		if (['select', 'radio'].includes(this.type)) {
 			if (Array.isArray(this.model)) {
 				defaultModel = this.model.map(v => v.toString());
 			} else if (this.model || this.model === 0) {
@@ -445,6 +485,11 @@ export default {
 		};
 	},
 	computed: {
+		uploadFileList() {
+			return this.modelForm ? [{
+				url: this.modelForm
+			}] : []
+		},
 		staticStyle() {
 			const obj = {
 
@@ -506,6 +551,29 @@ export default {
 	},
 	methods: {
 
+		handleUploadOperation(cmd, file) {
+			switch (cmd) {
+				case 'zoom':
+					this.$refs.UploadImage.clickHandler();
+					break;
+				case 'remove':
+					this.modelForm = '';
+					this.$refs.UploadRef.clearFiles();
+					break;
+			}
+		},
+
+		handleUploadReqeust(params) {
+		
+			if (!this.uploadApi) {
+				return this.$message.warning('缺少上传API！');
+			}
+
+			this.uploadApi(params).then(res => {
+				this.modelForm = res;
+			})
+		},
+
 		handleAutoQuerySearch(query, callback) {
 			const backOptions = query ? this.selectOption.filter(v => v.label.toLowerCase().includes(query.toLowerCase())) : this.selectOption;
 			callback(backOptions.map(v => ({ label: v.label, value: v.label })));
@@ -670,7 +738,7 @@ export default {
 		model(val) {
 
 			let modelVal = val;
-			if (this.type == 'select' && !this.multiple) {
+			if (['select', 'radio'].includes(this.type) && !this.multiple) {
 				if (val || val === 0) {
 					modelVal = val.toString();
 				}
@@ -766,4 +834,12 @@ export default {
 		font-size: 14px;
 	}
 }
+
+/deep/ .el-upload--picture-card, /deep/ .el-upload-list--picture-card .el-upload-list__item {
+	width: 100px;
+	height: 100px;
+	line-height: 98px;
+}
+
+
 </style>