application-theme v0.5.19

轻量级管理系统业务UI组件

一、开发指南

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install -S application-theme

快速上手

引入 Application-theme

完整引入 在 main.js 中写入以下内容：

import Vue from 'vue';
import ApplicationTheme from 'application-theme';
import 'application-theme/theme/index.css';
import App from './App.vue';

Vue.use(ApplicationTheme);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用 Element-UI 版本

element-ui 版本需要安装 V2.15.0 版本以上， 建议安装 V2.15.6 版本

二、业务布局组件结构

— theme                          主题样式定制文件夹
 — components                    单独定制组件
   — 404.vue                     404页面组件
   — BaseSetting.vue             基本设置页面模型
   — Content.vue                 内容盒模型
   — DefaultEmpty.vue            默认表格空状态组件
   — Divider.vue                 表格操作按钮分隔组件
   — FormItem.vue                Model 态框表单结构
   — NoFound.vue                 未找到结果组件
   — Pagination.vue              分页组件
   — Search.vue                  搜索单盒模型组件
   — SearchController.vue        搜索展开控制器组件
   — Selection.vue               多选框表格 alert 组件
   — TableTool.vue               表格操作工具组件
   — ToolTip.vue                 表格内容超出文字提示组件
 — element
   — fonts                       element icon
   — element.scss                全局定制样式
   — index.css                   element 默认定制主题样式
 — index.css                     样式主入口

三、业务布局组件

注意事项

搜索盒模型组件

参考代码

<Search>
	<el-form>
		<el-row>
			<el-col :span="8">
			  <el-form-item label="手机号码:">
				<el-input
				  placeholder="请输入手机号码"
				  v-model="mobile"
				  clearable
				></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="8">
			  <el-form-item label="手环id:">
				<el-input
				  placeholder="请输入手环id"
				  v-model="braceletId"
				  clearable
				></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="8">
			  <el-form-item label="设备识别号:">
				<el-input
				  placeholder="请输入设备识别号"
				  v-model="deviceCode"
				  clearable
				></el-input>
			  </el-form-item>
			</el-col>
			<SearchController>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</SearchController>
		</el-row>
	</el-form>
</Search>

表格列表组件

参考代码

<template>
...
<Content :loading="loading">
	<TableTool @refresh="刷新表格数据方法"></TableTool>
	<el-table :data="tableData" v-loading="loading">
		<el-table-column prop="mobile" label="手机号"></el-table-column>
		<el-table-column prop="nickName" label="昵称"></el-table-column>
        <DefaultEmpty slot="empty"/>
	</el-table>
	<Pagination>
          <el-pagination
            slot-scope="data"
            :page-sizes="data.sizes"
            :layout="data.layout"
			hide-on-single-page
            @size-change="分页条数切换方法"
          ></el-pagination>
	</Pagination>
</Content>
...
</template>

<script>
export default {
	...,
	data() {
		return {
			loading: false
		}
	},
	
	methods: {
		getData() {
			this.loading = true
			try {
				 ...await 表格数据获取逻辑
			} finally {
				this.loading = false
			}
		}
	}
	...
}
</script>

Model态框表单组件

参考代码

<el-form status-icon label-width="140px">
	<Form-Item label="业务员等级：" prop="promoLevel">
		<el-input
		v-model="ruleForm.promoLevel"
		placeholder="请输入业务员等级"
		:disabled="falg"
		></el-input>
	</Form-Item>
	<FormItem label="业务员达成条件：" prop="promoShops">
		<el-input
		v-model="ruleForm.promoShops"
		placeholder="请输入业务员达成条件"
		></el-input>
	</FormItem>
</el-form>

基本设置模型

参考代码

<BaseSetting title="弹窗广告设置">
	<el-form label-position="top">
		<el-form-item label="详情id">
			<el-input
			placeholder="请输入详情id"
			v-model="ruleForm.id"
			:maxlength="19"
			></el-input>
		</el-form-item>
		<el-form-item label="模型类型">
			<el-select v-model="ruleForm.contentModel">
				<el-option label="文本" value="0"></el-option>
				<el-option label="图片跳转" value="1"></el-option>
			</el-select>
		</el-form-item>
		<el-button type="primary" @click="confrimSettled">保 存</el-button>
	</el-form>
</BaseSetting>

搜索展开控制器组件

参考代码

<SearchController>
	<el-button type="primary" @click="search">查询</el-button>
	<el-button type="primary" @click="reset">重置</el-button>
</SearchController>

表格多选框 alert 提示组件

参考代码

<Selection :number="multipleSelection.length" @clearEmpty="清空多选项方法" />

表格操作项按钮间 Divider 分隔线组件

参考代码

<Divider>
	// 保持 <Divider> 组件包裹子元素的平级关系，子元素中不能包含其他子元素
	<el-button @click="edit">编辑</el-button> 
	<el-button @clcik="del">删除</el-button>
</Divider>

表格内容超出 tooltip 文字提示组件

参考代码

<el-table-column
label="问题类型"
width="200px">
	<template slot-scope="scope">
		<ToolTip :content="scope.row.typeName"/>
	</template>
</el-table-column>

404 组件

参考代码

<NoFind/>