feat 液袋增加图标显示

src/views/admin/liquidbag/components/liquid-bag-form.vue

@@ -1,20 +1,7 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="state.dialogVisible" :title="props.title" width="900px" :close-on-click-modal="false"
-    v-model="state.dialogVisible"
+    :close-on-press-escape="false" draggable destroy-on-close>
-    :title="props.title"
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" @submit.prevent>
-    width="900px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    draggable
-    destroy-on-close
-  >
-    <el-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      label-width="120px"
-      @submit.prevent
-    >
       <div class="form-section">
         <div class="section-title">基本信息</div>
         <el-row :gutter="25">
@@ -26,12 +13,7 @@
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
             <el-form-item label="型号" prop="model">
               <el-select v-model="form.model" placeholder="请选择型号" style="width: 100%;">
-                <el-option
+                <el-option v-for="item in state.modelList" :key="item.value" :label="item.label" :value="item.value" />
-                  v-for="item in state.modelList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -54,7 +36,21 @@
             <el-form-item label="残余量" prop="residualVolume">
               <el-input-number v-model="form.residualVolume" :min="0" style="width: 100%;" />
             </el-form-item>
+
           </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+            <el-form-item label="图标" prop="materialIcon">
+              <el-upload class="h100 personal-user-left-upload" :action="iconAction" :headers="iconHeaders"
+                :data="{ autoUpdate: true }" :show-file-list="false" :before-upload="() => {
+                    state.token = storesUserInfo.getToken()
+                    state.iconLoading = true
+                  }
+                  " :on-success="iconSuccess" :on-error="iconError">
+                <img :src="iconUrl" />
+              </el-upload>
+            </el-form-item>
+          </el-col>
+
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
             <el-form-item label="状态" prop="status">
               <el-switch v-model="form.status" />
@@ -73,11 +69,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, computed, reactive, onMounted, getCurrentInstance } from 'vue'
 import { BagDto, BagModelEnum } from '/@/api/admin/data-contracts'
 import { ItemDefBagApi } from '/@/api/admin/item-def-bag'
 import { DictApi } from '/@/api/admin/Dict'
 import eventBus from '/@/utils/mitt'
+import { useUserInfo } from '/@/stores/userInfo'
+import pinia from '/@/stores/index'
+import { storeToRefs } from 'pinia'
+import { AxiosResponse } from 'axios'
+
 
 const props = defineProps({
   title: {
@@ -86,12 +87,17 @@ const props = defineProps({
   }
 })
 
+const { proxy } = getCurrentInstance() as any
 const formRef = ref()
+const storesUserInfo = useUserInfo(pinia)
+const { userInfos } = storeToRefs(storesUserInfo)
 
 const state = reactive({
   dialogVisible: false,
   sureLoading: false,
   modelList: [] as BagModelEnum[],
+  iconLoading: false,
+  token: storesUserInfo.getToken(),
 })
 
 const form = reactive<Partial<BagDto>>({
@@ -103,6 +109,7 @@ const form = reactive<Partial<BagDto>>({
   lowerLimitVolume: 0,
   residualVolume: 0,
   status: true,
+  materialIcon: '',
 })
 
 const rules = {
@@ -166,6 +173,34 @@ const onSubmit = async () => {
   state.sureLoading = false
 }
 
+const iconUrl = computed(() => {
+  return form.materialIcon || 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
+})
+
+const iconAction = computed(() => {
+  return import.meta.env.VITE_API_URL + '/api/admin/user/avatar-upload'
+})
+
+const iconHeaders = computed(() => {
+  return { Authorization: 'Bearer ' + state.token }
+})
+
+const iconSuccess = (res: AxiosResponse) => {
+  state.iconLoading = false
+  if (!res?.success) {
+    if (res.msg) {
+      proxy.$modal.msgError(res.msg)
+    }
+    return
+  }
+  form.materialIcon = res.data
+}
+
+const iconError = (error: any) => {
+  state.iconLoading = false
+  console.error('上传失败:', error)
+}
+
 defineExpose({
   open
 })
@@ -189,4 +224,13 @@ defineExpose({
   font-size: 16px;
   font-weight: bold;
 }
+
+:deep(.el-upload) {
+  height: 90px;
+  width: 90px;
+  img {
+    width: 90px;
+    height: 90px;
+  }
+}
 </style>