scwl_component 快速上手

基于eoss-desigin川大智胜集成设计体系，为四川（西部）物流大数据中心项目定制的管理端个大子系统常用（公共）业务组件。

项目构建配置

# 依赖安装
yarn && npm install

# 组件打包
npm run build

# 组件本地调试
npm run dev

因为调试的组件依赖于 lib 文件中的打包组件，所以 run dev 之前必须先 run build。然后再在 Vue 文件中引 用组件调试。

组件开发调试

import BaseForm from './packages/base-form'
import BaseDialog from './packages/base-dialog'
export default {
  name: "app",
  components: {
    [BaseForm.name]:BaseForm,
    [BaseDialog.name]:BaseDialog
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};

打包后的组件预览

组件库工程 main.js

import ScwlComponent from './../lib/scwl-component.js'
Vue.use(ScwlComponent)

scwl-component 在项目中使用

组件库使用方式同 element 一样，组件库是基于 element 的三次封装,所以使用该组件库之前必须引用公司深度 定制的 element-eoss 库。

依赖安装

手动在package.json中添加如下属性，并在终端使用npm或yarn安装依赖

"scwl-component": "git+http://git.wisesoft.net.cn/western_logistics_fe/eoss_business_component.git#development",

使用项目 main.js

import ElementUI from 'element-eoss';
import 'element-eoss/lib/theme-chalk/index.css';
import locale from 'element-eoss/lib/locale/lang/en'; // lang i18n

import ScwlComponent from 'scwl-component';
import 'scwl-component/lib/theme-chalk/index.css'; // 业务组件样式


Vue.use(ElementUI, { locale });
Vue.use(ScwlComponent);

然后在项目中就可以使用 scwl-component 组件了

<template>
	<div class="dashboard-container">
		<BaseDescription :column="2" class="mgt-20" border :data-source="dataSource"></BaseDescription>
		<BaseSearchTable
			ref="searchTable"
			:search-table-config="searchTableConfig"
			:fetch-table-data-config="fetchTableDataConfig"
		/>
	</div>
</template>
<script>
export default{
  data(){
    return {
      dataSource: [
				{
					label: '名称',
					value: '张三'
				},
				{
					label: '性别',
					value: '男'
				},
				{
					label: '经度',
					value: '110.121212131313'
				},
				{
					label: '纬度',
					value: '38.21213442424224'
				}
			]
    }
  }
  ,computed:{
    // 搜索表格配置项
		searchTableConfig() {
			return {
				title: '商机管理',
				searchFormConfig: [
					{
						prop: 'name',
						label: '关键词搜索',
						component: 'input',
						formInputConfig: {
							placeholder: '搜索手机号码/url链接/来源'
						}
					},

					{
						prop: 'name3',
						label: '关键词搜索',
						component: 'input',
						formInputConfig: {
							placeholder: '搜索手机号码/url链接/来源'
						}
					},
					{
						label: '日期区间',
						prop: 'opportunityTime',
						component: 'date',
						formInputConfig: {
							type: 'datetimerange',
							'start-placeholder': '开始时间',
							'end-placeholder': '结束时间',
							defaultTime: ['00:00:00', '23:59:59']
						}
					},
					{
						label: '普通时间',
						prop: 'date',
						component: 'date',
						formInputConfig: {
							type: 'date'
						}
					}
				],
				tableColumnsConfig: [
					{
						title: '客户姓名',
						field: 'name'
					},
					{
						title: '手机号码',
						width: 110,
						field: 'phone'
					},
					{
						title: '客户需求',
						field: 'categoryId'
					},
					{
						title: '客户区域',
						field: 'regionId'
					},
					{
						title: '设备来源',
						field: 'sourceClient'
					},
					{
						type: 'actions',
						sort: 1000,
						minShowActions: 1,
						width: 100,
						fixed: 'right',
						title: '操作',
						actions: [
							{
								label: '详情',
								show: row => {
									// 显示条件
									return row.id;
								},
								event: (row, index, e) => {
									this.handleDetail(row);
								}
							},
							{
								label: '分配',
								show: row => {
									// 显示条件
									return !this.isMyBusinessOpportunity;
								},
								event: (row, index, e) => {
									this.handleDistribute(row);
								}
							},
							{
								label: '跟进',
								show: row => {
									return row.id;
								},
								event: (row, index, e) => {
									this.handleFollow(row);
								}
							}
						]
					}
				],
				// 表格控制栏配置
				tableControls: [
					{
						label: '新建',
						style: 'primary',
						icon: 'el-icon-plus',
						event: () => {
							this.updateDialog.visible = true;
							console.log(
								'%c [ 触发新建事件 ]-143-「App」',
								'font-size:13px; background:pink; color:#bf2c9f;'
							);
						}
					}
				]
			};
		},
		fetchTableDataConfig() {
			return {
        fetchTableFunction: this.fetchTableFunction,
        // fetchTableApi: apiName 或者使用传入apiName方式
         };
		},
  }
}
</script>

按需引入

import { BaseDescription } from 'scwl-component';

Vue.use(BaseDescription);