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

tsp_components

Readme

Keywords

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads