86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<section class="chartPicker">
|
|
<ai-dialog-btn :modal="false" dialog-title="选择图表模板" :customFooter="false"
|
|
@confirm="handleConfirm" @open="handleOpenDialog">
|
|
<template #btn>
|
|
<img class="pointer" v-if="current.thumb" :src="current.thumb"/>
|
|
<el-button v-else type="text">选择图表</el-button>
|
|
</template>
|
|
<div class="charts">
|
|
<div class="item pointer" v-for="tpl in tpls" :key="tpl.type" :class="{selected:selected==tpl.type}"
|
|
@click="selected=tpl.type">
|
|
<img :src="tpl.thumb"/>
|
|
<div v-text="tpl.label"/>
|
|
</div>
|
|
</div>
|
|
</ai-dialog-btn>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
|
|
import {chartTpl} from "../config";
|
|
|
|
export default {
|
|
name: "chartPicker",
|
|
components: {AiDialogBtn},
|
|
model: {
|
|
prop: "value",
|
|
event: "input"
|
|
},
|
|
props: {
|
|
value: String
|
|
},
|
|
data() {
|
|
return {
|
|
selected: null
|
|
}
|
|
},
|
|
computed: {
|
|
tpls: () => chartTpl.map(e => e.list).flat(),
|
|
current: v => v.tpls.find(e => e.type == v.value) || {}
|
|
},
|
|
watch: {
|
|
value(v) {
|
|
v && this.$emit("config", this.$echartTpls[v])
|
|
}
|
|
},
|
|
methods: {
|
|
handleConfirm() {
|
|
this.$emit("input", this.selected)
|
|
},
|
|
handleOpenDialog() {
|
|
this.selected = this.$copy(this.value)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.chartPicker {
|
|
text-align: left;
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.charts {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
|
|
.item {
|
|
text-align: center;
|
|
padding: 2px;
|
|
border: 2px solid transparent;
|
|
|
|
& > img {
|
|
width: 100%;
|
|
}
|
|
|
|
&.selected, &:hover {
|
|
border-color: #46f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|