tsp_components
v0.7.37
Published
#### 进入cvtspweb 打开终端
Downloads
42
Readme
tsp_components
软连接
tsp_components
- npm link
进入tsp_components项目终端,使用'npm link' 命令创建一个软连接
执行成功后会在本地生成node包,目录C:\Users\用户名\AppData\Roaming\npm\node_modules
web2
- npm link tsp_components
进入web2项目终端,使用'npm link tsp_components' 建立链接
这就将这个公共的项目通过软连接的方式引入到项目里面来了
配置
web2 > main.js
import tsp_components from 'tsp_components';
Vue.use(tsp_components);
配置好之后启用项目
- npm run dev
这时修改tsp_components项目下面的任意代码都会实时生效,不用打包,也不用重启
npm
https://www.npmjs.com/package/tsp_components
http://git.cvtsp.com/Cvnavi_Web/TSP_Components
配置
package.json
"scripts": {
...
"lib": "vue-cli-service build --target lib --name tsp_components --dest lib ./index.js"
},
主要需要四个参数:
[x] target: 默认为构建应用,改为 lib 即可启用构建库模式
[x] name: 输出文件名
[x] dest: 输出目录,默认为 dist,这里改为 lib
[x] entry: 入口文件路径,默认为 src/App.vue,这里改为 ./index.js
打包
- npm run lib
执行 npm run lib 命令,编译组件,生成lib文件夹
准备发布
package.json
"name": "tsp_components",
"version": "0.6.33",
"main": "lib/tsp_components.umd.min",
"author": "monstergao",
"private":false,
"license": "ISC"
首先需要在 package.json 添加组件信息
[x] name: 包名,该名不能和已有的名称冲突;
[x] version: 版本号,不能和历史版本号相同;
[x] main: 入口文件,应指向编译后的包文件;
[x] author:作者;
[x] private:是否私有,需要修改为 false 才能发布到 npm;
[x] license:开源协议。
发布到 npm
- npm config set registry https://registry.npmjs.org
如果没有 npm 账户,可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册
如果在官网注册的账户,或者以前就有账户,就使用 npm login 命令登录
一切就绪,发布组件:
- npm publish
- npm publish --registry=https://registry.npmjs.org/
在发布之前,一定要确保组件已经编译完毕,而且 package.json中的入口文件(main)的路径正确
本地调试
修改入口文件
package.json
"main": 'index.js'
开发小组手
Ctrl+S 调用组件
后端可使用前端ip和端口 在本地更改自己的ip 且不会影响前端的请求
参数 | 说明 | 类型|默认 ---|---|---|--- loadpath | 文件上传地址 | String | 'https:fs.cvtsp.com/file/upload' listAPI | 后台的调试地址 | Array | [ ] listsocketAPI | socket的调 | Array | [ ]
项目中使用
template
<DevHelper :loadpath='loadpath' :listAPI='listAPI' :listsocketAPI='listsocketAPI' />
script
export default {
/**
* 存储当前的主题色
*/
data() {
return {
loadpath:'https:fs.cvtsp.com/file/upload',
listAPI:[
{label:'庄振营:10.10.11.172:18000',value:'http://10.10.11.172:18000'},
{label:'陈琦昌1:10.10.12.163:18000',value:'http://10.10.12.163:18000'},
{label:'陈琦昌2:10.10.11.141:18000',value:'http://10.10.11.141:18000'},
{label:'邓磊:10.10.11.69:18000',value:'http://10.10.11.69:18000'},
{label:'web2.test.cvtsp',value:'http://web2.test.cvtsp.com/api'},
{label:'caweb2.cvnavi.com',value:'http://caweb2.cvnavi.com/api'},
{label:"aem.caky.cn",value:"http://aem.caky.cn/api"},
{label:"www.hstsp.com",value:"http://www.hstsp.com/api"},
{label:"sq.test.cvtsp.com",value:"http://sq.test.cvtsp.com/api"}
],
istsocketAPI:[
{label:'庄振营:10.10.11.172:9099',value:'http://10.10.11.172:9099'},
{label:'陈琦昌:10.10.12.163:9099',value:'http://10.10.12.163:9099'},
{label:'邓磊:10.10.11.69:9099',value:'http://10.10.11.69:9099'},
{label:'http://web2.test.cvtsp.com',value:'http://web2.test.cvtsp.com'},
{label:'http://caweb2.cvnavi.com',value:'http://caweb2.cvnavi.com'},
{label:"http://aem.caky.cn",value:"http://aem.caky.cn"},
{label:"http://www.hstsp.com",value:"http://www.hstsp.com"}
]
}
}
}
Tree
属性
参数 | 说明 |类型|默认
---|---|---|---
baseUrl | 树的同步接口 | String |''
data | 同步树的所有数据 | Object | {}
lazy | 树的异步接口 | String |'/basic/tree/findVehicleTreeInfoList'
isCopy | 拖拽时,是否复制节点,false为移动节点 | Boolean | false
isMove | 拖拽时,设置是否允许移动节点 | Boolean |false
isCheck | 是否是多选还是单选模式 | Boolean |false
iconsFilter | 树上的节点图标更改 | Function |---
operation | hover节点时 显示得的文字和调用额 | Object | {}
nodeFilter | 树上的节点筛选 | Array |['type', 4]
isContextmenu | 是否开启右击功能 | Boolean |false
isExpand | 是否默认打开根节点 | Boolean |true
isFreeze | 是否冻结根节点 | Boolean |false
names | 显示的节点名称字段 | String |"text"
showIcon | 是否显示图标 | Boolean |true
autoParam | 点击节点需要的节点参数 | Array | ['id', "type=type"]
otherParam | 增加树基础传参 | Object |{}
limitCheck | beforeCheck点击选中之前的事件 | Function | ---
limitDrop | 拖拽之前的限定条件 | Function | ---
treeReady | 树的初始节点渲染到页面 | Function | ---
treeLoaded | 树接受数据加载完成的回调 | Function | ---
asyncCallback | 树的每次异步回调 ,点击展开节点 | Function | ---
事件
事件名称| 说明| 回调参数
---|---|---
doCheck |用于捕获 勾选 或 取消勾选 之前的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeBeforeRemove |用于捕获节点被删除之前的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 将要删除的节点 JSON 数据对象
nodeExpand |用于捕获节点被展开的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNodes 被拖拽的节点 JSON 数据集合; targetNode 成为 treeNodes 拖拽结束的目标节点 JSON 数据对象 ; moveType 指定移动到目标节点的相对位置
currentHandlerName |用于捕获异步加载正常结束的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeCheck |用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeClick |用于捕获节点被点击的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
rightClick |用于捕获 zTree 上鼠标右键点击之后的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeRename |用于捕获节点编辑名称结束之后的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeCollapse |用于捕获节点被折叠的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeBeforeDrop |用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作 |event:事件对象;treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
nodeDrop |用于捕获节点拖拽操作结束的事件回调函数 | event:事件对象; treeId: 对应 zTree 的 treeId;treeNode: 进行勾选 或 取消勾选的节点JSON 数据对象
<tree
:data="$store.getters.getEntTreeList"
ref="Tree"
:showIcon="false"
@node-click="handleCheckChange"
:tree-loaded="treeLoaded"
/>
ztree 核心方法
http://www.treejs.cn/v3/main.php#_zTreeInfo
在ztree基础上 ,进行了封装
BaseTree
对原始方法的封装都在这个文件内,引入了几个必要的文件从而获取到
TSP_Components\src\components\tree\src\js\base-tree.js
初始化
import '../assets/css/awesome.scss'
import "../assets/js/jquery-1.4.4.min.js"
import "../assets/js/jquery.ztree.core"
import "../assets/js/jquery.ztree.excheck"
import "../assets/js/jquery.ztree.exedit"
import "../assets/js/jquery.ztree.exhide"
export default class BaseTree {
constructor(options) {
const _self = this;
this.zTree = null;
}
/**
* 初始化树的配置和方法
* @param {Array} data: []
*/
initialTree(name,data, callback) {
var data = this.iconsFilter({data});
/**
* $.fn.zTree.init(obj,zSettingJSON,zNodesArray)
* obj 用于展现 zTree 的 DOM 容器
* zSettingJSON zTree 的配置数据,具体请参考ZtreeApi “setting 配置详解”中的各个属性详细说明
* zNodesArray zTree 的节点数据 数组类型
*
*/
$.fn.zTree.init(this.el, treeConfig, dataArray);
this.zTree = $.fn.zTree.getZTreeObj(this.treeId);//获取zTree 对象
//通知调用者
typeof callback === 'function' && callback(this.zTree);
}
}
树的配置
/**
* 设置树的配置
* @param {Boolean} isCheck: 树是否单选和多选
* @param {Boolean} isAsync: 树是否异步
*/
treeConfig: {
data: {
//zTree 显示节点时,将返回的text作为节点名称
key: {name: name},
//简单数据模式
simpleData: { enable: true }
},
check: {
//设置 zTree 的节点上是否显示 checkbox / radio
enable: isCheck,
//自动继承父节点 nocheck = true 的属性
nocheckInherit: true,
//显示 checkbox 选择框
chkStyle: "checkbox",
chkboxType: { "Y": "ps", "N": "ps" }
},
edit:{
drag:{
//拖拽时, 设置是否允许复制节点
isCopy:this.isCopy,
//拖拽时, 设置是否允许移动节点
isMove: this.isMove,
//true / false 分别表示 允许 / 不允许 移动到目标节点前面
prev: false
},
//设置 zTree 是否处于编辑状态
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
view: {
//设置是否允许同时选中多个节点
selectedMulti: true,
//设置 zTree 是否显示节点之间的连线
showLine: false,
// 设置 zTree 是否允许可以选择 zTree DOM 内的文本
txtSelectedEnable: true,
showIcon:this.showIcon,
fontCss(treeId, treeNode) {
return !!treeNode.highlight ? {color: 'red'} : {color: '#333'};
},
//用于当鼠标移动到节点上时
addHoverDom(treeId, treeNode) {
var a_node = $('#' + treeNode.tId + '_a');
var operation = _self.operation ? _self.operation(treeNode) : {};
if($(`#operation-btn${treeNode.id}`).length > 0) return;
var html = `<span id="operation-btn${treeNode.id}">${!operation.template?'':operation.template}</span>`;
a_node.append(html);
typeof operation.methods == 'function' && operation.methods();
},
//用于当鼠标移出节点时
removeHoverDom(treeId, treeNode) {
$(`#operation-btn${treeNode.id}`).unbind().remove();
},
},
async,
callback
}
异步加载设置
async: {
//设置 zTree 是否开启异步加载模式
enable:this.showIcon,
//设置固定的异步加载 url 字符串,请注意地址的路径,确保页面能正常加载
url: _self.baseUrl + _self.lazy,
//异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
autoParam: _self.autoParam ? _self.autoParam : ['id', "type=type"],
//请求提交的静态参数键值对
otherParam: { ..._self.otherParam},
//用于返回数据进行预处理的函数
dataFilter: function(treeId, parentNode, responseData) {
return _self.iconsFilter(responseData);
},
// http 请求模式
type: "get",
headers:{
'token':localStorage.getItem("token"),
'Authorization':'Bearer '+localStorage.getItem("token")
}
}
回调事件
callback: {
/**
* 用于捕获 勾选 或 取消勾选 之前的事件回调函数
* @param {*} treeId 对应 zTree 的 treeId
* @param {*} treeNode 进行 勾选 或 取消勾选 的节点 JSON 数据对象
*/
beforeCheck: function(treeId, treeNode) {
_self.currentHandlerName = 'check';
_self.nodeBeforeCheck.apply(this, arguments);
if(treeNode.checked) {
return treeNode.doCheck = true;
}
if(typeof _self.limitCheck === 'function') {
return treeNode.doCheck = _self.limitCheck(treeNode);
}
},
/**
* 用于捕获节点被删除之前的事件回调函数
* @param {*} treeId 对应 zTree 的 treeId
* @param {*} treeNode 将要删除的节点 JSON 数据对象
*/
beforeRemove: function(treeId, treeNode) {
_self.nodeBeforeRemove.apply(this, arguments);
},
/**
* 用于捕获节点被展开的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
*/
onExpand: function(event, treeId, treeNode) {
_self.nodeExpand && _self.nodeExpand.apply(this, arguments);
},
/**
* 用于捕获异步加载正常结束的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
* @param {*} msg
*/
onAsyncSuccess: function(event, treeId, treeNode, msg) {
_self.load && _self.load(treeNode, _self.currentHandlerName);
},
/**
* 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
*/
onCheck: function(event, treeId, treeNode) {
_self.nodeCheck && _self.nodeCheck.apply(this, arguments);
},
/**
* 用于捕获节点被点击的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
*/
onClick: function(event, treeId, treeNode) {
_self.nodeClick && _self.nodeClick.apply(this, arguments);
},
/**
* 用于捕获 zTree 上鼠标右键点击之后的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
*/
onRightClick: function(event, treeId, treeNode) {
_self.rightClick && _self.rightClick.apply(this, arguments);
},
/**
* 用于捕获节点编辑名称结束之后的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
* @param {*} isCancel
*/
onRename: function(event, treeId, treeNode, isCancel) {
_self.nodeRename.apply(this, arguments);
},
/**
* 用于捕获节点被折叠的事件回调函数
* @param {*} event
* @param {*} treeId
* @param {*} treeNode
*/
onCollapse: function(event, treeId, treeNode) {
_self.nodeCollapse.apply(this, arguments);
},
/**
* 用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作
* @param {*} treeId
* @param {*} treeNodes 被拖拽的节点 JSON 数据集合
* @param {*} targetNode 成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。
* @param {*} moveType 指定移动到目标节点的相对位置
*/
beforeDrop:function(treeId, treeNodes, targetNode, moveType) {
_self.nodeBeforeDrop && _self.nodeBeforeDrop(treeNodes,targetNode);
if(typeof _self.limitDrop === 'function') {
return _self.limitDrop(treeNodes, targetNode, moveType);
}else {
return true;
}
},
/**
* 用于捕获节点拖拽操作结束的事件回调函数
* @param {*} e
* @param {*} treeId
* @param {*} treeNodes 被拖拽的节点 JSON 数据集合
* @param {*} targetNode 成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。
* @param {*} moveType 指定移动到目标节点的相对位置
*/
onDrop:function(e, treeId, treeNodes,targetNode,moveType){
_self.nodeDrop && _self.nodeDrop(treeNodes,targetNode);
}
}
参数 | 说明 | 类型 ---|---|--- baseUrl | 同步树接口 | String Data | 树返回的数据 | Array url | 异步树接口 | String Lazy | 是否懒加载 | Boolean isCopy | 拖拽时,是否复制节点, | false为移动节点 Boolean isMove | 拖拽时,设置是否允许移动节点 | Boolean isCheck | 是否是多选还是单选模式 | true(多选) Boolean iconsFilter | 树上的节点图标筛选 | Function operation | 树节点操作区域 | Object isContextmenu | 是否右键 | Boolean isExpand | 是否默认打开根节点 | Boolean autoParam | 固定参数,接口第一次请求传参 | Object otherParam | 异步请求参数 | Object treeLoaded | 树加载回调 | Function
powerTool
属性
参数 | 说明 | 可选值 |类型|默认 ---|---|---|---|--- position | 控制按钮的方向显示在左边还是右边 |left/right |String | right data | 权限的数组 |true/false |Array | [] isSearch | 是否显示"搜索"按钮 |true/false |Boolean | true isAdd | 是否显示"添加"按钮 |true/false |Boolean | true isRemove | 是否显示"删除"按钮 |true/false |Boolean | false isModify | 是否显示"修改"按钮 |true/false |Boolean | false isExport | 是否显示"导出"按钮 |true/false |Boolean | false isSenddelall | 是否显示"发送删除所有"按钮 |true/false |Boolean | false isSendupdate |是否显示"发送更新"按钮|true/false |Boolean | false isSendadd | 是否显示"发送追加"按钮|true/false |Boolean | false isSendedit | 是否显示"发送修改"按钮|true/false |Boolean | false isSend | 是否显示"发送"按钮 |true/false |Boolean | false isSenddown | 是否显示"下发"按钮 |true/false |Boolean | false isUpload | 是否显示"上传"按钮 |true/false |Boolean | false isReset | 是否显示"重置"按钮 |true/false |Boolean | false isImport | 是否显示"导入"按钮 |true/false |Boolean | false size | 设置按钮的大小 |medium / small / mini |String | small isCalibrate | 是否显示"标定"按钮 |true/false |Boolean | false disabled | 是禁止搜索按钮 |true/false |Boolean | fasle
方法
事件名称| 说明| 回调参数 ---|---|--- search | 点击"搜索"按钮时触发 |--- add | 点击"添加"按钮时触发 |--- modify | 点击"删除"按钮时触发 |--- remove | 点击"修改"按钮时触发 |--- export | 点击"导出"按钮时触发 |--- sendDelAll | 点击"发送删除所有"按钮时触发 |--- sendUpdate | 点击"发送更新"按钮时触发 |--- sendAdd | 点击"发送追加"按钮时触发 |--- sendEdit | 点击"发送修改"按钮时触发 |--- send | 点击"发送"按钮时触发 |--- sendDown | 点击"下发"按钮时触发 |--- upload | 点击"上传"按钮时触发 |--- reset | 点击"重置"按钮时触发 |--- calibrate | 点击"标定"按钮时触发 |--- import | 点击"导入"按钮时触发 |---
$route.meta.power:后台返回的权限
<power-tool :data="$route.meta.power" :is-add="false" :is-upload="true"
@search="search" @add='add' @upload='upload' ... />
权限分为两个 一个是根据菜单返回回来,一个是页面控制显隐(比如tab切换)
template
TSP_Components\src\components\powerTool\src\power.tool.vue
<template>
<div>
<el-button native-type="button" :size="size" v-show="search" @click.prevent="searchEvent()" v-if="isSearch" >{{$t('power.search')}}</el-button>
<el-button native-type="button" icon="plus" :size="size" v-show="add" @click.prevent="addEvent()" v-if="isAdd">{{$t('power.add')}}</el-button>
...
</div>
</template>
script
export default {
name: "PowerTool",
props: {
//显示的按钮方向
position: {
type: String,
default: "right"
},
//菜单返回回来的权限
data: {
default() {
return [];
}
},
//页面控制的权限显隐值
isSearch: {
type: Boolean,
default: true
},
isAdd: {
type: Boolean,
default: true
},
...
},
data() {
return {
search: true,
add: false,
remove: false,
modify: false,
down: false,
sendDelAll: false,
sendUpdate: false,
sendAdd: false,
sendEdit: false,
send: false,
sendDown: false,
upload: false,
reset: false,
imports: false,
calibrate: false
}
}
}
遍历后台返回的权限并赋值
data.forEach(val => {
switch (val) {
case "add":
return (this.add = true);
case "search":
return (this.search = true);
case "remove":
return (this.remove = true);
case "modify":
return (this.modify = true);
case "export":
return (this.down = true);
case "sendDelAll":
return (this.sendDelAll = true);
case "sendUpdate":
return (this.sendUpdate = true);
case "sendAdd":
return (this.sendAdd = true);
case "sendEdit":
return (this.sendEdit = true);
case "send":
return (this.send = true);
case "sendDown":
return (this.sendDown = true);
case "upload":
return (this.upload = true);
case "reset":
return (this.reset = true);
case "import":
return (this.imports = true);
case "calibrate":
return (this.calibrate = true);
}
}
tableTool
属性
参数 | 说明 | 可选值 |类型|默认 ---|---|---|---|--- data| 权限的数组 |true/false | Array| [] issearch| 是否显示"搜索"按钮 | true/false | Boolean |false isadd| 是否显示"添加"按钮 | true/false | Boolean |false ismodify| 是否显示"修改"按钮 | true/false | Boolean |false isremove| 是否显示"删除"按钮 | true/false | Boolean |false isresend| 是否显示"重新下发"按钮 | true/false | Boolean |false issendAdd| 是否显示"下发新增"按钮 | true/false | Boolean |false issendEdit| 是否显示"下发修改"按钮 | true/false | Boolean |false issendDown| 是否显示"下发"按钮 | true/false | Boolean |false isreset| 是否显示"密码重置"按钮 | true/false | Boolean |false isdeactivate| 是否显示"停用"按钮 | true/false | Boolean |false isprocessAlarm| 是否显示"报警处理"按钮 | true/false | Boolean |false isremoveAlarm| 是否显示"报警解除"按钮 | true/false | Boolean |false isoffline| 是否显示"车辆下线"按钮 | true/false | Boolean |false isunbind| 是否显示"绑定设备"按钮 | true/false | Boolean |false isdeviceinfo| 是否显示"设备信息"按钮 | true/false | Boolean |false islogout| 是否显示"注销"按钮 | true/false | Boolean |false isbound| 是否显示"绑定车辆"按钮 | true/false | Boolean |false isapply| 是否显示"应用"按钮 | true/false | Boolean |false islook| 是否显示"查看"按钮 | true/false | Boolean |false isupload| 是否显示"重新上传"按钮 | true/false | Boolean |false ismodifycomp| 是否显示"修改公司"按钮 | true/false | Boolean |false ismodifyplat| 是否显示"修改车牌号"按钮 | true/false | Boolean |false onlineStatus| 是否显示"搜索"按钮 | true/false | Boolean |false useStatus| 是否显示"启用"按钮 | true/false | Boolean |false
事件
事件名称| 说明| 回调参数
---|---|---
upload | 点击"重新上传"按钮时触发 |---
modify | 点击"搜索"修改 |---
add | 点击"添加"按钮时触发 |---
remove | 点击"删除"按钮时触发 |---
resend | 点击"重新下发"按钮时触发 |---
sendAdd | 点击"下发新增"按钮时触发 |---
sendEdit | 点击"下发修改"按钮时触发 |---
sendDown | 点击"下发"按钮时触发 |---
look | 点击"查看"按钮时触发 |---
reset | 点击"查看"按钮时触发 |---
updataUserStatus | 点击"停用"按钮时触发 |---
updataVehicleStatus | 点击"车辆下线"按钮时触发 |---
changeEqument | 点击"绑定设备"按钮时触发 |---
information | 点击"设备信息"按钮时触发 |---
updataTerminal | 点击"注销"按钮时触发 |---
apply | 点击"应用"按钮时触发 |---
modifyplat | 点击"修改车牌号"按钮时触发 |---
modifycomp | 点击"修改公司"按钮时触发 |---
removeAlarm | 点击"报警解除"按钮时触发 |---
processAlarm | 点击"报警处理"按钮时触发 |---
upload | 点击"重新上传"按钮时触发 |---
powerData :表格内每列的数据权限
<TableTool
:data="powerData"
:onlineStatus="scope.row.onlineStatus"
:useStatus="scope.row.useStatus"
:terminalCode="scope.row.terminalCode"
:isoffline="scope.row.protocolCategory == 1 ? true : false"
:ismodifyplat="true"
:ismodifycomp="true"
@modify="addmodify(scope.row)"
@remove="remove(scope.row)"
@updataUserStatus="updataUserStatus(scope.row)"
@updataVehicleStatus="updataVehicleStatus(scope.row.id)"
@unbindEqument="unbindEqument(scope.row)"
@modifyplat="modifyplat(scope.row)"
@modifycomp="modifycomp(scope.row)"
></TableTool>
operation
属性
参数 | 说明 | 可选值|类型|默认 ---|---|---|---|--- position| 控制按钮的方向显示在左边还是右边|left/right |String | right Span|搜索条件和按钮的分配比例饿|---|Array|[16,8]
Slot
name | 说明 ---|--- operations | 显示在右边的插槽 header | 点击‘展开'显示的插槽
<operation >
<el-form-item label="**">
...
</el-form-item>
<template #header>
<el-form-item label="**" >
...
</el-form-item>
</template>
<template #operations>
<el-form-item >
<PowerTool ... />
</el-form-item>
</template>
</operation>
inputTree
这个组件式改良版的dropdown-tree,以后会替换dropdown-tree
<InputtTree :data="$store.getters.getEntTreeList" width='215' :disabled="true" v-model='Form.enterpriseId'/>
属性
参数 | 说明 |类型|默认 ---|---|---|--- data |数据方式 |Array|--- showIcon |是否显示图标 |Boolean|true disabled |是否禁用 |Boolean|false width |input框的宽度 |String|'215' autoParams |需要请求的参数 |Object| {} names |显示的文字字段 |String|"text"
事件名称| 说明| 回调参数 ---|---|--- node-click |node节点点击事件|treeNode:树节点对象
InputLinkTree
公司车组树的联动组件
<inputLinkTree v-model="search" :data="$store.getters.getOrganization" :disabled="true" @node-click='nodeClick'/>
属性
参数 | 说明 |类型|默认 ---|---|---|--- value|v-model对象|Object|{} data |第一棵树的数据 |Array|[] url2 |第二棵树 车组树接口 |String|"/basic/fleet/findFleetTreeList" disabled |是否禁用 |Boolean|false
事件
事件名称| 说明| 回调参数 ---|---|--- node-click |node节点点击事件|enterpriseId:公司ID;fleetId:车组ID