ndbs
2 years ago
1 changed files with 334 additions and 0 deletions
Unified View
Diff Options
+ 334
- 0
Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/MealCardRunTab/list.vue
View File
| @@ -0,0 +1,334 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <view class="mainpage" :class="sideOpen ? 'show' : ''" style="padding-top: 40px;"> | |||||
| <!-- <l-customlist-banner></l-customlist-banner> --> | |||||
| <!-- <view class="records"></view> --> | |||||
| <!-- 顶部条目/分页信息栏 --> | |||||
| <l-customlist-banner @buttonClick="sideOpen = true">共 {{ records }} 条数据</l-customlist-banner> | |||||
| <l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="data"> | |||||
| <l-customlist :tips="loadState" showTips> | |||||
| <l-list> | |||||
| <l-list-item v-for="(item, ind) in data" :key="item.Id" @click="itemClick(item)"> | |||||
| <view style="flex: 1;"> | |||||
| <view style="display: flex;"> | |||||
| <view style="flex: 1;color: #303133;font-size: 14px;padding: 8px 0;"> | |||||
| <view class="wrap1">{{item.bigGroup}}{{item.smallGroup?"-"+item.smallGroup:""}}</view> | |||||
| <view style="color: #909399;font-size: 12px;"> | |||||
| <view> | |||||
| 餐次：{{item.seg||"--"}} | |||||
| </view> | |||||
| <view>中心时间：{{item.centralTm||"--"}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <view style="color: #303133;font-weight: 700;font-size: 18px;padding-top: 14px;"> | |||||
| <view style="text-align: right;">{{item.flowamount}}</view> | |||||
| <view style="color: #909399;font-size: 12px;font-weight: 500;">余额：{{item.balance}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="detail" v-if="item.detailVisiable"> | |||||
| <view> | |||||
| <text class="title">学生卡账号</text> | |||||
| {{item.accountNo}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">学生卡姓名</text> | |||||
| {{item.accountName}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">部门名称</text> | |||||
| {{item.depName}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">身份证号</text> | |||||
| {{item.personId}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">身份名称</text> | |||||
| {{item.identiName}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">流水类型</text> | |||||
| {{item.flowtype}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">交易金额</text> | |||||
| {{item.flowamount}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">余 额</text> | |||||
| {{item.balance}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">卡 号</text> | |||||
| {{item.cardNo}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">中心时间</text> | |||||
| {{item.centralTm}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">中心序号</text> | |||||
| {{item.centralNo}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">发生时间</text> | |||||
| {{item.occurTime}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">节点名称</text> | |||||
| {{item.node}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">营业大组名称</text> | |||||
| {{item.bigGroup}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">营业小组名称</text> | |||||
| {{item.smallGroup}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">营业餐次</text> | |||||
| {{item.seg}} | |||||
| </view> | |||||
| <view> | |||||
| <text class="title">Pos机序号</text> | |||||
| {{item.pos}} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </l-list-item> | |||||
| </l-list> | |||||
| </l-customlist> | |||||
| </l-scroll-list> | |||||
| </view> | |||||
| <!-- 侧边栏，用于设置查询条件 --> | |||||
| <scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y> | |||||
| <view v-if="ready" class="padding"> | |||||
| <l-customlist-sidepage-datefilter | |||||
| v-model="dateRange" | |||||
| @change="searchChange" | |||||
| title="按时间日期查询: " | |||||
| ref="datefilter" | |||||
| class="margin-bottom" | |||||
| /> | |||||
| <!-- <l-input | |||||
| v-model="queryData.LibraryCard" | |||||
| @change="searchChange" | |||||
| title ="借书证" | |||||
| placeholder="按借书证查询" | |||||
| /> --> | |||||
| <!-- 重置查询条件按钮 --> | |||||
| <view class="padding-tb"> | |||||
| <l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button> | |||||
| </view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <!-- 关闭侧边抽屉按钮 --> | |||||
| <view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose"> | |||||
| <l-icon type="pullright" color="blue" /> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import pickBy from 'lodash/pickBy' | |||||
| import mapValues from 'lodash/mapValues' | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| dateRange:null, | |||||
| weekChina: ['一', '二', '三', '四', '五', '六', '日'], | |||||
| user: null, | |||||
| data: [], | |||||
| total: 1, | |||||
| records: 0, | |||||
| ready: false, | |||||
| page: 1, | |||||
| rows: 10, | |||||
| multipleData: { | |||||
| IsPhone:"0" , | |||||
| accountName:"", | |||||
| startTime:undefined, | |||||
| endTime:undefined, | |||||
| }, | |||||
| sideOpen: false, | |||||
| loadState: '向下翻以加载更多', | |||||
| isReset:false, | |||||
| // tips: '加载中...', | |||||
| }; | |||||
| }, | |||||
| onUnload() { | |||||
| this.OFF('askList'); | |||||
| }, | |||||
| methods: { | |||||
| async init() { | |||||
| this.ON('askList', this.refreshList); | |||||
| // 拉取加载列表和数据源 | |||||
| Promise.all([() => {}]); | |||||
| var _this = this; | |||||
| this.user = await this.GET_GLOBAL('loginUser'); | |||||
| this.multipleData.accountName = this.user.realName | |||||
| this.defaultQueryData = this.COPY(this.multipleData) | |||||
| this.fetchList(); | |||||
| this.ready = true; | |||||
| }, | |||||
| // 拉取列表 | |||||
| async fetchList() { | |||||
| if(!this.multipleData.accountName)return | |||||
| if (this.page > this.total)return | |||||
| let _this = this; | |||||
| let _postParam = { | |||||
| pagination: { | |||||
| rows: _this.rows, | |||||
| page: _this.page, | |||||
| sidx: 'centralTm', | |||||
| sord: 'desc', | |||||
| }, | |||||
| queryJson: JSON.stringify(_this.multipleData) | |||||
| }; | |||||
| _this.LOADING('加载数据中…') | |||||
| _this.HTTP_GET('/Learun/adms/MealCardRunTab/getlist', _postParam, '加载数据时出错').then(res => { | |||||
| _this.HIDE_LOADING(); | |||||
| console.log(res); | |||||
| this.data = this.data.concat(res.rows); | |||||
| _this.total = res.total; | |||||
| _this.records = res.records; | |||||
| this.page = res.page + 1; | |||||
| this.loadState = res.page >= res.total ? '已加载所有数据' : '向下翻以加载更多'; | |||||
| // console.log(_this.$refs.data.$el) | |||||
| // console.log(_this.$refs.data.$el.getElementsByClassName("customlist")) | |||||
| // console.log(_this.data); | |||||
| }); | |||||
| }, | |||||
| // 列表下拉 | |||||
| pullDown() { | |||||
| this.refreshList().then(() => { | |||||
| this.$refs.data.stopPullDown(); | |||||
| }); | |||||
| }, | |||||
| async refreshList() { | |||||
| this.page = 1; | |||||
| this.total = 1; | |||||
| this.data = []; | |||||
| this.fetchList(); | |||||
| }, | |||||
| // 设置搜索条件 | |||||
| async searchChange() { | |||||
| if(this.isReset)return | |||||
| const result = {} | |||||
| // 时间查询相关参数 | |||||
| if (this.dateRange) { | |||||
| this.multipleData.StartTime = this.dateRange.start | |||||
| this.multipleData.EndTime = this.dateRange.end | |||||
| } else{ | |||||
| this.multipleData.StartTime = "" | |||||
| this.multipleData.EndTime = "" | |||||
| } | |||||
| // console.log(this.dateRange,"==========") | |||||
| this.searchData = result | |||||
| await this.refreshList() | |||||
| }, | |||||
| // 点击「清空查询条件」按钮 | |||||
| reset() { | |||||
| this.isReset = true | |||||
| this.$refs.datefilter.changeDateRange('all') | |||||
| this.multipleData = this.COPY(this.defaultQueryData) | |||||
| this.isReset = false | |||||
| this.searchChange() | |||||
| }, | |||||
| itemClick(item){ | |||||
| this.data = this.data.map(item1=>{ | |||||
| if(item1.Id == item.Id){ | |||||
| item.detailVisiable = item.detailVisiable?false:true | |||||
| } | |||||
| return item1 | |||||
| }) | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| }, | |||||
| created() { | |||||
| this.init(); | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="less" scoped> | |||||
| @import '~@/common/css/sidepage.less'; | |||||
| @import '~@/common/css/customlist.less'; | |||||
| .page { | |||||
| background-color: #fff; | |||||
| } | |||||
| .page-content { | |||||
| margin-top: 39px; | |||||
| } | |||||
| .records { | |||||
| color: #8f8f94; | |||||
| background: #ffffff; | |||||
| padding: 10px 12px; | |||||
| width: 100%; | |||||
| vertical-align: middle; | |||||
| border-bottom: 0.5px solid #ddd; | |||||
| position: fixed; | |||||
| top: var(--window-top); | |||||
| z-index: 1024; | |||||
| border-bottom: 0.5px solid #ddd; | |||||
| height: 40px; | |||||
| width: 100%; | |||||
| box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.1); | |||||
| // background: #f1f1f1; | |||||
| } | |||||
| .pageBox { | |||||
| // margin-top: 34px; | |||||
| padding: 5px 15px; | |||||
| line-height: 24px; | |||||
| border-bottom: 5px solid #f5f5f5; | |||||
| } | |||||
| .delbtn { | |||||
| position: absolute; | |||||
| right: 15px; | |||||
| bottom: 7px; | |||||
| padding: 3px 10px; | |||||
| background: #dd524d; | |||||
| color: #fff; | |||||
| border-radius: 3px; | |||||
| } | |||||
| .wrap1>span{ | |||||
| // width: 100%; | |||||
| text-overflow: ellipsis; | |||||
| overflow: hidden; | |||||
| white-space: nowrap; | |||||
| } | |||||
| .detail{ | |||||
| font-size: 12px; | |||||
| .title{ | |||||
| display: inline-block; | |||||
| width: 100px; | |||||
| } | |||||
| } | |||||
| </style> | |||||