Browse Source

添加图标及添加订单

yangg 11 months ago
parent
commit
832af60b65

BIN
src/assets/images/icon.png


+ 1 - 1
src/components/TableLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="containers dark:!bg-[#060818] p-3 " v-loading="loading">
+  <div class="containers dark:!bg-[#060818]" v-loading="loading">
     <!-- 操作提示 -->
     <div class="tips-info dark:!bg-[#060818]" v-if="tips">
       <slot name="tips"></slot>

+ 3 - 3
src/components/TableSearch/index.vue

@@ -13,10 +13,10 @@
       </el-input>
     </div>
     <div v-if="advanced">
-      <el-popover ref="popover" placement="bottom-start" :width="advancedWidth" v-model:visible="popoverVisible">
-        <slot name="advanced-content"></slot>
+      <el-popover ref="popover" placement="bottom-start" trigger="click" :width="advancedWidth" v-model="popoverVisible">
+        <slot name="advanced-content" @click.stop></slot>
         <div style="text-align: right; margin: 0">
-          <el-popover placement="top" width="160" v-model:visible="visibleDelPopover">
+          <el-popover placement="top" width="160"  v-model="visibleDelPopover">
             <p>确定要清空表单吗?</p>
             <div style="text-align: right; margin: 0">
               <el-button size="small" link @click="visibleDelPopover = false">取消</el-button>

+ 28 - 0
src/components/layout/Header.vue

@@ -354,6 +354,34 @@
             </li> -->
           </ul>
         </li>
+        <li class="menu nav-item relative">
+          <a href="javascript:;" class="nav-link">
+            <div class="flex items-center">
+              <icon-menu-components class="shrink-0" />
+              <span class="px-2">{{ $t('order') }}</span>
+            </div>
+            <div class="right_arrow">
+              <icon-caret-down />
+            </div>
+          </a>
+          <ul class="sub-menu">
+            <li>
+              <router-link to="/order/orderList">{{ $t('order') }}</router-link>
+            </li>
+            <!-- <li>
+              <router-link to="/setting/roleManage">{{ $t('roleManage') }}</router-link>
+            </li>
+            <li>
+              <router-link to="/companyMent/branch">{{ $t('branch') }}</router-link>
+            </li>
+            <li>
+              <router-link to="/companyMent/configMsg">{{ $t('configMsg') }}</router-link>
+            </li>
+            <li>
+              <router-link to="/setting/systemLog">{{ $t('systemLog') }}</router-link>
+            </li> -->
+          </ul>
+        </li>
         <li class="menu nav-item relative">
           <a href="javascript:;" class="nav-link">
             <div class="flex items-center">

+ 60 - 56
src/layouts/app-layout.vue

@@ -63,13 +63,13 @@
         <!--  END TOP NAVBAR  -->
 
         <!--  BEGIN CONTENT AREA  -->
-        <div class="p-4 animation" :class="sidebarShow? 'ml-64':'ml-0'">
+        <div class="p-4 animation" :class="sidebarShow ? 'ml-64' : 'ml-0'">
           <!--侧边栏 -->
           <div :class="{ 'dark text-white-dark': store.state.semidark }">
             <!-- z-50 top-32-->
             <nav
-              class="sidebar  fixed min-h-screen h-full bottom-0 w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300"
-              :class="sidebarShow? '!left-0':''"
+              class="sidebar fixed min-h-screen h-full bottom-0 w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300"
+              :class="sidebarShow ? '!left-0' : ''"
               style="top: 120px"
             >
               <!-- mt-5 -->
@@ -201,22 +201,18 @@
                     <li class="menu nav-item">
                       <button
                         type="button"
-                        class="nav-link group w-full"
+                        class="nav-link group w-full !pl-0"
                         :class="{ active: activeDropdown === 'dashboard' }"
                         @click="activeDropdown === 'dashboard' ? (activeDropdown = null) : (activeDropdown = 'dashboard')"
                       >
                         <div class="flex items-center">
-                          <!-- <icon-menu-dashboard class="group-hover:!text-primary shrink-0" /> -->
-                          <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">
-                            {{ $t('warehouse') }}
+                          <i class="pg-icon w-5 h-5"></i>
+                          <span class="ltr:pl-2 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">
+                            {{ $t('selfBuilt') }}
                           </span>
                         </div>
-                        <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'dashboard' }">
-                          <icon-caret-down />
-                        </div>
                       </button>
-                      <vue-collapsible :isOpen="true"
-                        ><!-- -->
+                      <vue-collapsible :isOpen="true">
                         <ul class="sub-menu text-gray-500">
                           <li>
                             <router-link to="/stock/warehouseList" @click="toggleMobileMenu">{{ $t('warehouseList') }}</router-link>
@@ -248,34 +244,36 @@
                         </ul>
                       </vue-collapsible>
                     </li>
-                    <!--  <li class="menu nav-item">
+                    <div style="margin-left: -16px; border-bottom: 1px solid #ebebeb; width: 260px"></div>
+                    <li class="menu nav-item">
                       <button
                         type="button"
-                        class="nav-link group w-full"
-                        :class="{ active: activeDropdown === 'goods' }"
-                        @click="activeDropdown === 'goods' ? (activeDropdown = null) : (activeDropdown = 'goods')"
+                        class="nav-link group w-full !pl-0"
+                        :class="{ active: activeDropdown === 'overseas' }"
+                        @click="activeDropdown === 'overseas' ? (activeDropdown = null) : (activeDropdown = 'overseas')"
                       >
                         <div class="flex items-center">
-                          <icon-menu-users class="group-hover:!text-primary shrink-0" />
-
-                          <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('goods') }}</span>
+                          <i class="pg-icon w-5 h-5"></i>
+                          <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('overseasWarehouse') }}</span>
                         </div>
-                        <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'goods' }">
-                          <icon-caret-down />
+                        <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'overseas' }">
                         </div>
                       </button>
-                      <vue-collapsible :isOpen="activeDropdown === 'goods'">
+                      <vue-collapsible :isOpen="true">
                         <ul class="sub-menu text-gray-500">
                           <li>
-                            <router-link to="/goods/SKUlist" @click="toggleMobileMenu">{{ $t('SKUList') }}</router-link>
+                            <router-link to="/stock/overseasWarehouseAuth" @click="toggleMobileMenu">{{ $t('overseasWarehouseAuth') }}</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/stock/overseasList" @click="toggleMobileMenu">{{ $t('warehouseList') }}</router-link>
                           </li>
                         </ul>
                       </vue-collapsible>
-                      <vue-collapsible :isOpen="activeDropdown === 'goods'">
+                      <vue-collapsible :isOpen="activeDropdown === 'overseas'">
                         <ul class="sub-menu text-gray-500"></ul>
                       </vue-collapsible>
                     </li>
-                    <li class="menu nav-item">
+                    <!--  <li class="menu nav-item">
                       <button
                         type="button"
                         class="nav-link group w-full"
@@ -317,10 +315,10 @@
                   </ul>
                 </perfect-scrollbar>
               </div>
-              <span id="sidebarSwitch" title="Shortcut:S" :style="sidebarShow? '':'left:-12px;'">
-                <span class="w" @click="contract" :style="sidebarShow? '':'width:16px;'">
-                  <b class="caret caret-left"  v-if="sidebarShow"></b>
-                  <b class="caret caret-right"  v-else></b>
+              <span id="sidebarSwitch" title="Shortcut:S" :style="sidebarShow ? '' : 'left:-12px;'">
+                <span class="w" @click="contract" :style="sidebarShow ? '' : 'width:16px;'">
+                  <b class="caret caret-left" v-if="sidebarShow"></b>
+                  <b class="caret caret-right" v-else></b>
                 </span>
               </span>
             </nav>
@@ -403,41 +401,40 @@ const toggleSidebar = () => {
   store.dispatch('toggleSidebar');
 };
 
-const sidebarShow=ref(true)
+const sidebarShow = ref(true);
 /* 收缩 */
-const contract=()=>{
-    sidebarShow.value= !sidebarShow.value
-}
+const contract = () => {
+  sidebarShow.value = !sidebarShow.value;
+};
 /* 展开 */
-const expand=()=>{
-    sidebarShow.value=true
-}
-
+const expand = () => {
+  sidebarShow.value = true;
+};
 </script>
 <style>
 #sidebarSwitch {
-    position: fixed;
-    left: 245px;
-    top: 43%;
-    z-index: 5;
-    display: inline-block;
-    width: 30px;
-    height: 90px;
-    cursor: pointer;
-    text-align: center;
+  position: fixed;
+  left: 245px;
+  top: 43%;
+  z-index: 5;
+  display: inline-block;
+  width: 30px;
+  height: 90px;
+  cursor: pointer;
+  text-align: center;
 }
 #sidebarSwitch .w {
-    display: inline-block;
-    width: 8px;
-    text-align: center;
-    height: 40px;
-    background: #fff;
-    margin: 23px 0 0;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+  display: inline-block;
+  width: 10px;
+  text-align: center;
+  height: 40px;
+  background: #fff;
+  margin: 23px 0 0;
+  border: 1px solid #ddd;
+  border-radius: 5px;
 }
 #sidebarSwitch .w .caret {
-    margin: 17px 0 0;
+  margin: 17px 0 0;
 }
 .caret {
   display: inline-block;
@@ -454,6 +451,13 @@ const expand=()=>{
   transform: translate(1px, 0) rotate(45deg);
 }
 .caret-right {
-    transform: translate(-1px, 0) rotate(-135deg);
+  transform: translate(-1px, 0) rotate(-135deg);
+}
+.pg-icon {
+  background: url('../assets/images/icon.png') 0 0 no-repeat;
+  display: inline-block;
+}
+.sidebar ul.sub-menu li a::before{
+  height: 0 !important;
 }
 </style>

+ 7 - 0
src/locales/zh.json

@@ -10,6 +10,13 @@
     "goodsUnderstock":"调拨列表",
     "configMsg":"消息配置",
 
+    "selfBuilt":"自建仓",
+
+    "overseasWarehouse":"海外仓",
+    "overseasWarehouseAuth":"海外仓授权",
+    
+    "order":"订单",
+
     "setting":"系统管理",
     "companyList":"公司列表",
     "roleManage":"权限管理",

+ 12 - 0
src/router/index.ts

@@ -60,6 +60,8 @@ const asyncRouterMap: RouteRecordRaw[] = [
             { path: 'goodsInventoryLossAdd', component: () => import('@/views/stock/goodsInventoryLossAdd.vue'), name: 'goodsInventoryLossAdd', meta: { title: 'goodsInventoryLossAdd', layout: 'app' } },
             { path: 'goodsUnderstock', component: () => import('@/views/stock/goodsUnderstock.vue'), name: 'goodsUnderstock', meta: { title: 'goodsUnderstock', layout: 'app' } },
             { path: 'goodsUnderstockAdd', component: () => import('@/views/stock/goodsUnderstockAdd.vue'), name: 'goodsUnderstockAdd', meta: { title: 'goodsUnderstockAdd', layout: 'app' } },
+            { path: 'overseasWarehouseAuth', component: () => import('@/views/stock/overseasWarehouseAuth.vue'), name: 'overseasWarehouseAuth', meta: { title: 'overseasWarehouseAuth', layout: 'app' } },
+            { path: 'overseasList', component: () => import('@/views/stock/overseasList.vue'), name: 'overseasList', meta: { title: 'overseasList', layout: 'app' } },
         ]
     },
     {
@@ -125,6 +127,16 @@ const asyncRouterMap: RouteRecordRaw[] = [
             { path: 'companyInfo', component: () => import('@/views/companyMent/companyInfo.vue'), name: 'companyInfo', meta: { title: 'companyInfo', layout: 'app' } }, */
         ]
     },
+    {
+        path: '/order',
+        redirect: '/order',
+        name: 'order',
+        children: [
+            { path: 'orderList', component: () => import('@/views/order/orderList.vue'), name: 'orderList', meta: { title: 'orderList', layout: 'app' } },
+            /*  { path: 'branch', component: () => import('@/views/companyMent/branch.vue'), name: 'branch', meta: { title: 'branch', layout: 'app' } },
+            { path: 'companyInfo', component: () => import('@/views/companyMent/companyInfo.vue'), name: 'companyInfo', meta: { title: 'companyInfo', layout: 'app' } }, */
+        ]
+    },
 ];
 
 asyncRouterMap.forEach(route => {

+ 670 - 0
src/views/order/orderList.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="dark:!bg-[#060818] p-4 bg-white">
+    <div class="inner-toolbar w-11/12 mb-4">
+      <div class="toolbar-search">
+        <en-table-search
+          class="!justify-start"
+          @search="searchEvent"
+          @advancedSearch="advancedSearchEvent"
+          :placeholder="$t('search_placeholde')"
+          advanced
+          advancedWidth="465"
+        >
+          <template #advanced-content>
+            <el-form ref="searchFormRef" v-model="searchForm" label-width="90px">
+              <el-form-item label="仓库">
+                <el-cascader
+                  v-model="searchForm.dept_id"
+                  :options="warehouseList"
+                  :props="{
+                    label: 'name',
+                    value: 'id',
+                    emitPath: false,
+                    checkStrictly: true,
+                  }"
+                  clearable
+                ></el-cascader>
+              </el-form-item>
+              <el-form-item label="状态">
+                <el-select v-model="searchForm.status" clearable  @click.stop>
+                  <el-option key="NEW" label="新创建" value="NEW" />
+                  <el-option key="CONFIRMED" label="已确认" value="CONFIRMED" />
+                  <el-option key="RETURNED" label="已归还" value="RETURNED" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </template>
+        </en-table-search>
+      </div>
+      <div class="toolbar-btns mt-5">
+        <el-button size="small" v-if="checkPermission(['warehouse:add']) && store.state.user.user.founder !== 1" type="primary" @click="handleAddWarehouse">{{
+          $t('add')
+        }}</el-button>
+      </div>
+    </div>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="全部" name="first">
+        <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="name" :label="$t('订单编号')" />
+            <el-table-column prop="brand" :label="$t('客户')" />
+            <el-table-column prop="bar_code" :label="$t('下单时间')" />
+            <el-table-column prop="sku" :label="$t('仓库名称')" />
+            <el-table-column prop="weight" :label="$t('配送方式')" />
+            <el-table-column prop="unit" :label="$t('订单类型')" />
+            <el-table-column prop="image" :label="$t('状态')">
+              <template #default="scope">
+                <img :src="scope.row.image" alt="" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('operate')" fixed="right" width="450">
+              <template #default="scope">
+                <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+                <el-button
+                  type="success"
+                  size="small"
+                  v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
+                  @click="handleDelGoods(scope.row)"
+                  >{{ $t('delete') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.records && tableData.records.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="待处理" name="second">
+        <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="name" :label="$t('订单编号')" />
+            <el-table-column prop="brand" :label="$t('客户')" />
+            <el-table-column prop="bar_code" :label="$t('下单时间')" />
+            <el-table-column prop="sku" :label="$t('仓库名称')" />
+            <el-table-column prop="weight" :label="$t('配送方式')" />
+            <el-table-column prop="unit" :label="$t('订单类型')" />
+            <el-table-column prop="image" :label="$t('状态')">
+              <template #default="scope">
+                <img :src="scope.row.image" alt="" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('operate')" fixed="right" width="450">
+              <template #default="scope">
+                <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+                <el-button
+                  type="success"
+                  size="small"
+                  v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
+                  @click="handleDelGoods(scope.row)"
+                  >{{ $t('delete') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.records && tableData.records.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="未发货" name="third">
+        <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="name" :label="$t('订单编号')" />
+            <el-table-column prop="brand" :label="$t('客户')" />
+            <el-table-column prop="bar_code" :label="$t('下单时间')" />
+            <el-table-column prop="sku" :label="$t('仓库名称')" />
+            <el-table-column prop="weight" :label="$t('配送方式')" />
+            <el-table-column prop="unit" :label="$t('订单类型')" />
+            <el-table-column prop="image" :label="$t('状态')">
+              <template #default="scope">
+                <img :src="scope.row.image" alt="" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('operate')" fixed="right" width="450">
+              <template #default="scope">
+                <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+                <el-button
+                  type="success"
+                  size="small"
+                  v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
+                  @click="handleDelGoods(scope.row)"
+                  >{{ $t('delete') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.records && tableData.records.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="已发货" name="fourth">
+        <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="name" :label="$t('订单编号')" />
+            <el-table-column prop="brand" :label="$t('客户')" />
+            <el-table-column prop="bar_code" :label="$t('下单时间')" />
+            <el-table-column prop="sku" :label="$t('仓库名称')" />
+            <el-table-column prop="weight" :label="$t('配送方式')" />
+            <el-table-column prop="unit" :label="$t('订单类型')" />
+            <el-table-column prop="image" :label="$t('状态')">
+              <template #default="scope">
+                <img :src="scope.row.image" alt="" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('operate')" fixed="right" width="450">
+              <template #default="scope">
+                <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+                <el-button
+                  type="success"
+                  size="small"
+                  v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
+                  @click="handleDelGoods(scope.row)"
+                  >{{ $t('delete') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.records && tableData.records.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="已退款" name="refunded">
+        <en-table-layout :tableData="tableData.records" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="name" :label="$t('订单编号')" />
+            <el-table-column prop="brand" :label="$t('客户')" />
+            <el-table-column prop="bar_code" :label="$t('下单时间')" />
+            <el-table-column prop="sku" :label="$t('仓库名称')" />
+            <el-table-column prop="weight" :label="$t('配送方式')" />
+            <el-table-column prop="unit" :label="$t('订单类型')" />
+            <el-table-column prop="image" :label="$t('状态')">
+              <template #default="scope">
+                <img :src="scope.row.image" alt="" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('operate')" fixed="right" width="450">
+              <template #default="scope">
+                <el-button size="small" v-if="checkPermission(['warehouse:update'])" @click="handleView(scope.row)">{{ $t('view') }}</el-button>
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+                <el-button
+                  type="success"
+                  size="small"
+                  v-if="checkPermission(['removeAreaType:delete']) && store.state.user.user.founder !== 1"
+                  @click="handleDelGoods(scope.row)"
+                  >{{ $t('delete') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.records && tableData.records.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog
+      :title="skuForm.id ? $t('edit') : $t('add')"
+      v-model="dialogVisible"
+      @open="handleDialogOpen"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form :model="skuForm" :rules="stockRules" ref="skuFormRef" label-width="140px">
+        <el-row>
+          <!--<el-col :span="10" v-if="!skuForm.id">
+                <el-form-item label="套餐:" prop="company_package_id">
+                  <el-select v-model="skuForm.company_package_id" clearable placeholder="请选择套餐">
+                    <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </el-col> -->
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_name') + ':'" prop="name">
+              <el-input
+                v-model="skuForm.name"
+                :minlength="2"
+                :maxlength="20"
+                :disabled="disabled"
+                clearable
+                :placeholder="$t('place') + $t('goods_name')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_brand') + ':'" prop="brand">
+              <el-input
+                v-model="skuForm.brand"
+                :minlength="2"
+                :maxlength="20"
+                :disabled="disabled"
+                clearable
+                :placeholder="$t('place') + $t('goods_brand')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_bar_code') + ':'" prop="bar_code">
+              <el-input
+                v-model="skuForm.bar_code"
+                :minlength="2"
+                :maxlength="20"
+                :disabled="disabled"
+                clearable
+                :placeholder="$t('place') + $t('goods_bar_code')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="sku:" prop="sku">
+              <el-input v-model="skuForm.sku" :minlength="2" :maxlength="20" :disabled="disabled" clearable :placeholder="$t('place') + 'sku'"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_weight') + ':'" prop="weight">
+              <el-input
+                v-model="skuForm.weight"
+                :minlength="2"
+                :maxlength="20"
+                :disabled="disabled"
+                clearable
+                :placeholder="$t('place') + $t('goods_weight')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_unit') + ':'" prop="unit">
+              <el-input
+                v-model="skuForm.unit"
+                :minlength="2"
+                :maxlength="20"
+                :disabled="disabled"
+                clearable
+                :placeholder="$t('place') + $t('goods_unit')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item :label="$t('goods_image') + ':'" prop="image">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                :show-file-list="false"
+                :disabled="disabled"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+              >
+                <img v-if="skuForm.image" :src="skuForm.image" class="avatar w-28 h-28" />
+                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
+          <el-button type="primary" @click="submitWarehouseForm">{{ $t('submit') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- <el-dialog title="续费" v-model="renewVisible" :modal-append-to-body="false" width="450px" :close-on-click-modal="false" :close-on-press-escape="false">
+          <el-form :model="packageForm" :rules="stockRules" ref="packageFormRef" label-width="140px">
+            <el-form-item label="套餐:" prop="company_package_id">
+              <el-select v-model="packageForm.company_package_id" clearable placeholder="请选择套餐">
+                <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button @click="renewVisible = false">取 消</el-button>
+              <el-button type="primary" @click="submitPackageForm">确 定</el-button>
+            </div>
+          </template>
+        </el-dialog> -->
+  </div>
+</template>
+        
+        <script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { ElMessageBox, FormInstance, ElMessage, TabsPaneContext } from 'element-plus';
+import * as API_BasicSetting from '@/api/basicSetting';
+import * as API_Setting from '@/api/setting';
+import * as API_Company from '@/api/company';
+import * as API_Goods from '@/api/goods';
+import Storage from '@/utils/storage';
+import router from '@/router';
+import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
+import { Plus } from '@element-plus/icons-vue';
+import type { UploadProps } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  console.log(response, uploadFile);
+  skuForm.value.image = response.url; //URL.createObjectURL(uploadFile.raw!);
+};
+
+const uploadUrl = ref(import.meta.env.VITE_API_URL + '/uploaders');
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('Avatar picture size can not exceed 10MB!');
+    return false;
+  }
+  return true;
+};
+/* 仓库列表 */
+const warehouseList=ref([])
+/* 搜索表单 */
+const searchForm = ref({
+  dept_id: '',
+  status: '',
+});
+
+/* 切换分页 */
+const activeName = ref('first');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  if (tab.props.name == 'first') {
+    GET_GoodsList();
+  } else if (tab.props.name == 'second') {
+    GET_GoodsList();
+  } else if (tab.props.name == 'third') {
+    GET_GoodsList();
+  } else if (tab.props.name == 'fourth') {
+    GET_GoodsList();
+  } else if (tab.props.name == 'refunded') {
+    GET_GoodsList();
+  }
+};
+const store = useStore();
+const tableData = ref<any>({});
+const loading = ref(false);
+const dialogVisible = ref(false);
+const skuForm = ref<any>({
+  name: '',
+  brand: '',
+  snCode: '',
+  bar_code: '',
+  sku: '',
+  weight: '',
+  image: '',
+  unit: '',
+});
+const stockRules = ref<any>({
+  name: [{ required: true, message: t('place') + t('goods_name') + '!', trigger: 'blur' }],
+  brand: [{ required: true, message: t('place') + t('goods_brand') + '!', trigger: 'blur' }],
+  snCode: [{ required: true, message: '请输入商品序列号!', trigger: 'blur' }],
+  bar_code: [{ required: true, message: t('place') + t('goods_bar_code') + '!', trigger: 'blur' }],
+  sku: [{ required: true, message: t('place') + 'sku!', trigger: 'blur' }],
+  weight: [{ required: true, message: t('place') + t('goods_weight') + '!', trigger: 'blur' }],
+  postal_code: [{ required: true, message: t('place') + t('goods_unit') + '!', trigger: 'blur' }],
+  image: [{ required: true, message: t('place') + t('goods_image') + '!', trigger: 'blur' }],
+});
+const selectedOptions = ref<any[]>([]);
+const marketingList = ref<any[]>([]);
+const options = ref<any[]>(regionData);
+const params = ref({
+  data: [],
+  page_no: 1,
+  page_size: 10,
+  keyword: '',
+  company_id: store.state.companId,
+});
+const roleArray = ref<any[]>([]);
+const disabled = ref(false);
+
+const renewVisible = ref(false);
+/* 套餐 */
+const packageForm = ref<any>({
+  company_package_id: '',
+  this_money: '',
+});
+let packageId = ref('');
+let companyId = ref('');
+const packageFormRef = ref();
+
+const handleBranch = (index: number, row: any) => {
+  router.push({ name: 'branch' });
+};
+
+/* 续费 */
+const handleRenew = (index: number, row: any) => {
+  packageForm.value.company_package_id = row.company_package_id;
+  companyId.value = row.id;
+  packageId.value = row.company_package_id;
+  API_Company.companyPackage(row.company_package_id).then((res) => {
+    packageForm.value.this_money = res.money;
+    renewVisible.value = true;
+  });
+};
+const skuFormRef = ref();
+const checkPermission = (permissions: string[]): boolean => {
+  // Implement your permission check logic here
+  return true;
+};
+
+const handleAddWarehouse = () => {
+  selectedOptions.value = [];
+  skuForm.value = {};
+  disabled.value = false;
+  dialogVisible.value = true;
+};
+
+const handleEditWarehouse = (index: number, row: any) => {
+  skuForm.value = { ...row };
+  disabled.value = false;
+  selectedOptions.value = row.province;
+  dialogVisible.value = true;
+};
+
+const searchEvent = (keyword: string) => {
+  params.value = {
+    ...params.value,
+    keyword: keyword,
+  };
+  params.value.page_no = 1;
+  GET_GoodsList();
+};
+
+const handlePageSizeChange = (size: number) => {
+  params.value.page_size = size;
+  GET_GoodsList();
+};
+
+const handlePageCurrentChange = (page: number) => {
+  params.value.page_no = page;
+  GET_GoodsList();
+};
+
+const handleDialogOpen = () => {
+  setTimeout(() => {
+    skuFormRef.value.clearValidate();
+  });
+};
+
+const submitWarehouseForm = () => {
+  skuFormRef.value.validate((valid: boolean) => {
+    if (valid) {
+      const { id } = skuForm.value;
+      const params = { ...skuForm.value };
+      if (id) {
+        API_Goods.editProduct(id, params).then(() => {
+          dialogVisible.value = false;
+          ElMessage.success(t('edit_success') + '!');
+          GET_GoodsList();
+        });
+      } else {
+        API_Goods.addProduct(params).then(() => {
+          dialogVisible.value = false;
+          ElMessage.success(t('add_success') + '!');
+          GET_GoodsList();
+        });
+      }
+    } else {
+      ElMessage.error(t('form_erroe') + '!');
+      /*    store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
+      return false;
+    }
+  });
+};
+
+const GET_GoodsList = () => {
+  /*  loading.value = true;
+   API_Goods.productList(params.value)
+    .then((response) => {
+      loading.value = false;
+      tableData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    }); */
+};
+
+/* 删除 */
+const handleDelGoods = (row) => {
+  ElMessageBox.confirm(t('del_info'), t('prompt'), { type: 'warning' })
+    .then(() => {
+      API_Goods.delProduct(row.id).then(() => {
+        ElMessage.success(t('del_success') + '!');
+        GET_GoodsList();
+      });
+    })
+    .catch(() => {});
+};
+const adminName = (val: string[]) => {
+  let text = '';
+  if (val !== undefined) {
+    text += codeToText[val[0]];
+    text += codeToText[val[1]];
+    text += codeToText[val[2]];
+  }
+  return text;
+};
+
+/* 切换菜单 */
+
+const handleView = (row) => {
+  skuForm.value = { ...row };
+  disabled.value = true;
+  dialogVisible.value = true;
+};
+/* 高级搜索 */
+const advancedSearchEvent = () => {
+  GET_GoodsList();
+};
+onMounted(() => {
+  GET_GoodsList();
+  /*  GET_MarketingList();
+    GET_PackageList(); */
+});
+</script>
+    <style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 112px;
+  height: 112px;
+  text-align: center;
+}
+</style>
+    

+ 399 - 0
src/views/stock/overseasList.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="p-4 bg-white">
+    <en-table-layout :tableData="tableData.data" :loading="loading" @selection-change="handleSelectionChange">
+      <template #toolbar>
+        <div class="inner-toolbar w-11/12 flex justify-between">
+          <!-- <div class="toolbar-btns">
+            <el-button size="small" v-if="store.state.user.user.founder !== 1" type="primary" @click="handleAddGoodsLend">{{ $t('add') }}</el-button>
+          </div> -->
+          <div class="toolbar-search dark:!bg-[#060818]">
+            <en-table-search @search="searchEvent" :placeholder="$t('place')">
+            </en-table-search>
+          </div>
+        </div>
+      </template>
+
+      <template #table-columns>
+        <el-table-column type="selection" width="55" />
+        <el-table-column class="dark:!bg-[#060818]" prop="warehouse.name" :label="$t('warechouse_name')"></el-table-column>
+        <el-table-column prop="warehouse.sn" :label="$t('warechouse_sn')"></el-table-column>
+        <el-table-column prop="code" :label="$t('warechouse_code')" />
+        <el-table-column prop="type" :label="$t('warechouse_area')">
+          <template #default="scope">{{ statusFilter(scope.row.type) }}</template>
+        </el-table-column>
+        <el-table-column prop="bind_num" label="货品数" />
+        <el-table-column prop="warehouse.sn" label="次品数"></el-table-column>
+        <el-table-column prop="code" label="物流渠道" />
+        <el-table-column prop="type" label="仓库匹配">
+          <template #default="scope">{{ statusFilter(scope.row.type) }}</template>
+        </el-table-column>
+        <el-table-column prop="bind_num" :label="$t('warechouse_sku')" />
+        <el-table-column :label="$t('operate')" fixed="right" width="300">
+          <template #default="scope">
+            <el-button size="small" v-if="store.state.user.user.founder !== 1" @click="handleEditGoodsLend(scope.row)">{{ $t('edit') }}</el-button>
+            <el-button
+              type="success"
+              size="small"
+              style="margin-top: 5px"
+              v-if="store.state.user.user.founder !== 1"
+              @click="handleReturnGoodsLend(scope.row)"
+              >{{ $t('delete') }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </template>
+
+      <template #pagination>
+        <el-pagination
+          v-if="tableData"
+          @size-change="handlePageSizeChange"
+          @current-change="handlePageCurrentChange"
+          :current-page="tableData.page_no"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="tableData.page_size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.data_total"
+        >
+        </el-pagination>
+      </template>
+    </en-table-layout>
+
+    <el-dialog :title="$t('print')" v-model="dialogVisible" width="940px" center @close="handleCancle">
+      <el-button size="small" type="primary" @click="handlePrintGoodsLend" class="print">{{ $t('print') }}</el-button>
+      <div id="deliverySheet" style="width: 900px">
+        <div class="tips-t" v-for="(item, index) in codeList" :key="index">
+          <div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog :title="title" v-model="dialogVisibleForm" width="940px" center @close="addHandleCancle" style="width: 30%; border-radius: 10px">
+      <el-form :model="addLendForm" ref="addLendFormRef" :rules="rules" label-width="90px">
+        <el-form-item :label="$t('warechouse')" prop="warehouse_id">
+          <el-select v-model="addLendForm.warehouse_id" clearable @change="selWarehouse">
+            <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('warechouse_area')" prop="type">
+          <el-select v-model="addLendForm.type" clearable @change="selAreaTableData">
+            <el-option v-for="item in AreaTableData" :key="item.id" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('warechouse_code')" prop="code">
+          <el-input v-model="addLendForm.code" maxlength="12" :placeholder="$t('place') + $t('warechouse_code')" style="width: 270px">
+            <template #prepend>{{ warehouseSn }}-{{ AreaTab }}</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('location_notes')">
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="$t('place') + $t('location_notes')" v-model="addLendForm.intro">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addHandleCancle">{{ $t('cancel') }}</el-button>
+        <el-button type="primary" @click="lendCommit">{{ $t('submit') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+import * as API_GoodsLend from '@/api/goodsLend';
+import Print from 'print-js';
+import * as API_Setting from '@/api/setting';
+import { useRouter, useRoute } from 'vue-router';
+import QRCode from 'qrcode';
+/* import EnTableLayout from '@/components/TableLayout/index.vue';
+import EnTableSearch from '@/components/TableSearch/index.vue'; */
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const store = useStore();
+
+const router = useRouter();
+const route = useRoute();
+
+const warehouseSn = ref('');
+const warehouseList = ref<any>([]);
+const loading = ref(false);
+const params = reactive<any>({
+  page_no: 1,
+  page_size: 10,
+  company_id: store.state.companId,
+});
+const advancedForm = ref<any>({});
+const tableData = ref<any>({});
+const dialogVisible = ref(false);
+const multipleSelection = ref([]);
+const goodsLendForm = ref<any>({});
+const codeList = ref<any>([]);
+const title = ref('');
+const dialogVisibleForm = ref(false);
+let addLendForm = ref<any>({
+  warehouse_id: '',
+  type: '',
+  code: '',
+  intro: '',
+  status:"",
+  goodsLend_time_range:[]
+});
+
+const rules =ref<any>({
+  warehouse_id: [{ required: true, message: t('change') + t('warechouse_code'), trigger: 'change' }],
+  name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入库位号', trigger: 'blur' }],
+  type: [{ required: true, message: t('change') + t('warechouse_area'), trigger: 'change' }],
+});
+const typeList = ref<any>([]);
+const AreaTableData = ref<any>([]);
+const AreaTab = ref('');
+
+const GET_GoodsLendList = () => {
+  loading.value = true;
+  API_GoodsLend.query(params)
+    .then((response) => {
+      loading.value = false;
+      tableData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+onMounted(() => {
+  GET_GoodsLendList();
+  GET_DeptList();
+});
+
+watch(
+  route,
+  (newVal) => {
+    if (newVal.query.status) {
+      params.status = newVal.query.status;
+      advancedForm.value.status = newVal.query.status;
+    }
+    params.page_no = 1;
+    GET_GoodsLendList();
+  },
+  { immediate: true }
+);
+
+const introGoodsLend = (row) => {
+  router.push({
+    name: 'inventoryItem',
+    params: { id: row.id, type: 'check', code: row.code },
+  });
+};
+
+const AddGoodsLend = (row) => {
+  router.push({
+    name: 'bindAreaStock',
+    params: { id: row.id, warehouse_id: row.warehouse_id, code: row.code },
+  });
+};
+
+const gowareHouse = () => {
+  dialogVisibleForm.value = false;
+  router.push({ name: 'warehouseList' });
+};
+
+const selWarehouse = (val) => {
+  const list = warehouseList.value.filter((el) => el.id === val);
+  let obj = list[0];
+  warehouseSn.value = obj.sn;
+};
+
+const selAreaTableData = (val) => {
+  const list = AreaTableData.value.filter((el) => el.code === val);
+  let obj = list[0];
+  AreaTab.value = obj.code;
+};
+const addLendFormRef = ref();
+const lendCommit = () => {
+  addLendForm.value.code = warehouseSn.value + '-' + addLendForm.value.type + '-' + addLendForm.value.code;
+  addLendFormRef.value.validate((valid) => {
+    if (valid) {
+      if (!id.value) {
+        API_GoodsLend.create(addLendForm.value).then(() => {
+          ElMessage.success(t('add_success'));
+          dialogVisibleForm.value = false;
+          warehouseSn.value = '';
+          addLendForm.value = {};
+          GET_GoodsLendList();
+        });
+      } else {
+        API_GoodsLend.update(addLendForm.value).then(() => {
+          ElMessage.success(t('edit_success'));
+          dialogVisibleForm.value = false;
+          addLendForm.value = {};
+          GET_GoodsLendList();
+        });
+      }
+    } else {
+      ElMessage.error(t('form_erroe'));
+      return false;
+    }
+  });
+};
+
+const addHandleCancle = () => {
+  dialogVisibleForm.value = false;
+};
+
+const handleCancle = () => {
+  dialogVisible.value = false;
+  codeList.value = [];
+};
+
+/* const creatQrCode = () => {
+  nextTick(() => {
+    codeList.value.forEach((item, index) => {
+      document.getElementById(`codeItem${index}`).innerHTML = '';
+      new QRCode(document.getElementById(`codeItem${index}`), {
+        text: item,
+        width: 600,
+        height: 660,
+        render: 'table',
+        colorDark: '#333333',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    });
+  });
+}; */
+
+const id = ref('');
+const handleEditGoodsLend = (row) => {
+  id.value = row.id;
+  title.value = t('edit');
+  const str = row.code;
+  warehouseSn.value = str.split('-')[0];
+  AreaTab.value = str.split('-')[1];
+  // 使用 Object.assign 或者手动赋值来更新 reactive 对象的属性
+  /* Object.assign(addLendForm, row); */
+  addLendForm.value = row;
+  addLendForm.value.code = str.split('-').pop();
+
+  dialogVisibleForm.value = true;
+};
+
+const handleReturnGoodsLend = (row) => {
+  ElMessageBox.confirm(t('del_info'), t('prompt'), { type: 'warning' })
+    .then(() => {
+      API_GoodsLend.deletes({ id: row.id }).then(() => {
+        ElMessage.success(t('del_success'));
+        GET_GoodsLendList();
+      });
+    })
+    .catch(() => {});
+};
+
+const statusFilter = (val) => {
+  const obj = AreaTableData.value.filter((el) => el.code === val);
+  return obj.length !== 0 ? obj[0].name : '';
+};
+
+const handleConfirmGoodsLend = () => {
+  if (!multipleSelection.value.length) return ElMessage.error('请先选择!');
+  const ids = multipleSelection.value.map((item:any) => item.code);
+  codeList.value = ids;
+  dialogVisible.value = true;
+ /*  creatQrCode(); */
+};
+
+const GET_DeptList = () => {
+  API_Setting.getListAll().then((response) => {
+    warehouseList.value = response;
+  });
+  API_Setting.getPage({
+    dictType: 'Warehouse_location_type',
+    page_no: 1,
+    page_size: 50,
+  }).then((res) => {
+    typeList.value = res.data;
+  });
+  API_GoodsLend.getListAreaType({ page_no: 1, page_size: 100, company_id: store.state.companId })
+    .then((response) => {
+      loading.value = false;
+      AreaTableData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+const handlePrintGoodsLend = () => {
+  Print({
+    printable: 'deliverySheet',
+    type: 'html',
+    targetStyles: ['*'],
+    ignoreElements: ['no-logs', 'goods-image', 'no-btn', 'elementToIgnore'],
+  });
+};
+
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+const handlePageSizeChange = (size) => {
+  params.page_size = size;
+  GET_GoodsLendList();
+};
+
+const handlePageCurrentChange = (page) => {
+  params.page_no = page;
+  GET_GoodsLendList();
+};
+
+const handleAddGoodsLend = () => {
+  id.value = '';
+  title.value = t('add');
+  addLendForm.value = {
+ };
+  warehouseSn.value = '';
+  AreaTab.value = '';
+  dialogVisibleForm.value = true;
+};
+
+const handlePrintGoodsLendDialog = (row) => {
+  dialogVisible.value = true;
+  codeList.value.push(row.code);
+ /*  creatQrCode(); */
+};
+
+/* const GET_GoodsLendDetail = (id) => {
+  API_GoodsLend.getGoodsLendInfo(id).then((response) => {
+    goodsLendForm.value = response;
+    if (response.product_list && response.product_list.length) {
+      var str = '';
+      response.product_list.forEach(function (i) {
+        str += i.product_name + '、';
+      });
+    }
+    goodsLendForm.value.illustrate = str;
+  });
+}; */
+
+const searchEvent = (data) => {
+  params.sn = data;
+  Object.keys(advancedForm).forEach((key) => delete params[key]);
+  params.page_no = 1;
+  GET_GoodsLendList();
+};
+
+const advancedSearchEvent = () => {
+  Object.assign(params, advancedForm);
+  /* delete params.start_time;
+  delete params.end_time;
+  if (advancedForm.value.goodsLend_time_range) {
+    params.start_time = parseInt(Number(advancedForm.value.goodsLend_time_range[0]) / 1000);
+    params.end_time = parseInt(Number(advancedForm.value.goodsLend_time_range[1]) / 1000);
+  }
+  delete params.goodsLend_time_range; */
+  params.page_no = 1;
+  GET_GoodsLendList();
+};
+</script>

+ 383 - 0
src/views/stock/overseasWarehouseAuth.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="p-3 bg-white">
+    <!-- <template #toolbar> -->
+    <div class="inner-toolbar w-11/12">
+      <div class="toolbar-search dark:!bg-[#060818]">
+        <en-table-search class="!justify-start" @search="searchEvent" :placeholder="$t('place')"> </en-table-search>
+      </div>
+      <div class="toolbar-btns mt-5 mb-4">
+        <el-button size="small" v-if="store.state.user.user.founder !== 1" type="primary" @click="handleAddGoodsLend">{{ $t('overseasWarehouseAuth') }}</el-button>
+      </div>
+    </div>
+    <!--  </template> -->
+    <en-table-layout :tableData="tableData.data" :toolbar="false" :loading="loading" @selection-change="handleSelectionChange">
+      <template #table-columns>
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="warehouse.sn" :label="$t('warechouse_sn')"></el-table-column>
+        <el-table-column class="dark:!bg-[#060818]" prop="warehouse.name" :label="$t('warechouse_name')"></el-table-column>
+        <el-table-column prop="code" :label="$t('warechouse_code')" />
+        <el-table-column prop="type" :label="$t('warechouse_area')">
+          <template #default="scope">{{ statusFilter(scope.row.type) }}</template>
+        </el-table-column>
+        <el-table-column prop="bind_num" :label="$t('warechouse_sku')" />
+        <el-table-column :label="$t('operate')" fixed="right" width="300">
+          <template #default="scope">
+            <el-button size="small" v-if="store.state.user.user.founder !== 1" @click="handleEditGoodsLend(scope.row)">{{ $t('edit') }}</el-button>
+            <el-button
+              type="success"
+              size="small"
+              style="margin-top: 5px"
+              v-if="store.state.user.user.founder !== 1"
+              @click="handleReturnGoodsLend(scope.row)"
+              >{{ $t('delete') }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </template>
+
+      <template #pagination>
+        <el-pagination
+          v-if="tableData"
+          @size-change="handlePageSizeChange"
+          @current-change="handlePageCurrentChange"
+          :current-page="tableData.page_no"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="tableData.page_size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.data_total"
+        >
+        </el-pagination>
+      </template>
+    </en-table-layout>
+
+    <el-dialog :title="$t('print')" v-model="dialogVisible" width="940px" center @close="handleCancle">
+      <el-button size="small" type="primary" @click="handlePrintGoodsLend" class="print">{{ $t('print') }}</el-button>
+      <div id="deliverySheet" style="width: 900px">
+        <div class="tips-t" v-for="(item, index) in codeList" :key="index">
+          <div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog :title="title" v-model="dialogVisibleForm" width="940px" center @close="addHandleCancle" style="width: 30%; border-radius: 10px">
+      <el-form :model="addLendForm" ref="addLendFormRef" :rules="rules" label-width="90px">
+        <el-form-item :label="$t('warechouse')" prop="warehouse_id">
+          <el-select v-model="addLendForm.warehouse_id" clearable @change="selWarehouse">
+            <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('warechouse_area')" prop="type">
+          <el-select v-model="addLendForm.type" clearable @change="selAreaTableData">
+            <el-option v-for="item in AreaTableData" :key="item.id" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('warechouse_code')" prop="code">
+          <el-input v-model="addLendForm.code" maxlength="12" :placeholder="$t('place') + $t('warechouse_code')" style="width: 270px">
+            <template #prepend>{{ warehouseSn }}-{{ AreaTab }}</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('location_notes')">
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="$t('place') + $t('location_notes')" v-model="addLendForm.intro">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addHandleCancle">{{ $t('cancel') }}</el-button>
+        <el-button type="primary" @click="lendCommit">{{ $t('submit') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script lang="ts" setup>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+import * as API_GoodsLend from '@/api/goodsLend';
+import Print from 'print-js';
+import * as API_Setting from '@/api/setting';
+import { useRouter, useRoute } from 'vue-router';
+import QRCode from 'qrcode';
+/* import EnTableLayout from '@/components/TableLayout/index.vue';
+  import EnTableSearch from '@/components/TableSearch/index.vue'; */
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const store = useStore();
+
+const router = useRouter();
+const route = useRoute();
+
+const warehouseSn = ref('');
+const warehouseList = ref<any>([]);
+const loading = ref(false);
+const params = reactive<any>({
+  page_no: 1,
+  page_size: 10,
+  company_id: store.state.companId,
+});
+const advancedForm = ref<any>({});
+const tableData = ref<any>({});
+const dialogVisible = ref(false);
+const multipleSelection = ref([]);
+const goodsLendForm = ref<any>({});
+const codeList = ref<any>([]);
+const title = ref('');
+const dialogVisibleForm = ref(false);
+let addLendForm = ref<any>({
+  warehouse_id: '',
+  type: '',
+  code: '',
+  intro: '',
+  status: '',
+  goodsLend_time_range: [],
+});
+
+const rules = ref<any>({
+  warehouse_id: [{ required: true, message: t('change') + t('warechouse_code'), trigger: 'change' }],
+  name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入库位号', trigger: 'blur' }],
+  type: [{ required: true, message: t('change') + t('warechouse_area'), trigger: 'change' }],
+});
+const typeList = ref<any>([]);
+const AreaTableData = ref<any>([]);
+const AreaTab = ref('');
+
+const GET_GoodsLendList = () => {
+  loading.value = true;
+  API_GoodsLend.query(params)
+    .then((response) => {
+      loading.value = false;
+      tableData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+onMounted(() => {
+  GET_GoodsLendList();
+  GET_DeptList();
+});
+
+watch(
+  route,
+  (newVal) => {
+    if (newVal.query.status) {
+      params.status = newVal.query.status;
+      advancedForm.value.status = newVal.query.status;
+    }
+    params.page_no = 1;
+    GET_GoodsLendList();
+  },
+  { immediate: true }
+);
+
+const introGoodsLend = (row) => {
+  router.push({
+    name: 'inventoryItem',
+    params: { id: row.id, type: 'check', code: row.code },
+  });
+};
+
+const AddGoodsLend = (row) => {
+  router.push({
+    name: 'bindAreaStock',
+    params: { id: row.id, warehouse_id: row.warehouse_id, code: row.code },
+  });
+};
+
+const gowareHouse = () => {
+  dialogVisibleForm.value = false;
+  router.push({ name: 'warehouseList' });
+};
+
+const selWarehouse = (val) => {
+  const list = warehouseList.value.filter((el) => el.id === val);
+  let obj = list[0];
+  warehouseSn.value = obj.sn;
+};
+
+const selAreaTableData = (val) => {
+  const list = AreaTableData.value.filter((el) => el.code === val);
+  let obj = list[0];
+  AreaTab.value = obj.code;
+};
+const addLendFormRef = ref();
+const lendCommit = () => {
+  addLendForm.value.code = warehouseSn.value + '-' + addLendForm.value.type + '-' + addLendForm.value.code;
+  addLendFormRef.value.validate((valid) => {
+    if (valid) {
+      if (!id.value) {
+        API_GoodsLend.create(addLendForm.value).then(() => {
+          ElMessage.success(t('add_success'));
+          dialogVisibleForm.value = false;
+          warehouseSn.value = '';
+          addLendForm.value = {};
+          GET_GoodsLendList();
+        });
+      } else {
+        API_GoodsLend.update(addLendForm.value).then(() => {
+          ElMessage.success(t('edit_success'));
+          dialogVisibleForm.value = false;
+          addLendForm.value = {};
+          GET_GoodsLendList();
+        });
+      }
+    } else {
+      ElMessage.error(t('form_erroe'));
+      return false;
+    }
+  });
+};
+
+const addHandleCancle = () => {
+  dialogVisibleForm.value = false;
+};
+
+const handleCancle = () => {
+  dialogVisible.value = false;
+  codeList.value = [];
+};
+
+/* const creatQrCode = () => {
+    nextTick(() => {
+      codeList.value.forEach((item, index) => {
+        document.getElementById(`codeItem${index}`).innerHTML = '';
+        new QRCode(document.getElementById(`codeItem${index}`), {
+          text: item,
+          width: 600,
+          height: 660,
+          render: 'table',
+          colorDark: '#333333',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H,
+        });
+      });
+    });
+  }; */
+
+const id = ref('');
+const handleEditGoodsLend = (row) => {
+  id.value = row.id;
+  title.value = t('edit');
+  const str = row.code;
+  warehouseSn.value = str.split('-')[0];
+  AreaTab.value = str.split('-')[1];
+  // 使用 Object.assign 或者手动赋值来更新 reactive 对象的属性
+  /* Object.assign(addLendForm, row); */
+  addLendForm.value = row;
+  addLendForm.value.code = str.split('-').pop();
+
+  dialogVisibleForm.value = true;
+};
+
+const handleReturnGoodsLend = (row) => {
+  ElMessageBox.confirm(t('del_info'), t('prompt'), { type: 'warning' })
+    .then(() => {
+      API_GoodsLend.deletes({ id: row.id }).then(() => {
+        ElMessage.success(t('del_success'));
+        GET_GoodsLendList();
+      });
+    })
+    .catch(() => {});
+};
+
+const statusFilter = (val) => {
+  const obj = AreaTableData.value.filter((el) => el.code === val);
+  return obj.length !== 0 ? obj[0].name : '';
+};
+
+const handleConfirmGoodsLend = () => {
+  if (!multipleSelection.value.length) return ElMessage.error('请先选择!');
+  const ids = multipleSelection.value.map((item: any) => item.code);
+  codeList.value = ids;
+  dialogVisible.value = true;
+  /*  creatQrCode(); */
+};
+
+const GET_DeptList = () => {
+  API_Setting.getListAll().then((response) => {
+    warehouseList.value = response;
+  });
+  API_Setting.getPage({
+    dictType: 'Warehouse_location_type',
+    page_no: 1,
+    page_size: 50,
+  }).then((res) => {
+    typeList.value = res.data;
+  });
+  API_GoodsLend.getListAreaType({ page_no: 1, page_size: 100, company_id: store.state.companId })
+    .then((response) => {
+      loading.value = false;
+      AreaTableData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+const handlePrintGoodsLend = () => {
+  Print({
+    printable: 'deliverySheet',
+    type: 'html',
+    targetStyles: ['*'],
+    ignoreElements: ['no-logs', 'goods-image', 'no-btn', 'elementToIgnore'],
+  });
+};
+
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+const handlePageSizeChange = (size) => {
+  params.page_size = size;
+  GET_GoodsLendList();
+};
+
+const handlePageCurrentChange = (page) => {
+  params.page_no = page;
+  GET_GoodsLendList();
+};
+
+const handleAddGoodsLend = () => {
+  id.value = '';
+  title.value = t('add');
+  addLendForm.value = {};
+  warehouseSn.value = '';
+  AreaTab.value = '';
+  dialogVisibleForm.value = true;
+};
+
+const handlePrintGoodsLendDialog = (row) => {
+  dialogVisible.value = true;
+  codeList.value.push(row.code);
+  /*  creatQrCode(); */
+};
+
+/* const GET_GoodsLendDetail = (id) => {
+    API_GoodsLend.getGoodsLendInfo(id).then((response) => {
+      goodsLendForm.value = response;
+      if (response.product_list && response.product_list.length) {
+        var str = '';
+        response.product_list.forEach(function (i) {
+          str += i.product_name + '、';
+        });
+      }
+      goodsLendForm.value.illustrate = str;
+    });
+  }; */
+
+const searchEvent = (data) => {
+  params.sn = data;
+  Object.keys(advancedForm).forEach((key) => delete params[key]);
+  params.page_no = 1;
+  GET_GoodsLendList();
+};
+
+const advancedSearchEvent = () => {
+  Object.assign(params, advancedForm);
+  params.page_no = 1;
+  GET_GoodsLendList();
+};
+</script>

+ 194 - 60
src/views/stock/warehouseList.vue

@@ -1,59 +1,134 @@
 <template>
-  <div>
-    <!--  class="grid xl:grid-cols-1" -->
-    <en-table-layout :tableData="tableData.data" :loading="loading">
-      <template #toolbar>
-        <div class="inner-toolbar w-11/12 flex justify-between">
-          <div class="toolbar-btns">
-            <el-button
-              size="default"
-              v-if="checkPermission(['warehouse:add']) && store.state.user.user.founder !== 1"
-              type="primary"
-              @click="handleAddWarehouse"
-              >{{ $t('add') }}</el-button
+  <div class="dark:!bg-[#060818] bg-white p-2">
+    <!--     <template #toolbar> flex justify-between -->
+    <div class="inner-toolbar w-11/12 mb-4">
+      <div class="toolbar-btns">
+        <el-button size="default" v-if="checkPermission(['warehouse:add']) && store.state.user.user.founder !== 1" type="primary" @click="handleAddWarehouse">{{
+          $t('add')
+        }}</el-button>
+      </div>
+      <div class="mt-5">
+        <!-- toolbar-search -->
+        <en-table-search class="!justify-start" @search="searchEvent" :placeholder="$t('search_placeholde')" />
+      </div>
+    </div>
+    <!--     </template> -->
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="全部" name="first">
+        <en-table-layout :tableData="tableData.data" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="sn" :label="$t('warechouse_sn')" min-width="120" />
+            <el-table-column prop="name" :label="$t('warechouse_name')" min-width="150" />
+            <el-table-column prop="phone" :label="$t('warechouse_phone')" min-width="130" />
+            <el-table-column prop="" :label="$t('warechouse_address')" min-width="200">
+              <template #default="scope">
+                {{ adminName(scope.row.ware_pro_city_area) + scope.row.warehouse_address || '' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" :label="$t('warechouse_remark')" min-width="150" />
+            <el-table-column :label="$t('operate')" fixed="right" width="300">
+              <template #default="scope">
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="tableData.data && tableData.data.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="tableData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="tableData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.data_total"
             >
-          </div>
-          <div class="toolbar-search">
-            <en-table-search @search="searchEvent" :placeholder="$t('search_placeholde')" />
-          </div>
-        </div>
-      </template>
-
-      <template #table-columns>
-        <el-table-column prop="sn" :label="$t('warechouse_sn')" min-width="120" />
-        <el-table-column prop="name" :label="$t('warechouse_name')" min-width="150" />
-        <el-table-column prop="phone" :label="$t('warechouse_phone')" min-width="130" />
-        <el-table-column prop="" :label="$t('warechouse_address')" min-width="200">
-          <template #default="scope">
-            {{ adminName(scope.row.ware_pro_city_area) + scope.row.warehouse_address || '' }}
+            </el-pagination>
           </template>
-        </el-table-column>
-        <el-table-column prop="description" :label="$t('warechouse_remark')" min-width="150" />
-        <el-table-column :label="$t('operate')" fixed="right" width="300">
-          <template #default="scope">
-            <el-button
-              size="small"
-              v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
-              @click="handleEditWarehouse(scope.$index, scope.row)"
-              >{{ $t('edit') }}</el-button
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="自建仓" name="second">
+        <en-table-layout :tableData="buildOneselfData.data" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="sn" :label="$t('warechouse_sn')" min-width="120" />
+            <el-table-column prop="name" :label="$t('warechouse_name')" min-width="150" />
+            <el-table-column prop="phone" :label="$t('warechouse_phone')" min-width="130" />
+            <el-table-column prop="" :label="$t('warechouse_address')" min-width="200">
+              <template #default="scope">
+                {{ adminName(scope.row.ware_pro_city_area) + scope.row.warehouse_address || '' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" :label="$t('warechouse_remark')" min-width="150" />
+            <el-table-column :label="$t('operate')" fixed="right" width="300">
+              <template #default="scope">
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="buildOneselfData.data && buildOneselfData.data.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="buildOneselfData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="buildOneselfData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="buildOneselfData.data_total"
             >
+            </el-pagination>
           </template>
-        </el-table-column>
-      </template>
-      <template #pagination>
-        <el-pagination
-          v-if="tableData.data && tableData.data.length"
-          @size-change="handlePageSizeChange"
-          @current-change="handlePageCurrentChange"
-          :current-page="tableData.page_no"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="tableData.page_size"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="tableData.data_total"
-        >
-        </el-pagination>
-      </template>
-    </en-table-layout>
+        </en-table-layout>
+      </el-tab-pane>
+      <el-tab-pane label="虚拟仓" name="third">
+        <en-table-layout :tableData="virtuallyData.data" :toolbar="false" :loading="loading">
+          <template #table-columns>
+            <el-table-column prop="sn" :label="$t('warechouse_sn')" min-width="120" />
+            <el-table-column prop="name" :label="$t('warechouse_name')" min-width="150" />
+            <el-table-column prop="phone" :label="$t('warechouse_phone')" min-width="130" />
+            <el-table-column prop="" :label="$t('warechouse_address')" min-width="200">
+              <template #default="scope">
+                {{ adminName(scope.row.ware_pro_city_area) + scope.row.warehouse_address || '' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" :label="$t('warechouse_remark')" min-width="150" />
+            <el-table-column :label="$t('operate')" fixed="right" width="300">
+              <template #default="scope">
+                <el-button
+                  size="small"
+                  v-if="checkPermission(['warehouse:update']) && store.state.user.user.founder !== 1"
+                  @click="handleEditWarehouse(scope.$index, scope.row)"
+                  >{{ $t('edit') }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </template>
+          <template #pagination>
+            <el-pagination
+              v-if="virtuallyData.data && virtuallyData.data.length"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageCurrentChange"
+              :current-page="virtuallyData.page_no"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="virtuallyData.page_size"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="virtuallyData.data_total"
+            >
+            </el-pagination>
+          </template>
+        </en-table-layout>
+      </el-tab-pane>
+    </el-tabs>
 
     <el-dialog
       :title="stockForm.id ? $t('edit') : $t('add')"
@@ -105,7 +180,7 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
-import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
+import { ElMessageBox, FormInstance, ElMessage, TabsPaneContext } from 'element-plus';
 import * as API_BasicSetting from '@/api/basicSetting';
 import * as API_Setting from '@/api/setting';
 import * as API_Auth from '@/api/auth';
@@ -116,6 +191,18 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const activeName = ref('first');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  if (tab.props.name == 'first') {
+    GET_WarehouseList()
+  } else if (tab.props.name == 'second') {
+    GET_buildOneself()
+  } else if (tab.props.name == 'third') {
+    GET_virtually()
+  }
+};
+
 const store = useStore();
 const tableData = ref<any>({});
 const loading = ref(false);
@@ -134,8 +221,8 @@ const stockRules = ref<any>({
   sn: [{ required: true, message: t('place') + t('warechouse_sn'), trigger: 'blur' }],
   name: [{ required: true, message: t('place') + t('warechouse_name'), trigger: 'blur' }],
   phone: [
-    // { required: true, message: '请输入手机号码!', trigger: 'blur' },
-    // { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }, options: regionData,
+    { required: true, message: '请输入手机号码!', trigger: 'blur' },
+    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }, //options: regionData,
   ],
 });
 const selectedOptions = ref<any[]>([]);
@@ -208,25 +295,22 @@ const submitWarehouseForm = () => {
         API_BasicSetting.editWarehouse(id, params).then(() => {
           dialogVisible.value = false;
           ElMessage.success(t('edit_success'));
-          //store.dispatch('showMessage', { message: '修改成功!', type: 'success' });
           GET_WarehouseList();
         });
       } else {
         API_BasicSetting.addWarehouse(params).then(() => {
           dialogVisible.value = false;
           ElMessage.success(t('add_success'));
-          /*      store.dispatch('showMessage', { message: '添加成功!', type: 'success' }); */
           GET_WarehouseList();
         });
       }
     } else {
       ElMessage.error(t('form_erroe'));
-      /*    store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
       return false;
     }
   });
 };
-
+/* 全部仓 */
 const GET_WarehouseList = () => {
   loading.value = true;
   params.value.company_id = store.state.companId;
@@ -246,6 +330,48 @@ const GET_WarehouseList = () => {
     });
 };
 
+/* 自建仓 */
+const buildOneselfData = ref<any>({});
+const GET_buildOneself = () => {
+  loading.value = true;
+  params.value.company_id = store.state.companId;
+  API_BasicSetting.warehouse(params.value)
+    .then((response) => {
+      loading.value = false;
+      response.data.map((el: any) => {
+        if (el.ware_pro_city_area !== undefined) {
+          el.ware_pro_city_area = el.ware_pro_city_area.split(',');
+        }
+        return el;
+      });
+      buildOneselfData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+/* 虚拟仓 */
+const virtuallyData=ref<any>({})
+const GET_virtually=()=>{
+  loading.value = true;
+  params.value.company_id = store.state.companId;
+  API_BasicSetting.warehouse(params.value)
+    .then((response) => {
+      loading.value = false;
+      response.data.map((el: any) => {
+        if (el.ware_pro_city_area !== undefined) {
+          el.ware_pro_city_area = el.ware_pro_city_area.split(',');
+        }
+        return el;
+      });
+      virtuallyData.value = response;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
 const GET_MarketingList = () => {
   API_BasicSetting.getUserByDept().then((res) => {
     marketingList.value = res;
@@ -263,7 +389,15 @@ const adminName = (val: string[]) => {
 };
 
 onMounted(() => {
-  GET_WarehouseList();
+  if (activeName.value == 'first') {
+    GET_WarehouseList();
+  }
+
   //GET_MarketingList();
 });
-</script>
+</script>
+<style>
+.el-tabs__header {
+  margin: 0 0 1px;
+}
+</style>