vue-admin-mixin v0.2.93

Vue Admin Mixin

For the development of admin project, some commonly used mixins are implemented for rapid development, code reuse and code specification.

This library fully depends on vue-property-decorator, so please read its README before using this library.

License

MIT License

Install

npm i -S vue-admin-mixin

Usage

There are several Mixins:

• VdMixin
• VdTable.MainMixin
• VdTable.ParamMixin
• VdTable.ListMixin
• VdModal.CrlMixin
• VdModal.TargetMixin
• VdModal.CallbackMixin
• VdListMixin
• VdObjMixin
• VdSubmitMixin
• VdEditMixin

There are several Decorators:

• ModalCallback
• Confirm
• Validate

There are several Service:

• VdDefaultConfigService

VdMixin mixin

提供基本方法，所有的Mixin都继承了这个类

VdMixin 属性:

VdMixin 方法:

options:
interface VdRequestOptions {
	load?: boolean; // 是否是获取请求
	loading?: boolean; // 是否加载loading框
	message?: VdMessageOptions; // 处理message选项
	confirm?: VdConfirmInfo; // 确认提示消息
}

VdTable.MainMixin<P, R> mixin

用于列表分页查询的插件。

<template>
  <platform-list-search></platform-list-search>
  <cc-table-container :total="vdTotal" v-loading="vdLLoading" @loadByPage="vdRefreshByPage">
    <platform-list-table></platform-list-table>
  </cc-table-container>
</template>

import { Component } from 'vue-property-decorator';
import { VdTable } from 'vue-admin-mixin';

@Component({
	components: { PlatformListSearch, PlatformListTable },
})
export default class PlatformList extends VdTable.MainMixin<PlatformSearch, Platform> {
	
  	/**
	 * 设置默认请求参数
	 */
	public vdDefaultParams(): PlatformSearch {
		return { searchText: '' };
	}

	/**
	 * 加载数据
	 */
	public created() {
		this.vdInitData(API_PLATFORM_LIST).then();
	}
}

VdTable.ParamMixin<P, R> mixin

建议搜索区域是一个组件，如果是这样的话， 可以使用 VdTable.ParamMixin 来同步列表的请求参数和刷新事件。

<template>
 <el-form :inline="true" :model="vdParams" class="demo-form-inline">
  <el-form-item label="筛选">
    <el-input v-model="vdParams.searchText" placeholder="请输入筛选条件" />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="vdSearch">搜索</el-button>
    <el-button @click="vdClear">清空</el-button>
  </el-form-item>
 </el-form>
</template>

import { Component } from 'vue-property-decorator';
import { VdTable } from 'vue-admin-mixin';

@Component
export default class PlatformListSearch extends VdTable.ParamMixin<PlatformSearch> {
}

VdTable.ListMixin<P, R> mixin

建议表格的结果页面是一个组件， 可以使用 VdTable.ListMixin 来同步列表的请求参数和刷新事件。

<el-table :data="vdList" stripe>
  <el-table-column prop="name" label="XXX" width="168">
  </el-table-column>
  <div slot="vdLEmpty">
    <moy-empty />
  </div>
</el-table>

import { Component } from 'vue-property-decorator';
import { VdTable } from 'vue-admin-mixin';

@Component
export default class PlatformListTable extends VdTable.ListMixin<Platform> {
}

VdTable.MainMixin 属性:

VdTable.MainMixin 方法:

VdTable.ParamMixin 属性:

VdTable.ParamMixin 方法:

VdTable.ListMixin 属性:

VdTable.ListMixin 方法:

VdModal.CrlMixin VdModal.TargetMixin VdModal.CallbackMixin mixin

用于控制模态框的打开、隐藏、数据传值和回值。 VdModal.CrlMixin 继承了 VdModal.CallbackMixin 所以可以使用 CallbackMixin 的属性和方法。

<template>
   <div @click="vdOpenModalByAdd()">打开添加modal(打开方式1)</div>
   <div @click="vdOpenModalByUpdate(data)">打开修改modal(打开方式1)</div>
   <div @click="handleOpenModal(data).then()">也可以这样调用(打开方式2)</div>
</template>

import { Component } from 'vue-property-decorator';
import { VdModal } from 'vue-admin-mixin';

@Component({
	components: { Modal1 },
})
export default class ModalTest extends VdModal.CrlMixin {
	/**
	 * 打开模态框方法(打开方式2)
	 */
       public async handleOpenModal(data: any) {
		const result = await this.vdOpenModal(PageMode.UPDATE, data);
	}
	/**
	 * 模态框回调(回调方式1)
	 */
	public vdModalCallback(data: any, pipe?: string) {
		if (this.vdIsUpdate) {
			this.loadDetailById(id).then();
		} else {
			this.loadList().then();
		}
	}
	/**
	 * 如果多个modal回调监听使用pipe区分(回调方式2)
	 * 注意：不能跟 vdModalCallback 重名
	 */
	@ModalCallback('pipeKey')
	public handleModalCallbackByPipeKey(data: any) {
		if (this.vdIsUpdate) {
			this.loadDetailById(id).then();
		} else {
			this.loadList().then();
		}
	}
}

Note that:

如果多个想控制多个modal的话， 使用pipe来解决， 打开时传入pipe， 接受时可以根据pipe来区分。 另一种方式使用@ModalCallback('pipeKey')注解来实现回调监听(推荐使用)。

TargetMixin mixin

VdModal.TargetMixin，模态框组件继承TargetMixin，在vdShowModal回调函数上可以接受到传入的数据，vdCloseModalCallback 方法可以回传数据到CrlMixin或者CallbackMixin上。

<template>
   <el-dialog :title="vdActionText + 'XXX'" :visible.sync="vdVisible">
      <span slot="footer" class="dialog-footer">
	 <el-button @click="vdCloseModal">取 消</el-button>
	 <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
   </el-dialog>
</template>

import { Component } from 'vue-property-decorator';
import { VdModal } from 'vue-admin-mixin';

@Component
export default class Modal1 extends VdModal.TargetMixin {
	/**
	 * 打开模态框回调
	 */
	public vdShowModal(data?: any): void {
	}

	/**
	 * 关闭模态框回调
	 */
	public vdHiddenModal(): void {
	}
	
	/**
	 * 提交请求
	 */
	public handleSubmit() {
		// 关闭模态框并且回传值过去
		this.vdCloseModalCallback(this.data.id);
	}
}

VdModal.CrlMixin 方法（继承了CallbackMixin所以拥有CallbackMixin的方法和属性）:

VdModal.TargetMixin 属性:

VdModal.TargetMixin 方法:

VdModal.CallbackMixin 属性:

VdModal.CallbackMixin 方法:

VdListMixin<P, R> mixin

用于获取数组对象

VdListMixin 属性:

VdListMixin 方法:

VdObjMixin<P, R> mixin

用于获取数组对象

VdObjMixin 属性:

VdObjMixin 方法:

VdSubmitMixin<P, R> mixin

用于表单提交

VdSubmitMixin 属性:

VdSubmitMixin 方法:

VdEditMixin<P, R> mixin

用于编辑页面，加载数据并且提交数据。是VdObjMixin、VdSubmitMixin 混入的结果

@Component
// @ts-ignore
export class VdEditMixin<T> extends Mixins<VdObjMixin<T>, VdSubmitMixin<T, string>>(
	VdObjMixin,
	VdSubmitMixin,
) {
}

@ModalCallback decorators

使用多个modal时，使用@ModalCallback来接受具体回调. 需要混入VdModal.CrlMixin 或者 VdModal.CallbackMixin.

	/**
	 *  pipe key1 回调
	 */
	@ModalCallback(’key1‘)
	public handleModalCallbackByPipeKey1(data?: any) {
	}
	
	/**
	 *  pipe key2 回调
	 */
	@ModalCallback(’key2‘)
	public handleModalCallbackByPipeKey2(data?: any) {
	}

@Confirm decorators

确认提示框注解，使用时传入标题和内容，确认后执行方法。跟 VdMixin的 this.vdConfirm 使用方法一样。

	/**
	 * 重置密码
	 */
	@Confirm({title:'确认', content:'确定要重置密码吗？'})
	public handleResetPwd() {
	}
	
	/**
	 * 启用禁用
	 * @param isEnabled 开启关闭
	 */
	@Confirm(isEnabled => confirmAutoEnabled(isEnabled, PLATFORM))  // 可以使用被注释的方法的参数进行回调的入参值
	public toggleEnabled(isEnabled: Enabled) {
	}
	

@Validate decorators

form验证注解，使用时传入被标记 ref的form的refName，验证成功时执行方法。跟 VdMixin的 this.vdValidate 使用方法一样。

	/**
	 * 保存提交
	 */
	@Validate(['baseForm', 'userForm']) //  或者单个form使用： @Validate(’userForm‘)
	public vdHandleSubmit(): void {
	}

默认使用VdDefaultConfigService service

可配置选项：一些共通处理内容已经对外暴露接口， 一般情况根据项目需求来实现自定义配置。以下是基于element-ui组件配置。

@Component
export default class App extends Vue {
	public created() {
        		VdConfigService.setup({
        			handleConfirm: (info: VdConfirmInfo) =>
        				this.$confirm(info.content, info.title, {
        					confirmButtonText: '确定',
        					cancelButtonText: '取消',
        					closeOnClickModal: false,
        				}),
        			handle403: () => this.$router.push({ name: 'Login' }).then(),
        			handle401: () => this.$router.push({ name: 'Login' }).then(),
        			showErrorMessage: (message: string) => Message.error(message),
        			showSuccessMessage: (message: string) => Message.success(message),
        			handleStartLoading: () => {
        				loadingCrl = this.$loading({
        					lock: true,
        				});
        			},
        			handleCloseLoading: () => {
        				if (loadingCrl) {
        					loadingCrl.close();
        				}
        			},
        			handleFormValidate: ($refs: { [key: string]: Vue | Element | Vue[] | Element[] }, formNames: string[]) => {
        				let _result = false;
        				try {
        					formNames.forEach(formName => {
        						const target = $refs[formName];
        						if (target) {
        							/* eslint-disable */
        							// @ts-ignore
        							target?.validate((result, item) => {
        								if (!result) {
        									for (const key in item) {
        										setTimeout(() => {
        											if (VdConfigService.config?.showErrorMessage) {
        												VdConfigService.config?.showErrorMessage(item[key][0].message);
        											}
        										}, 1);
        									}
        									_result = true;
        								}
        							});
        						}
        					});
        				} catch (e) {
        					console.log(e);
        				}
        				return _result;
        			},
        			handleHttpResult: <T>(resData: any): UseResult<T> => {
        				const { success, errorCode, errorMessage, payload, count } = resData || {};
        				return { success, errorCode, errorMessage, payload, totalCount: count || 0 };
        			},
        		});
        	}
}