# TSP_Components

**Repository Path**: monstergao/TSP_Components

## Basic Information

- **Project Name**: TSP_Components
- **Description**: web2.0的组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-22
- **Last Updated**: 2024-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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](https://www.npmjs.com/package/tsp_components)

[http://git.cvtsp.com/Cvnavi_Web/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'
```

---

## 开发小组手
![](../../images/devHelpler1.png)
![](../../images/devHelpler2.png)
###### Ctrl+S 调用组件

###### 后端可使用前端ip和端口   在本地更改自己的ip 且不会影响前端的请求


参数 | 说明 | 类型|默认
---|---|---|---
loadpath  | 文件上传地址 | String | 'https:fs.cvtsp.com/file/upload' 
listAPI  | 后台的调试地址 | Array |  [ ] 
listsocketAPI  | socket的调 | Array | [ ]

#### 项目中使用

##### template

```js
 <DevHelper  :loadpath='loadpath' :listAPI='listAPI'  :listsocketAPI='listsocketAPI' />
```

##### script

```JS

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 数据对象                      

```js
<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基础上 ，进行了封装

![](../../images/tree.png)

#### BaseTree
对原始方法的封装都在这个文件内,引入了几个必要的文件从而获取到
> TSP_Components\src\components\tree\src\js\base-tree.js
#### 初始化
```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);
        
    }
    
    
}
```
#### 树的配置

```js
    /**
     * 设置树的配置
     * @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
  
    }
```
#### 异步加载设置

```js
 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")
                }
            }
```

#### 回调事件
```js
 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

```js
<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
```js
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
    }
        
    }
  }

```
遍历后台返回的权限并赋值

```js
    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 ：表格内每列的数据权限
```js
 <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 | 点击‘展开'显示的插槽


```html
  <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


![](../images/inputtree.png)


```html
 <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

公司车组树的联动组件

![](../images/InputLinkTree.png)


```
<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