80 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			80 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div
 | |
|     v-if="content.type === 1"
 | |
|     class="message-form"
 | |
|   >
 | |
|     <FormBranch
 | |
|       :title="content.header"
 | |
|       :list="content.items"
 | |
|       @input-click="handleContentListItemClick"
 | |
|     />
 | |
|   </div>
 | |
|   <div
 | |
|     v-else
 | |
|     class="message-form"
 | |
|   >
 | |
|     <FormInput
 | |
|       :title="content.header"
 | |
|       @input-submit="handleFormSaveInputSubmit"
 | |
|     />
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script lang="ts">
 | |
| import vue from '../../adapter-vue';
 | |
| import FormBranch from './form-branch.vue';
 | |
| import FormInput from './form-input.vue';
 | |
| 
 | |
| const { computed } = vue;
 | |
| 
 | |
| interface branchItem {
 | |
|   content: string;
 | |
|   desc: string;
 | |
| }
 | |
| 
 | |
| interface Props {
 | |
|   payload: any;
 | |
| }
 | |
| 
 | |
| export default {
 | |
|   components: {
 | |
|     FormBranch,
 | |
|     FormInput,
 | |
|   },
 | |
|   props: {
 | |
|     payload: {
 | |
|       type: Object,
 | |
|       default: () => ({}),
 | |
|     },
 | |
|   },
 | |
|   emits: ['sendMessage'],
 | |
|   setup(props: Props, { emit }) {
 | |
|     const content = computed(() => {
 | |
|       return props.payload?.content || {
 | |
|         type: 0,
 | |
|         header: '',
 | |
|         items: [],
 | |
|       };
 | |
|     });
 | |
| 
 | |
|     const handleContentListItemClick = (branch: branchItem) => {
 | |
|       emit('sendMessage', { text: branch.content });
 | |
|     };
 | |
| 
 | |
|     const handleFormSaveInputSubmit = (text: string) => {
 | |
|       emit('sendMessage', { text });
 | |
|     };
 | |
|     return {
 | |
|       content,
 | |
|       handleContentListItemClick,
 | |
|       handleFormSaveInputSubmit,
 | |
|     };
 | |
|   },
 | |
| };
 | |
| </script>
 | |
| <style lang="scss">
 | |
| .message-form {
 | |
|   max-width: 300px;
 | |
| }
 | |
| </style>
 |