tabs组件

src/components/Descriptions/src/Descriptions.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   message: propTypes.string.def(''),
   collapse: propTypes.bool.def(true),
   columns: propTypes.number.def(1),
-  width: propTypes.string.def('5 0px'),
+  width: propTypes.string.def('50px'),
   schema: {
     type: Array as PropType<DescriptionsSchema[]>,
     default: () => []

src/components/Tabs/index.ts

@@ -0,0 +1,3 @@
+import Annex from './src/Annex.vue'
+
+export { Annex }

src/components/Tabs/src/Tabs.vue

@@ -0,0 +1,65 @@
+<!-- tabs组件 -->
+<template>
+   <div class="tabs flex items-center">
+      <div :class="current == index ? 'active' : ''" v-for="(item, index) in tabsList" :key="index" @click="change(item, index)">{{ item.label }}</div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+// const message = useMessage() // 消息弹窗
+
+import { emit } from "process";
+
+// const { t } = useI18n() // 国际化
+defineComponent({
+  name: 'Tabs'
+})
+// 接受父组件参数
+const props  = defineProps({
+  tabsList: {
+    type: Array,
+    required: true
+  },
+  current: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+})
+const tabsList  = ref(JSON.parse(JSON.stringify(props.tabsList)))
+tabsList.value.unshift({
+  label: '详情',
+  prop:'Detail'
+})
+const current = ref(props.current);
+const change = (item, index) => {
+  current.value = index
+  console.log(index);
+  emit('change',item,index)
+}
+const emit = defineEmits(['change'])
+</script>
+
+
+<style scoped lang="scss">
+
+.tabs{
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #d6d6d6;
+  margin-bottom: 16px;
+  margin-top: 20px;
+  div{
+    height: 30px;
+    margin-right: 30px;
+    font-size: 14px;
+    cursor: pointer;
+    
+  }
+  .active{
+    color:#409eff !important;
+    border-bottom: 2px solid #409eff;
+  }
+ 
+}
+</style>

src/utils/disposition/tabsList.ts

@@ -0,0 +1,32 @@
+// 页面tabs标签
+
+export const ItemBasicTabsList = [{
+  label: "供应商物品",
+  prop: 'SupplierItems',
+},
+{
+  label: "客户物品",
+  prop: 'CustomerItems',
+},
+{
+  label: "采购订单",
+  prop: 'PurchaseOrder',
+},
+{
+  label: "要货计划",
+  prop: 'PurchasingPlan',
+},
+{
+  label: "库存余额",
+  prop: 'InventoryBalance',
+},
+{
+  label: "预计入库存",
+  prop: 'ExpectedIn',
+},{
+  label: "预计出库存",
+  prop: 'ExpectedOut',
+},
+
+]
+

src/views/wms/itembasic/ItembasicDetail.vue

@@ -4,34 +4,29 @@
       {{ detailData.code }} <span class="ml-20px font-size-16px">{{ detailData.name }}</span>
     </div>
   </ContentWrap>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="详情" name="Detail">
-      <div class="flex">
-        <!-- 详情 -->
-        <ContentWrap class="w-[73%]">
-          <Descriptions :data="detailData" :schema="ItemBasic.allSchemas.detailSchema" :columns="2" />
-        </ContentWrap>
-        <ContentWrap class="w-[27%] ml-16px">
-          <!-- 附件组件 -->
-          <Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" />
-          <!-- 备注组件 -->
-          <Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss" />
-          <!-- 变更记录组件 -->
-          <ChangeRecord :data="changeRecordData" class="mt-20px" />
-        </ContentWrap>
-        <!-- 用户导入对话框 -->
-        <ImportForm ref="importFormRef" :importTemplateData="importTemplateData" @success="importSuccess" />
-      </div>
-    </el-tab-pane>
-    <el-tab-pane :label="item.value" :name="item.label" v-for="(item,index) in tabs" :key="index">
-      <ContentWrap>
-        <Table :columns="ItemBasic.allSchemas.tableColumns" :data="tableObject.tableList" :loading="tableObject.loading"
-          :pagination="{
-            total: tableObject.total
-          }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage" />
-      </ContentWrap>
-    </el-tab-pane>
-  </el-tabs>
+  <Tabs :tabsList="ItemBasicTabsList" :current="current" @change="change" />
+  <div class="flex" v-if="current == 0">
+    <!-- 详情 -->
+    <ContentWrap class="w-[73%]">
+      <Descriptions :data="detailData" :schema="ItemBasic.allSchemas.detailSchema" :columns="2" />
+    </ContentWrap>
+    <ContentWrap class="w-[27%] ml-16px">
+      <!-- 附件组件 -->
+      <Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" />
+      <!-- 备注组件 -->
+      <Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss" />
+      <!-- 变更记录组件 -->
+      <ChangeRecord :data="changeRecordData" class="mt-20px" />
+    </ContentWrap>
+    <!-- 用户导入对话框 -->
+    <ImportForm ref="importFormRef" :importTemplateData="importTemplateData" @success="importSuccess" />
+  </div>
+  <ContentWrap v-else>
+    <Table :columns="ItemBasic.allSchemas.tableColumns" :data="tableObject.tableList" :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage" />
+  </ContentWrap>
 </template>
 
 <script lang="ts" setup>
@@ -40,15 +35,14 @@ import Annex from '@/components/Annex/src/Annex.vue'
 import Remarks from '@/components/Remarks/src/Remarks.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
+import Tabs from '@/components/Tabs/src/Tabs.vue'
 import { ItemBasic } from '@/utils/disposition/tableColumns.ts'
+import { ItemBasicTabsList } from '@/utils/disposition/tabsList.ts'
 import { getItembasic } from '@/api/wms/itembasic'
 const { query } = useRoute() // 路由的查询
 import * as ItembasicApi from '@/api/wms/itembasic'
 
-
-
 import * as UserApi from '@/api/system/user'
-const activeName = ref('Detail')
 // 搜索参数
 const queryParams = reactive({
   title: '',
@@ -158,39 +152,20 @@ const remarksSubmitSucss = () => {
 //   currentPage: 2
 // })
 
-// 设置tabs列表
-const tabs = ref([{
-  value:'供应商物品',
-  label:'SupplierItems'
-}, {
-  value: '客户物品',
-  label: 'CustomerItems'
-}, {
-  value: '采购订单',
-  label: 'PurchaseOrder'
-}, {
-  value: '要货计划',
-  label: 'PurchasingPlan'
-}, {
-  value: '库存余额',
-  label: 'InventoryBalance'
-}, {
-  value: '库存事务',
-  label: 'InventoryTransactions'
-}, {
-  value: '预计入库存',
-  label: 'ExpectedIn'
-}, {
-  value: '预计出库存',
-  label: 'ExpectedOut'
-}])
+
+const current = ref(0)
 // 获取表格数据
 const { tableObject, tableMethods } = useTable({
   getListApi: ItembasicApi.getItembasicPage // 分页接口
 })
 console.log(tableObject);
+const change = (item, index) => {
+  console.log(item);
+  current.value = index
+}
 
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 getList()
+
 </script>

src/views/wms/workstation/WorkstationForm.vue

@@ -112,6 +112,7 @@
 <script setup lang="ts">
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import * as WorkstationApi from '@/api/wms/workstation'
+import { log } from 'console'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -144,6 +145,8 @@ const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
+  console.log(dialogVisible.value);
+  
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -153,6 +156,7 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       formData.value = await WorkstationApi.getWorkstation(id)
+      console.log('formData.value=' + JSON.stringify(formData.value));
     } finally {
       formLoading.value = false
     }