0308

src/main/java/com/izouma/zhumj/service/CheckinInfoService.java

@@ -386,6 +386,59 @@ public class CheckinInfoService {
         return checkinInfoReportDTOList;
     }
 
+    public List<CheckinInfoReportDTO> getCheckinListByStoreId(Long storeId) {
+
+        List<CheckinInfo> checkinInfoList = checkinInfoRepo.findAllByStoreIdAndCheckoutIsFalse(storeId);
+        List<MemberInfo> memberInfoList = memberRepo
+                .findAllById(checkinInfoList.stream().map(CheckinInfo::getIdNo).filter(Objects::nonNull)
+                        .collect(Collectors.toSet()));
+        List<RoomInfo> roomInfoList = roomInfoRepo.findAllById(checkinInfoList.stream()
+                .map(CheckinInfo::getRoomId).filter(Objects::nonNull).collect(Collectors.toSet()));
+        List<BedInfo> bedInfoList = bedInfoRepo.findAllById(checkinInfoList.stream()
+                .map(CheckinInfo::getBedId).filter(Objects::nonNull).collect(Collectors.toSet()));
+        List<User> userList = userRepo
+                .findAllByIdNoIn(checkinInfoList.stream().map(CheckinInfo::getIdNo).filter(Objects::nonNull)
+                        .collect(Collectors.toSet()));
+
+        List<CheckinInfoReportDTO> checkinInfoReportDTOList = new ArrayList<>();
+        for (CheckinInfo checkinInfo : checkinInfoList) {
+            BigDecimal money = memberInfoList.stream()
+                    .filter(memberInfo -> memberInfo.getIdNo().equalsIgnoreCase(checkinInfo.getIdNo()))
+                    .findAny().map(MemberInfo::getMoney).orElse(BigDecimal.ZERO);
+            String roomName = roomInfoList.stream().filter(roomInfo -> roomInfo.getId().equals(checkinInfo.getRoomId()))
+                    .findAny().map(RoomInfo::getRoomName).orElse(null);
+            String bedName = bedInfoList.stream().filter(bedInfo -> bedInfo.getId().equals(checkinInfo.getBedId()))
+                    .findAny().map(BedInfo::getBedName).orElse(null);
+            boolean hasWx = userList.stream()
+                    .anyMatch(userDTO -> userDTO.getIdNo().equalsIgnoreCase(checkinInfo.getIdNo())
+                            && userDTO.getOpenId() != null
+                            && !userDTO.isTemporal());
+            checkinInfoReportDTOList.add(CheckinInfoReportDTO.builder()
+                    .id(checkinInfo.getId())
+                    .roomName(roomName)
+                    .name(checkinInfo.getName())
+                    .idNo(checkinInfo.getIdNo())
+                    .monthRate(checkinInfo.getMonthRate())
+                    .dayRate(checkinInfo.getDayRate())
+                    .depositAmount(checkinInfo.getDepositAmount())
+                    .checkinTime(checkinInfo.getCheckinTime())
+                    .checkoutTime(checkinInfo.getCheckoutTime())
+                    .planOutTime(checkinInfo.getPlanOutTime())
+                    .remark(checkinInfo.getRemark())
+                    .address(checkinInfo.getAddress())
+                    .depositStatus(checkinInfo.getDepositStatus().getDescription())
+                    .sex(checkinInfo.getSex())
+                    .phone(checkinInfo.getPhone())
+                    .money(money)
+                    .teamName(checkinInfo.getTeamName())
+                    .bedName(bedName)
+                    .checkinType(checkinInfo.getCheckInType().getDescription())
+                    .hasWx(hasWx)
+                    .build());
+        }
+        return checkinInfoReportDTOList;
+    }
+
     public List<CheckinInfoSimpleDTO> allByStoreId(Long storeId) {
 
         List<CheckinInfo> checkinInfoList = checkinInfoRepo.findAllByStoreIdAndCheckoutIsFalse(storeId);

src/main/java/com/izouma/zhumj/web/CheckinInfoController.java

@@ -87,8 +87,13 @@ public class CheckinInfoController extends BaseController {
     }
 
     @GetMapping("/checkinList")
-    public List<CheckinInfoReportDTO> checkinList(@RequestParam Long storeId, @RequestParam LocalDateTime start, @RequestParam LocalDateTime end) {
-        return checkinInfoService.getCheckinList(storeId, start, end);
+    public List<CheckinInfoReportDTO> checkinList(@RequestParam Long storeId, @RequestParam(required = false) LocalDateTime start, @RequestParam(required = false) LocalDateTime end) {
+        if(start!=null && end !=null){
+            return checkinInfoService.getCheckinList(storeId, start, end);
+        }
+        else {
+            return  checkinInfoService.getCheckinListByStoreId(storeId);
+        }
     }
 
     @GetMapping("/excelCheckinInfoListReport")

src/main/vue/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     env: {
         node: true
     },
-    extends: ['plugin:vue/essential', '@vue/prettier'],
+    extends: ['plugin:vue/essential'],
     rules: {
         'no-console': 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

src/main/vue/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint --fix"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^1.0.2",

src/main/vue/src/mixins/formatters.js

@@ -1,19 +1,19 @@
-import { format, addDays, addMonths } from 'date-fns';
+import { format, addDays, addMonths, parse } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 export default {
     methods: {
         timeFormatter(row, column, cellValue, index) {
-            return format(new Date(cellValue), 'HH:mm', { locale: zhCN });
+            return format(parse(cellValue), 'HH:mm', { locale: zhCN });
         },
         datetimeFormatter(row, column, cellValue, index) {
             if (!cellValue) return '';
-            return format(new Date(cellValue), 'yyyy/MM/dd HH:mm', {
+            return format(parse(cellValue), 'yyyy/MM/dd HH:mm', {
                 locale: zhCN
             });
         },
         dateFormatter(row, column, cellValue, index) {
             if (cellValue) {
-                return format(new Date(cellValue), 'yyyy/MM/dd', {
+                return format(parse(cellValue), 'yyyy/MM/dd', {
                     locale: zhCN
                 });
             }
@@ -26,24 +26,24 @@ export default {
         },
         dateFormatter2(row, column, cellValue, index) {
             if (cellValue) {
-                return format(new Date(cellValue), 'yyyy-MM-dd', {
+                return format(parse(cellValue), 'yyyy-MM-dd', {
                     locale: zhCN
                 });
             }
         },
         addDays(value, days) {
             if (days) {
-                return addDays(new Date(value), days);
+                return addDays(parse(value), days);
             }
         },
         addMonths(value, months) {
             if (months) {
-                return addMonths(new Date(value), months);
+                return addMonths(parse(value), months);
             }
         },
         dateFormatter3(row, column, cellValue, index) {
             if (cellValue) {
-                return format(new Date(cellValue), 'yyyy-MM-dd HH:mm:ss', {
+                return format(parse(cellValue), 'yyyy-MM-dd HH:mm:ss', {
                     locale: zhCN
                 });
             }

src/main/vue/src/styles/operation.less

@@ -142,4 +142,8 @@
 }
 .must-check .el-checkbox__input.is-disabled + span.el-checkbox__label{
     color:#F56C6C;
+}
+
+.float{
+    
 }

src/main/vue/src/views/CheckinInfoReport.vue

@@ -136,31 +136,32 @@ export default {
     },
     methods: {
         beforeOnCreate() {
-            const date = new Date();
-            this.dateRange = [
-                format(startOfDay(addYears(date, -1)), 'yyyy-MM-dd HH:mm:ss'),
-                format(endOfDay(date), 'yyyy-MM-dd HH:mm:ss')
-            ];
+            // const date = new Date();
+            // this.dateRange = [
+            //     format(startOfDay(addYears(date, -1)), 'yyyy-MM-dd HH:mm:ss'),
+            //     format(endOfDay(date), 'yyyy-MM-dd HH:mm:ss')
+            // ];
         },
         getData() {
+            var data = {
+                storeId: this.selectedStoreId
+            };
             if (this.dateRange.length === 2) {
-                this.loading = true;
-                this.$http
-                    .get('/checkinInfo/checkinList', {
-                        storeId: this.selectedStoreId,
-                        start: this.dateRange[0],
-                        end: this.dateRange[1]
-                    })
-                    .then(res => {
-                        this.loading = false;
-                        this.tableData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.loading = false;
-                        this.$message.error(e.error);
-                    });
+                data.start = this.dateRange[0];
+                data.end = this.dateRange[1];
             }
+            this.loading = true;
+            this.$http
+                .get('/checkinInfo/checkinList', data)
+                .then(res => {
+                    this.loading = false;
+                    this.tableData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.loading = false;
+                    this.$message.error(e.error);
+                });
         },
         download() {
             this.downloading = true;

src/main/vue/src/views/sale/ContractList.vue

@@ -53,157 +53,173 @@
             </el-button>
             <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
         </div>
-        <el-table
-            :data="tableData"
-            row-key="id"
-            ref="table"
-            :height="tableHeight"
-            header-row-class-name="table-header-row"
-            header-cell-class-name="table-header-cell"
-            row-class-name="table-row"
-            cell-class-name="table-cell"
-            v-loading="$store.state.fetchingData"
-            highlight-current-row
-        >
-            <el-table-column v-if="multipleMode" type="selection" width="50"></el-table-column>
-            <el-table-column type="index" width="50"></el-table-column>
-            <el-table-column prop="contractNumber" label="合同编号" width="200"> </el-table-column>
-            <el-table-column prop="contractEndTime" label="距离合同到期" width="120">
-                <template slot-scope="{ row }">
-                    <el-tag type="success" plain v-if="difference(row.contractEndTime) > 30" style="width:66px"
-                        >{{ difference(row.contractEndTime) }}天
-                    </el-tag>
+        <div class="el-table table-content">
+            <el-button :style="{right:showMoreEdit?'300px':'80px'}" @click="showMoreEdit=!showMoreEdit" :plain="showMoreEdit" type="primary" :icon="showMoreEdit?'el-icon-arrow-right':'el-icon-arrow-left'" circle class="float-button transition"></el-button>
+            <el-table
+                :data="tableData"
+                row-key="id"
+                ref="table"
+                :height="tableHeight"
+                header-row-class-name="table-header-row"
+                header-cell-class-name="table-header-cell"
+                row-class-name="table-row"
+                cell-class-name="table-cell"
+                v-loading="$store.state.fetchingData"
+                highlight-current-row
+            >
+                <el-table-column v-if="multipleMode" type="selection" width="50"></el-table-column>
+                <el-table-column type="index" width="50"></el-table-column>
+                <el-table-column prop="contractNumber" label="合同编号" width="200"> </el-table-column>
+                <el-table-column prop="contractEndTime" label="距离合同到期" width="120">
+                    <template slot-scope="{ row }">
+                        <el-tag type="success" plain v-if="difference(row.contractEndTime) > 30" style="width:66px"
+                            >{{ difference(row.contractEndTime) }}天
+                        </el-tag>
 
-                    <el-tag
-                        type="danger"
-                        plain
-                        v-if="difference(row.contractEndTime) <= 30 && difference(row.contractEndTime) >= 0"
-                        style="width:66px"
-                        >{{ difference(row.contractEndTime) }}天
-                    </el-tag>
-                    <el-tag type="info" plain v-if="difference(row.contractEndTime) < 0" style="width:66px"
-                        >已到期
-                    </el-tag>
-                </template>
-            </el-table-column>
+                        <el-tag
+                            type="danger"
+                            plain
+                            v-if="difference(row.contractEndTime) <= 30 && difference(row.contractEndTime) >= 0"
+                            style="width:66px"
+                            >{{ difference(row.contractEndTime) }}天
+                        </el-tag>
+                        <el-tag type="info" plain v-if="difference(row.contractEndTime) < 0" style="width:66px"
+                            >已到期
+                        </el-tag>
+                    </template>
+                </el-table-column>
 
-            <!--            <el-table-column prop="payType" label="15天内应收款项"-->
-            <!--                width="300">-->
+                <!--            <el-table-column prop="payType" label="15天内应收款项"-->
+                <!--                width="300">-->
 
-            <!--                <template slot-scope="{row}">-->
-            <!--                    {{yingCycle(row,1)}}-->
-            <!--                </template>-->
-            <!--            </el-table-column>-->
-            <!--            <el-table-column prop="payType" label="30天内应收款项"-->
-            <!--                width="300">-->
-            <!--                <template slot-scope="{row}">-->
-            <!--                    {{yingCycle(row,2)}}-->
-            <!--                </template>-->
-            <!--            </el-table-column>-->
-            <el-table-column prop="customer.customerNumber" label="客户编号" width="100"> </el-table-column>
-            <el-table-column prop="customer.coFullName" label="公司全称" width="200"> </el-table-column>
-            <el-table-column prop="customer.coSimpleName" label="公司简称" width="150">
-                <template slot-scope="{ row }">
-                    <el-link v-if="row.customer" @click="customerLook(row)">{{ row.customer.coSimpleName }}</el-link>
-                </template>
-            </el-table-column>
-            <el-table-column prop="bedsAmount" label="总床位数" width="100"> </el-table-column>
-            <el-table-column label="房型" width="80" align="center">
-                <template slot-scope="{ row }">
-                    <el-link @click="openRoomDataDialog(row.roomList)">查看</el-link>
-                </template>
-            </el-table-column>
-            <el-table-column prop="flowBet" label="押金" width="100"> </el-table-column>
-            <el-table-column prop="monthlyRent" label="月租金" width="100"> </el-table-column>
-            <el-table-column prop="contractTotalRent" label="合同总租金" width="100"> </el-table-column>
-            <el-table-column prop="contractBeginTime" label="合同开始时间" width="150">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="contractEndTime" label="合同结束时间" width="150">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="contractDays" label="合同期" width="80"> </el-table-column>
-            <el-table-column prop="payType" label="付款方式" width="80">
-                <template slot-scope="{ row }">押{{ row.bet }}付{{ row.pay }}</template>
-            </el-table-column>
-            <el-table-column prop="note" show-overflow-tooltip label="备注" width="80"></el-table-column>
+                <!--                <template slot-scope="{row}">-->
+                <!--                    {{yingCycle(row,1)}}-->
+                <!--                </template>-->
+                <!--            </el-table-column>-->
+                <!--            <el-table-column prop="payType" label="30天内应收款项"-->
+                <!--                width="300">-->
+                <!--                <template slot-scope="{row}">-->
+                <!--                    {{yingCycle(row,2)}}-->
+                <!--                </template>-->
+                <!--            </el-table-column>-->
+                <el-table-column prop="customer.customerNumber" label="客户编号" width="100"> </el-table-column>
+                <el-table-column prop="customer.coFullName" label="公司全称" width="200"> </el-table-column>
+                <el-table-column prop="customer.coSimpleName" label="公司简称" width="150">
+                    <template slot-scope="{ row }">
+                        <el-link v-if="row.customer" @click="customerLook(row)">{{
+                            row.customer.coSimpleName
+                        }}</el-link>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="bedsAmount" label="总床位数" width="100"> </el-table-column>
+                <el-table-column label="房型" width="80" align="center">
+                    <template slot-scope="{ row }">
+                        <el-link @click="openRoomDataDialog(row.roomList)">查看</el-link>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="flowBet" label="押金" width="100"> </el-table-column>
+                <el-table-column prop="monthlyRent" label="月租金" width="100"> </el-table-column>
+                <el-table-column prop="contractTotalRent" label="合同总租金" width="100"> </el-table-column>
+                <el-table-column prop="contractBeginTime" label="合同开始时间" width="150">
+                    <template slot="header" slot-scope="{ column }">
+                        <sortable-header
+                            :column="column"
+                            :current-sort="sort"
+                            @changeSort="changeSort"
+                        ></sortable-header>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="contractEndTime" label="合同结束时间" width="150">
+                    <template slot="header" slot-scope="{ column }">
+                        <sortable-header
+                            :column="column"
+                            :current-sort="sort"
+                            @changeSort="changeSort"
+                        ></sortable-header>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="contractDays" label="合同期" width="80"> </el-table-column>
+                <el-table-column prop="payType" label="付款方式" width="80">
+                    <template slot-scope="{ row }">押{{ row.bet }}付{{ row.pay }}</template>
+                </el-table-column>
+                <el-table-column prop="note" show-overflow-tooltip label="备注" width="80"></el-table-column>
 
-            <el-table-column prop="enclosure" label="附件" width="60">
-                <template slot-scope="{ row }">
-                    <el-link v-if="row.enclosure" :href="row.enclosure" target="_blank">下载</el-link>
-                </template>
-            </el-table-column>
-            <el-table-column
-                prop="contractSource"
-                label="合同来源"
-                width="100"
-                :formatter="contractSourceFormatter"
-                show-overflow-tooltip
-            ></el-table-column>
-            <el-table-column
-                prop="customerSource"
-                label="客户来源"
-                width="100"
-                :formatter="customerSourceFormatter"
-                show-overflow-tooltip
-            >
-            </el-table-column>
-            <el-table-column prop="customerIndustry" label="客户行业" width="150"></el-table-column>
-            <el-table-column label="联系人" width="80">
-                <template slot-scope="{ row }">
-                    <el-button @click="openContactsDataDialog(row.contactList)" size="mini" plain>查看</el-button>
-                </template>
-            </el-table-column>
-            <el-table-column prop="saleName" label="销售员" width="80"> </el-table-column>
-            <!--      <el-table-column label="续约订单信息" width="100">-->
-            <!--        <template slot-scope="{row}">-->
-            <!--          <el-button @click="renewalList(row.contractNumber)" size="mini" plain>查看</el-button>-->
-            <!--        </template>-->
-            <!--      </el-table-column>-->
-            <el-table-column label="退宿信息" width="100">
-                <template slot-scope="{ row }">
-                    <el-button @click="residenceList(row.contractNumber)" size="mini" plain>查看</el-button>
-                </template>
-            </el-table-column>
-            <el-table-column prop="contractRenewals" label="续约次数" width="80"> </el-table-column>
+                <el-table-column prop="enclosure" label="附件" width="60">
+                    <template slot-scope="{ row }">
+                        <el-link v-if="row.enclosure" :href="row.enclosure" target="_blank">下载</el-link>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="contractSource"
+                    label="合同来源"
+                    width="100"
+                    :formatter="contractSourceFormatter"
+                    show-overflow-tooltip
+                ></el-table-column>
+                <el-table-column
+                    prop="customerSource"
+                    label="客户来源"
+                    width="100"
+                    :formatter="customerSourceFormatter"
+                    show-overflow-tooltip
+                >
+                </el-table-column>
+                <el-table-column prop="customerIndustry" label="客户行业" width="150"></el-table-column>
+                <el-table-column label="联系人" width="80">
+                    <template slot-scope="{ row }">
+                        <el-button @click="openContactsDataDialog(row.contactList)" size="mini" plain>查看</el-button>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="saleName" label="销售员" width="80"> </el-table-column>
+                <!--      <el-table-column label="续约订单信息" width="100">-->
+                <!--        <template slot-scope="{row}">-->
+                <!--          <el-button @click="renewalList(row.contractNumber)" size="mini" plain>查看</el-button>-->
+                <!--        </template>-->
+                <!--      </el-table-column>-->
+                <el-table-column label="退宿信息" width="100">
+                    <template slot-scope="{ row }">
+                        <el-button @click="residenceList(row.contractNumber)" size="mini" plain>查看</el-button>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="contractRenewals" label="续约次数" width="80"> </el-table-column>
+
+                <el-table-column label="收款周期" width="80">
+                    <template slot-scope="{ row }">
+                        <el-button @click="openCycleDataDialog(row.cycles)" size="mini" plain>查看</el-button>
+                    </template>
+                </el-table-column>
 
-            <el-table-column label="收款周期" width="80">
-                <template slot-scope="{ row }">
-                    <el-button @click="openCycleDataDialog(row.cycles)" size="mini" plain>查看</el-button>
-                </template>
-            </el-table-column>
+                <el-table-column label="合同人员" width="80">
+                    <template slot-scope="{ row }">
+                        <el-button @click="openStaffDataDialog(row)" size="mini" plain>查看</el-button>
+                    </template>
+                </el-table-column>
 
-            <el-table-column label="合同人员" width="80">
-                <template slot-scope="{ row }">
-                    <el-button @click="openStaffDataDialog(row)" size="mini" plain>查看</el-button>
-                </template>
-            </el-table-column>
+                <el-table-column label="房间信息" width="80">
+                    <template slot-scope="{ row }">
+                        <el-button @click="openRoomInfoDataDialog(row.contractStoreList)" size="mini" plain
+                            >查看</el-button
+                        >
+                    </template>
+                </el-table-column>
 
-            <el-table-column label="房间信息" width="80">
-                <template slot-scope="{ row }">
-                    <el-button @click="openRoomInfoDataDialog(row.contractStoreList)" size="mini" plain>查看</el-button>
-                </template>
-            </el-table-column>
+                <el-table-column prop="contactAddress" label="联系地址" width="200" show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column prop="status" label="状态" width="60" :formatter="statusFormatter"> </el-table-column>
+                <el-table-column prop="checkInType" label="合作模式" width="100" :formatter="checkinTypeFormatter">
+                </el-table-column>
+                <el-table-column label="操作" fixed="right" :width="showMoreEdit?300:80" align="center" class-name="transition">
+                    <template slot-scope="{ row }">
+                        <!-- <el-button @click="detail(row)" type="success" size="mini" plain>详情</el-button> -->
+                        <el-button @click="renewalRow(row)" type="success" size="mini" plain>续约</el-button>
+                        <el-button @click="residenceDialog(row)" type="warning" size="mini" plain>退宿</el-button>
+                        <el-button @click="staffDialog(row)" type="warning" size="mini" plain>人员</el-button>
+                        <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
 
-            <el-table-column prop="contactAddress" label="联系地址" width="200" show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column prop="status" label="状态" width="60" :formatter="statusFormatter"> </el-table-column>
-            <el-table-column prop="checkInType" label="合作模式" width="100" :formatter="checkinTypeFormatter">
-            </el-table-column>
-            <el-table-column label="操作" fixed="right" min-width="300" align="center">
-                <template slot-scope="{ row }">
-                    <!-- <el-button @click="detail(row)" type="success" size="mini" plain>详情</el-button> -->
-                    <el-button @click="renewalRow(row)" type="success" size="mini" plain>续约</el-button>
-                    <el-button @click="residenceDialog(row)" type="warning" size="mini" plain>退宿</el-button>
-                    <el-button @click="staffDialog(row)" type="warning" size="mini" plain>人员</el-button>
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
         <div class="pagination-wrapper">
             <el-pagination
                 background
@@ -582,7 +598,8 @@ export default {
                 ]
             },
             sortStr: 'id,desc',
-            showDetail: false
+            showDetail: false,
+            showMoreEdit:false
         };
     },
     computed: {
@@ -1146,4 +1163,25 @@ export default {
         background-color: fade(@primary, 20%) !important;
     }
 }
+
+.el-table {
+    flex-grow: 1;
+}
+
+.table-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .float-button {
+        position: absolute;
+        z-index: 60;
+        top: 50%;
+        transform: translate(50%,-50%);
+        right: 80px;
+    }
+}
+
+.transition{
+    transition: all ease-in-out .3s;
+}
 </style>