Merge remote-tracking branch 'websoft/master'

# Conflicts:
#	src/option/business/process-config.js
#	src/views/business/process-config.vue
#	src/views/vehicle/customer-archive.vue

src/components/image-upload-field/main.vue

@@ -1,28 +1,57 @@
 <template>
   <el-form-item v-if="mode === 'form'" :label="label" :prop="prop">
-    <el-upload
-      :class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]"
-      action="/api/blade-resource/oss/endpoint/put-file"
-      name="file"
-      :headers="uploadHeaders"
-      :show-file-list="false"
-      :disabled="readonly"
-      :before-upload="beforeUpload"
-      :on-progress="handleProgress"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-    >
-      <img v-if="value" :src="value" :class="`${classPrefix}-uploader__image`" />
-      <div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
-    </el-upload>
+    <div :class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]">
+      <el-upload
+        ref="uploadRef"
+        class="upload-inner"
+        action="/api/blade-resource/oss/endpoint/put-file"
+        name="file"
+        :headers="uploadHeaders"
+        :show-file-list="false"
+        :disabled="readonly"
+        :before-upload="beforeUpload"
+        :on-progress="handleProgress"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+      >
+        <el-image
+          v-if="value"
+          :src="value"
+          :class="`${classPrefix}-uploader__image`"
+          :preview-src-list="[value]"
+          fit="contain"
+          preview-teleported
+          :z-index="3000"
+          @click.stop
+        />
+        <div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
+      </el-upload>
+      <el-link
+        v-if="value && !readonly"
+        type="primary"
+        class="upload-replace-link"
+        @click.stop="triggerUpload"
+      >
+        更换
+      </el-link>
+    </div>
   </el-form-item>
   <el-form-item v-else :prop="prop" :class="`${classPrefix}-upload-item`">
     <div :class="[`${classPrefix}-upload-card`, { [`${classPrefix}-upload-card--large`]: large }]">
       <div v-if="label" :class="`${classPrefix}-upload-card__head`">
         <span :class="`${classPrefix}-upload-card__label`">{{ label }}</span>
-        <span :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
+        <el-link
+          v-if="!readonly"
+          type="primary"
+          :class="`${classPrefix}-upload-card__action`"
+          @click.stop="triggerUpload"
+        >
+          {{ actionText }}
+        </el-link>
+        <span v-else :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
       </div>
       <el-upload
+        ref="uploadRef"
         :class="`${classPrefix}-upload-card__uploader`"
         action="/api/blade-resource/oss/endpoint/put-file"
         name="file"
@@ -34,7 +63,16 @@
         :on-success="handleSuccess"
         :on-error="handleError"
       >
-        <img v-if="value" :src="value" :class="`${classPrefix}-upload-card__image`" />
+        <el-image
+          v-if="value"
+          :src="value"
+          :class="`${classPrefix}-upload-card__image`"
+          :preview-src-list="[value]"
+          fit="contain"
+          preview-teleported
+          :z-index="3000"
+          @click.stop
+        />
         <div v-else :class="`${classPrefix}-upload-card__empty`">{{ emptyText }}</div>
       </el-upload>
     </div>
@@ -86,6 +124,11 @@ export default {
     this.closeUploadLoading();
   },
   methods: {
+    triggerUpload() {
+      const uploadEl = this.$refs.uploadRef && this.$refs.uploadRef.$el;
+      const input = uploadEl && uploadEl.querySelector('.el-upload__input');
+      if (input) input.click();
+    },
     showUploadLoading() {
       if (this.uploadLoading) {
         return;