1.0.4 • Published 7 months ago
xbwl_common_ui v1.0.4
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);