| 提交 | 用户 | 时间 | ||
| e57a89 | 1 | <template> |
| 懒 | 2 | <div> |
| 3 | <el-dialog | |
| 4 | v-bind="$attrs" | |
| 5 | :close-on-click-modal="false" | |
| 6 | :modal-append-to-body="false" | |
| 7 | v-on="$listeners" | |
| 8 | @open="onOpen" | |
| 9 | @close="onClose" | |
| 10 | > | |
| 11 | <el-row :gutter="0"> | |
| 12 | <el-form | |
| 13 | ref="elForm" | |
| 14 | :model="formData" | |
| 15 | :rules="rules" | |
| 16 | size="small" | |
| 17 | label-width="100px" | |
| 18 | > | |
| 19 | <el-col :span="24"> | |
| 20 | <el-form-item | |
| 21 | label="选项名" | |
| 22 | prop="label" | |
| 23 | > | |
| 24 | <el-input | |
| 25 | v-model="formData.label" | |
| 26 | placeholder="请输入选项名" | |
| 27 | clearable | |
| 28 | /> | |
| 29 | </el-form-item> | |
| 30 | </el-col> | |
| 31 | <el-col :span="24"> | |
| 32 | <el-form-item | |
| 33 | label="选项值" | |
| 34 | prop="value" | |
| 35 | > | |
| 36 | <el-input | |
| 37 | v-model="formData.value" | |
| 38 | placeholder="请输入选项值" | |
| 39 | clearable | |
| 40 | > | |
| 41 | <el-select | |
| 42 | slot="append" | |
| 43 | v-model="dataType" | |
| 44 | :style="{width: '100px'}" | |
| 45 | > | |
| 46 | <el-option | |
| 47 | v-for="(item, index) in dataTypeOptions" | |
| 48 | :key="index" | |
| 49 | :label="item.label" | |
| 50 | :value="item.value" | |
| 51 | :disabled="item.disabled" | |
| 52 | /> | |
| 53 | </el-select> | |
| 54 | </el-input> | |
| 55 | </el-form-item> | |
| 56 | </el-col> | |
| 57 | </el-form> | |
| 58 | </el-row> | |
| 59 | <div slot="footer"> | |
| 60 | <el-button | |
| 61 | type="primary" | |
| 62 | @click="handleConfirm" | |
| 63 | > | |
| 64 | 确定 | |
| 65 | </el-button> | |
| 66 | <el-button @click="close"> | |
| 67 | 取消 | |
| 68 | </el-button> | |
| 69 | </div> | |
| 70 | </el-dialog> | |
| 71 | </div> | |
| 72 | </template> | |
| 73 | <script> | |
| 74 | import { isNumberStr } from '@/utils/index' | |
| 75 | ||
| 76 | export default { | |
| 77 | components: {}, | |
| 78 | inheritAttrs: false, | |
| 79 | props: [], | |
| 80 | data() { | |
| 81 | return { | |
| 82 | id: 100, | |
| 83 | formData: { | |
| 84 | label: undefined, | |
| 85 | value: undefined | |
| 86 | }, | |
| 87 | rules: { | |
| 88 | label: [ | |
| 89 | { | |
| 90 | required: true, | |
| 91 | message: '请输入选项名', | |
| 92 | trigger: 'blur' | |
| 93 | } | |
| 94 | ], | |
| 95 | value: [ | |
| 96 | { | |
| 97 | required: true, | |
| 98 | message: '请输入选项值', | |
| 99 | trigger: 'blur' | |
| 100 | } | |
| 101 | ] | |
| 102 | }, | |
| 103 | dataType: 'string', | |
| 104 | dataTypeOptions: [ | |
| 105 | { | |
| 106 | label: '字符串', | |
| 107 | value: 'string' | |
| 108 | }, | |
| 109 | { | |
| 110 | label: '数字', | |
| 111 | value: 'number' | |
| 112 | } | |
| 113 | ] | |
| 114 | } | |
| 115 | }, | |
| 116 | computed: {}, | |
| 117 | watch: { | |
| 118 | // eslint-disable-next-line func-names | |
| 119 | 'formData.value': function (val) { | |
| 120 | this.dataType = isNumberStr(val) ? 'number' : 'string' | |
| 121 | } | |
| 122 | }, | |
| 123 | created() {}, | |
| 124 | mounted() {}, | |
| 125 | methods: { | |
| 126 | onOpen() { | |
| 127 | this.formData = { | |
| 128 | label: undefined, | |
| 129 | value: undefined | |
| 130 | } | |
| 131 | }, | |
| 132 | onClose() {}, | |
| 133 | close() { | |
| 134 | this.$emit('update:visible', false) | |
| 135 | }, | |
| 136 | handleConfirm() { | |
| 137 | this.$refs.elForm.validate(valid => { | |
| 138 | if (!valid) return | |
| 139 | if (this.dataType === 'number') { | |
| 140 | this.formData.value = parseFloat(this.formData.value) | |
| 141 | } | |
| 142 | this.formData.id = this.id++ | |
| 143 | this.$emit('commit', this.formData) | |
| 144 | this.close() | |
| 145 | }) | |
| 146 | } | |
| 147 | } | |
| 148 | } | |
| 149 | </script> | |
