tsp_components v0.7.22

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"
  },

主要需要四个参数：

• target: 默认为构建应用，改为 lib 即可启用构建库模式

• name: 输出文件名

• dest: 输出目录，默认为 dist，这里改为 lib

• 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 添加组件信息

• name: 包名，该名不能和已有的名称冲突；

• version: 版本号，不能和历史版本号相同；

• main: 入口文件，应指向编译后的包文件；

• author：作者；

• private：是否私有，需要修改为 false 才能发布到 npm；

• 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 且不会影响前端的请求

项目中使用

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

属性

事件

<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);
    
}

}

#### 树的配置

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

异步加载设置

 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);
                }
            } 

powerTool

属性

方法

$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

属性

事件

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

属性

Slot

  <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'/>

属性

InputLinkTree

公司车组树的联动组件

<inputLinkTree  v-model="search" :data="$store.getters.getOrganization"  :disabled="true"  @node-click='nodeClick'/>

属性

事件