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.

list.vue 7.8 KiB

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