src/components/zt/Modal/basic-modal.vue

@@ -44,15 +44,8 @@ export default defineComponent({
       subLoading.value = false;
       emit('close');
     }
-
-    function onCloseModal() {
-      isModal.value = false;
-      subLoading.value = false;
-      emit('close');
-    }
-
     function handleSubmit() {
-      subLoading.value = true;
+      // subLoading.value = true;
       emit('ok');
     }
     function setModalLoading(status: boolean) {
@@ -73,7 +66,6 @@ export default defineComponent({
       }
     });
     return {
-      onCloseModal,
       handleSubmit,
       getBindValue,
       isModal,
@@ -90,7 +82,7 @@ export default defineComponent({
     v-bind="getBindValue"
     v-model:show="isModal"
     :style="{ maxWidth: getBindValue.width + 'px' }"
-    @close="onCloseModal"
+    @close="closeModal"
   >
     <template #header>
       <div id="basic-modal-bar" class="w-full cursor-move">{{ getBindValue.title }}</div>

src/typings/components.d.ts

@@ -119,6 +119,7 @@ declare module 'vue' {
     NThead: typeof import('naive-ui')['NThead']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTr: typeof import('naive-ui')['NTr']
+    NTransfer: typeof import('naive-ui')['NTransfer']
     NTree: typeof import('naive-ui')['NTree']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     NUpload: typeof import('naive-ui')['NUpload']

src/views/delivery/after-sales-order/index.vue

@@ -74,18 +74,18 @@ const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedT
                   <NImage src={item.pic} class="h-[80px] min-w-80px w-[80px]" lazy />
                   <div class={'ml12px flex-1'}>
                     <div class={'w-full flex items-center justify-between'}>
-                      <div class={'w250px'}>
+                      <div class={'w200px'}>
                         <n-ellipsis class={'w250px'}>
                           <span class={'w-full text-left text-15px font-semibold'}>{item.skuName}</span>
                         </n-ellipsis>
                       </div>
-                      <div class={'w100px text-left'}>
+                      <div class={'w150px pl30px text-left'}>
                         <div class={'text-16px font-semibold'}>￥{item.skuPrice} </div>
                       </div>
                     </div>
                     <div class={'w-full flex items-center justify-between'}>
-                      <div class={'w250px text-gray'}>规格：{item.spec || '--'} </div>
-                      <div class={'w100px text-left text-gray'}>x{item.productCount} </div>
+                      <div class={'w200px text-gray'}>规格：{item.spec || '--'} </div>
+                      <div class={'w150px pl30px text-left text-gray'}>x{item.productCount} </div>
                     </div>
                   </div>
                 </div>
@@ -240,7 +240,6 @@ async function getNums() {
     }
     return item;
   });
-  console.log(updatedOrderStatusList, 'updatedOrderStatusList');
   statusList.value = updatedOrderStatusList;
 }
 getNums();

src/views/delivery/normal-order/component/delivery-modal.vue

@@ -98,7 +98,6 @@ async function handleOpenOrder(orderNumber: string) {
   }
 }
 async function handleSubmit() {
-  setSubLoading(false);
   await validate();
   setSubLoading(true);
   const form: Recordable = {

src/views/delivery/normal-order/index.vue

@@ -78,18 +78,18 @@ const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedT
                   <NImage src={item.pic} class="h-[80px] min-w-80px w-[80px]" lazy />
                   <div class={'ml12px flex-1'}>
                     <div class={'w-full flex items-center justify-between'}>
-                      <div class={'w250px'}>
-                        <n-ellipsis class={'w250px'}>
+                      <div class={'w200px'}>
+                        <n-ellipsis class={'w200px'}>
                           <span class={'w-full text-left text-15px font-semibold'}>{item.skuName}</span>
                         </n-ellipsis>
                       </div>
-                      <div class={'w100px text-left'}>
+                      <div class={'w150px pl30px text-left'}>
                         <div class={'text-16px font-semibold'}>￥{item.price} </div>
                       </div>
                     </div>
                     <div class={'w-full flex items-center justify-between'}>
-                      <div class={'w250px text-gray'}>规格： </div>
-                      <div class={'w100px text-left text-gray'}>x{item.prodCount} </div>
+                      <div class={'w200px text-gray'}>规格： </div>
+                      <div class={'w150px pl30px text-left text-gray'}>x{item.prodCount} </div>
                     </div>
                   </div>
                 </div>

src/views/goods/desk-category/components/related-goods-modal.vue

@@ -0,0 +1,36 @@
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { useModal } from '@/components/zt/Modal/hooks/useModal';
+const options = createOptions();
+const value = ref([]);
+const [registerModal, { openModal }] = useModal({
+  title: '关联商品',
+  width: 900,
+  isShowHeaderText: false,
+  height: 800
+});
+function createOptions() {
+  return Array.from({ length: 100 }).map((_v, i) => ({
+    label: `商品 ${i}`,
+    value: i
+  }));
+}
+defineExpose({
+  openModal
+});
+</script>
+
+<template>
+  <BasicModal @register="registerModal">
+    <NTransfer
+      v-model:value="value"
+      :options="options"
+      :show-selected="false"
+      source-filterable
+      target-filterable
+      class="h-750px"
+    />
+  </BasicModal>
+</template>
+
+<style scoped></style>

src/views/goods/desk-category/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { NButton, NImage } from 'naive-ui';
 import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
 import { fetchGetAllStoreList, fetchGetDeskCategoryList, fetchUpdateCategory } from '@/service/api/goods/desk-category';
@@ -7,9 +7,11 @@ import { fetchGetAllTagList } from '@/service/api/goods/tag';
 import { useAppStore } from '@/store/modules/app';
 import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';
 import { useForm } from '@/components/zt/Form/hooks/useForm';
+import RelatedGoodsModal from './components/related-goods-modal.vue';
 const appStore = useAppStore();
 const deskData = ref<Api.goods.ShopCategory[]>([]);
 const loading = ref(false);
+const relatedGoodsModalRef = useTemplateRef('relatedGoodsModalRef');
 const [registerSearchForm, { getFieldsValue: getSearchForm }] = useForm({
   schemas: [
     {
@@ -75,10 +77,15 @@ const tableColumns: NaiveUI.TableColumn<InternalRowData>[] = [
     render: row => (
       <div class="flex-center gap-8px">
         {row.level == 1 && (
-          <NButton type="primary" ghost size="small" onClick={() => edit(row)}>
+          <NButton type="primary" size="small" quaternary onClick={() => edit(row)}>
             编辑
           </NButton>
         )}
+        {row.level == 2 && (
+          <NButton type="primary" size="small" quaternary onClick={() => handleClick()}>
+            关联商品
+          </NButton>
+        )}
       </div>
     )
   }
@@ -177,6 +184,9 @@ async function handleSubmitForm() {
     getData();
   }
 }
+function handleClick() {
+  relatedGoodsModalRef.value?.openModal();
+}
 // function handleOpen() {
 //   importTemplateRef.value?.openModal();
 // }
@@ -271,6 +281,7 @@ function buildTree<T>(items: T[], options: BuildTreeOptions = {}): T[] {
     ></ZImportTemplate>
 -->
     <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmitForm"></BasicModelForm>
+    <RelatedGoodsModal ref="relatedGoodsModalRef"></RelatedGoodsModal>
   </LayoutTable>
 </template>
 

src/views/goods/store-goods/index.vue

@@ -293,7 +293,6 @@ function handleDelPrice(id: number) {
 }
 
 async function handleSubmitPrice() {
-  setSubModalLoding(false);
   if (!PriceData.value.length) {
     window.$message?.error('最少填写一条数据');
     return;