欧阳子桐 / RuoYi · 提交

转到一个项目

作者 RuoYi
提交 a118738d0f9e8e466aa2b908ca139372eead5194 1 个父辈 56fa3912

单图上传组件添加移除

内嵌 并排对比
正在显示 4 个修改的文件 包含 45 行增加 和 15 行删除
@@ -153,9 +153,9 @@ @@ -153,9 +153,9 @@
153 <el-form-item label="${comment}" prop="${field}"> 153 <el-form-item label="${comment}" prop="${field}">
154 <el-input v-model="form.${field}" placeholder="请输入${comment}" /> 154 <el-input v-model="form.${field}" placeholder="请输入${comment}" />
155 </el-form-item> 155 </el-form-item>
156 -#elseif($column.htmlType == "uploadImage") 156 +#elseif($column.htmlType == "imageUpload")
157 <el-form-item label="${comment}"> 157 <el-form-item label="${comment}">
158 - <uploadImage v-model="form.${field}"/> 158 + <imageUpload v-model="form.${field}"/>
159 </el-form-item> 159 </el-form-item>
160 #elseif($column.htmlType == "editor") 160 #elseif($column.htmlType == "editor")
161 <el-form-item label="${comment}"> 161 <el-form-item label="${comment}">
@@ -244,8 +244,8 @@ import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${Busin @@ -244,8 +244,8 @@ import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${Busin
244 import Treeselect from "@riophae/vue-treeselect"; 244 import Treeselect from "@riophae/vue-treeselect";
245 import "@riophae/vue-treeselect/dist/vue-treeselect.css"; 245 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
246 #foreach($column in $columns) 246 #foreach($column in $columns)
247 -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage")  
248 -import UploadImage from '@/components/UploadImage'; 247 +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload")
  248 +import ImageUpload from '@/components/ImageUpload';
249 #break 249 #break
250 #end 250 #end
251 #end 251 #end
@@ -260,8 +260,8 @@ export default { @@ -260,8 +260,8 @@ export default {
260 name: "${BusinessName}", 260 name: "${BusinessName}",
261 components: { 261 components: {
262 #foreach($column in $columns) 262 #foreach($column in $columns)
263 -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage")  
264 - UploadImage, 263 +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload")
  264 + ImageUpload,
265 #break 265 #break
266 #end 266 #end
267 #end 267 #end
@@ -185,9 +185,9 @@ @@ -185,9 +185,9 @@
185 <el-form-item label="${comment}" prop="${field}"> 185 <el-form-item label="${comment}" prop="${field}">
186 <el-input v-model="form.${field}" placeholder="请输入${comment}" /> 186 <el-input v-model="form.${field}" placeholder="请输入${comment}" />
187 </el-form-item> 187 </el-form-item>
188 -#elseif($column.htmlType == "uploadImage") 188 +#elseif($column.htmlType == "imageUpload")
189 <el-form-item label="${comment}"> 189 <el-form-item label="${comment}">
190 - <uploadImage v-model="form.${field}"/> 190 + <imageUpload v-model="form.${field}"/>
191 </el-form-item> 191 </el-form-item>
192 #elseif($column.htmlType == "editor") 192 #elseif($column.htmlType == "editor")
193 <el-form-item label="${comment}"> 193 <el-form-item label="${comment}">
@@ -274,8 +274,8 @@ @@ -274,8 +274,8 @@
274 <script> 274 <script>
275 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}"; 275 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}";
276 #foreach($column in $columns) 276 #foreach($column in $columns)
277 -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage")  
278 -import UploadImage from '@/components/UploadImage'; 277 +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload")
  278 +import ImageUpload from '@/components/ImageUpload';
279 #break 279 #break
280 #end 280 #end
281 #end 281 #end
@@ -290,8 +290,8 @@ export default { @@ -290,8 +290,8 @@ export default {
290 name: "${BusinessName}", 290 name: "${BusinessName}",
291 components: { 291 components: {
292 #foreach($column in $columns) 292 #foreach($column in $columns)
293 -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage")  
294 - UploadImage, 293 +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload")
  294 + ImageUpload,
295 #break 295 #break
296 #end 296 #end
297 #end 297 #end
@@ -11,8 +11,21 @@ @@ -11,8 +11,21 @@
11 :headers="headers" 11 :headers="headers"
12 style="display: inline-block; vertical-align: top" 12 style="display: inline-block; vertical-align: top"
13 > 13 >
14 - <img v-if="value" :src="value" class="avatar" />  
15 - <i v-else class="el-icon-plus avatar-uploader-icon"></i> 14 + <el-image v-if="!value" :src="value">
  15 + <div slot="error" class="image-slot">
  16 + <i class="el-icon-plus" />
  17 + </div>
  18 + </el-image>
  19 + <div v-else class="image">
  20 + <el-image :src="value" />
  21 + <div class="mask">
  22 + <div class="actions">
  23 + <span title="移除" @click.stop="removeImage">
  24 + <i class="el-icon-delete" />
  25 + </span>
  26 + </div>
  27 + </div>
  28 + </div>
16 </el-upload> 29 </el-upload>
17 </div> 30 </div>
18 </template> 31 </template>
@@ -37,6 +50,9 @@ export default { @@ -37,6 +50,9 @@ export default {
37 }, 50 },
38 }, 51 },
39 methods: { 52 methods: {
  53 + removeImage() {
  54 + this.$emit("input", "");
  55 + },
40 handleUploadSuccess(res) { 56 handleUploadSuccess(res) {
41 this.$emit("input", res.url); 57 this.$emit("input", res.url);
42 this.loading.close(); 58 this.loading.close();
@@ -65,4 +81,18 @@ export default { @@ -65,4 +81,18 @@ export default {
65 width: 100%; 81 width: 100%;
66 height: 100%; 82 height: 100%;
67 } 83 }
  84 +.image {
  85 + position: relative;
  86 + .mask {
  87 + opacity: 0;
  88 + position: absolute;
  89 + top: 0;
  90 + width: 100%;
  91 + background-color: rgba(0, 0, 0, 0.5);
  92 + transition: all 0.3s;
  93 + }
  94 + &:hover .mask {
  95 + opacity: 1;
  96 + }
  97 +}
68 </style> 98 </style>
@@ -90,7 +90,7 @@ @@ -90,7 +90,7 @@
90 <el-option label="单选框" value="radio" /> 90 <el-option label="单选框" value="radio" />
91 <el-option label="复选框" value="checkbox" /> 91 <el-option label="复选框" value="checkbox" />
92 <el-option label="日期控件" value="datetime" /> 92 <el-option label="日期控件" value="datetime" />
93 - <el-option label="上传控件" value="uploadImage" /> 93 + <el-option label="单图上传" value="imageUpload" />
94 <el-option label="富文本控件" value="editor" /> 94 <el-option label="富文本控件" value="editor" />
95 </el-select> 95 </el-select>
96 </template> 96 </template>