refactor: 去掉系统组件的三个测试组件
wu.jian2
2 years ago
parent
ec6edac560
commit
99c9ddb17a
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@ -1,86 +0,0 @@
|
||||
const title = '测试组件A'
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '维度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'xField',
|
||||
optionField: 'xField', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'yField',
|
||||
// 对应options中的字段
|
||||
optionField: 'yField',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '用户名',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_username',
|
||||
optionField: 'customize.username', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '手机号',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_phone',
|
||||
optionField: 'customize.phone', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
const data = [
|
||||
{ stage: '简历筛选', number: 253, company: 'A公司' },
|
||||
{ stage: '初试人数', number: 151, company: 'A公司' },
|
||||
{ stage: '复试人数', number: 113, company: 'B公司' }
|
||||
]
|
||||
|
||||
const option = {
|
||||
// 数据
|
||||
data: data,
|
||||
// 数据的字段相关属性
|
||||
xField: '',
|
||||
yField: '',
|
||||
seriesField: '',
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
username: '张三11123123',
|
||||
phone: '12312qweqweqwe3'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
option,
|
||||
setting
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="test">
|
||||
<el-descriptions title="用户信息">
|
||||
<el-descriptions-item label="用户名">
|
||||
{{ customize.username }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">
|
||||
{{ customize.phone }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">
|
||||
苏州市
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">
|
||||
学校
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">
|
||||
江苏省苏州市吴中区吴中大道 1188 号
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TestA',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkage (row) {
|
||||
this.$emit('linkage', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
testB的子组件
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@ -1,72 +0,0 @@
|
||||
const title = '测试组件B'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '维度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'xField',
|
||||
optionField: 'xField', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'yField',
|
||||
// 对应options中的字段
|
||||
optionField: 'yField',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '用户名',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_username',
|
||||
optionField: 'customize.username', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
const data = [
|
||||
{ stage: '简历筛选', number: 253, company: 'A公司' },
|
||||
{ stage: '初试人数', number: 151, company: 'A公司' },
|
||||
{ stage: '复试人数', number: 113, company: 'B公司' }
|
||||
]
|
||||
|
||||
const option = {
|
||||
// 数据
|
||||
data: data,
|
||||
// 数据的字段相关属性
|
||||
xField: '',
|
||||
yField: '',
|
||||
seriesField: '',
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
username: '张三'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
option,
|
||||
setting
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="test">
|
||||
<Child />
|
||||
<h1>用户名: {{ customize.username }}</h1>
|
||||
<br>
|
||||
<div
|
||||
v-for="(row, key) in optionData"
|
||||
:key="key"
|
||||
class="item"
|
||||
@click="linkage(row)"
|
||||
>
|
||||
<span> {{ row[option.xField] }}</span> -
|
||||
<span> {{ row[option.yField] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Child from './Child.vue'
|
||||
export default {
|
||||
name: 'TestB',
|
||||
components: {
|
||||
Child
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkage (row) {
|
||||
this.$emit('linkage', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
background: #ccc;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
testB的子组件
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@ -1,86 +0,0 @@
|
||||
const title = '测试组件C'
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '维度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'xField',
|
||||
optionField: 'xField', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'yField',
|
||||
// 对应options中的字段
|
||||
optionField: 'yField',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
{
|
||||
label: '用户名',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_username',
|
||||
optionField: 'customize.username', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '手机号',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'customize_phone',
|
||||
optionField: 'customize.phone', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
const data = [
|
||||
{ stage: '简历筛选', number: 253, company: 'A公司' },
|
||||
{ stage: '初试人数', number: 151, company: 'A公司' },
|
||||
{ stage: '复试人数', number: 113, company: 'B公司' }
|
||||
]
|
||||
|
||||
const option = {
|
||||
// 数据
|
||||
data: data,
|
||||
// 数据的字段相关属性
|
||||
xField: '',
|
||||
yField: '',
|
||||
seriesField: '',
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
username: '张三',
|
||||
phone: '123456789'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
option,
|
||||
setting
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="test">
|
||||
<h1>用户名: {{ customize.username }}</h1>
|
||||
<br>
|
||||
<div
|
||||
v-for="(row, key) in optionData"
|
||||
:key="key"
|
||||
class="item"
|
||||
@click="linkage(row)"
|
||||
>
|
||||
<span> {{ row[option.xField] }}</span> -
|
||||
<span> {{ row[option.yField] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TestC',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkage (row) {
|
||||
this.$emit('linkage', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
.item {
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue