|
@@ -0,0 +1,133 @@
|
|
|
+<template>
|
|
|
+ <CzrDialog
|
|
|
+ :show="show"
|
|
|
+ :title="titleCpt"
|
|
|
+ @onClose="$emit('update:show', false)"
|
|
|
+ width="500px"
|
|
|
+ height="auto"
|
|
|
+ maxHeight="80%"
|
|
|
+ :loading="state.loading"
|
|
|
+ @onSubmit="onSubmit"
|
|
|
+ >
|
|
|
+ <div class="vars-detail">
|
|
|
+ <div class="vars-detail-types">
|
|
|
+ <template v-for="item in optionsType">
|
|
|
+ <div class="__hover" :class="{active: state.form.type === item.type}" @click="state.form.type = item.type">{{item.label}}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
|
|
|
+ <CzrFormColumn
|
|
|
+ :span="24"
|
|
|
+ required
|
|
|
+ label="显示名称"
|
|
|
+ v-model:param="state.form.label"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ :span="24"
|
|
|
+ required
|
|
|
+ label="变量名称"
|
|
|
+ v-model:param="state.form.key"
|
|
|
+ />
|
|
|
+ <template v-if="state.form.type === 'String' || state.form.type === 'Textarea'">
|
|
|
+ <CzrFormColumn
|
|
|
+ :span="24"
|
|
|
+ required
|
|
|
+ label="最大长度"
|
|
|
+ v-model:param="state.form.length"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </CzrForm>
|
|
|
+ </div>
|
|
|
+ </CzrDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
|
|
|
+import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+
|
|
|
+const emit = defineEmits(['update:show', 'refresh'])
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ show: {default: false},
|
|
|
+ transfer: <any>{}
|
|
|
+})
|
|
|
+const state: any = reactive({
|
|
|
+ loading: false,
|
|
|
+ form: {
|
|
|
+ type: 'String',
|
|
|
+ },
|
|
|
+})
|
|
|
+const optionsType = [
|
|
|
+ {type: 'String', label: '文本'},
|
|
|
+ {type: 'Textarea', label: '段落'},
|
|
|
+ {type: 'Number', label: '数字'},
|
|
|
+ // {type: 'Select', label: '下拉选项'},
|
|
|
+]
|
|
|
+const titleCpt = computed(() => {
|
|
|
+ let t = '变量'
|
|
|
+ switch (props.transfer.mode) {
|
|
|
+ case 'add': t = '新增' + t
|
|
|
+ break
|
|
|
+ case 'edit': t = '编辑' + t
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return t
|
|
|
+})
|
|
|
+const ref_form = ref()
|
|
|
+watch(() => props.show, (n) => {
|
|
|
+ if (n) {
|
|
|
+ state.form = props.transfer.row || {type: 'String'}
|
|
|
+ console.log(state.form)
|
|
|
+ nextTick(() => {
|
|
|
+ ref_form.value.reset()
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+const onSubmit = () => {
|
|
|
+ ref_form.value.submit().then(() => {
|
|
|
+ emit('update:show', false)
|
|
|
+ const res: any = {
|
|
|
+ label: state.form.label,
|
|
|
+ key: state.form.key,
|
|
|
+ type: state.form.type,
|
|
|
+ }
|
|
|
+ if (state.form.type === 'String' || state.form.type === 'Textarea') {
|
|
|
+ res.length = state.form.length
|
|
|
+ }
|
|
|
+ emit('refresh', res)
|
|
|
+ }).catch((e) => {
|
|
|
+ ElMessage({
|
|
|
+ message: e[0].message,
|
|
|
+ grouping: true,
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.vars-detail {
|
|
|
+ padding: 10px 20px 0;
|
|
|
+ .vars-detail-types {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ &.active, &:hover {
|
|
|
+ border-color: var(--czr-main-color);
|
|
|
+ color: var(--czr-main-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vars-detail-form {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|