2022.9.28

src/components/XyTable/index.vue

@@ -40,6 +40,14 @@ export default {
       type: Boolean,
       default: true
     },
+    expandRowKeys:{
+      type: Array,
+      default: ()=>[]
+    },
+    rowKey:{
+      type:[String,Function],
+      default:'id'
+    },
     showHeader: {
       type: Boolean,
       default: true
@@ -119,7 +127,8 @@ export default {
               class={this.isShowPage ? 'xy-table-page__close icon-recover' : 'xy-table-page__close icon-scale-left'}
               type='ios-arrow-down'
               size={22}
-              on={{['click']: () => this.isShowPage = !this.isShowPage}}></Icon>
+              on={{['click']: () => this.isShowPage = !this.isShowPage}}>
+            </Icon>
             <transition
               enter-active-class="slide-in-bottom"
               leave-to-class="slide-out-down">
@@ -135,7 +144,8 @@ export default {
                 on={{
                   ['on-page-size-change']: (e) => this.$emit('pageSizeChange', e),
                   ['on-change']: (e) => this.$emit('pageIndexChange', e)
-                }}></Page>
+                }}>
+              </Page>
             </transition>
           </div>
         )
@@ -181,6 +191,7 @@ export default {
       tableHeight,
       tableItem,
       list,
+      rowKey,
       deleteClick,
       editorClick
     } = this
@@ -201,8 +212,8 @@ export default {
             height={height ?? tableHeight}
             class="v-table"
             style={tableStyle}
-            row-key="id"
+            row-key={rowKey}
-            border
+            border={true}
             default-expand-all={defaultExpandAll}
             tree-props={treeProps}
             fit={true}

src/views/finance/collectMoney.vue

@@ -6,7 +6,7 @@
         <slot>
           <div>
             <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
-            <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList">查询</Button>
+            <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
             <Button style="margin-left: 10px" type="primary" @click="$refs['addcollectMoney'].type = 'add',$refs['addcollectMoney'].isShow = true">新建</Button>
           </div>
         </slot>
@@ -51,7 +51,7 @@ export default {
   methods: {
 
     async getList(){
-      const res = await getList(this.select)
+      const res = await scheduleList(this.select)
       this.total = res.total
       this.list = res.data
       console.log(this.list)

src/views/finance/salaryList.vue

@@ -13,6 +13,7 @@
     </div>
 
     <xy-table
+      row-key="name"
       :total="total"
       :list="list"
       :table-item="table">
@@ -41,35 +42,51 @@ export default {
 
       total:0,
       list:[],
-      table:[
+      tableArr:[],
+      dataTable:[
         {
-          label:'姓名',
+          prop:'date',
-          width:140,
+          label:'日期'
-          fixed:'left',
-          prop:'name'
         },
         {
-          label:'明细',
+          prop:'money',
-          customFn:(row)=>{
+          label:'金额(元)',
+          align:'right'
+        }
+      ],
+      table:[
+        {
+          type:'expand',
+          label:'详情',
+          width: 80,
+          expandFn:(props)=>{
             return (
-              <div style={{'display':'flex'}}>
+              <div style={{'width':'400px','margin-left':'40px'}}>
-                {
+                <xy-table
-                  row.data.map(item => {
+                  defaultExpandAll={false}
-                    return (
+                  table-item={this.dataTable}
-                      <div style={{'border':'1px #000 solid'}}>
+                  list={props.row.data}
-                        <div style={{'border-bottom':'1px #000 solid'}}>{item.date}</div>
+                  is-page={false}
-                        <div>{item.money}元</div>
+                  height={260}
-                      </div>
+                  scopedSlots={{
-                    )
+                    btns:()=>{
-                  })
+                      return ''
-                }
+                    }
+                  }}>
+
+                </xy-table>
               </div>
             )
           }
         },
         {
-          label:'合计',
+          label:'姓名',
-          width: 160,
+          width:260,
+          prop:'name'
+        },
+        {
+          label:'小计',
+          minWidth: 160,
           align:'right',
           customFn:(row)=>{
             let total = 0;
@@ -90,7 +107,9 @@ export default {
 
     async getList(){
       const res = await getList(this.select)
-      console.log(res)
+      this.tableArr = res.map((item,index) => {
+        return item.name
+      })
       this.total = res.length ?? 0
       this.list = res
     },