|
| 1 | +<template> |
| 2 | + <el-dialog |
| 3 | + :title=" |
| 4 | + isEdit |
| 5 | + ? $t('common.param.editParam') |
| 6 | + : $t('common.param.addParam') |
| 7 | + " |
| 8 | + v-model="dialogVisible" |
| 9 | + :close-on-click-modal="false" |
| 10 | + :close-on-press-escape="false" |
| 11 | + :destroy-on-close="true" |
| 12 | + :before-close="close" |
| 13 | + append-to-body |
| 14 | + > |
| 15 | + <DynamicsFormConstructor |
| 16 | + v-model="currentRow" |
| 17 | + label-position="top" |
| 18 | + require-asterisk-position="right" |
| 19 | + :input_type_list="inputTypeList" |
| 20 | + ref="DynamicsFormConstructorRef" |
| 21 | + ></DynamicsFormConstructor> |
| 22 | + <template #footer> |
| 23 | + <span class="dialog-footer"> |
| 24 | + <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button> |
| 25 | + <el-button type="primary" @click="submit()" :loading="loading"> |
| 26 | + {{ isEdit ? $t('common.save') : $t('common.add') }} |
| 27 | + </el-button> |
| 28 | + </span> |
| 29 | + </template> |
| 30 | + </el-dialog> |
| 31 | +</template> |
| 32 | +<script setup lang="ts"> |
| 33 | +import { ref, computed } from 'vue' |
| 34 | +import { cloneDeep } from 'lodash' |
| 35 | +import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue' |
| 36 | +import type { FormField } from '@/components/dynamics-form/type' |
| 37 | +import _ from 'lodash' |
| 38 | +import { t } from '@/locales' |
| 39 | +const emit = defineEmits(['refresh']) |
| 40 | +
|
| 41 | +const DynamicsFormConstructorRef = ref() |
| 42 | +const loading = ref<boolean>(false) |
| 43 | +const isEdit = ref(false) |
| 44 | +const currentItem = ref<FormField | any>() |
| 45 | +const check_field = (field_list: Array<string>, obj: any) => { |
| 46 | + return field_list.every((field) => _.get(obj, field, undefined) !== undefined) |
| 47 | +} |
| 48 | +const currentRow = computed(() => { |
| 49 | + if (currentItem.value) { |
| 50 | + const row = currentItem.value |
| 51 | + switch (row.type) { |
| 52 | + case 'input': |
| 53 | + if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) { |
| 54 | + return currentItem.value |
| 55 | + } |
| 56 | + return { |
| 57 | + attrs: row.attrs || { maxlength: 200, minlength: 0 }, |
| 58 | + field: row.field || row.variable, |
| 59 | + input_type: 'TextInput', |
| 60 | + label: row.label || row.name, |
| 61 | + default_value: row.default_value, |
| 62 | + required: row.required != undefined ? row.required : row.is_required |
| 63 | + } |
| 64 | + case 'select': |
| 65 | + if ( |
| 66 | + check_field( |
| 67 | + ['field', 'input_type', 'label', 'required', 'option_list'], |
| 68 | + currentItem.value |
| 69 | + ) |
| 70 | + ) { |
| 71 | + return currentItem.value |
| 72 | + } |
| 73 | + return { |
| 74 | + attrs: row.attrs || {}, |
| 75 | + field: row.field || row.variable, |
| 76 | + input_type: 'SingleSelect', |
| 77 | + label: row.label || row.name, |
| 78 | + default_value: row.default_value, |
| 79 | + required: row.required != undefined ? row.required : row.is_required, |
| 80 | + option_list: row.option_list |
| 81 | + ? row.option_list |
| 82 | + : row.optionList.map((o: any) => { |
| 83 | + return { key: o, value: o } |
| 84 | + }) |
| 85 | + } |
| 86 | +
|
| 87 | + case 'date': |
| 88 | + if ( |
| 89 | + check_field( |
| 90 | + [ |
| 91 | + 'field', |
| 92 | + 'input_type', |
| 93 | + 'label', |
| 94 | + 'required', |
| 95 | + 'attrs.format', |
| 96 | + 'attrs.value-format', |
| 97 | + 'attrs.type' |
| 98 | + ], |
| 99 | + currentItem.value |
| 100 | + ) |
| 101 | + ) { |
| 102 | + return currentItem.value |
| 103 | + } |
| 104 | + return { |
| 105 | + field: row.field || row.variable, |
| 106 | + input_type: 'DatePicker', |
| 107 | + label: row.label || row.name, |
| 108 | + default_value: row.default_value, |
| 109 | + required: row.required != undefined ? row.required : row.is_required, |
| 110 | + attrs: { |
| 111 | + format: 'YYYY-MM-DD HH:mm:ss', |
| 112 | + 'value-format': 'YYYY-MM-DD HH:mm:ss', |
| 113 | + type: 'datetime' |
| 114 | + } |
| 115 | + } |
| 116 | + default: |
| 117 | + return currentItem.value |
| 118 | + } |
| 119 | + } else { |
| 120 | + return { input_type: 'TextInput', required: false, attrs: { maxlength: 200, minlength: 0 }, show_default_value: true } |
| 121 | + } |
| 122 | +}) |
| 123 | +const currentIndex = ref(null) |
| 124 | +const inputTypeList = ref([ |
| 125 | + { label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' }, |
| 126 | + { label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' }, |
| 127 | + { label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' }, |
| 128 | + { label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' }, |
| 129 | + { label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' }, |
| 130 | + { label: t('dynamicsForm.input_type_list.DatePicker'), value: 'DatePickerConstructor' }, |
| 131 | + { label: t('dynamicsForm.input_type_list.SwitchInput'), value: 'SwitchInputConstructor' }, |
| 132 | +]) |
| 133 | +
|
| 134 | +const dialogVisible = ref<boolean>(false) |
| 135 | +
|
| 136 | +const open = (row: any, index: any) => { |
| 137 | + dialogVisible.value = true |
| 138 | +
|
| 139 | + if (row) { |
| 140 | + isEdit.value = true |
| 141 | + currentItem.value = cloneDeep(row) |
| 142 | + currentIndex.value = index |
| 143 | + } else { |
| 144 | + currentItem.value = null |
| 145 | + } |
| 146 | +} |
| 147 | +
|
| 148 | +const close = () => { |
| 149 | + dialogVisible.value = false |
| 150 | + isEdit.value = false |
| 151 | + currentIndex.value = null |
| 152 | + currentItem.value = null as any |
| 153 | +} |
| 154 | +
|
| 155 | +const submit = async () => { |
| 156 | + const formEl = DynamicsFormConstructorRef.value |
| 157 | + if (!formEl) return |
| 158 | + await formEl.validate().then(() => { |
| 159 | + emit('refresh', formEl?.getData(), currentIndex.value) |
| 160 | + isEdit.value = false |
| 161 | + currentItem.value = null as any |
| 162 | + currentIndex.value = null |
| 163 | + }) |
| 164 | +} |
| 165 | +
|
| 166 | +defineExpose({ open, close }) |
| 167 | +</script> |
| 168 | +<style lang="scss" scoped></style> |
0 commit comments