vue-reverse

vue-reverse

该项目依赖于iview UI框架

使用

import Reverse from 'vue-reverse'
import 'vue-reverse/dist/reverse.css'
const actions = {}
Vue.use(VueReverse, actions)
// 必选的第二个参数，详见下方说明

Actions

类型：Object

// 该对象的所有方法供CommonFilter和CommonDetail使用
const actions = {
  getCategoryList: (args) => { // 值需返回Promise，参数根据组件调用有所不同
		return new Promise((resolve, reject) => {
      // 接口调用，返回值根据调用组件会有所不同，见下方详细的组件说明
    })
  },
}

组件

CommonStack

该组件用于生成路由组件的内部路由（没做url匹配），所有内部页面都由该组件管理。

Props

• title
  • 说明：页面标题
  • 类型：String|Number
• query
  • 说明：外部参数，用于slot传递
  • 类型：Object

Demo

<CommonStack title="商品分类" :query="{ name: 'rainbow' }">
  <template v-slot:default="{ stackQuery }">
  	<!-- 业务组件写在这里 -->
  </template>
</CommonStack>

CommonWrapper

该组件是Stack内部页面组件，以抽屉形式打开。

Props

• name
  • 说明：页面标识

Demo

<CommonStack title="商品分类">
  <template v-slot:default="{ stackQuery }">
    <CommonWrapper name="category-list">
    	<!-- 业务组件写在这里 -->
    </CommonWrapper>
    <CommonWrapper name="category-detail">
    	<!-- 业务组件写在这里 -->
    </CommonWrapper>
  </template>
</CommonStack>

CommonFilter

数据列表组件。

Props

• action（非必选）
  • 类型：String
  • 说明：Actions中的属性（方法名），返回对象传给该组件
• actionOption （非必选）
  • 类型：Object
  • 说明：作为action的第二个参数，第一个参数为列表的筛选项
• response（非必选）
  • 类型：Object
  • 说明：没有action的时候，response作为本地对象传给该组件
• defaultValues（非必选）
  • 类型：Object
  • 说明：用于首次请求的筛选项
• fixedValues （非必选）
  • 类型：Object
  • 说明：用于固定不变的筛选项，UI不可见
• selection（非必选）
  • 类型：Object
  • 说明：用于声明用于选择的字段和已选列表

Demo

<CommonStack title="商品分类">
  <template v-slot:default="{ stackQuery }">
    <CommonWrapper name="category-list">
    	<CommonFilter action="getCategoryList" />
    </CommonWrapper>
  </template>
</CommonStack>

const actions = {
  getCategoryList: (payload, option) => {
    return new Promise(async (resolve, reject) => {
      const filters = [
        {
          type: 'input', // 组件类型
          title: '分类名称', // 搜索字段名称
          key: 'name', // 搜索字段
          props: { // 组件props
            placeholder: '输入分类名称',
            clearable: true,
          },
        },
        // ...
      ]
			const actions = [
      	{
          title: '添加分类',
          action: () => { // 支持同'getCategoryList'一样
            // stack.push用于打开内部页面，第一个参数为CommonWrapper组件的name
      			Vue.stack.push('category-detail', '添加分类')
    			},
          props: { // button组件props
            type: 'primary',
          },
        },
        // ...
			]
      // 表头的API和iview的表格是完全一样的，同样支持render，额外有些特殊支持
      const columns = [
        {
          title: '分类名称',
          key: 'name',
          align: 'center',
          width: 100,
        },
        { // 支持开关
          nodeType: 'iSwitch',
          payload: {
            title: '开启',
            key: 'is_open',
            action: 'switchCategory', // 同'getCategoryList'
          },
        },
        {  // 按钮组
          nodeType: 'action',
          payload: {
            title: '操作',
            list: [
              {
                title: '编辑',
                action: row => {
                  // 支持同'getCategoryList'一样
                  Vue.stack.push('category-detail', '添加分类', { row.id })
                },
                props: {
                  loading: false,
                },
              },
              {
                title: '删除',
                action: 'deleteCategory', // 同'getCategoryList'
              },
            ],
          },
        },
      ]
      try {
        const { data, extra, meta } = await Vue.http.get('/product/category', {
          params: payload,
        })
        const response = {
          filters, // 筛选项
          actions, // 表格上方按钮
          columns, // 表头
          data, // 列表数据
          page: meta.pagination, // 分页数据
        }
        resolve(response)
      } catch (e) {
        reject(e)
      }
    })
  },
  // ...
}

列表页的所有操作都必须是异步函数（返回Promise）

CommonDetail

表单组件

Props

• query
  • 类型：Object
  • 说明：内部路由栈
• name
  • 类型：String
  • 说明：通过name取当前组件参数，同外部CommonWrapper组件的name一致
• resetAction
  • 类型：String
  • 说明：Actions中的属性（方法名），返回表单对应数据
• resetResponse
  • 类型：Object
  • 说明：没有action的时候，response作为本地对象传给该组件
• submitAction
  • 类型：String
  • 说明：Actions中的属性（方法名），提交表单数据
• components
  • 类型：Object
  • 说明：自定义组件列表

Demo

<CommonStack title="商品分类">
  <template v-slot:default="{ stackQuery }">
    <CommonWrapper name="category-list">
    	<CommonFilter action="getCategoryList" />
    </CommonWrapper>
    <CommonWrapper name="category-detail">
    	<CommonDetail
      	name="category-detail"
        resetAction="getCategoryDetail"
        submitAction="postCategoryDetail" />
    </CommonWrapper>
  </template>
</CommonStack>

const actions = {
  getCategoryDetail () {
    return new Promise((resolve, reject) => {
      const response = {
        componentData: [
          {
            nodeType: 'block',
            nodeList: [
            	{
                nodeType: 'item',
                required: true, // *号，必填标识
                label: '分类名称',
                nodeList: [
                  {
                    nodeType: 'input', // 表单类型，支持几乎所有iview的表单组件，也可以为自定义组件
                    keyword: 'name', // 提交字段
                    hub: 'category-detail', // 当前路由名称
                    props: { // 对应组件props
                      placeholder: '输入分类名称',
                    },
                  },
                ],
              },
            ],
          },
        ],
        value: { // 表单各项的值
          name: '',
        },
        option: {}, // nodeType为select时对应的选项{ value, label }
        error: {}, // 用于表单错误返回，获取组件数据时一般为空
        preview: false, // 是否隐藏保存按钮
      }
      resolve(response)
    })
  },
  postCategoryDetail (payload) {
    return new Promise(async (resolve, reject) => {
      // payload为表单组件的value
      // 此处对表单进行验证
      // 验证失败时
      return reject({ name: '请填写名称' })
      try {
        await Vue.http[method]('/product/category', payload)
        resolve()
      } catch (e) {
        reject(e)
      }
    })
  },
}