tsp_components

v0.7.37

Published

4 months ago

#### 进入cvtspweb 打开终端

Downloads

0High
0Medium
0Low

monstergao

dongfeifei0802

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| 是否显示"搜索"按钮 isadd| 是否显示"添加"按钮 ismodify| 是否显示"修改"按钮 isremove| 是否显示"删除"按钮 isresend| 是否显示"重新下发"按钮 issendAdd| 是否显示"下发新增"按钮 issendEdit| 是否显示"下发修改"按钮 issendDown| 是否显示"下发"按钮 isreset| 是否显示"密码重置"按钮 isdeactivate| 是否显示"停用"按钮 isprocessAlarm| 是否显示"报警处理"按钮 isremoveAlarm| 是否显示"报警解除"按钮 isoffline| 是否显示"车辆下线"按钮 isunbind| 是否显示"绑定设备"按钮 isdeviceinfo| 是否显示"设备信息"按钮 islogout| 是否显示"注销"按钮 isbound| 是否显示"绑定车辆"按钮 isapply| 是否显示"应用"按钮 islook| 是否显示"查看"按钮 isupload| 是否显示"重新上传"按钮 ismodifycomp| 是否显示"修改公司"按钮 ismodifyplat| 是否显示"修改车牌号"按钮 onlineStatus| 是否显示"搜索"按钮 useStatus| 是否显示"启用"按钮 | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | true/false | Boolean |false | 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

tsp_components

软连接

tsp_components

web2

配置

npm

配置

主要需要四个参数：

打包

准备发布

发布到 npm

本地调试

开发小组手

Ctrl+S 调用组件

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

项目中使用

template

script

Tree

属性

事件

BaseTree

初始化

树的配置

异步加载设置

回调事件

powerTool

属性

方法

template

script

tableTool

属性

事件

operation

属性

Slot

inputTree

属性

InputLinkTree

属性

事件

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