@huilian/components-tms NPM

huilian的npm包项目

lib为产出物
components 源码文件目录
package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径
这包项目里基本都是后台element为主的二次包装组件所以一些依赖是项目本身就有的这单要注意
参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子

// template-key 代表表头key 
// get-api是业务接口 
// requesFn 是接口请求库 可以自定义 
// scheme 代表组件
<form-table-scheme ref="scheme" searchPlaceholder= '车牌号/VIN码/车型名称/车辆资产归属' :requestFn="requestFn"   :template-key="templateKey"  :get-api="getApi" >
    // 左侧的按钮 slot
    <template v-slot:leftBtn>
        <el-button type="primary" @click="dialogVisible = true" >导入</el-button>
        <el-button icon="el-icon-download" @click="exportFile">导出</el-button>
        <el-button icon="el-icon-download" @click="jump">车辆监控</el-button>
    </template>
    // xxxHeader 是？提示的钩子 是以对照的key 比如下面的deviceId + Header关键字来做的
    <template #deviceIdHeader>
        车辆行驶证上车辆识别代码
    </template>
    // 比如要对status 做特殊处理 就可以这样来 props代表列表数据, queryConfig 是列表所代表的配置
    <template #status="{props,queryConfig}">
        <el-tag :type="tagArr[props.status]">
        {{ queryConfig.rule.option.find(i => i.value == props.status ).label }}
        </el-tag> 
    </template> 
    // 操作拦按钮 props代表列表数据 
    <template #actionBtn="{props}">
        <el-button type="text"  @click="jumpInfo(props)">合同详情</el-button>
    </template>
</form-table-scheme>
<script>
export default {
  methods: {
      exportFile(){
          //导出 ops是接口请求参数
          const data = this.$refs.scheme.ops
          delete data.pageSize;
          delete data.skipCount;
          download('/areaOperate/billcs/exportBillList',data)
      },
      selectCur(cur) {
          const { value, name } = cur
          // this.$refs.scheme.getList 组件的请求勾子函数
          this.$refs.scheme.getList({ planDueDateFrom: value[0],planDueDateTo:value[1] })

      }
  },
}


</script>

表格配置
// dateRange 区间时间
{
  "name": "申请时间", //非必要
  "format": "YYYY-MM-DD HH:mm:ss", // 必要格式化
  "searchKey": [  // 区间时间会有两个key 
    "execTimeStart",
    "execTimeEnd"
  ]
}
// check 选择框
{
  "searchKey": "applyStatusList", // 一般情况下是对应的col值 但是有时候查询和col对不上需要手动配置searchKey
  "option": [ // option就是对照数组
    {
      "label": "待审核",
      "value": "TO_AUDIT"
    },
    {
      "label": "已经审核",
      "value": "AUDIT"
    },
    {
      "label": "驳回",
      "value": "REJECT"
    },
    {
      "label": "撤回",
      "value": "CANCEL"
    },
    {
      "label": "关闭",
      "value": "CLOSE"
    }
  ]
}

eventName 回掉函数名称

取决于值的具体处理比如操作拦的定义了钩子 actionBtn 但是对于别的处理没有太好的办法只是做了一个约定根据索引key 来进行操作

 <template #actionBtn="{props}">
      <el-button v-if="props.applyStatus === 'TO_AUDIT'" type="text" icon="el-icon-download" @click="cancel(props)">撤回申请</el-button>
  </template>
  // settleType 一般情况下如下可以忽略 因为formatSwitch 方法自动提供了这种check类型的值处理
  <template #settleType="{props,queryConfig}">
        {{ queryConfig.rule.option.find(i => i.value == props.settleType).label }}
    </template>

queryConfig 配置约定以下几个是常用的完全可以自己约定

queryConfig:{
    "type": "date", // 组件类型
    "rule": {
        "name": "合同起始日期",
        //数据的处理格式 各种类型不同 
        "format": "YYYY-MM-DD HH:mm:ss",  
        // 数据的检索key 比如字段叫contractStartDate 但是在列表中需要叫contractStartDateForm
        "searchKey": "contractStartDateFrom",
        // 检索的数据源 比如对应check类型 就是[{label:'状态1',value:'1'}] 的数据渲染项目 不同类型的不一样 比如date类型就不太用的上 这个字段
        "option":[],
    }
}

#本地调试 1.首先启动项目 npm run dev 2.再次使用命令 npm link 3.启动或重启huilianMS 4.在项目包使用 npm link @huilian/components-tms