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.
 
 
 
 
 
 

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