供应商便次年月显示

src/views/wms/supplierManage/supplierDeliMain/index.vue

@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <Search :schema="SupplierDeliMain.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+    <Search :schema="SupplierDeliMain.allSchemas.searchSchema" @search="search" @reset="search" />
   </ContentWrap>
 
     <!-- 列表头部 -->
@@ -32,8 +32,15 @@
           <span>{{ row.code }}</span>
         </el-button>
       </template>
+      <template v-for="item in dateColumns" :key="item.field" #[item.field]="{row}">
+        <div :style="{ maxHeight: getHeight(row) }">
+          <div v-for="(cur,index) in row[item.field]" :key="index">
+            {{cur}}
+          </div>
+        </div>
+      </template>
       <template #action="{ row }">
-        <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" />
+        <ButtonBase :Butttondata="butttondata(row)" @button-base-click="buttonTableClick($event,row)" />
       </template>
     </Table>
   </ContentWrap>
@@ -65,6 +72,7 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import Detail from '@/components/Detail/src/Detail.vue'
+import { formatDate } from '@/utils/formatTime'
 
 defineOptions({ name: 'SupplierDeliMain' })
 
@@ -95,16 +103,20 @@ const { tableObject:tableObjectHead, tableMethods:tableMethodsHead } = useTable(
 
 // 获得表格的各种操作
 const { getList: getListHead, setSearchParams: setSearchParamsHead } = tableMethodsHead
-
+const search = (mold) => {
+  setSearchParamsHead(mold)
+  setSearchParams(mold)
+}
+const dateColumns = ref([])
 watch(()=>tableObjectHead.tableList,()=>{
   updateDateTableColumns()
 },{deep:true})
 const updateDateTableColumns = ()=>{
   console.log('tableObjectHead', tableObjectHead)
-  let dateColumns = []
+  dateColumns.value = []
   if(tableObjectHead.tableList.length>10){
     tableObjectHead.tableList.forEach(item=>{
-    dateColumns.push({
+    dateColumns.value.push({
         width:120,
         field: item,
         label: item
@@ -112,13 +124,13 @@ const updateDateTableColumns = ()=>{
     })
   }else{
     tableObjectHead.tableList.forEach(item=>{
-    dateColumns.push({
+    dateColumns.value.push({
         field: item,
         label: item
       })
     })
   }
-  tableColumns.value  = [...orginTableColumns.value,...dateColumns]
+  tableColumns.value  = [...orginTableColumns.value,...dateColumns.value]
   console.log('tableColumns',tableColumns.value)
 }
 
@@ -150,6 +162,11 @@ const { tableObject, tableMethods } = useTable({
 
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
+const getListExecute = () => {
+  tableObject.params.yearAndMonth=formatDate(new Date(),'YYYY-MM')
+  getList()
+  tableObject.tableList.forEach(item=>item.isOpen = false)
+}
 
 // 列表头部按钮
 const HeadButttondata = [
@@ -179,7 +196,7 @@ const buttonBaseClick = (val: string, item: any) => {
     handleExport()
   } else if (val == 'refresh') { // 刷新
     getListHead()
-    getList()
+    getListExecute()
   } else if (val == 'filtrate') { // 筛选
   } else { // 其他按钮
     console.log('其他按钮', item)
@@ -187,17 +204,46 @@ const buttonBaseClick = (val: string, item: any) => {
 }
 
 // 列表-操作按钮
-const butttondata = [
+const butttondata = (row) => {
-  defaultButtons.mainListEditBtn({hasPermi:'wms:supplierDeliMain:update'}), // 编辑
+  const array = []
-  defaultButtons.mainListDeleteBtn({hasPermi:'wms:supplierDeliMain:delete'}), // 删除
+  // 如果子数据条数超过6条不展示按钮
+  dateColumns.value.forEach(item => {
+    if (row[item.field]?.length > 6) {
+    array.push(row)
+    }
+  })
+  return [
+    {
+      label: t(`ts.展开更多`).replace('ts.', ''),
+      name: 'open',
+      hide: row.isOpen || array.length==0,
+      type: 'primary',
+      color: '',
+      link: true, // 文本展现按钮
+      hasPermi: ''
+    },
+    {
+      label: t(`ts.收起`).replace('ts.', ''),
+      name: 'retract',
+      hide: !row.isOpen || array.length==0,
+      type: 'primary',
+      color: '',
+      link: true, // 文本展现按钮
+      hasPermi: ''
+    }
   ]
+}
 
 // 列表-操作按钮事件
-const buttonTableClick = async (val: string, row: { id: number }) => {
+const buttonTableClick = async (val: string, row:any) => {
-  if (val == 'edit') { // 编辑
+  if (val == 'open') { // 展开
-    openForm('update', row)
+    // openForm('update', row)
-  } else if (val == 'delete') { // 删除
+    row.isOpen = true
-    handleDelete(row.id)
+    getHeight(row)
+  } else if (val == 'retract') { // 收起
+    row.isOpen = false
+    getHeight(row)
+    // handleDelete(row.id)
   }
 }
 
@@ -228,7 +274,7 @@ const formsSuccess = async (formType: string,data: SupplierDeliMainApi.SupplierD
     message.success(t('common.updateSuccess'))
   }
   basicFormRef.value.dialogVisible = false
-  getList()
+  getListExecute()
 }
 
 /** 详情操作 */
@@ -246,7 +292,7 @@ const handleDelete = async (id: number) => {
     await SupplierDeliMainApi.deleteSupplierDeliMain(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
-    await getList()
+    await getListExecute()
   } catch {}
 }
 
@@ -278,7 +324,7 @@ const importTemplateData = reactive({
 })
 // 导入成功之后
 const importSuccess = () => {
-  getList()
+  getListExecute()
 }
 
 // 筛选提交
@@ -287,14 +333,25 @@ const searchFormClick = (searchData: { filters: any }) => {
     isSearch: true,
     filters: searchData.filters
   }
-  getList() // 刷新当前列表
+  getListExecute() // 刷新当前列表
+}
+const getHeight=(row)=> {
+  // 根据条件返回不同的高度值
+  if (row.isOpen === true) { // 例如：特定名字的行改变高度
+    return 'auto'; // 特定高度值
+  }
+  return '140px'; // 默认高度值
 }
-
 /** 初始化 **/
 onMounted(async () => {
   getListHead()
-  getList()
+  getListExecute()
   importTemplateData.templateUrl = await SupplierDeliMainApi.importTemplate()
 })
 
 </script>
+<style lang="scss">
+// .el-table .cell.el-tooltip{
+//   height:140px;
+// }
+</style>

src/views/wms/supplierManage/supplierDeliMain/supplierDeliMain.data.ts

@@ -1,4 +1,5 @@
 import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { formatDate } from '@/utils/formatTime'
 
 // 表单校验
 export const SupplierDeliMainRules = reactive({
@@ -50,5 +51,22 @@ export const SupplierDeliMain = useCrudSchemas(reactive<CrudSchema[]>([
     sort: 'custom',
     isTable: false,
     isSearch: true,
+    search: {
+      component: 'DatePicker',
+      value: formatDate(new Date(),'YYYY-MM'),
+      componentProps: {
+        type: 'month',
+        valueFormat: 'YYYY-MM',
+      }
+    }
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false,
+    table: {
+      width: 150,
+      fixed: 'right'
+    }
   }
 ]))