You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

253 lines
9.1 KiB

  1. <template>
  2.   <view class="page">
  3.     <!-- 主列表页 -->
  4.     <view :class="sideOpen ? 'show' : ''" class="mainpage" style="padding-top: 80rpx;">
  5.       <!-- 顶部条目/分页信息栏 -->
  6.       <l-customlist-banner @buttonClick="sideOpen = true">{{ tips }}</l-customlist-banner>
  7.   
  8.       <!-- 滚动列表,跨端支持上拉/下拉 -->
  9.       <l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="list">
  10.         <l-customlist :tips="loadState" showTips>
  11.           <!-- 单条记录 -->
  12.           <view class="customlist-item" v-for="item of list" :key="item.VID">
  13.   
  14.             <view class="customlist-item-field">
  15.               <text class="customlist-item-field-title">学年:</text>
  16.               {{ displayListItem(item, 'AcademicYearNo') }}
  17.             </view>
  18.   
  19.             <view class="customlist-item-field">
  20.               <text class="customlist-item-field-title">学期:</text>
  21.               {{ displayListItem(item, 'Semester') }}
  22.             </view>
  23.   
  24.             <view class="customlist-item-field">
  25.               <text class="customlist-item-field-title">教师姓名:</text>
  26.               {{ displayListItem(item, 'EmpName') }}
  27.             </view>
  28.   
  29.             <view class="customlist-item-field">
  30.               <text class="customlist-item-field-title">课程名称:</text>
  31.               {{ displayListItem(item, 'LessonName') }}
  32. </view>
  33.             <view class="customlist-item-field">
  34.               <text class="customlist-item-field-title">评教状态:</text>
  35.               {{ displayListItem(item, 'UID') }}
  36.             </view>
  37.   
  38.   
  39.             <l-customlist-action @view="action('view', item)" />
  40.           </view>
  41.         </l-customlist>
  42.       </l-scroll-list>
  43.     </view>
  44.   
  45.     <!-- 关闭侧边抽屉按钮 -->
  46.     <view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose">
  47.       <l-icon type="pullright" color="blue" />
  48.     </view>
  49.   
  50.     <!-- 侧边栏,用于设置查询条件 -->
  51.     <scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y>
  52.       <view v-if="ready" class="padding">
  53.   
  54.   
  55.         <!-- 重置查询条件按钮 -->
  56.         <view class="padding-tb">
  57.           <l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button>
  58.         </view>
  59.       </view>
  60.     </scroll-view>
  61.   
  62.   
  63.   </view>
  64. </template>
  65.   
  66.   
  67. <script>
  68. /*
  69.  * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn)
  70.  * Copyright (c) 2013-2020 上海力软信息技术有限公司
  71.  * 创建人:超级管理员
  72.  * 日  期:2020-10-16 15:39
  73.  * 描  述:工作日志
  74.  */
  75.   
  76. /**
  77.  * 本段代码由移动端代码生成器输出,移动端须 2.2.0 版本及以上可以使用
  78.  * 请在移动端 /pages.json 中的 pages 字段中添加一条记录:
  79.  * { "path": "pages/EducationalAdministration/Journal/list", "style": { "navigationBarTitleText": "表单列表页" } }
  80.  * 
  81.  * (navigationBarTitleText 字段为本页面的标题文本,可以修改)
  82.  * (必须自行操作该步骤,力软代码生成器不会自动帮您修改 /pages.json 文件)
  83.  */
  84. import moment from 'moment'
  85. import get from 'lodash/get'
  86. import set from 'lodash/set'
  87. import pickBy from 'lodash/pickBy'
  88. import mapValues from 'lodash/mapValues'
  89.   
  90. export default {
  91.   data() {
  92.     return {
  93.       // 数据项的数据类型、结构
  94.       scheme: {
  95.         AcademicYearNo: { type: 'text' },
  96.         Semester: { type: 'text'},
  97.         EmpName: { type: 'text'},
  98.         LessonName: { type: 'text' },
  99.         UID: { type: 'bit' },
  100.       },
  101.   
  102.       // 查询条件
  103.       searchData: {},
  104.       defaultQueryData: {},
  105.       queryData: {
  106.       },
  107.   
  108.       // 数据源
  109.       dataSource: {
  110.         JTypeId: [],
  111.       },
  112.   
  113.       // 页面相关参数
  114.       ready: false,
  115.       tips: '加载中...',
  116.       loadState: '向下翻以加载更多',
  117.       sideOpen: false,
  118.   
  119.       // 列表与分页信息
  120.       page: 1,
  121.       total: 2,
  122.       list: []
  123.     }
  124.   },
  125.   
  126.   async onLoad() {
  127.     await this.init()
  128.   },
  129.   onUnload() {
  130.     this.OFF('EducationalAdministrationJournalSend-list-change')
  131.   },
  132.   
  133.   methods: {
  134.     // 页面初始化
  135.     async init() {
  136.       this.ON('EducationalAdministrationJournalSend-list-change', this.refreshList)
  137.   
  138.       // 拉取加载列表和数据源
  139.       await Promise.all([
  140.   
  141.   
  142.         () => {}
  143.       ])
  144.       await this.fetchList()
  145.       // 初始化查询条件
  146.       this.defaultQueryData = this.COPY(this.queryData)
  147.       this.ready = true
  148.     },
  149.   
  150.     // 拉取列表
  151.     async fetchList() {
  152.       if (this.page > this.total) { return }
  153.   
  154.       const result = await this.HTTP_GET(
  155.         '/eval/studentlist',
  156.         {
  157.           // 这里 sidx 表示排序字段,sord 表示排序方式(DESC=降序,ASC=升序)
  158.           // 代码生成器生成时默认按照主键排序,您可以修改成按创建时间的字段降序
  159.           pagination: { rows: 10, page: this.page, sidx: '', sord: 'DESC' },
  160.           queryJson: JSON.stringify(this.searchData)
  161.         },
  162.         '加载数据时出错'
  163.       )
  164.   
  165.       if (!result) { return }
  166.   
  167.       this.total = result.total
  168.       this.page = result.page + 1
  169.       this.list = this.list.concat(result.rows)
  170.   
  171.       this.tips = `已加载 ${Math.min(result.page, result.total)} / ${result.total} 页,共 ${result.records} 项`
  172.       this.loadState = result.page >= result.total ? '已加载所有项目' : '向下翻以加载更多'
  173.     },
  174.   
  175.     // 刷新清空列表
  176.     async refreshList() {
  177.       this.page = 1
  178.       this.total = 2
  179.       this.list = []
  180.   
  181.       await this.fetchList()
  182.     },
  183.   
  184.     // 列表下拉
  185.     pullDown() {
  186.       this.refreshList().then(() => {
  187.         this.$refs.list.stopPullDown()
  188.       })
  189.     },
  190.   
  191.     // 设置搜索条件
  192.     async searchChange() {
  193.       const result = {}
  194.   
  195.       // 将其他查询项添加到查询 JSON 中
  196.       const queryObj = pickBy(this.queryData, t => (Array.isArray(t) ? t.length > 0 : t))
  197.       Object.assign(result, mapValues(queryObj, t => (Array.isArray(t) ? t.join(',') : t)))
  198.   
  199.       this.searchData = result
  200.       await this.refreshList()
  201.     },
  202.   
  203.     // 点击「清空查询条件」按钮
  204.     reset() {
  205.       this.queryData = this.COPY(this.defaultQueryData)
  206.       this.searchChange()
  207.     },
  208.   
  209.     // 点击「编辑」、「查看」、「添加」、「删除」按钮
  210.     async action(type, item) {
  211. this.NAV_TO(`./single?type=view&id=${item.VID}&EmpNo=${item.EmpNo}&LessonNo=${item.LessonNo}`)
  212.     },
  213.   
  214.     // 显示列表中的标题项
  215.     displayListItem(item, field) {
  216.       const fieldItem = this.scheme[field]
  217.       const value = item[field]
  218.   
  219.       switch (fieldItem.type) {
  220.         case 'currentInfo':
  221.         case 'organize':
  222.           return fieldItem.dataType === 'time' ? value : get(this.GET_GLOBAL(fieldItem.dataType), `${value}.name`, '')
  223.   
  224.         case 'radio':
  225.         case 'select':
  226.           const selectItem = this.dataSource[field].find(t => t.value === String(value))
  227.           return get(selectItem, 'text', '')
  228.   
  229.         case 'checkbox':
  230.           if (!value || value.split(',').length <= 0) { return '' }
  231.           const checkboxItems = value.split(',')
  232.           return this.dataSource[field].filter(t => checkboxItems.includes(t.value)).map(t => t.text).join(',')
  233.   
  234.         case 'datetime':
  235.           if (!value) { return '' }
  236.           return moment(value).format(Number(fieldItem.dateformat) === 0 ? 'YYYY年 M月 D日' : 'YYYY-MM-DD HH:mm')
  237. case 'bit':
  238. return (value != undefined && value!== '') ? "已评" : "未评"
  239.   
  240.         default: return value === null || value === undefined ? '' : value
  241.       }
  242.     }
  243.   
  244.   }
  245. }
  246. </script>
  247.   
  248.   
  249. <style lang="less" scoped>
  250. @import '~@/common/css/sidepage.less';
  251. @import '~@/common/css/customlist.less';
  252. </style>