@huilian/components-tms
v3.1.1
Published
* lib为产出物 * components 源码文件目录 * package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径 * 这包项目里基本都是后台element为主的 二次包装组件 所以一些依赖是项目本身就有的 这单要注意 * 参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子
Downloads
146
Readme
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