DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/crm/invoice/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 of list" :key="item.F_InvoiceId">
            <view class="customlist-item-field">
              <text class="customlist-item-field-title">客户名称：</text>
              {{ displayListItem(item, 'F_CustomerId') }}
            </view>

            <view class="customlist-item-field">
              <text class="customlist-item-field-title">开票信息：</text>
              {{ displayListItem(item, 'F_InvoiceContent') }}
            </view>

            <!-- 操作按钮组 -->
            <l-customlist-action @view="action('view', item)" @edit="action('edit', item)" showEdit />
          </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-input v-model="queryData.keyword" @change="searchChange()" title="内容" placeholder="按内容筛选" />

        <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('create')" />
  </view>
</template>

<script>
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: {
        F_CustomerId: { type: 'select', dataSource: '1', dataSourceId: 'crmCustomer,f_fullname,f_customerid' },
        F_InvoiceContent: { type: 'texteditor' }
      },

      // 筛选菜单值
      searchData: {},
      defaultQueryData: {},
      queryData: {
        keyword: ''
      },

      // 数据源
      dataSource: {
        F_CustomerId: []
      },

      // 页面相关参数
      ready: false,
      tips: '加载中…',
      loadState: '向下翻以加载更多',
      sideOpen: false,

      // 列表条目与分页信息
      page: 1,
      total: 2,
      list: []
    }
  },

  async onLoad() {
    await this.init()
  },

  onUnload() {
    this.OFF('invoice-list-change')
  },

  methods: {
    // 页面初始化
    async init() {
      this.ON('invoice-list-change', this.refreshList)

      await Promise.all([
        // 加载 F_CustomerId 字段的数据源：客户信息
        this.FETCH_DATASOURCE('crmCustomer').then(result => {
          this.dataSource.F_CustomerId = result.data.map(t => ({ text: t.f_fullname, value: t.f_customerid }))
        }),
        // 拉取列表信息
        this.fetchList()
      ])

      this.defaultQueryData = this.COPY(this.queryData)
      this.ready = true
    },

    // 拉取列表
    async fetchList() {
      if (this.page > this.total) {
        return
      }

      const result = await this.HTTP_GET(
        '/crm/invoice/list',
        {
          pagination: { rows: 10, page: this.page, sidx: 'F_CreateDate', sord: 'DESC' },
          queryJson: JSON.stringify(this.searchData)
        },
        '加载数据时出错'
      )

      if (!result) {
        return
      }

      this.total = result.total
      this.page = result.page + 1
      this.list = this.list.concat(result.rows)

      this.tips = `已加载 ${Math.min(result.page, result.total)} / ${result.total} 页，共 ${result.records} 项`
      this.loadState = result.page >= result.total ? '已加载所有项目' : '向下翻以加载更多'
    },

    // 刷新清空列表
    async refreshList() {
      this.page = 1
      this.total = 2
      this.list = []

      await this.fetchList()
    },

    // 列表下拉
    pullDown() {
      this.refreshList().then(() => {
        this.$refs.list.stopPullDown()
      })
    },

    // 点击「编辑」、「查看」、「添加」、「删除」按钮
    action(type, item) {
      switch (type) {
        default:
        case 'create':
          this.NAV_TO('./single?type=create')
          return

        case 'view':
          this.NAV_TO('./single?type=view', item, true)
          return

        case 'edit':
          this.NAV_TO('./single?type=edit', item, true)
          return
      }
    },

    // 显示列表中的标题项
    displayListItem(item, field) {
      const fieldItem = this.scheme[field]
      const value = item[field]

      switch (fieldItem.type) {
        case 'currentInfo':
        case 'organize':
          switch (fieldItem.dataType) {
            case 'user':
              return get(this.GET_GLOBAL('user'), `${value}.name`, '')
            case 'department':
              return get(this.GET_GLOBAL('department'), `${value}.name`, '')
            case 'company':
              return get(this.GET_GLOBAL('company'), `${value}.name`, '')
            default:
              return value || ''
          }

        case 'radio':
        case 'select':
          const selectItem = this.dataSource[field].find(t => t.value === 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 || ''
      }
    },

    // 设置搜索条件
    async searchChange() {
      const result = {}

      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)))

      this.searchData = result
      await this.refreshList()
    },

    // 点击「清空搜索条件」按钮
    reset() {
      this.queryData = this.COPY(this.defaultQueryData)
      this.searchChange()
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/common/css/sidepage.less';
@import '~@/common/css/customlist.less';
</style>