DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/PersonnelManagement/MyAmount/list.vue

<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([
        () => {} 
      ])
	  
	  const result = await this.HTTP_GET(
	    '/Learun/adms/PersonnelManagement/GzAmount/curr',
	    {
	      // 这里 sidx 表示排序字段，sord 表示排序方式(DESC=降序，ASC=升序) 
	      // 代码生成器生成时默认按照主键排序，您可以修改成按创建时间的字段降序 
	      pagination: { rows: 10, page: this.page, sidx: '', sord: '' },
	      queryJson: JSON.stringify(this.searchData)
	    }, 
	    '加载数据时出错'
	  )
	  if (result) {
		  this.queryData.time = result.year + '-' + (result.month.length == '1'? '0' + result.month : result.month)
		  await this.searchChange()
	  }else{
		  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':
				let obj = item.find(e=>e.Item1 == '发放次数')
				this.NAV_TO(`./single?year=${this.searchData.year}&month=${this.searchData.month}&cs=${obj?obj.Item2:''}`, 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>