|
@@ -0,0 +1,270 @@ |
|
|
|
|
|
<template> |
|
|
|
|
|
<view class="page"> |
|
|
|
|
|
<!-- 主列表页 --> |
|
|
|
|
|
<view :class="sideOpen ? 'show' : ''" class="mainpage" style="padding-top: 80rpx;"> |
|
|
|
|
|
<!-- 顶部条目/分页信息栏 --> |
|
|
|
|
|
<l-customlist-banner @buttonClick="sideOpen = true">{{ tips }}</l-customlist-banner> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 滚动列表,跨端支持上拉/下拉 --> |
|
|
|
|
|
<l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="list"> |
|
|
|
|
|
<l-customlist :tips="loadState" showTips> |
|
|
|
|
|
<!-- 单条记录 --> |
|
|
|
|
|
<view class="customlist-item" v-for="(item,index) of list" :key="index"> |
|
|
|
|
|
<view v-for="item_ in item" class="customlist-item-field"> |
|
|
|
|
|
<text class="customlist-item-field-title">{{item_.Item1}}:</text> |
|
|
|
|
|
{{item_.Item2}} |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="customlist-banner-action"> |
|
|
|
|
|
<view @click="action('view', item)" |
|
|
|
|
|
class="customlist-banner-action-btn line-blue text-sm" |
|
|
|
|
|
style="border: currentColor 1px solid"> |
|
|
|
|
|
<l-icon type="search" /> |
|
|
|
|
|
查看 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</l-customlist> |
|
|
|
|
|
</l-scroll-list> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 关闭侧边抽屉按钮 --> |
|
|
|
|
|
<view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose"> |
|
|
|
|
|
<l-icon type="pullright" color="blue" /> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 侧边栏,用于设置查询条件 --> |
|
|
|
|
|
<scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y> |
|
|
|
|
|
<view v-if="ready" class="padding"> |
|
|
|
|
|
<l-date-picker |
|
|
|
|
|
@input="setSearchValue(`time`, $event)" |
|
|
|
|
|
:value="queryData.time" |
|
|
|
|
|
fields="month" |
|
|
|
|
|
title="发放月份" |
|
|
|
|
|
/> |
|
|
|
|
|
<!-- 重置查询条件按钮 --> |
|
|
|
|
|
<view class="padding-tb"> |
|
|
|
|
|
<l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <l-customlist-add v-if="!sideOpen" @click="action('add')" /> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
/* |
|
|
|
|
|
* 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) |
|
|
|
|
|
* Copyright (c) 2013-2020 上海力软信息技术有限公司 |
|
|
|
|
|
* 创建人:超级管理员 |
|
|
|
|
|
* 日 期:2020-10-16 15:39 |
|
|
|
|
|
* 描 述:工作日志 |
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* 本段代码由移动端代码生成器输出,移动端须 2.2.0 版本及以上可以使用 |
|
|
|
|
|
* 请在移动端 /pages.json 中的 pages 字段中添加一条记录: |
|
|
|
|
|
* { "path": "pages/EducationalAdministration/Journal/list", "style": { "navigationBarTitleText": "表单列表页" } } |
|
|
|
|
|
* |
|
|
|
|
|
* (navigationBarTitleText 字段为本页面的标题文本,可以修改) |
|
|
|
|
|
* (必须自行操作该步骤,力软代码生成器不会自动帮您修改 /pages.json 文件) |
|
|
|
|
|
*/ |
|
|
|
|
|
import moment from 'moment' |
|
|
|
|
|
import get from 'lodash/get' |
|
|
|
|
|
import set from 'lodash/set' |
|
|
|
|
|
import pickBy from 'lodash/pickBy' |
|
|
|
|
|
import mapValues from 'lodash/mapValues' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
// 数据项的数据类型、结构 |
|
|
|
|
|
scheme: { |
|
|
|
|
|
SendDate: { type: 'text' }, |
|
|
|
|
|
TotalDeduction: { type: 'text'}, |
|
|
|
|
|
TotalSend: { type: 'text'}, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 查询条件 |
|
|
|
|
|
searchData: {}, |
|
|
|
|
|
defaultQueryData: {}, |
|
|
|
|
|
queryData: { |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 数据源 |
|
|
|
|
|
dataSource: { |
|
|
|
|
|
// Status: [{text:'已提交',value:'1'},{text:'未提交',value:'0'}], |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 页面相关参数 |
|
|
|
|
|
ready: false, |
|
|
|
|
|
// tips: '加载中...', |
|
|
|
|
|
tips: '请按月份进行搜索...', |
|
|
|
|
|
loadState: '向下翻以加载更多', |
|
|
|
|
|
sideOpen: false, |
|
|
|
|
|
|
|
|
|
|
|
// 列表与分页信息 |
|
|
|
|
|
page: 1, |
|
|
|
|
|
total: 2, |
|
|
|
|
|
list: [] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
async onLoad() { |
|
|
|
|
|
await this.init() |
|
|
|
|
|
}, |
|
|
|
|
|
onUnload() { |
|
|
|
|
|
this.OFF('LogisticsManagement-Purchase_Work-list-change') |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
// 页面初始化 |
|
|
|
|
|
async init() { |
|
|
|
|
|
this.ON('LogisticsManagement-Purchase_Work-list-change', this.reset) |
|
|
|
|
|
// 拉取加载列表和数据源 |
|
|
|
|
|
await Promise.all([ |
|
|
|
|
|
() => {} |
|
|
|
|
|
]) |
|
|
|
|
|
await this.fetchList() |
|
|
|
|
|
// 初始化查询条件 |
|
|
|
|
|
this.defaultQueryData = this.COPY(this.queryData) |
|
|
|
|
|
this.ready = true |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 拉取列表 |
|
|
|
|
|
async fetchList(isConcat = true) { |
|
|
|
|
|
if (this.page > this.total) { return } |
|
|
|
|
|
const result = await this.HTTP_GET( |
|
|
|
|
|
'/Learun/adms/PersonnelManagement/GzAmount/my', |
|
|
|
|
|
{ |
|
|
|
|
|
// 这里 sidx 表示排序字段,sord 表示排序方式(DESC=降序,ASC=升序) |
|
|
|
|
|
// 代码生成器生成时默认按照主键排序,您可以修改成按创建时间的字段降序 |
|
|
|
|
|
pagination: { rows: 10, page: this.page, sidx: '', sord: '' }, |
|
|
|
|
|
queryJson: JSON.stringify(this.searchData) |
|
|
|
|
|
}, |
|
|
|
|
|
'加载数据时出错' |
|
|
|
|
|
) |
|
|
|
|
|
if (!result) { return } |
|
|
|
|
|
|
|
|
|
|
|
this.total = result.total |
|
|
|
|
|
this.page = result.page + 1 |
|
|
|
|
|
// this.list = isConcat ? this.list.concat(result.rows) : result.rows; |
|
|
|
|
|
if(result.rows.length)this.list = [result.rows] |
|
|
|
|
|
|
|
|
|
|
|
// this.tips = `已加载 ${Math.min(result.page, result.total)} / ${result.total} 页,共 ${result.records} 项` |
|
|
|
|
|
this.tips = this.searchData.year?this.searchData.year+'年'+this.searchData.month+'月':'请按月份进行搜索...' |
|
|
|
|
|
this.loadState = result.page >= result.total ? '已加载所有项目' : '向下翻以加载更多' |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 刷新清空列表 |
|
|
|
|
|
async refreshList(isConcat = true) { |
|
|
|
|
|
this.page = 1 |
|
|
|
|
|
this.total = 2 |
|
|
|
|
|
this.list = [] |
|
|
|
|
|
|
|
|
|
|
|
await this.fetchList(isConcat) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 列表下拉 |
|
|
|
|
|
pullDown() { |
|
|
|
|
|
this.refreshList().then(() => { |
|
|
|
|
|
this.$refs.list.stopPullDown() |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 设置搜索条件 |
|
|
|
|
|
async searchChange() { |
|
|
|
|
|
const result = {} |
|
|
|
|
|
|
|
|
|
|
|
// 将其他查询项添加到查询 JSON 中 |
|
|
|
|
|
const queryObj = pickBy(this.queryData, t => (Array.isArray(t) ? t.length > 0 : t)) |
|
|
|
|
|
Object.assign(result, mapValues(queryObj, t => (Array.isArray(t) ? t.join(',') : t))) |
|
|
|
|
|
|
|
|
|
|
|
if(result.time){ |
|
|
|
|
|
result.year = result.time.split('-')[0] |
|
|
|
|
|
result.month = result.time.split('-')[1] |
|
|
|
|
|
} |
|
|
|
|
|
delete result['time'] |
|
|
|
|
|
|
|
|
|
|
|
this.searchData = result |
|
|
|
|
|
await this.refreshList(false) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 点击「清空查询条件」按钮 |
|
|
|
|
|
reset() { |
|
|
|
|
|
this.queryData = this.COPY(this.defaultQueryData) |
|
|
|
|
|
this.searchChange() |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 点击「编辑」、「查看」、「添加」、「删除」按钮 |
|
|
|
|
|
async action(type, item) { |
|
|
|
|
|
switch (type) { |
|
|
|
|
|
case 'view': |
|
|
|
|
|
this.NAV_TO(`./single?year=${this.searchData.year}&month=${this.searchData.month}`, item, true) |
|
|
|
|
|
return |
|
|
|
|
|
|
|
|
|
|
|
default: |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
// 设置表单数据的方法 |
|
|
|
|
|
setSearchValue(path, value) { |
|
|
|
|
|
this.$set(this.queryData, path, value) |
|
|
|
|
|
this.searchChange() |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 显示列表中的标题项 |
|
|
|
|
|
displayListItem(item, field) { |
|
|
|
|
|
const fieldItem = this.scheme[field] |
|
|
|
|
|
const value = item[field] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
switch (fieldItem.type) { |
|
|
|
|
|
case 'currentInfo': |
|
|
|
|
|
case 'organize': |
|
|
|
|
|
return fieldItem.dataType === 'time' ? value : get(this.GET_GLOBAL(fieldItem.dataType), `${value}.name`, '') |
|
|
|
|
|
|
|
|
|
|
|
case 'radio': |
|
|
|
|
|
case 'select': |
|
|
|
|
|
const selectItem = this.dataSource[field].find(t => t.value === String(value)) |
|
|
|
|
|
return get(selectItem, 'text', '') |
|
|
|
|
|
|
|
|
|
|
|
case 'checkbox': |
|
|
|
|
|
if (!value || value.split(',').length <= 0) { return '' } |
|
|
|
|
|
const checkboxItems = value.split(',') |
|
|
|
|
|
return this.dataSource[field].filter(t => checkboxItems.includes(t.value)).map(t => t.text).join(',') |
|
|
|
|
|
|
|
|
|
|
|
case 'datetime': |
|
|
|
|
|
if (!value) { return '' } |
|
|
|
|
|
return moment(value).format(Number(fieldItem.dateformat) === 0 ? 'YYYY年 M月 D日' : 'YYYY-MM-DD HH:mm') |
|
|
|
|
|
|
|
|
|
|
|
default: return value === null || value === undefined ? '' : value |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
@import '~@/common/css/sidepage.less'; |
|
|
|
|
|
@import '~@/common/css/customlist.less'; |
|
|
|
|
|
.customlist-banner-action { |
|
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
|
|
|
|
|
|
.customlist-banner-action-btn { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
padding: 4px 6px; |
|
|
|
|
|
margin: 0 3px; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</style> |