vue-reverse/examples/actions/product/getProductList.js

import Vue from 'vue'
import store from '@/store'

export default function getProductList (payload = {}, option = {}) {
  const role = store.state.user.role
  // const role = 'shop'
  return new Promise(async (resolve, reject) => {
    // 筛选项
    const filters = {
      keyword: {
        type: 'input',
        title: '商品名称/编码',
        key: 'keyword',
        props: {
          placeholder: '商品名称/编码',
          clearable: true,
        },
      },
      category_id1: {
        type: 'select',
        title: '商品分类',
        key: 'category_id1',
        props: {
          placeholder: '商品分类',
          filterable: true,
          clearable: true,
        },
        option: {
          type: 'async',
          list: [],
        },
      },
      up_status: {
        type: 'select',
        title: '商品状态',
        key: 'up_status',
        props: {
          placeholder: '商品状态',
          filterable: true,
          clearable: true,
        },
        option: {
          list: [],
        },
      },
    }
    // 操作项
    let actions = [
      {
        title: '添加商品',
        action: 'goProductDetail',
        props: {
          type: 'primary',
        },
      },
    ]
    if (role !== 'shop') actions = []

    const sortActions = []

    // 表格项
    // "sale_name"
    const columns = {
      spu_code: {
        title: 'SKU编码',
        key: 'spu_code',
        align: 'center',
        width: 110,
      },
      id: {
        title: '商品ID',
        key: 'id',
        align: 'center',
      },
      img: {
        nodeType: 'image',
        payload: {
          key: 'img',
          title: '商品图片',
          width: 80,
          height: 80,
        },
      },
      'name&sku_name': {
        title: '商品名称/编码',
        key: 'name&sku_name',
        align: 'center',
        width: 100,
      },
      sale_name: {
        title: '上架名称',
        key: 'sale_name',
        align: 'center',
        width: 100,
      },
      price: {
        title: '价格',
        key: 'price',
        align: 'center',
        width: 80,
        format: {
          type: 'price',
        },
      },
      category_name1: {
        title: '一级分类',
        key: 'category_name1',
        align: 'center',
        width: 100,
      },
      category_name2: {
        title: '二级分类',
        key: 'category_name2',
        align: 'center',
        width: 100,
      },
      category_name3: {
        title: '三级分类',
        key: 'category_name3',
        align: 'center',
        width: 100,
      },
      main_label_name: {
        title: '检测标签',
        key: 'main_label_name',
        align: 'center',
        width: 100,
      },
      label: {
        title: '商品标签',
        key: 'label',
        align: 'center',
        width: 100,
        render: (h, { row }) => {
          const element = []
          row.label.forEach(item => {
            element.push(h('div', [item]))
          })
          return h('div', {}, [element])
        },
      },
      total_stock: {
        title: '库存',
        key: 'total_stock',
        align: 'center',
        width: 80,
      },
      total_count: {
        title: '销量',
        key: 'total_count',
        align: 'center',
        width: 80,
      },
      up_status: {
        nodeType: 'iSwitch',
        payload: {
          title: role === 'shop' ? '上架' : '销售状态',
          key: role === 'shop' ? 'up_status' : 'sale_status',
          action: 'switchProduct',
        },
      },
    }

    const sortColumns = {}

    // 表格扩展（数据操作）
    const columnsExtra = {
      nodeType: 'action',
      payload: {
        title: '操作',
        list: [
          {
            title: role === 'shop' ? '编辑' : '查看',
            action: 'goProductDetail',
            props: {
              loading: false,
              type: 'primary',
            },
          },
          {
            title: '删除',
            action: 'deleteProductList',
            props: {
              loading: false,
              type: 'warning',
            },
          },
        ],
      },
    }

    if (role !== 'shop') columnsExtra.payload.list.splice(1, 1)

    const sortColumnsExtra = {}
    const url = role === 'shop' ? '/product/product' : '/product/operate/product'
    try {
      const isSort = option.type === 'sort'
      if (isSort) payload.per_page = 1000
      const { data, extra, meta } = await Vue.http.get(url, {
        params: payload,
      })
      const response = {
        filters: isSort ? [] : Object.keys(filters).map(i => filters[i]),
        actions: isSort ? sortActions : actions,
        data: data,
        columns: extra.columns
          .map(key => (isSort ? sortColumns : columns)[key])
          .filter(Boolean)
          .concat(isSort ? sortColumnsExtra : columnsExtra),
        page: isSort ? {} : meta.pagination,
        title: '商品列表',
      }
      resolve(response)
    } catch (e) {
      reject(e)
    }
  })
}