You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script lang="ts">
|
|
import hwInput from './hw-input.vue';
|
|
import hwTable from './hw-table.vue';
|
|
import tool from './tool.vue';
|
|
|
|
export default {
|
|
name: 'hw-form',
|
|
components: {
|
|
hwInput,
|
|
hwTable,
|
|
tool
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="hw-form" @click.stop="formClick"
|
|
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#ccc'}`">
|
|
<tool v-if="selectUuid === options.uuid" :options="options" />
|
|
<span>{{ options.name }}</span>
|
|
<el-form :model="formData[options.key || ('form-'+options.uuid)]">
|
|
<draggable style="min-height: 10px;" :list="tasks" :group="{ name: 'list' }" itemKey="id">
|
|
<template #item="{ element }">
|
|
<div>
|
|
<component :is="element.type" :options="element.options" :tasks="element.tasks"
|
|
:formData="formData[options.key || ('form-'+options.uuid)]" />
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import draggable from 'vuedraggable';
|
|
import nestedDraggable from '@/views/tool/draggable/nest.vue';
|
|
|
|
|
|
const props = defineProps({
|
|
options: Object,
|
|
tasks: Array,
|
|
formData: Object
|
|
});
|
|
|
|
const { options, tasks, formData } = toRefs(props);
|
|
console.log('formData', formData);
|
|
formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
|
|
|
|
|
|
const selectUuid = inject('selectUuid');
|
|
const getSelectUuid = inject('getSelectUuid');
|
|
const getOptions = inject('getOptions');
|
|
const formClick = () => {
|
|
getOptions(options.value);
|
|
getSelectUuid(options.value.uuid);
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.hw-form {
|
|
min-height: 20px;
|
|
border: 1px dashed #ccc;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background-color: #0001;
|
|
border-color: #00afff;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|