1.0.6 • Published 3 years ago
ehl-cpt-custom v1.0.6
前端公共组件项目
安装使用
npm install ehl-cpt-common
公共组件介绍
1.公共组件内部逻辑
<template>
<el-form
:model="data_resource"
:rules="rules"
:ref="ref"
:label-width="`${labelWidth}px`"
:class="`_ehl_form ${customClass}`"
>
<slot name="form_header" :data="{ options: options_param, data }"></slot>
<template v-for="(item, index) in options_arr">
<el-form-item
:class="[{ el_form_item_v: item.vertical }, item.lineClass]"
:style="item.lineStyle || {}"
v-if="item.show !== false"
:key="item.key"
:title="item.label"
:label="item.label"
:prop="item.key"
:required="item.required"
>
<!-- 按钮 -->
<div
v-if="item.type === 'button'"
:class="['content_layout', item.class || '']"
:style="{
'justify-content':
item.position === 'center'
? 'center'
: item.position === 'rignt'
? 'flex-end'
: 'flex-start',
...(item.style || {}),
}"
>
<template v-for="(btn, num) in item.buttons">
<div
:key="num"
v-if="btn.show !== false"
:class="btn.class || ''"
:style="btn.style || {}"
@click="!btn.disable && btn.click && btn.click(options_param, data)"
>{{ btn.name }}
</div>
</template>
</div>
<!-- 纯展示/自定义 -->
<div
v-if="item.type === 'label' && (data_resource[item.key] || item.default)"
:class="item.class || ''"
:style="item.style || {}"
>
<slot
:name="item.key"
:data="{ current: data_resource[item.key], options: options_param, data }"
>
{{ data_resource[item.key] || item.default || '' }}
</slot>
</div>
<!-- 普通输入框 -->
<ehl-input
v-if="item.type === 'input'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:clear="item.clear"
:rows="item.rows"
:disabled="item.disabled"
:readonly="item.readonly"
:password="item.password"
:max="item.max"
:limit="item.limit"
:placeholder="item.placeholder"
:prefix-icon="item.prefixIcon"
:suffix-icon="item.suffixIcon"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
/>
<!-- 数字输入框 -->
<ehl-input-number
v-if="item.type === 'inputNumber'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:disabled="item.disabled"
:min="item.min"
:max="item.max"
:step="item.step"
:placeholder="item.placeholder"
:precision="item.precision"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
/>
<!-- 下拉选择框 -->
<ehl-select
v-if="item.type === 'select'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:options="item.options"
:lazy="item.lazy"
:clear="item.clear"
:multiple="item.multiple"
:disabled="item.disabled"
:filterable="item.filterable"
:placeholder="item.placeholder"
:loadingtext="item.loadingtext"
:prop="item.prop"
@init="
(opts, val) => {
item.init && item.init(opts, val)
}
"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
/>
<!-- 下拉选择树 -->
<ehl-select-tree
v-if="item.type === 'selectTree'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:tree="item.tree"
:lazy="item.lazy"
:clear="item.clear"
:check-strictly="item.checkStrictly"
:disabled="item.disabled"
:filterable="item.filterable"
:show-checkbox="item.showcheckbox"
:placeholder="item.placeholder"
:loadingtext="item.loadingtext"
:prop="item.prop"
@init="
(opts, val) => {
item.init && item.init(opts, val)
}
"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
/>
<!-- 单选框 -->
<ehl-radio-group
v-if="item.type === 'radioGroup'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:options="item.options"
:border="item.border"
:disabled="item.disabled"
:prop="item.prop"
@init="
(opts, val) => {
item.init && item.init(opts, val)
}
"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
>
<template v-for="i in item.options" v-slot:[i.slot]="{ data }">
<slot :name="i.slot" :data="data"> </slot>
</template>
</ehl-radio-group>
<!-- 多选框 -->
<ehl-check-group
v-if="item.type === 'checkGroup'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:options="item.options"
:border="item.border"
:disabled="item.disabled"
:prop="item.prop"
@init="
(opts, val) => {
item.init && item.init(opts, val)
}
"
@change="
val => {
item.change && item.change(val, options_param, data)
}
"
>
<template v-for="i in item.options" v-slot:[i.slot]="{ data }">
<slot :name="i.slot" :data="data"> </slot>
</template>
</ehl-check-group>
<!-- 普通展示表格 -->
<ehl-table
v-if="item.type === 'table'"
:class="item.class || ''"
:style="item.style || {}"
:table-data="data_resource[item.key]"
:table-columns="item.columns"
:total="item.total"
:page-size="item.size"
:current-page="item.page"
:use-page="item.usePage"
@sort="(order, field) => item.sortChange(order, field, options_param, data)"
@page-change="page => item.pageChange(page, options_param, data)"
@size-change="size => item.sizeChange(size, options_param, data)"
@filter-change="filters => item.filterChange(filters, options_param, data)"
>
<template v-slot:operation="rowData">
<slot :name="item.key" :data="rowData.data"> </slot>
</template>
</ehl-table>
<!-- 多功能表格 -->
<ehl-mul-table
v-if="item.type === 'mulTable'"
:class="item.class || ''"
:style="item.style || {}"
:column="item.column"
:data="data_resource[item.key]"
:select="item.select"
:tool="item.tool"
:placeholder="item.placeholder"
@add="item.add(options)"
@delete="delArr => multable.del(delArr, options)"
/>
<!-- 平铺展示器 -->
<ehl-tiling
v-if="item.type === 'tiling'"
:class="item.class || ''"
:style="item.style || {}"
:data="data_resource[item.key]"
:min-width="item.minWidth"
:colums="item.colums"
>
<template v-slot:tiling="{ data }">
<slot name="tiling" :data="data"> </slot>
</template>
</ehl-tiling>
<!-- 代码编辑器 -->
<ehlCode
v-if="item.type === 'code'"
v-model="data_resource[item.key]"
:class="item.class || ''"
:style="item.style || {}"
:ref="item.key"
:mode="item.mode"
:theme="item.theme"
:hits="item.hits"
:readonly="item.readonly"
:tool="item.tool"
/>
<!-- 搜索树 -->
<ehl-tree
v-if="item.type === 'tree'"
:class="item.class || ''"
:style="item.style || {}"
:tree="data_resource[item.key]"
:clear="item.clear"
:rows="item.rows"
:max="item.max"
:limit="item.limit"
:show-all="item.showAll"
:checkbox="item.checkbox"
:placeholder="item.placeholder"
:prefix-icon="item.prefixIcon"
:suffix-icon="item.suffixIcon"
@init="item.search"
@input="item.input"
@search="item.search"
@node-click="item.nodeClick"
>
<template v-slot:blank0>
<slot :name="`${item.key}0`" :data="{ data }"></slot>
</template>
<template v-slot:blank1>
<slot :name="`${item.key}1`" :data="{ data }"></slot>
</template>
<template v-slot:blank2>
<slot :name="`${item.key}2`" :data="{ data }"></slot>
</template>
</ehl-tree>
</el-form-item>
<slot :name="index" :data="{ options: options_param, data }"></slot>
</template>
<div class="slot_btn">
<slot name="btn" :data="$refs[ref]"></slot>
</div>
</el-form>
</template>2.公共组件类型定义
export default class form extends superr {
labelWidth = 110 //定义表单项的标题宽度
customClass = '' //定义表单整体的类
options = {
/**
* 通用配置
* vertical:true-表单label在上面不是左边,false-左边
* lineClass:自定义整行的类名，可以使用公共样式
* lineStyle:自定义整行的样式
* class:自定义单独组件的类名，可以使用公共样式
* style:自定义单独组件的样式
* show:隐藏或者展示
* label:表单项的标题字段
* required:true-必填项
* 独立配置-参考下面示例
*/
button: {
type: 'button',
label: '按钮',
position: 'center', //left,center,rignt
buttons: [
{
name: '按钮1',
show: true,
class: 'cpt_btn_blue cpt_margin_10',
style: { width: '100px' },
disable: false,
click: function (options, data) {
options.button.buttons[2].show = true
},
},
{
name: '按钮2',
class: 'cpt_btn_disable cpt_margin_10',
disable: true,
click: function (options, data) {},
},
{
name: '按钮3',
show: false,
class: 'cpt_btn_blue_white cpt_margin_10',
disable: false,
click: function (options, data) {},
},
],
},
label: {
type: 'label',
label: '纯展示/自定义',
default: '默认显示点啥',
lineClass: 'lineClass',
style: { width: '120px' },
class: 'cpt_grey_background',
},
input: {
type: 'input',
label: '输入框',
rows: 10,
lineStyle: { float: 'left', width: '33.333%' },
required: true,
style: { width: '120px' },
suffixIcon: 'el-icon-search',
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请输入'))
} else {
callback()
}
},
},
],
change: function (val, option, data) {
// debugger
},
},
inputNumber: {
type: 'inputNumber',
label: '输入数字',
required: true,
style: { width: '120px' },
lineStyle: { float: 'left', width: '33.333%' },
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请输入数字'))
} else {
callback()
}
},
},
],
change: function (val, option, data) {
//debugger
},
},
select: {
type: 'select',
label: '选择框1',
lineStyle: { clear: 'both' },
required: true,
style: { width: '120px' },
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请选择'))
} else {
callback()
}
},
},
],
options: [],
filterable: false,
prop: { label: 'lab', value: 'id' },
init: function (opts, val) {
if (val) {
setTimeout(() => {
opts.length = 0
let tmp = [{ id: 3, lab: 'qwe3' }]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
return
}
setTimeout(() => {
opts.length = 0
let tmp = [
{ id: 1, lab: 'qwe1' },
{ id: 2, lab: 'qwe2' },
]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
},
change: function (val, option, data) {
//debugger
},
},
selecttree: {
type: 'selectTree',
label: '下拉选择树',
required: true,
style: { width: '120px' },
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请选择'))
} else {
callback()
}
},
},
],
tree: [],
filterable: false,
showcheckbox: false,
prop: { label: 'lab', value: 'id', children: 'child' },
init: function (opts, val) {
if (val) {
setTimeout(() => {
opts.length = 0
let tmp = [{ id: 5, lab: 'qwe5' }]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
return
}
setTimeout(() => {
opts.length = 0
let tmp = [
{
id: 1,
lab: 'qwe1',
child: [
{ id: 11, lab: 'qwe11' },
{ id: 12, lab: 'qwe12' },
{ id: 13, lab: 'qwe13' },
],
},
{ id: 2, lab: 'qwe2' },
{ id: 3, lab: 'qwe3' },
{ id: 4, lab: 'qwe4' },
]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
},
change: function (val, option, data) {
//debugger
},
},
radioGroup: {
type: 'radioGroup',
label: '单选框',
lazy: true,
required: true,
style: { width: '120px' },
prop: { label: 'value', value: 'id' },
options: [],
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请选择'))
} else {
callback()
}
},
},
],
init: function (opts, val) {
setTimeout(() => {
opts.length = 0
let tmp = [
{
id: 1,
value: '自定义',
custom: 'sadsdvdsv',
disabled: false,
border: true,
slot: 'rrr' /*是否是自定义，并指定插槽名称*/,
},
{ id: 2, value: '单选框2', disabled: false, border: false },
{ id: 3, value: '单选框3', disabled: false, border: false },
]
tmp.forEach(i => {
opts.push(i)
})
}, 2000)
},
change: function (val, option, data) {
//debugger
},
},
checkGroup: {
type: 'checkGroup',
label: '多选框',
lazy: true,
required: true,
style: { width: '120px' },
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请选择'))
} else {
callback()
}
},
},
],
prop: { label: 'value', value: 'id' },
options: [],
init: function (opts, val) {
setTimeout(() => {
opts.clearAll()
let tmp = [
{
id: 1,
value: '自定义',
custom: 'sadsdvdsv',
disabled: false,
border: true,
slot: 'sss' /*是否是自定义，并指定插槽名称*/,
},
{ id: 2, value: '复选框2', disabled: false, border: false },
{ id: 3, value: '复选框3', disabled: false, border: false },
]
tmp.forEach(i => {
opts.push(i)
})
}, 2000)
},
change: function (val, option, data) {
//debugger
},
},
table: {
lineClass: 'ehl_round_card',
vertical: true,
type: 'table',
// style: { width: '300px' },
columns: [
{
prop: 'datasetName',
label: '数据集',
// minWidth: 1000,
formatter: function formatter(row, column, value) {
return `<div style='color:red;'>${value}</div>`
},
event: function (row, column, value) {
console.log(row, column, value)
},
},
{
prop: 'dataLinkName',
label: '数据',
sortable: true,
// minWidth: 1000,
filters: [
{ text: 'qwe', value: 'qwe' },
{ text: 'asd', value: 'asd' },
],
},
{
prop: 'dataLinkName',
label: '名称',
sortable: true,
// minWidth: 1000,
filters: [
{ text: 'qwe', value: 'qwe' },
{ text: 'asd', value: 'asd' },
],
},
{
isOperation: true,
// width: 1000,
label: '操作',
},
],
},
mulTable: {
type: 'mulTable',
label: '多功能表格',
// style: { width: '300px' },
select: true,
column: {
label: {
type: 'label',
label: '纯展示/自定义',
default: '默认显示点啥',
},
input: {
type: 'input',
label: '输入框',
change: (
val /**更改值*/,
item /*当前行数据*/,
data /*所有的数据*/,
column /*所有的配置项*/,
) => {
// debugger
},
},
inputNumber: {
type: 'inputNumber',
label: '输入数字',
change: (
val /**更改值*/,
item /*当前行数据*/,
data /*所有的数据*/,
column /*所有的配置项*/,
) => {
// debugger
},
},
select: {
type: 'select',
label: '选择框1',
options: [],
filterable: false,
prop: { label: 'lab', value: 'id' },
init: function (opts, val) {
if (val) {
setTimeout(() => {
opts.length = 0
let tmp = [{ id: 3, lab: 'qwe3' }]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
return
}
setTimeout(() => {
opts.length = 0
let tmp = [
{ id: 1, lab: 'qwe1' },
{ id: 2, lab: 'qwe2' },
]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
},
change: (
val /**更改值*/,
item /*当前行数据*/,
data /*所有的数据*/,
column /*所有的配置项*/,
) => {
debugger
},
},
selecttree: {
type: 'selectTree',
label: '下拉选择树',
tree: [],
filterable: false,
showcheckbox: false,
prop: { label: 'lab', value: 'id', children: 'child' },
init: function (opts, val) {
if (val) {
setTimeout(() => {
opts.length = 0
let tmp = [{ id: 5, lab: 'qwe5' }]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
return
}
setTimeout(() => {
opts.length = 0
let tmp = [
{
id: 1,
lab: 'qwe1',
child: [
{ id: 11, lab: 'qwe11' },
{ id: 12, lab: 'qwe12' },
{ id: 13, lab: 'qwe13' },
],
},
{ id: 2, lab: 'qwe2' },
{ id: 3, lab: 'qwe3' },
{ id: 4, lab: 'qwe4' },
]
tmp.forEach(i => {
opts.push(i)
})
}, 1000)
},
change: (
val /**更改值*/,
item /*当前行数据*/,
data /*所有的数据*/,
column /*所有的配置项*/,
) => {
debugger
},
},
check: {
label: '勾选框',
type: 'check',
change: (
val /**更改值*/,
item /*当前行数据*/,
data /*所有的数据*/,
column /*所有的配置项*/,
) => {
debugger
},
},
operate: {
label: '操作',
type: 'operate',
format: val => {
return `<span style='cursor:pointer;color:red;'>${val}</span>`
},
click: (
data /*当前值*/,
key /*当前值的key*/,
raw /*这一行数据*/,
rawNum /*这一行的编号*/,
) => {
debugger
},
},
},
tool: {
show: true,
max_min: true,
del: true,
other: true,
add: true,
},
placeholder: '啥也没有了',
add: function (options) {
//debugger
},
del: function (delArr, options) {
//debugger
},
},
code: {
type: 'code',
label: '代码编辑器',
required: true,
theme: 'light',
mode: 'sql',
readonly: false,
style: { height: '200px' },
tool: {
show: true, //总体是否显示
max_min: true, //是否显示最大化
format: true, //是否显示格式化
clear: true, //是否显示清空
mode: true, //是否显示模式选择器
lineNum: true, //是否显示行号
},
rule: [
{
required: true,
validator: (rule, value, callback) => {
if (isEmpty(value)) {
callback(new Error('请输入'))
} else {
callback()
}
},
},
],
},
tiling: {
label: '九宫格展示',
type: 'tiling',
style: { height: '200px', overflow: 'auto' },
colums: 4,
},
tree: {
label: '搜索树',
type: 'tree',
style: { height: '600px', width: '200px' },
input: function () {},
search: function (tree, input) {
tree.clearAll()
let tmp = [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1',
},
],
},
],
},
]
tmp.forEach(element => {
tree.push(element)
})
},
nodeClick: function () {},
},
}
constructor(data) {
super(data)
}
validate(ref) {
console.log(this.data)
ref.validate(valid => {
if (valid) {
console.log(this.data)
} else {
console.log('表单验证失败')
return false
}
})
}
}