Add upload (#1016)

* [style] 修改右上角图标，选择统一风格的iconfont

* [fix] fix webfont tree in readme file

* (fix) 菜单编辑的时候，icon不居中

* 更新为使用组件

* 媒体库增加 普通上传、压缩上传按钮，方便媒体库直接上传图片

* 普通上传组件

* 增加数据类型切换后的的校验，避免使用错误的查询条件和字典条件。
Co-authored-by: Nbypanghu <bypanghu@163.com>
Co-authored-by: Ntesun <36953434+tesun@users.noreply.github.com>

web/src/components/chooseImg/index.vue

 <template>
   <el-drawer v-model="drawer" title="媒体库">
+    <div class="gva-btn-list">
+      <upload-common
+          v-model:imageCommon="imageCommon"
+          class="upload-btn-media-library"
+          @on-success="open"
+      />
+      <upload-image
+          v-model:imageUrl="imageUrl"
+          :file-size="512"
+          :max-w-h="1080"
+          class="upload-btn-media-library"
+          @on-success="open"
+      />
+    </div>
     <div class="media">
       <el-image
         v-for="(item,key) in picList"
@@ -21,6 +35,11 @@
 <script setup>
 import { ref } from 'vue'
 import { getFileList } from '@/api/fileUploadAndDownload'
+import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
+
+const imageUrl = ref('')
+const imageCommon = ref('')
 
 const emit = defineEmits(['enterImg'])
 defineProps({
@@ -56,6 +75,7 @@ defineExpose({ open })
 </script>
 
 <style lang="scss">
+.upload-btn-media-library{margin-left: 20px;}
 .media{
   display:flex;
   flex-wrap:wrap;

web/src/components/upload/common.vue

+<template>
+  <div>
+    <el-upload
+        :action="`${path}/fileUploadAndDownload/upload`"
+        :before-upload="checkFile"
+        :headers="{ 'x-token': userStore.token }"
+        :on-error="uploadError"
+        :on-success="uploadSuccess"
+        :show-file-list="false"
+        class="upload-btn"
+    >
+      <el-button size="small" type="primary">普通上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+
+const emit = defineEmits(['on-success'])
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const userStore = useUserStore()
+const fullscreenLoading = ref(false)
+
+const checkFile = (file) => {
+  fullscreenLoading.value = true
+  const isJPG = file.type === 'image/jpeg'
+  const isPng = file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 0.5
+  if (!isJPG && !isPng) {
+    ElMessage.error('上传图片只能是 jpg或png 格式!')
+    fullscreenLoading.value = false
+  }
+  if (!isLt2M) {
+    ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
+    fullscreenLoading.value = false
+  }
+  return (isPng || isJPG) && isLt2M
+}
+
+const uploadSuccess = (res) => {
+  const { data } = res
+  if (data.file) {
+    emit('on-success', data.file.url)
+  }
+}
+
+const uploadError = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+  fullscreenLoading.value = false
+}
+
+</script>
+
+<script>
+
+export default {
+  name: 'UploadCommon',
+  methods: {
+
+  }
+}
+</script>

web/src/view/example/upload/upload.vue

@@ -2,17 +2,11 @@
   <div v-loading.fullscreen.lock="fullscreenLoading">
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-upload
-          :action="`${path}/fileUploadAndDownload/upload`"
-          :before-upload="checkFile"
-          :headers="{ 'x-token': userStore.token }"
-          :on-error="uploadError"
-          :on-success="uploadSuccess"
-          :show-file-list="false"
-          class="upload-btn"
-        >
-          <el-button size="small" type="primary">普通上传</el-button>
-        </el-upload>
+        <upload-common
+            v-model:imageCommon="imageCommon"
+            class="upload-btn"
+            @on-success="getTableData"
+          />
         <upload-image
           v-model:imageUrl="imageUrl"
           :file-size="512"
@@ -72,6 +66,7 @@ import { downloadImage } from '@/utils/downloadImg'
 import { useUserStore } from '@/pinia/modules/user'
 import CustomPic from '@/components/customPic/index.vue'
 import UploadImage from '@/components/upload/image.vue'
+import UploadCommon from '@/components/upload/common.vue'
 import { formatDate } from '@/utils/format'
 
 import { ref } from 'vue'
@@ -81,6 +76,7 @@ const path = ref(import.meta.env.VITE_BASE_API)
 const userStore = useUserStore()
 
 const imageUrl = ref('')
+const imageCommon = ref('')
 
 const page = ref(1)
 const total = ref(0)
@@ -137,46 +133,6 @@ const deleteFileFunc = async(row) => {
     })
 }
 
-const fullscreenLoading = ref(false)
-const checkFile = (file) => {
-  fullscreenLoading.value = true
-  const isJPG = file.type === 'image/jpeg'
-  const isPng = file.type === 'image/png'
-  const isLt2M = file.size / 1024 / 1024 < 0.5
-  if (!isJPG && !isPng) {
-    ElMessage.error('上传图片只能是 jpg或png 格式!')
-    fullscreenLoading.value = false
-  }
-  if (!isLt2M) {
-    ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
-    fullscreenLoading.value = false
-  }
-  return (isPng || isJPG) && isLt2M
-}
-const uploadSuccess = (res) => {
-  fullscreenLoading.value = false
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: '上传成功'
-    })
-    if (res.code === 0) {
-      getTableData()
-    }
-  } else {
-    ElMessage({
-      type: 'warning',
-      message: res.msg
-    })
-  }
-}
-const uploadError = () => {
-  ElMessage({
-    type: 'error',
-    message: '上传失败'
-  })
-  fullscreenLoading.value = false
-}
 const downloadFile = (row) => {
   if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
     downloadImage(row.url, row.name)

web/src/view/superAdmin/menu/icon.vue

 <template>
   <div>
-    <span class="gva-icon" style="position: absolute; z-index: 9999; padding: 5px 10px; ">
+    <span class="gva-icon" style="position: absolute; z-index: 9999; padding: 3px 10px 0; ">
       <el-icon>
-        <component :is="metaData.icon" />
+        <component :is="metaData.icon"/>
       </el-icon>
     </span>
     <el-select v-model="metaData.icon" style="width:100%" clearable filterable class="gva-select" placeholder="请选择">
-      <el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
-        <span class="gva-icon" :class="item.label">
+      <el-option
+          v-for="item in options"
+          :key="item.key"
+          class="select__option_item"
+          :label="item.key"
+          :value="item.key"
+      >
+        <span class="gva-icon" style=" padding: 3px 0 0; " :class="item.label">
           <el-icon>
-            <component :is="item.label" />
+            <component :is="item.label"/>
           </el-icon>
         </span>
-        <span style="float: left">{{ item.key }}</span>
+        <span style="text-align: left">{{ item.key }}</span>
       </el-option>
     </el-select>
   </div>
@@ -20,1140 +26,1141 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
+
 const props = defineProps({
   meta: {
     default: function() {
       return {}
     },
-    type: Object
-  }
+    type: Object,
+  },
 })
 
 const options = reactive([
   {
     'key': 'aim',
-    'label': 'aim'
+    'label': 'aim',
   },
   {
     'key': 'add-location',
-    'label': 'add-location'
+    'label': 'add-location',
   },
   {
     'key': 'apple',
-    'label': 'apple'
+    'label': 'apple',
   },
   {
     'key': 'alarm-clock',
-    'label': 'alarm-clock'
+    'label': 'alarm-clock',
   },
   {
     'key': 'arrow-down',
-    'label': 'arrow-down'
+    'label': 'arrow-down',
   },
   {
     'key': 'arrow-down-bold',
-    'label': 'arrow-down-bold'
+    'label': 'arrow-down-bold',
   },
   {
     'key': 'arrow-left',
-    'label': 'arrow-left'
+    'label': 'arrow-left',
   },
   {
     'key': 'arrow-left-bold',
-    'label': 'arrow-left-bold'
+    'label': 'arrow-left-bold',
   },
   {
     'key': 'arrow-right-bold',
-    'label': 'arrow-right-bold'
+    'label': 'arrow-right-bold',
   },
   {
     'key': 'arrow-up',
-    'label': 'arrow-up'
+    'label': 'arrow-up',
   },
   {
     'key': 'back',
-    'label': 'back'
+    'label': 'back',
   },
   {
     'key': 'bell',
-    'label': 'bell'
+    'label': 'bell',
   },
   {
     'key': 'baseball',
-    'label': 'baseball'
+    'label': 'baseball',
   },
   {
     'key': 'bicycle',
-    'label': 'bicycle'
+    'label': 'bicycle',
   },
   {
     'key': 'bell-filled',
-    'label': 'bell-filled'
+    'label': 'bell-filled',
   },
   {
     'key': 'basketball',
-    'label': 'basketball'
+    'label': 'basketball',
   },
   {
     'key': 'bottom',
-    'label': 'bottom'
+    'label': 'bottom',
   },
   {
     'key': 'box',
-    'label': 'box'
+    'label': 'box',
   },
   {
     'key': 'briefcase',
-    'label': 'briefcase'
+    'label': 'briefcase',
   },
   {
     'key': 'brush-filled',
-    'label': 'brush-filled'
+    'label': 'brush-filled',
   },
   {
     'key': 'bowl',
-    'label': 'bowl'
+    'label': 'bowl',
   },
   {
     'key': 'avatar',
-    'label': 'avatar'
+    'label': 'avatar',
   },
   {
     'key': 'brush',
-    'label': 'brush'
+    'label': 'brush',
   },
   {
     'key': 'burger',
-    'label': 'burger'
+    'label': 'burger',
   },
   {
     'key': 'camera',
-    'label': 'camera'
+    'label': 'camera',
   },
   {
     'key': 'bottom-left',
-    'label': 'bottom-left'
+    'label': 'bottom-left',
   },
   {
     'key': 'calendar',
-    'label': 'calendar'
+    'label': 'calendar',
   },
   {
     'key': 'caret-bottom',
-    'label': 'caret-bottom'
+    'label': 'caret-bottom',
   },
   {
     'key': 'caret-left',
-    'label': 'caret-left'
+    'label': 'caret-left',
   },
   {
     'key': 'caret-right',
-    'label': 'caret-right'
+    'label': 'caret-right',
   },
   {
     'key': 'caret-top',
-    'label': 'caret-top'
+    'label': 'caret-top',
   },
   {
     'key': 'chat-dot-square',
-    'label': 'chat-dot-square'
+    'label': 'chat-dot-square',
   },
   {
     'key': 'cellphone',
-    'label': 'cellphone'
+    'label': 'cellphone',
   },
   {
     'key': 'chat-dot-round',
-    'label': 'chat-dot-round'
+    'label': 'chat-dot-round',
   },
   {
     'key': 'chat-line-square',
-    'label': 'chat-line-square'
+    'label': 'chat-line-square',
   },
   {
     'key': 'chat-line-round',
-    'label': 'chat-line-round'
+    'label': 'chat-line-round',
   },
   {
     'key': 'chat-round',
-    'label': 'chat-round'
+    'label': 'chat-round',
   },
   {
     'key': 'check',
-    'label': 'check'
+    'label': 'check',
   },
   {
     'key': 'chat-square',
-    'label': 'chat-square'
+    'label': 'chat-square',
   },
   {
     'key': 'cherry',
-    'label': 'cherry'
+    'label': 'cherry',
   },
   {
     'key': 'chicken',
-    'label': 'chicken'
+    'label': 'chicken',
   },
   {
     'key': 'circle-check-filled',
-    'label': 'circle-check-filled'
+    'label': 'circle-check-filled',
   },
   {
     'key': 'circle-check',
-    'label': 'circle-check'
+    'label': 'circle-check',
   },
   {
     'key': 'checked',
-    'label': 'checked'
+    'label': 'checked',
   },
   {
     'key': 'circle-close-filled',
-    'label': 'circle-close-filled'
+    'label': 'circle-close-filled',
   },
   {
     'key': 'circle-close',
-    'label': 'circle-close'
+    'label': 'circle-close',
   },
   {
     'key': 'arrow-right',
-    'label': 'arrow-right'
+    'label': 'arrow-right',
   },
   {
     'key': 'circle-plus',
-    'label': 'circle-plus'
+    'label': 'circle-plus',
   },
   {
     'key': 'clock',
-    'label': 'clock'
+    'label': 'clock',
   },
   {
     'key': 'close-bold',
-    'label': 'close-bold'
+    'label': 'close-bold',
   },
   {
     'key': 'close',
-    'label': 'close'
+    'label': 'close',
   },
   {
     'key': 'cloudy',
-    'label': 'cloudy'
+    'label': 'cloudy',
   },
   {
     'key': 'circle-plus-filled',
-    'label': 'circle-plus-filled'
+    'label': 'circle-plus-filled',
   },
   {
     'key': 'coffee-cup',
-    'label': 'coffee-cup'
+    'label': 'coffee-cup',
   },
   {
     'key': 'cold-drink',
-    'label': 'cold-drink'
+    'label': 'cold-drink',
   },
   {
     'key': 'coin',
-    'label': 'coin'
+    'label': 'coin',
   },
   {
     'key': 'arrow-up-bold',
-    'label': 'arrow-up-bold'
+    'label': 'arrow-up-bold',
   },
   {
     'key': 'collection-tag',
-    'label': 'collection-tag'
+    'label': 'collection-tag',
   },
   {
     'key': 'bottom-right',
-    'label': 'bottom-right'
+    'label': 'bottom-right',
   },
   {
     'key': 'coffee',
-    'label': 'coffee'
+    'label': 'coffee',
   },
   {
     'key': 'camera-filled',
-    'label': 'camera-filled'
+    'label': 'camera-filled',
   },
   {
     'key': 'collection',
-    'label': 'collection'
+    'label': 'collection',
   },
   {
     'key': 'cpu',
-    'label': 'cpu'
+    'label': 'cpu',
   },
   {
     'key': 'crop',
-    'label': 'crop'
+    'label': 'crop',
   },
   {
     'key': 'coordinate',
-    'label': 'coordinate'
+    'label': 'coordinate',
   },
   {
     'key': 'd-arrow-left',
-    'label': 'd-arrow-left'
+    'label': 'd-arrow-left',
   },
   {
     'key': 'compass',
-    'label': 'compass'
+    'label': 'compass',
   },
   {
     'key': 'connection',
-    'label': 'connection'
+    'label': 'connection',
   },
   {
     'key': 'credit-card',
-    'label': 'credit-card'
+    'label': 'credit-card',
   },
   {
     'key': 'data-board',
-    'label': 'data-board'
+    'label': 'data-board',
   },
   {
     'key': 'd-arrow-right',
-    'label': 'd-arrow-right'
+    'label': 'd-arrow-right',
   },
   {
     'key': 'dessert',
-    'label': 'dessert'
+    'label': 'dessert',
   },
   {
     'key': 'delete-location',
-    'label': 'delete-location'
+    'label': 'delete-location',
   },
   {
     'key': 'd-caret',
-    'label': 'd-caret'
+    'label': 'd-caret',
   },
   {
     'key': 'delete',
-    'label': 'delete'
+    'label': 'delete',
   },
   {
     'key': 'dish',
-    'label': 'dish'
+    'label': 'dish',
   },
   {
     'key': 'dish-dot',
-    'label': 'dish-dot'
+    'label': 'dish-dot',
   },
   {
     'key': 'document-copy',
-    'label': 'document-copy'
+    'label': 'document-copy',
   },
   {
     'key': 'discount',
-    'label': 'discount'
+    'label': 'discount',
   },
   {
     'key': 'document-checked',
-    'label': 'document-checked'
+    'label': 'document-checked',
   },
   {
     'key': 'document-add',
-    'label': 'document-add'
+    'label': 'document-add',
   },
   {
     'key': 'document-remove',
-    'label': 'document-remove'
+    'label': 'document-remove',
   },
   {
     'key': 'data-analysis',
-    'label': 'data-analysis'
+    'label': 'data-analysis',
   },
   {
     'key': 'delete-filled',
-    'label': 'delete-filled'
+    'label': 'delete-filled',
   },
   {
     'key': 'download',
-    'label': 'download'
+    'label': 'download',
   },
   {
     'key': 'drizzling',
-    'label': 'drizzling'
+    'label': 'drizzling',
   },
   {
     'key': 'eleme',
-    'label': 'eleme'
+    'label': 'eleme',
   },
   {
     'key': 'eleme-filled',
-    'label': 'eleme-filled'
+    'label': 'eleme-filled',
   },
   {
     'key': 'edit',
-    'label': 'edit'
+    'label': 'edit',
   },
   {
     'key': 'failed',
-    'label': 'failed'
+    'label': 'failed',
   },
   {
     'key': 'expand',
-    'label': 'expand'
+    'label': 'expand',
   },
   {
     'key': 'female',
-    'label': 'female'
+    'label': 'female',
   },
   {
     'key': 'document',
-    'label': 'document'
+    'label': 'document',
   },
   {
     'key': 'film',
-    'label': 'film'
+    'label': 'film',
   },
   {
     'key': 'finished',
-    'label': 'finished'
+    'label': 'finished',
   },
   {
     'key': 'data-line',
-    'label': 'data-line'
+    'label': 'data-line',
   },
   {
     'key': 'filter',
-    'label': 'filter'
+    'label': 'filter',
   },
   {
     'key': 'flag',
-    'label': 'flag'
+    'label': 'flag',
   },
   {
     'key': 'folder-checked',
-    'label': 'folder-checked'
+    'label': 'folder-checked',
   },
   {
     'key': 'first-aid-kit',
-    'label': 'first-aid-kit'
+    'label': 'first-aid-kit',
   },
   {
     'key': 'folder-add',
-    'label': 'folder-add'
+    'label': 'folder-add',
   },
   {
     'key': 'fold',
-    'label': 'fold'
+    'label': 'fold',
   },
   {
     'key': 'folder-delete',
-    'label': 'folder-delete'
+    'label': 'folder-delete',
   },
   {
     'key': 'document-delete',
-    'label': 'document-delete'
+    'label': 'document-delete',
   },
   {
     'key': 'folder',
-    'label': 'folder'
+    'label': 'folder',
   },
   {
     'key': 'food',
-    'label': 'food'
+    'label': 'food',
   },
   {
     'key': 'folder-opened',
-    'label': 'folder-opened'
+    'label': 'folder-opened',
   },
   {
     'key': 'football',
-    'label': 'football'
+    'label': 'football',
   },
   {
     'key': 'folder-remove',
-    'label': 'folder-remove'
+    'label': 'folder-remove',
   },
   {
     'key': 'fries',
-    'label': 'fries'
+    'label': 'fries',
   },
   {
     'key': 'full-screen',
-    'label': 'full-screen'
+    'label': 'full-screen',
   },
   {
     'key': 'fork-spoon',
-    'label': 'fork-spoon'
+    'label': 'fork-spoon',
   },
   {
     'key': 'goblet',
-    'label': 'goblet'
+    'label': 'goblet',
   },
   {
     'key': 'goblet-full',
-    'label': 'goblet-full'
+    'label': 'goblet-full',
   },
   {
     'key': 'goods',
-    'label': 'goods'
+    'label': 'goods',
   },
   {
     'key': 'goblet-square-full',
-    'label': 'goblet-square-full'
+    'label': 'goblet-square-full',
   },
   {
     'key': 'goods-filled',
-    'label': 'goods-filled'
+    'label': 'goods-filled',
   },
   {
     'key': 'grid',
-    'label': 'grid'
+    'label': 'grid',
   },
   {
     'key': 'grape',
-    'label': 'grape'
+    'label': 'grape',
   },
   {
     'key': 'goblet-square',
-    'label': 'goblet-square'
+    'label': 'goblet-square',
   },
   {
     'key': 'headset',
-    'label': 'headset'
+    'label': 'headset',
   },
   {
     'key': 'comment',
-    'label': 'comment'
+    'label': 'comment',
   },
   {
     'key': 'help-filled',
-    'label': 'help-filled'
+    'label': 'help-filled',
   },
   {
     'key': 'histogram',
-    'label': 'histogram'
+    'label': 'histogram',
   },
   {
     'key': 'home-filled',
-    'label': 'home-filled'
+    'label': 'home-filled',
   },
   {
     'key': 'help',
-    'label': 'help'
+    'label': 'help',
   },
   {
     'key': 'house',
-    'label': 'house'
+    'label': 'house',
   },
   {
     'key': 'ice-cream-round',
-    'label': 'ice-cream-round'
+    'label': 'ice-cream-round',
   },
   {
     'key': 'hot-water',
-    'label': 'hot-water'
+    'label': 'hot-water',
   },
   {
     'key': 'ice-cream',
-    'label': 'ice-cream'
+    'label': 'ice-cream',
   },
   {
     'key': 'files',
-    'label': 'files'
+    'label': 'files',
   },
   {
     'key': 'ice-cream-square',
-    'label': 'ice-cream-square'
+    'label': 'ice-cream-square',
   },
   {
     'key': 'key',
-    'label': 'key'
+    'label': 'key',
   },
   {
     'key': 'ice-tea',
-    'label': 'ice-tea'
+    'label': 'ice-tea',
   },
   {
     'key': 'knife-fork',
-    'label': 'knife-fork'
+    'label': 'knife-fork',
   },
   {
     'key': 'iphone',
-    'label': 'iphone'
+    'label': 'iphone',
   },
   {
     'key': 'info-filled',
-    'label': 'info-filled'
+    'label': 'info-filled',
   },
   {
     'key': 'link',
-    'label': 'link'
+    'label': 'link',
   },
   {
     'key': 'ice-drink',
-    'label': 'ice-drink'
+    'label': 'ice-drink',
   },
   {
     'key': 'lightning',
-    'label': 'lightning'
+    'label': 'lightning',
   },
   {
     'key': 'loading',
-    'label': 'loading'
+    'label': 'loading',
   },
   {
     'key': 'lollipop',
-    'label': 'lollipop'
+    'label': 'lollipop',
   },
   {
     'key': 'location-information',
-    'label': 'location-information'
+    'label': 'location-information',
   },
   {
     'key': 'lock',
-    'label': 'lock'
+    'label': 'lock',
   },
   {
     'key': 'location-filled',
-    'label': 'location-filled'
+    'label': 'location-filled',
   },
   {
     'key': 'magnet',
-    'label': 'magnet'
+    'label': 'magnet',
   },
   {
     'key': 'male',
-    'label': 'male'
+    'label': 'male',
   },
   {
     'key': 'location',
-    'label': 'location'
+    'label': 'location',
   },
   {
     'key': 'menu',
-    'label': 'menu'
+    'label': 'menu',
   },
   {
     'key': 'magic-stick',
-    'label': 'magic-stick'
+    'label': 'magic-stick',
   },
   {
     'key': 'message-box',
-    'label': 'message-box'
+    'label': 'message-box',
   },
   {
     'key': 'map-location',
-    'label': 'map-location'
+    'label': 'map-location',
   },
   {
     'key': 'mic',
-    'label': 'mic'
+    'label': 'mic',
   },
   {
     'key': 'message',
-    'label': 'message'
+    'label': 'message',
   },
   {
     'key': 'medal',
-    'label': 'medal'
+    'label': 'medal',
   },
   {
     'key': 'milk-tea',
-    'label': 'milk-tea'
+    'label': 'milk-tea',
   },
   {
     'key': 'microphone',
-    'label': 'microphone'
+    'label': 'microphone',
   },
   {
     'key': 'minus',
-    'label': 'minus'
+    'label': 'minus',
   },
   {
     'key': 'money',
-    'label': 'money'
+    'label': 'money',
   },
   {
     'key': 'moon-night',
-    'label': 'moon-night'
+    'label': 'moon-night',
   },
   {
     'key': 'monitor',
-    'label': 'monitor'
+    'label': 'monitor',
   },
   {
     'key': 'moon',
-    'label': 'moon'
+    'label': 'moon',
   },
   {
     'key': 'more',
-    'label': 'more'
+    'label': 'more',
   },
   {
     'key': 'mostly-cloudy',
-    'label': 'mostly-cloudy'
+    'label': 'mostly-cloudy',
   },
   {
     'key': 'more-filled',
-    'label': 'more-filled'
+    'label': 'more-filled',
   },
   {
     'key': 'mouse',
-    'label': 'mouse'
+    'label': 'mouse',
   },
   {
     'key': 'mug',
-    'label': 'mug'
+    'label': 'mug',
   },
   {
     'key': 'mute',
-    'label': 'mute'
+    'label': 'mute',
   },
   {
     'key': 'no-smoking',
-    'label': 'no-smoking'
+    'label': 'no-smoking',
   },
   {
     'key': 'mute-notification',
-    'label': 'mute-notification'
+    'label': 'mute-notification',
   },
   {
     'key': 'notification',
-    'label': 'notification'
+    'label': 'notification',
   },
   {
     'key': 'notebook',
-    'label': 'notebook'
+    'label': 'notebook',
   },
   {
     'key': 'odometer',
-    'label': 'odometer'
+    'label': 'odometer',
   },
   {
     'key': 'office-building',
-    'label': 'office-building'
+    'label': 'office-building',
   },
   {
     'key': 'operation',
-    'label': 'operation'
+    'label': 'operation',
   },
   {
     'key': 'opportunity',
-    'label': 'opportunity'
+    'label': 'opportunity',
   },
   {
     'key': 'orange',
-    'label': 'orange'
+    'label': 'orange',
   },
   {
     'key': 'open',
-    'label': 'open'
+    'label': 'open',
   },
   {
     'key': 'paperclip',
-    'label': 'paperclip'
+    'label': 'paperclip',
   },
   {
     'key': 'pear',
-    'label': 'pear'
+    'label': 'pear',
   },
   {
     'key': 'partly-cloudy',
-    'label': 'partly-cloudy'
+    'label': 'partly-cloudy',
   },
   {
     'key': 'phone',
-    'label': 'phone'
+    'label': 'phone',
   },
   {
     'key': 'picture-filled',
-    'label': 'picture-filled'
+    'label': 'picture-filled',
   },
   {
     'key': 'phone-filled',
-    'label': 'phone-filled'
+    'label': 'phone-filled',
   },
   {
     'key': 'picture-rounded',
-    'label': 'picture-rounded'
+    'label': 'picture-rounded',
   },
   {
     'key': 'guide',
-    'label': 'guide'
+    'label': 'guide',
   },
   {
     'key': 'place',
-    'label': 'place'
+    'label': 'place',
   },
   {
     'key': 'platform',
-    'label': 'platform'
+    'label': 'platform',
   },
   {
     'key': 'pie-chart',
-    'label': 'pie-chart'
+    'label': 'pie-chart',
   },
   {
     'key': 'pointer',
-    'label': 'pointer'
+    'label': 'pointer',
   },
   {
     'key': 'plus',
-    'label': 'plus'
+    'label': 'plus',
   },
   {
     'key': 'position',
-    'label': 'position'
+    'label': 'position',
   },
   {
     'key': 'postcard',
-    'label': 'postcard'
+    'label': 'postcard',
   },
   {
     'key': 'present',
-    'label': 'present'
+    'label': 'present',
   },
   {
     'key': 'price-tag',
-    'label': 'price-tag'
+    'label': 'price-tag',
   },
   {
     'key': 'promotion',
-    'label': 'promotion'
+    'label': 'promotion',
   },
   {
     'key': 'pouring',
-    'label': 'pouring'
+    'label': 'pouring',
   },
   {
     'key': 'reading-lamp',
-    'label': 'reading-lamp'
+    'label': 'reading-lamp',
   },
   {
     'key': 'question-filled',
-    'label': 'question-filled'
+    'label': 'question-filled',
   },
   {
     'key': 'printer',
-    'label': 'printer'
+    'label': 'printer',
   },
   {
     'key': 'picture',
-    'label': 'picture'
+    'label': 'picture',
   },
   {
     'key': 'refresh-right',
-    'label': 'refresh-right'
+    'label': 'refresh-right',
   },
   {
     'key': 'reading',
-    'label': 'reading'
+    'label': 'reading',
   },
   {
     'key': 'refresh-left',
-    'label': 'refresh-left'
+    'label': 'refresh-left',
   },
   {
     'key': 'refresh',
-    'label': 'refresh'
+    'label': 'refresh',
   },
   {
     'key': 'refrigerator',
-    'label': 'refrigerator'
+    'label': 'refrigerator',
   },
   {
     'key': 'remove-filled',
-    'label': 'remove-filled'
+    'label': 'remove-filled',
   },
   {
     'key': 'right',
-    'label': 'right'
+    'label': 'right',
   },
   {
     'key': 'scale-to-original',
-    'label': 'scale-to-original'
+    'label': 'scale-to-original',
   },
   {
     'key': 'school',
-    'label': 'school'
+    'label': 'school',
   },
   {
     'key': 'remove',
-    'label': 'remove'
+    'label': 'remove',
   },
   {
     'key': 'scissor',
-    'label': 'scissor'
+    'label': 'scissor',
   },
   {
     'key': 'select',
-    'label': 'select'
+    'label': 'select',
   },
   {
     'key': 'management',
-    'label': 'management'
+    'label': 'management',
   },
   {
     'key': 'search',
-    'label': 'search'
+    'label': 'search',
   },
   {
     'key': 'sell',
-    'label': 'sell'
+    'label': 'sell',
   },
   {
     'key': 'semi-select',
-    'label': 'semi-select'
+    'label': 'semi-select',
   },
   {
     'key': 'share',
-    'label': 'share'
+    'label': 'share',
   },
   {
     'key': 'setting',
-    'label': 'setting'
+    'label': 'setting',
   },
   {
     'key': 'service',
-    'label': 'service'
+    'label': 'service',
   },
   {
     'key': 'ship',
-    'label': 'ship'
+    'label': 'ship',
   },
   {
     'key': 'set-up',
-    'label': 'set-up'
+    'label': 'set-up',
   },
   {
     'key': 'shopping-bag',
-    'label': 'shopping-bag'
+    'label': 'shopping-bag',
   },
   {
     'key': 'shop',
-    'label': 'shop'
+    'label': 'shop',
   },
   {
     'key': 'shopping-cart',
-    'label': 'shopping-cart'
+    'label': 'shopping-cart',
   },
   {
     'key': 'shopping-cart-full',
-    'label': 'shopping-cart-full'
+    'label': 'shopping-cart-full',
   },
   {
     'key': 'soccer',
-    'label': 'soccer'
+    'label': 'soccer',
   },
   {
     'key': 'sold-out',
-    'label': 'sold-out'
+    'label': 'sold-out',
   },
   {
     'key': 'smoking',
-    'label': 'smoking'
+    'label': 'smoking',
   },
   {
     'key': 'sort-down',
-    'label': 'sort-down'
+    'label': 'sort-down',
   },
   {
     'key': 'sort',
-    'label': 'sort'
+    'label': 'sort',
   },
   {
     'key': 'sort-up',
-    'label': 'sort-up'
+    'label': 'sort-up',
   },
   {
     'key': 'star',
-    'label': 'star'
+    'label': 'star',
   },
   {
     'key': 'stamp',
-    'label': 'stamp'
+    'label': 'stamp',
   },
   {
     'key': 'star-filled',
-    'label': 'star-filled'
+    'label': 'star-filled',
   },
   {
     'key': 'stopwatch',
-    'label': 'stopwatch'
+    'label': 'stopwatch',
   },
   {
     'key': 'success-filled',
-    'label': 'success-filled'
+    'label': 'success-filled',
   },
   {
     'key': 'suitcase',
-    'label': 'suitcase'
+    'label': 'suitcase',
   },
   {
     'key': 'sugar',
-    'label': 'sugar'
+    'label': 'sugar',
   },
   {
     'key': 'sunny',
-    'label': 'sunny'
+    'label': 'sunny',
   },
   {
     'key': 'sunrise',
-    'label': 'sunrise'
+    'label': 'sunrise',
   },
   {
     'key': 'switch',
-    'label': 'switch'
+    'label': 'switch',
   },
   {
     'key': 'ticket',
-    'label': 'ticket'
+    'label': 'ticket',
   },
   {
     'key': 'sunset',
-    'label': 'sunset'
+    'label': 'sunset',
   },
   {
     'key': 'tickets',
-    'label': 'tickets'
+    'label': 'tickets',
   },
   {
     'key': 'switch-button',
-    'label': 'switch-button'
+    'label': 'switch-button',
   },
   {
     'key': 'takeaway-box',
-    'label': 'takeaway-box'
+    'label': 'takeaway-box',
   },
   {
     'key': 'toilet-paper',
-    'label': 'toilet-paper'
+    'label': 'toilet-paper',
   },
   {
     'key': 'timer',
-    'label': 'timer'
+    'label': 'timer',
   },
   {
     'key': 'tools',
-    'label': 'tools'
+    'label': 'tools',
   },
   {
     'key': 'top-left',
-    'label': 'top-left'
+    'label': 'top-left',
   },
   {
     'key': 'top',
-    'label': 'top'
+    'label': 'top',
   },
   {
     'key': 'top-right',
-    'label': 'top-right'
+    'label': 'top-right',
   },
   {
     'key': 'trend-charts',
-    'label': 'trend-charts'
+    'label': 'trend-charts',
   },
   {
     'key': 'turn-off',
-    'label': 'turn-off'
+    'label': 'turn-off',
   },
   {
     'key': 'unlock',
-    'label': 'unlock'
+    'label': 'unlock',
   },
   {
     'key': 'trophy',
-    'label': 'trophy'
+    'label': 'trophy',
   },
   {
     'key': 'umbrella',
-    'label': 'umbrella'
+    'label': 'umbrella',
   },
   {
     'key': 'upload-filled',
-    'label': 'upload-filled'
+    'label': 'upload-filled',
   },
   {
     'key': 'user-filled',
-    'label': 'user-filled'
+    'label': 'user-filled',
   },
   {
     'key': 'upload',
-    'label': 'upload'
+    'label': 'upload',
   },
   {
     'key': 'user',
-    'label': 'user'
+    'label': 'user',
   },
   {
     'key': 'van',
-    'label': 'van'
+    'label': 'van',
   },
   {
     'key': 'copy-document',
-    'label': 'copy-document'
+    'label': 'copy-document',
   },
   {
     'key': 'video-pause',
-    'label': 'video-pause'
+    'label': 'video-pause',
   },
   {
     'key': 'video-camera-filled',
-    'label': 'video-camera-filled'
+    'label': 'video-camera-filled',
   },
   {
     'key': 'view',
-    'label': 'view'
+    'label': 'view',
   },
   {
     'key': 'wallet',
-    'label': 'wallet'
+    'label': 'wallet',
   },
   {
     'key': 'warning-filled',
-    'label': 'warning-filled'
+    'label': 'warning-filled',
   },
   {
     'key': 'watch',
-    'label': 'watch'
+    'label': 'watch',
   },
   {
     'key': 'video-play',
-    'label': 'video-play'
+    'label': 'video-play',
   },
   {
     'key': 'watermelon',
-    'label': 'watermelon'
+    'label': 'watermelon',
   },
   {
     'key': 'video-camera',
-    'label': 'video-camera'
+    'label': 'video-camera',
   },
   {
     'key': 'wallet-filled',
-    'label': 'wallet-filled'
+    'label': 'wallet-filled',
   },
   {
     'key': 'warning',
-    'label': 'warning'
+    'label': 'warning',
   },
   {
     'key': 'list',
-    'label': 'list'
+    'label': 'list',
   },
   {
     'key': 'zoom-in',
-    'label': 'zoom-in'
+    'label': 'zoom-in',
   },
   {
     'key': 'zoom-out',
-    'label': 'zoom-out'
+    'label': 'zoom-out',
   },
   {
     'key': 'rank',
-    'label': 'rank'
+    'label': 'rank',
   },
   {
     'key': 'wind-power',
-    'label': 'wind-power'
-  }
+    'label': 'wind-power',
+  },
 ])
 
 const metaData = ref(props.meta)
-if(!metaData.value.icon){
+if (!metaData.value.icon) {
   metaData.value.icon = options[0].label
 }
 </script>
@@ -1166,13 +1173,20 @@ export default {
 
 <style lang="scss">
 .gva-icon {
-  float: left;
+  //float: left;
   color: rgb(132, 146, 166);
   font-size: 13px;
-  line-height: 34px;
+  //line-height: 32px;
   margin-right: 10px;
 }
+
 .gva-select .el-input__inner {
-    padding:0 30px !important
+  padding: 0 30px !important
+}
+
+.select__option_item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 </style>

web/src/view/systemTools/autoCode/component/fieldDialog.vue

@@ -30,6 +30,7 @@
           style="width:100%"
           placeholder="请选择field数据类型"
           clearable
+          @change="clearOther"
         >
           <el-option
             v-for="item in typeOptions"
@@ -54,6 +55,7 @@
             :key="item.value"
             :label="item.label"
             :value="item.value"
+            :disabled="middleDate.fieldType!=='string'&&item.value==='LIKE'"
           />
         </el-select>
       </el-form-item>
@@ -174,6 +176,11 @@ const autoFill = () => {
   middleDate.value.columnName = toSQLLine(middleDate.value.fieldJson)
 }
 
+const clearOther = () => {
+  middleDate.value.fieldSearchType = ''
+  middleDate.value.dictType = ''
+}
+
 const fieldDialogFrom = ref(null)
 defineExpose({ fieldDialogFrom })
 </script>