增加群二维码上传。

src/api/community.js

@@ -21,7 +21,7 @@ export function getBuildingList(params) {
 // 添加新小区
 export function createCommunity(data) {
   return request({
-    url: '/api/community/',
+    url: '/api/community',
     method: 'post',
     data
   })

src/views/community/CommunityList.vue

@@ -35,6 +35,15 @@
           <template v-if="column.key === 'create_time'">
             {{ formatDateTime(record.create_time) }}
           </template>
+          <template v-if="column.key === 'qrcode'">
+            <a-image
+              v-if="record.qy_group_qrcode"
+              :src="record.qy_group_qrcode"
+              :width="50"
+              alt="群二维码"
+            />
+            <span v-else>-</span>
+          </template>
         </template>
       </a-table>
 
@@ -81,6 +90,22 @@
             v-model="formState.location"
             label="地址搜索"
           />
+
+          <a-form-item label="群二维码" name="qy_group_qrcode">
+            <a-upload
+              v-model:file-list="fileList"
+              name="file"
+              :action="uploadUrl"
+              list-type="picture-card"
+              :max-count="1"
+              @change="handleQrcodeChange"
+            >
+              <div v-if="!fileList.length">
+                <plus-outlined />
+                <div style="margin-top: 8px">上传</div>
+              </div>
+            </a-upload>
+          </a-form-item>
         </a-form>
       </a-modal>
     </div>
@@ -89,12 +114,12 @@
 
 <script>
 import { defineComponent, ref, onMounted, nextTick } from 'vue'
-import { message, Tag, Menu, Dropdown } from 'ant-design-vue'
+import { message, Tag, Menu, Dropdown, Image, Upload } from 'ant-design-vue'
 import { getCommunityList, createCommunity, updateCommunityStatus } from '@/api/community'
 import { loadAMap, createMap } from '@/utils/amap.js'
 import dayjs from 'dayjs'
 import PageContainer from '@/components/PageContainer.vue'
-import { DownOutlined } from '@ant-design/icons-vue'
+import { DownOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import MapPicker from '@/components/MapPicker/index.vue'
 
 export default defineComponent({
@@ -105,7 +130,10 @@ export default defineComponent({
     AMenu: Menu,
     AMenuItem: Menu.Item,
     DownOutlined,
-    MapPicker
+    MapPicker,
+    AImage: Image,
+    AUpload: Upload,
+    PlusOutlined
   },
   setup() {
     const loading = ref(false)
@@ -178,7 +206,13 @@ export default defineComponent({
         key: 'status',
         width: 100,
         align: 'center',
-      }
+      },
+      {
+        title: '群二维码',
+        key: 'qrcode',
+        width: 100,
+        align: 'center',
+      },
     ]
 
     // 获取小区列表数据
@@ -268,7 +302,8 @@ export default defineComponent({
         address: '',
         longitude: null,
         latitude: null
-      }
+      },
+      qy_group_qrcode: ''
     })
 
     const rules = {
@@ -278,6 +313,10 @@ export default defineComponent({
       'location.latitude': [{ required: true, message: '请在地图上选择位置' }]
     }
 
+    // 添加上传相关的响应式变量
+    const fileList = ref([])
+    const uploadUrl = '/api/upload/image'
+
     // 显示添加模态框
     const showAddModal = () => {
       addModalVisible.value = true
@@ -292,7 +331,8 @@ export default defineComponent({
             name: formState.value.name,
             address: formState.value.location.address,
             longitude: formState.value.location.longitude,
-            latitude: formState.value.location.latitude
+            latitude: formState.value.location.latitude,
+            qy_group_qrcode: formState.value.qy_group_qrcode
           }
           
           const res = await createCommunity(params)
@@ -315,6 +355,7 @@ export default defineComponent({
     // 取消添加
     const handleCancel = () => {
       formRef.value?.resetFields()
+      fileList.value = []
       addModalVisible.value = false
     }
 
@@ -338,6 +379,20 @@ export default defineComponent({
       }
     }
 
+    // 处理二维码上传
+    const handleQrcodeChange = (info) => {
+      if (info.file.status === 'done') {
+        if (info.file.response.code === 200) {
+          formState.value.qy_group_qrcode = info.file.response.data.url
+          message.success('上传成功')
+        } else {
+          message.error(info.file.response.message || '上传失败')
+        }
+      } else if (info.file.status === 'error') {
+        message.error('上传失败')
+      }
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -362,7 +417,10 @@ export default defineComponent({
       showAddModal,
       handleAdd,
       handleCancel,
-      handleStatusChange
+      handleStatusChange,
+      fileList,
+      uploadUrl,
+      handleQrcodeChange
     }
   }
 })
@@ -666,4 +724,14 @@ export default defineComponent({
 .community-list {
   /* 移除 padding */
 }
+
+:deep(.ant-upload-list-picture-card-container) {
+  width: 104px;
+  height: 104px;
+}
+
+:deep(.ant-upload.ant-upload-select-picture-card) {
+  width: 104px;
+  height: 104px;
+}
 </style>