feat(intelligent-agent): 优化智能助手图标选择功能

表情包 增加确认按钮

src/views/intelligent-agent/components/info/index.vue

@@ -20,9 +20,25 @@ export default {
       }
     }
   },
+
+  watch: {
+    'dialog.agent': {
+      handler(val) {
+        console.log(val)
+        this.image = val.image
+        this.imageType = val.imageType
+        this.background = val.backgroundColor
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
   data() {
     return {
       isImage: '0',
+      image: '',
+      imageType: '',
       popover: false,
       background: '',
       chooseBack: [
@@ -79,8 +95,17 @@ export default {
     },
 
     chooseGround(colors) {
-      this.$set(this.dialog.agent, 'backgroundColor', colors)
+      this.background = colors
     },
+
+    saveEmoji() {
+      this.dialog.agent.image = this.image
+      this.dialog.agent.imageType = this.imageType
+      this.$set(this.dialog.agent, 'backgroundColor', this.background)
+
+      this.popover = false
+    },
+
     /**
      * 提交表单
      */
@@ -104,8 +129,9 @@ export default {
     },
     // 选择emoji
     selectEmoji(e) {
-      this.dialog.agent.image = e.data
+      this.image = e.data
-      this.dialog.agent.imageType = 'emoji'
+      this.imageType = 'emoji'
+      // this.dialog.agent.imageType = 'emoji'
     },
     // 选择是否是上传图片
     changeUploadImage(e) {
@@ -129,11 +155,8 @@ export default {
       label-position="top"
       label-width="80px"
     >
-      <div class="flex ">
+      <div class="flex align-items-c ">
-        <el-form-item label="名称与图标" prop="appName" style="flex:1">
+        <el-form-item label="名称与图标" prop="imageId" class="mt30">
-          <el-input v-model="dialog.agent.appName" size="medium" />
-        </el-form-item>
-        <el-form-item label="" prop="imageId" class="mt30 ml20">
           <el-popover trigger="click" v-model="popover">
             <div style="width: 28vw">
               <el-radio-group
@@ -150,22 +173,34 @@ export default {
               <div class="mt10" v-if="isImage === '0'">
                 <VEmojiPicker @select="selectEmoji" class="emoji " />
                 <div
-                  v-if="dialog.agent.image"
+                  v-if="image"
                   class="flex mt10 back-content justify-content-b"
                 >
                   <template
                     v-for="item in chooseBack"
-                    v-if="dialog.agent.imageType === 'emoji'"
+                    v-if="imageType === 'emoji'"
                   >
                     <div
                       class="emoji-background"
                       :style="`background:${item}`"
                       @click="chooseGround(item)"
+                      :class="item === background ? 'activeBack' : ''"
                     >
-                      {{ dialog.agent.image }}
+                      {{ image }}
                     </div>
                   </template>
                 </div>
+
+                <div class="flex align-items-c justify-content-b">
+                  <!--                  <el-button size="medium" style="flex:1">取消</el-button>-->
+                  <el-button
+                    @click="saveEmoji"
+                    size="medium"
+                    type="primary"
+                    style="flex:1"
+                    >确认
+                  </el-button>
+                </div>
               </div>
 
               <!--              图片切割-->
@@ -201,12 +236,22 @@ export default {
               <div v-if="dialog.agent.imageType === 'emoji'">
                 {{ dialog.agent.image }}
               </div>
-              <div v-else style="width: 100%">
+              <div
-                <img :src="dialog.agent.image" alt="" style="width: 100%;" />
+                v-else
+                style="width: 100%;height: 100%;overflow: hidden;border-radius: 8px"
+              >
+                <img
+                  :src="dialog.agent.image"
+                  alt=""
+                  style="width: 100%;height: 100%"
+                />
               </div>
             </div>
           </el-popover>
         </el-form-item>
+        <el-form-item label="" prop="appName" style="flex:1" class="mt60">
+          <el-input v-model="dialog.agent.appName" size="medium" />
+        </el-form-item>
       </div>
 
       <el-form-item label="选择应用类型" required prop="appType">
@@ -272,6 +317,28 @@ export default {
     </el-form>
   </div>
 </template>
+<style>
+.emoji {
+  width: 100% !important;
+  height: 100%;
+  & #Categories {
+    & .category {
+      &.active {
+        border-bottom: 3px solid var(--color-primary);
+      }
+    }
+  }
+  & #InputSearch {
+    & .container-search {
+      & input {
+        outline: none;
+        border: 1px solid var(--color-primary);
+        background: #fff;
+      }
+    }
+  }
+}
+</style>
 
 <style lang="scss" scoped>
 @import '@/assets/sass/renderSass/theme.scss';
@@ -302,27 +369,12 @@ export default {
   text-align: center;
   //margin-left: 10px;
   margin-bottom: 10px;
-}
+
-.emoji {
+  &.activeBack {
-  width: 100% !important;
+    border: 1px dashed #676f83;
-  height: 100%;
-  & #Categories {
-    & .category {
-      &.active {
-        border-bottom: 3px solid var(--color-primary);
-      }
-    }
-  }
-  & #InputSearch {
-    & .container-search {
-      & input {
-        outline: none;
-        border: 1px solid var(--color-primary);
-        background: #fff;
-      }
-    }
   }
 }
+
 .card-container {
   display: flex;
   flex-wrap: wrap;

src/views/intelligent-agent/index.vue

@@ -247,7 +247,10 @@ export default {
                   }`
                 "
               >
-                <div v-if="listItem.imageType === 'image'">
+                <div
+                  v-if="listItem.imageType === 'image'"
+                  style="width: 100%;height: 100%"
+                >
                   <img
                     :src="listItem.image"
                     alt=""