Przeglądaj źródła

新增修改界面支持图片上传字段

Signed-off-by: skywolf627 <skywolf627@qq.com>
skywolf627 3 lat temu
rodzic
commit
004d9b0c5c

+ 34 - 1
Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/editDialog.vue.vm

@@ -84,7 +84,24 @@
 						@:
 					</el-col>
 					}else if(@column.EffectType == "Upload"){
-
+					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-upload
+							@:list-type="picture-card"
+							@::limit="1"
+							@::show-file-list="false"
+							@::http-request="upload@(@column.ColumnName)Handle">
+								@:<img
+								@:v-if="ruleForm.@(@column.LowerColumnName)"
+								@::src="ruleForm.@(@column.LowerColumnName)"
+								@:style="width: 100%; height: 100%; object-fit: contain"/>
+								@:<el-icon v-else><Plus /></el-icon>
+								@:
+							</el-upload>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else{
 
 					}
@@ -107,6 +124,11 @@
 	import { ref,onMounted } from "vue";
 	import { ElMessage } from "element-plus";
 	import type { FormRules } from "element-plus";
+@if(@Model.TableField.Any(x=>x.EffectType == "Upload")){
+    @:import { Plus } from "@@element-plus/icons-vue";
+    @:import { UploadRequestOptions } from "element-plus";
+    @:import {@string.Join(",",Model.TableField.Where(x=>x.EffectType == "Upload").Select(x=>"upload"+x.ColumnName).ToList())} from '/@@/api/main/@(@Model.LowerClassName)';
+}
 	import { add@(@Model.ClassName), update@(@Model.ClassName) } from "/@@/api/main/@(@Model.LowerClassName)";
 	@foreach (var column in Model.TableField){
 	if(@column.EffectType == "fk"){
@@ -206,6 +228,17 @@ const submit = async () => {
   }
 }
 
+@foreach (var column in Model.TableField){ 
+if(column.WhetherAddUpdate=="N") continue;
+if(@column.EffectType == "Upload"){
+@:const upload@(@column.ColumnName)Handle = async (options: UploadRequestOptions) => {
+	@:const res = await upload@(@column.ColumnName)(options);
+	@:ruleForm.value.@(column.LowerColumnName) = res.data.result?.url;
+@:};
+	}
+}
+
+
 // 页面加载时
 onMounted(async () => {
 	@foreach (var column in Model.TableField){