修改表单构建
夜笙歌
4 months ago
parent
43304fb664
commit
1acb8ecde8
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
defaultOption: Object
|
||||
});
|
||||
|
||||
|
||||
const chart = ref(null);
|
||||
const option = ref(null);
|
||||
const chartRef = ref();
|
||||
|
||||
const setData = (e) => {
|
||||
option.value = e;
|
||||
initChart(e);
|
||||
};
|
||||
const initChart = (option) => {
|
||||
if (!chart.value) {
|
||||
chart.value = echarts.init(chartRef.value, 'macarons');
|
||||
}
|
||||
chart.value.setOption(option, true);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setData
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="hw-input" @click.stop="inputClick"
|
||||
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
|
||||
<tool v-if="selectUuid === options.uuid" :options="options" />
|
||||
<Chart ref="chartRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import tool from './tool.vue';
|
||||
import Chart from '@/components/Draggable/chart.vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-chart'
|
||||
});
|
||||
const chartRef = ref();
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartRef.value.setData({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
const { options, formData } = toRefs(props);
|
||||
const getOptions = inject('getOptions');
|
||||
|
||||
const selectUuid = inject('selectUuid');
|
||||
const getSelectUuid = inject('getSelectUuid');
|
||||
const inputClick = () => {
|
||||
getOptions(options.value);
|
||||
getSelectUuid(options.value.uuid);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.hw-input {
|
||||
margin: 2px;
|
||||
border: 1px solid #0000;
|
||||
position: relative;
|
||||
padding: 12px 2px 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0001;
|
||||
border: 1px solid #00afff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="hw-input" @click.stop="inputClick"
|
||||
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
|
||||
<tool v-if="selectUuid === options.uuid" :options="options" />
|
||||
<el-form-item :label="options.name" :required="options.required">
|
||||
<el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
|
||||
<el-radio :value="3">Option A</el-radio>
|
||||
<el-radio :value="6">Option B</el-radio>
|
||||
<el-radio :value="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import tool from './tool.vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-radio-group'
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
const { options, formData } = toRefs(props);
|
||||
const getOptions = inject('getOptions');
|
||||
|
||||
const selectUuid = inject('selectUuid');
|
||||
const getSelectUuid = inject('getSelectUuid');
|
||||
const inputClick = () => {
|
||||
getOptions(options.value);
|
||||
getSelectUuid(options.value.uuid);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.hw-input {
|
||||
margin: 2px;
|
||||
border: 1px solid #0000;
|
||||
position: relative;
|
||||
padding: 12px 2px 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0001;
|
||||
border: 1px solid #00afff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="hw-input" @click.stop="inputClick"
|
||||
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
|
||||
<tool v-if="selectUuid === options.uuid" :options="options" />
|
||||
<el-form-item :label="options.name" :required="options.required">
|
||||
<el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import tool from './tool.vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-slider'
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
const { options, formData } = toRefs(props);
|
||||
const getOptions = inject('getOptions');
|
||||
|
||||
const selectUuid = inject('selectUuid');
|
||||
const getSelectUuid = inject('getSelectUuid');
|
||||
const inputClick = () => {
|
||||
getOptions(options.value);
|
||||
getSelectUuid(options.value.uuid);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.hw-input {
|
||||
margin: 2px;
|
||||
border: 1px solid #0000;
|
||||
position: relative;
|
||||
padding: 12px 2px 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0001;
|
||||
border: 1px solid #00afff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<el-form-item :label="options.name" :required="options.required">
|
||||
|
||||
<Chart ref="chartRef" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
import Chart from '@/components/Draggable/chart.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-input-view'
|
||||
});
|
||||
|
||||
const chartRef = ref();
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
onMounted(() => {
|
||||
chartRef.value.setData({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
const { options, formData } = toRefs(props);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<el-form-item :label="options.name" :required="options.required">
|
||||
<el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
|
||||
<el-radio :value="3">Option A</el-radio>
|
||||
<el-radio :value="6">Option B</el-radio>
|
||||
<el-radio :value="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-input-view'
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
const { options, formData } = toRefs(props);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<el-form-item :label="options.name" :required="options.required">
|
||||
<el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
defineOptions({
|
||||
name: 'hw-slider-view'
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
formData: Object
|
||||
});
|
||||
const { options, formData } = toRefs(props);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue