fix: 商城仓库管理

apps/web-antd/src/adapter/component/index.ts

@@ -78,6 +78,8 @@ export type ComponentType =
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
+  | 'UploadImage'
+  | 'UploadImageSortable'
   | BaseFormComponentType;
 
 async function initComponentAdapter() {

apps/web-antd/src/app.vue

@@ -71,7 +71,7 @@ const initWebsocket = () => {
 // 当userInfo加载完成后再执行初始化
 watch(userInfoLoaded, (loaded) => {
   if (loaded) {
-    initWebsocket();
+    // initWebsocket();
   }
 });
 </script>

apps/web-antd/src/components/form/components/upload-image-sortable.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { Modal, Upload } from 'ant-design-vue';
+import type { UploadFile } from 'ant-design-vue';
+
+import { uploadFile } from '#/api/core/upload';
+import { Icon } from '#/components/icon';
+
+defineOptions({
+  name: 'UploadImageSortable',
+  inheritAttrs: false,
+});
+
+// 定义props接口
+interface Props {
+  modelValue: string[];
+  multiple?: boolean;
+  maxCount?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  multiple: true,
+  maxCount: 9,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
+
+// 定义文件项接口
+interface FileItem {
+  uid: string;
+  name: string;
+  status: 'uploading' | 'done' | 'error';
+  url: string;
+}
+
+const fileList = ref<FileItem[]>([]);
+
+// 初始化fileList
+const initFileList = () => {
+  fileList.value = props.modelValue.map((url, index) => ({
+    uid: `img-${index}-${url}`,
+    name: url.split('/').pop() || 'file',
+    status: 'done' as const,
+    url,
+  }));
+};
+
+// 初始化
+initFileList();
+
+const uploadListRef = ref<HTMLElement>();
+let sortableInstance: any = null;
+
+// 监听外部modelValue变化，同步到fileList（与upload-image.vue保持一致）
+watch(() => props.modelValue, (newVal) => {
+  const currentUrls = fileList.value.filter(file => file.status === 'done').map(file => file.url);
+  if (JSON.stringify(newVal) !== JSON.stringify(currentUrls)) {
+    fileList.value = newVal.map((url, index) => ({
+      uid: `img-${index}-${url}`,
+      name: url.split('/').pop() || 'file',
+      status: 'done' as const,
+      url,
+    }));
+  }
+  nextTick(() => {
+    initSortable();
+  });
+}, { deep: true, immediate: true });
+
+// 统一通过updateModelValue函数更新modelValue（与upload-image.vue保持一致）
+const updateModelValue = () => {
+  const urls = fileList.value
+    .filter((file) => file.status === 'done' && file.url)
+    .map((file) => file.url);
+  emit('update:modelValue', urls);
+};
+
+// 初始化拖拽排序（使用原生HTML5拖拽API）
+const initSortable = () => {
+  if (!uploadListRef.value) return;
+
+  // 销毁旧的排序实例
+  if (sortableInstance) {
+    sortableInstance = null;
+  }
+
+  // 查找上传列表容器
+  const uploadList = uploadListRef.value.querySelector(
+    '.ant-upload-list-picture-card',
+  ) as HTMLElement;
+  if (!uploadList) return;
+
+  const items = uploadList.querySelectorAll(
+    '.ant-upload-list-item',
+  ) as NodeListOf<HTMLElement>;
+
+  items.forEach((item, index) => {
+    item.draggable = true;
+    item.style.cursor = 'move';
+
+    item.addEventListener('dragstart', (e) => {
+      e.dataTransfer!.effectAllowed = 'move';
+      e.dataTransfer!.setData('text/html', index.toString());
+      item.style.opacity = '0.5';
+    });
+
+    item.addEventListener('dragend', () => {
+      item.style.opacity = '1';
+    });
+
+    item.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer!.dropEffect = 'move';
+    });
+
+    item.addEventListener('drop', (e) => {
+      e.preventDefault();
+      const dragIndex = Number.parseInt(e.dataTransfer!.getData('text/html'));
+      const dropIndex = index;
+
+      if (dragIndex !== dropIndex) {
+        const movedItem = fileList.value.splice(dragIndex, 1)[0];
+        fileList.value.splice(dropIndex, 0, movedItem);
+        // 拖拽排序后更新modelValue
+        updateModelValue();
+      }
+    });
+  });
+};
+
+// 使用原有的uploadFile接口（与upload-image.vue保持一致）
+const customRequest = async (options: any) => {
+  const { file, onProgress, onSuccess, onError } = options;
+
+  // 创建上传中的文件项
+  const uploadingFile: FileItem = {
+    uid: file.uid,
+    name: file.name,
+    status: 'uploading',
+    url: '',
+  };
+
+  fileList.value = [...fileList.value, uploadingFile];
+
+  try {
+    // 使用原有的uploadFile接口
+    const res = await uploadFile({
+      file: file,
+    });
+
+    // 更新文件状态为完成
+    const updatedFileList = fileList.value.map(item =>
+      item.uid === file.uid
+        ? { ...item, status: 'done' as const, url: res.url }
+        : item
+    );
+
+    fileList.value = updatedFileList;
+    updateModelValue();
+
+    // 重新初始化排序
+    nextTick(() => {
+      initSortable();
+    });
+
+    onSuccess(res);
+  } catch (error) {
+    console.error('上传失败', error);
+    // 更新文件状态为错误
+    const updatedFileList = fileList.value.map(item =>
+      item.uid === file.uid
+        ? { ...item, status: 'error' as const }
+        : item
+    );
+
+    fileList.value = updatedFileList;
+    onError(error);
+  }
+};
+
+// 处理文件删除（与upload-image.vue保持一致）
+const handleRemove = (file: UploadFile) => {
+  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
+  updateModelValue();
+
+  // 重新初始化排序
+  nextTick(() => {
+    initSortable();
+  });
+};
+
+// 预览功能（与upload-image.vue保持一致）
+const previewVisible = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+const handlePreview = async (file: UploadFile) => {
+  previewImage.value = file.url || '';
+  previewVisible.value = true;
+  previewTitle.value = file.name || file.url?.split('/').pop() || '';
+};
+
+// 计算是否显示上传按钮（与upload-image.vue保持一致）
+const showUploadButton = computed(() =>
+  props.multiple
+    ? fileList.value.length < props.maxCount
+    : fileList.value.length === 0,
+);
+
+onMounted(() => {
+  nextTick(() => {
+    initSortable();
+  });
+});
+</script>
+
+<template>
+  <div ref="uploadListRef">
+    <Upload
+      :file-list="fileList"
+      :custom-request="customRequest"
+      :multiple="multiple"
+      :max-count="maxCount"
+      :show-upload-list="{
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+      }"
+      list-type="picture-card"
+      @remove="handleRemove"
+      @preview="handlePreview"
+      accept="image/*"
+    >
+      <div v-if="showUploadButton" class="upload-button">
+        <Icon icon="ant-design:plus-outlined" />
+        <div class="ant-upload-text">上传图片</div>
+      </div>
+    </Upload>
+
+    <Modal
+      v-model:visible="previewVisible"
+      :title="previewTitle"
+      footer=""
+      width="60%"
+    >
+
+    </Modal>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.upload-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: pointer;
+}
+
+:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
+  cursor: move;
+}
+</style>

apps/web-antd/src/components/form/components/upload-image.vue

@@ -1,112 +1,135 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-
-import { useVModel } from '@vueuse/core';
 import { Modal, Upload } from 'ant-design-vue';
+import type { UploadFile } from 'ant-design-vue';
 
+// 恢复使用原有的上传接口
 import { uploadFile } from '#/api/core/upload';
 import { Icon } from '#/components/icon';
 
-defineOptions({
-  name: 'UploadImage',
-  inheritAttrs: false,
+// 定义接口
+interface FileItem {
+  uid: string;
+  name: string;
+  status: 'uploading' | 'done' | 'error';
+  url: string;
+}
+
+// 定义props
+interface Props {
+  modelValue: string[];
+  multiple?: boolean;
+  maxCount?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  multiple: true,
+  maxCount: 9,
 });
 
-const props = defineProps({
-  modelValue: {
-    type: Array as () => string[],
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: true,
-  },
-  maxCount: {
-    type: Number,
-    default: 9,
-  },
-});
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
 
-const emits = defineEmits(['update:modelValue']);
+const fileList = ref<FileItem[]>([]);
 
-const mValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-});
-
-const fileList = ref(
-  props.modelValue.map((url) => ({
+// 初始化fileList
+const initFileList = () => {
+  fileList.value = props.modelValue.map((url) => ({
     uid: url,
     name: url.split('/').pop() || 'file',
-    status: 'done',
-    url,
-  })),
-);
-
-// 监听 modelValue 变化，同步到 fileList
-watch(props.modelValue, (newVal) => {
-  fileList.value = newVal.map((url) => ({
-    uid: url,
-    name: url.split('/').pop() || 'file',
-    status: 'done',
+    status: 'done' as const,
     url,
   }));
-});
+};
 
-// 监听 fileList 变化，同步到 modelValue
-watch(fileList, (newVal) => {
-  mValue.value = newVal
+// 初始化
+initFileList();
+
+// 监听外部modelValue变化，同步到fileList
+watch(() => props.modelValue, (newVal) => {
+  const currentUrls = fileList.value.filter(file => file.status === 'done').map(file => file.url);
+  if (JSON.stringify(newVal) !== JSON.stringify(currentUrls)) {
+    fileList.value = newVal.map((url) => ({
+      uid: url,
+      name: url.split('/').pop() || 'file',
+      status: 'done' as const,
+      url,
+    }));
+  }
+}, { deep: true });
+
+// 统一通过updateModelValue函数更新modelValue
+const updateModelValue = () => {
+  const urls = fileList.value
     .filter((file) => file.status === 'done' && file.url)
     .map((file) => file.url);
-});
+  emit('update:modelValue', urls);
+};
+
+// 使用原有的uploadFile接口
+const customRequest = async (options: any) => {
+  const { file, onProgress, onSuccess, onError } = options;
+
+  // 创建上传中的文件项
+  const uploadingFile: FileItem = {
+    uid: file.uid,
+    name: file.name,
+    status: 'uploading',
+    url: '',
+  };
+
+  fileList.value = [...fileList.value, uploadingFile];
 
-const customRequest = async (e: any) => {
   try {
+    // 使用原有的uploadFile接口
     const res = await uploadFile({
-      file: e.file,
+      file: file,
     });
 
-    // 更新 fileList
-    fileList.value = [
-      ...fileList.value.filter((file) => file.status !== 'uploading'),
-      {
-        uid: res.url,
-        name: e.file.name,
-        status: 'done',
-        url: res.url,
-      },
-    ];
+    // 更新文件状态为完成
+    const updatedFileList = fileList.value.map(item =>
+      item.uid === file.uid
+        ? { ...item, status: 'done' as const, url: res.url }
+        : item
+    );
 
-    // 更新 modelValue
-    mValue.value = fileList.value.map((file) => file.url);
-
-    // 触发上传完成回调
-    e.onSuccess?.(res);
+    fileList.value = updatedFileList;
+    updateModelValue();
+    onSuccess(res);
   } catch (error) {
     console.error('上传失败', error);
-    e.onError?.(error);
+    // 更新文件状态为错误
+    const updatedFileList = fileList.value.map(item =>
+      item.uid === file.uid
+        ? { ...item, status: 'error' as const }
+        : item
+    );
+
+    fileList.value = updatedFileList;
+    onError(error);
   }
 };
 
-const handleRemove = (file: any) => {
-  // 从 fileList 中移除
+// 处理文件删除
+const handleRemove = (file: UploadFile) => {
   fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
-
-  // 更新 modelValue
-  mValue.value = fileList.value.map((file) => file.url);
+  updateModelValue();
 };
 
+// 预览功能
 const previewVisible = ref(false);
 const previewImage = ref('');
 const previewTitle = ref('');
 
-const handlePreview = async (file) => {
-  previewImage.value = file.response.url || file.preview;
+const handlePreview = async (file: UploadFile) => {
+  previewImage.value = file.url || '';
   previewVisible.value = true;
-  previewTitle.value =
-    file.name || file.url.slice(Math.max(0, file.url.lastIndexOf('/') + 1));
+  previewTitle.value = file.name || file.url?.split('/').pop() || '';
 };
 
-// 计算是否还能上传更多图片
+// 计算是否显示上传按钮
 const showUploadButton = computed(() =>
   props.multiple
     ? fileList.value.length < props.maxCount
@@ -115,55 +138,40 @@ const showUploadButton = computed(() =>
 </script>
 
 <template>
-  <Upload
-    v-model:value="fileList"
-    :custom-request="customRequest"
-    :max-count="maxCount"
-    :multiple="multiple"
-    :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
-    list-type="picture-card"
-    @preview="handlePreview"
-    @remove="handleRemove"
-  >
-    <div v-if="showUploadButton" class="upload-button">
-      <Icon icon="ant-design:plus-outlined" />
-      <div class="ant-upload-text">上传图片{{ maxCount }}</div>
-    </div>
-  </Upload>
-  <Modal
-    v-model:visible="previewVisible"
-    :title="previewTitle"
-    footer=""
-    width="60%"
-  >
-    <img :src="previewImage" alt="example" style="width: 100%" />
-  </Modal>
+  <div>
+    <Upload
+      :file-list="fileList"
+      :custom-request="customRequest"
+      :multiple="multiple"
+      :max-count="maxCount"
+      :show-upload-list="{
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+      }"
+      list-type="picture-card"
+      @remove="handleRemove"
+      @preview="handlePreview"
+      accept="image/*"
+    >
+      <div v-if="showUploadButton" class="upload-button">
+        <!-- 恢复使用Icon组件 -->
+        <Icon icon="ant-design:plus-outlined" />
+        <div class="ant-upload-text">上传图片</div>
+      </div>
+    </Upload>
+
+    <Modal
+      v-model:visible="previewVisible"
+      :title="previewTitle"
+      footer=""
+      width="60%"
+    >
+      <img alt="预览图片" style="width: 100%" :src="previewImage" />
+    </Modal>
+  </div>
 </template>
 
 <style lang="less" scoped>
-.m-avatar-wrap {
-  position: relative;
-  height: 102px;
-  width: 102px;
-
-  .m-avatar-icon-delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border-radius: 0 0 0 4px;
-    padding: 2px 4px;
-  }
-
-  &:hover .m-avatar-icon-delete {
-    opacity: 1;
-  }
-}
-
 .upload-button {
   display: flex;
   flex-direction: column;

apps/web-antd/src/views/business/product/western-medicine/components/modal.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { useUserStore } from '@vben/stores';
+import {useVbenModal} from '@vben/common-ui';
+import {useUserStore} from '@vben/stores';
 
-import { message } from 'ant-design-vue';
+import {message} from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-
-import { createWesternMedicine, updateWesternMedicine } from '../api';
-import { modalFormProps } from '../config/form';
-import {getDrugUseList} from "#/views/doctor/doctor-reception/api";
+import {useVbenForm} from '#/adapter/form';
+import {getDrugUseList} from '#/views/doctor/doctor-reception/api';
 
+import {createWesternMedicine, getWesternMedicineInfo, updateWesternMedicine,} from '../api';
+import {modalFormProps} from '../config/form';
 
 const userStore = useUserStore();
 
@@ -52,7 +51,6 @@ const gridApi = ref();
 
 const [Form, formApi] = useVbenForm(modalFormProps);
 
-
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   draggable: true,
@@ -83,7 +81,6 @@ const [Modal, modalApi] = useVbenModal({
   onOpenChange(isOpen: boolean) {
     gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
     if (isOpen) {
-
       formApi.updateSchema([
         {
           componentProps: {
@@ -112,9 +109,41 @@ const [Modal, modalApi] = useVbenModal({
       ]);
       const { values, update } = modalApi.getData<Record<string, any>>();
       if (values) {
-        console.log(values, 'sssssssssssss')
         isUpdate.value = update;
-        formApi.setValues(values);
+
+        // 如果是编辑模式且有id，获取完整详情并写入表单
+        if (update && values.id) {
+          getWesternMedicineInfo(values.id)
+            .then((res: any) => {
+              if (res) {
+                // 确保introduction_images是数组格式
+                // if (
+                //   !detailData.introduction_images ||
+                //   !Array.isArray(detailData.introduction_images)
+                // ) {
+                //   detailData.introduction_images = [];
+                // }
+                // 使用详情数据覆盖表单，确保所有字段都是最新的
+                formApi.setValues({
+                  ...values,
+                  introduction_images: res.introduction_images,
+                });
+
+                console.log(formApi.getValues());
+              } else {
+                // 如果获取详情失败，使用传入的values
+                formApi.setValues(values);
+              }
+            })
+            .catch((error) => {
+              console.error('获取商品详情失败:', error);
+              // 获取失败时，使用传入的values
+              formApi.setValues(values);
+            });
+        } else {
+          // 新增模式，直接使用传入的values
+          formApi.setValues(values);
+        }
       }
     }
   },

apps/web-antd/src/views/business/product/western-medicine/config/form.ts

@@ -181,11 +181,11 @@ export const modalFormProps: VbenFormProps = {
         placeholder: '请选择',
         options: [
           {
-            label: '否',
+            label: '是',
             value: 0,
           },
           {
-            label: '是',
+            label: '否',
             value: 1,
           },
         ],
@@ -230,6 +230,16 @@ export const modalFormProps: VbenFormProps = {
       rules: 'required',
       formItemClass: 'col-span-6',
     },
+    {
+      component: 'UploadImageSortable',
+      fieldName: 'introduction_images',
+      label: '商品介绍图',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        maxCount: 20,
+        multiple: true,
+      },
+    },
   ],
   showDefaultActions: false,
 };

apps/web-antd/src/views/system/store/api/index.ts

@@ -67,3 +67,11 @@ export async function openQrCodeApi(id: number) {
     id,
   });
 }
+
+/**
+ * 更新门店包邮状态
+ * @param data
+ */
+export async function updateStoreShippingFree(data: { id: number }) {
+  return requestClient.post<any>(`${prefix}update-shipping-free`, data);
+}

apps/web-antd/src/views/system/store/config/form.ts

@@ -79,6 +79,34 @@ export const modalFormProps: VbenFormProps = {
       label: 'ERP ID',
       rules: 'required',
     },
+    {
+      component: 'Select',
+      formItemClass: 'col-span-6',
+      componentProps: {
+        options: [
+          { label: '诊所', value: 0 },
+          { label: '药店', value: 1 },
+        ],
+        placeholder: '请选择门店类型',
+      },
+      fieldName: 'type',
+      label: '门店类型',
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      formItemClass: 'col-span-6',
+      componentProps: {
+        options: [
+          { label: '不包邮', value: 0 },
+          { label: '包邮', value: 1 },
+        ],
+        placeholder: '是否包邮',
+      },
+      fieldName: 'is_shipping_free',
+      label: '是否包邮',
+      rules: 'required',
+    },
     {
       component: 'VbenInput',
       formItemClass: 'col-span-6',

apps/web-antd/src/views/system/store/config/search.ts

@@ -33,6 +33,19 @@ export const formOptions: VbenFormProps = {
       fieldName: 'mobile',
       label: '联系人手机号',
     },
+    {
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          { label: '诊所', value: 0 },
+          { label: '药店', value: 1 },
+        ],
+      },
+      defaultValue: undefined,
+      fieldName: 'type',
+      label: '类型',
+    },
     // {
     //   component: 'RangePicker',
     //   componentProps: {

apps/web-antd/src/views/system/store/config/table.ts

@@ -25,6 +25,20 @@ export const gridOptions: VxeGridProps<RowType> = {
     { type: 'checkbox', width: 60 },
     { field: 'id', align: 'left', title: 'ID', width: 100 },
     { field: 'name', align: 'left', title: '诊所名称' },
+    {
+      field: 'type',
+      align: 'left',
+      title: '类型',
+      slots: { default: 'type' },
+      width: 100,
+    },
+    {
+      field: 'is_shipping_free',
+      align: 'left',
+      title: '是否包邮',
+      slots: { default: 'is_shipping_free' },
+      width: 120,
+    },
     {
       field: 'qr_code',
       align: 'left',

apps/web-antd/src/views/system/store/index.vue

@@ -6,14 +6,19 @@ import { ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { useClipboard } from '@vueuse/core';
-import { Button, Image, message, Tag } from 'ant-design-vue';
+import { Button, Image, message, Switch, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { Icon } from '#/components/icon';
 import QrCodePreview from '#/components/modal/QrCodePreview.vue';
 import { TableAction } from '#/components/table-action';
 
-import { deleteStore, openPcWindowsApiByStore, openQrCodeApi } from './api';
+import {
+  deleteStore,
+  openPcWindowsApiByStore,
+  openQrCodeApi,
+  updateStoreShippingFree,
+} from './api';
 import FormModalDemo from './components/modal.vue';
 import { formOptions } from './config/search';
 import { gridOptions } from './config/table';
@@ -103,6 +108,16 @@ function copyText(source) {
   message.success('复制成功');
 }
 const { copy } = useClipboard({ legacy: true });
+
+/**
+ * 更新包邮状态
+ */
+const updateShippingFree = (id: number) => {
+  updateStoreShippingFree({ id }).then(() => {
+    message.success('修改成功!');
+    gridApi.query();
+  });
+};
 </script>
 
 <template>
@@ -169,6 +184,21 @@ const { copy } = useClipboard({ legacy: true });
           />
         </div>
       </template>
+      <template #type="{ row }">
+        <Tag :color="row.type === 1 ? 'blue' : 'green'">
+          {{ row.type === 1 ? '药店' : '诊所' }}
+        </Tag>
+      </template>
+      <template #is_shipping_free="{ row }">
+        <Switch
+          :checked="row.is_shipping_free"
+          :checked-value="1"
+          :un-checked-value="0"
+          checked-children="包邮"
+          un-checked-children="不包邮"
+          @click="updateShippingFree(row.id)"
+        />
+      </template>
       <template #start-time="{ row }">
         早：<Tag color="success">{{ row.start_time }}</Tag>
         <br />