Showing
9 changed files
with
882 additions
and
5 deletions
| ... | ... | @@ -23,10 +23,10 @@ |
| 23 | 23 | <TabPane key="1" tab="属性"> |
| 24 | 24 | <Attribute v-show="activeKey === '1'" ref="AttrRef" /> |
| 25 | 25 | </TabPane> |
| 26 | - <TabPane disabled key="2" tab="服务"> | |
| 26 | + <TabPane key="2" tab="服务"> | |
| 27 | 27 | <Service v-show="activeKey === '2'" ref="ServiceRef" /> |
| 28 | 28 | </TabPane> |
| 29 | - <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件"> | |
| 29 | + <TabPane key="3" v-show="activeKey === '3'" tab="事件"> | |
| 30 | 30 | <Events v-show="activeKey === '3'" ref="EventsRef" /> |
| 31 | 31 | </TabPane> |
| 32 | 32 | </Tabs> | ... | ... |
| ... | ... | @@ -22,11 +22,14 @@ |
| 22 | 22 | defineEmits(['register']); |
| 23 | 23 | // const { createMessage } = useMessage(); |
| 24 | 24 | const TslConRef = ref<InstanceType<typeof TslContent>>(); |
| 25 | + const isUpdate = ref(false); | |
| 25 | 26 | |
| 26 | 27 | const [register, { closeModal, setModalProps }] = useModalInner(async (data) => { |
| 27 | 28 | setModalProps({ confirmLoading: true }); |
| 28 | - console.log(data); | |
| 29 | + isUpdate.value = data.isUpdate; | |
| 29 | 30 | setModalProps({ confirmLoading: false }); |
| 31 | + // const jsCode = TslConRef?.value.aceEditor.getValue(); | |
| 32 | + // TslConRef?.value.aceEditor.setValue(jsCode); | |
| 30 | 33 | }); |
| 31 | 34 | const handleCancel = () => { |
| 32 | 35 | TslConRef.value?.resetFormData(); | ... | ... |
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <BasicForm @register="register"> | |
| 4 | + <template #outputParamSlot> | |
| 5 | + <div> | |
| 6 | + <template v-for="(item, index) in outputParamData" :key="item"> | |
| 7 | + <span style="display: none">{{ item }}</span> | |
| 8 | + <InputParamItem | |
| 9 | + :title="item.configName" | |
| 10 | + :item="item" | |
| 11 | + class="mt-4" | |
| 12 | + :index="index" | |
| 13 | + :ref="dynamicBindRef.outputParamItemRef" | |
| 14 | + @delete="deleteOutParItem" | |
| 15 | + @edit="editOutParItem" | |
| 16 | + /> | |
| 17 | + </template> | |
| 18 | + <div style="display: flex" class="mt-2"> | |
| 19 | + <span style="color: #0170cc; cursor: pointer">+</span> | |
| 20 | + <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + </template> | |
| 24 | + </BasicForm> | |
| 25 | + <AddParamsModal @register="registerModal" @data="getData" /> | |
| 26 | + </div> | |
| 27 | +</template> | |
| 28 | +<script lang="ts" setup> | |
| 29 | + import { ref, unref } from 'vue'; | |
| 30 | + import { BasicForm, useForm } from '/@/components/Form'; | |
| 31 | + import { eventSchemas } from './config'; | |
| 32 | + import { useModal } from '/@/components/Modal'; | |
| 33 | + import InputParamItem from './components/InputParamItem.vue'; | |
| 34 | + import AddParamsModal from './components/AddParamsModal.vue'; | |
| 35 | + | |
| 36 | + const outputParamData: any = ref([]); | |
| 37 | + const dynamicBindRef = { | |
| 38 | + outputParamItemRef: ref([]), | |
| 39 | + }; | |
| 40 | + const [registerModal, { openModal }] = useModal(); | |
| 41 | + const [register, { validate, setFieldsValue, resetFields }] = useForm({ | |
| 42 | + labelWidth: 100, | |
| 43 | + schemas: eventSchemas, | |
| 44 | + actionColOptions: { | |
| 45 | + span: 14, | |
| 46 | + }, | |
| 47 | + showResetButton: false, | |
| 48 | + submitOnReset: false, | |
| 49 | + showActionButtonGroup: false, | |
| 50 | + }); | |
| 51 | + const getData = (d, f) => { | |
| 52 | + if (f == 'output') { | |
| 53 | + unref(outputParamData).push(d); | |
| 54 | + if (d.id !== null) { | |
| 55 | + const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id); | |
| 56 | + if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1); | |
| 57 | + } | |
| 58 | + } | |
| 59 | + }; | |
| 60 | + const handleAddOutParam = () => { | |
| 61 | + openModal(true, { | |
| 62 | + isUpdate: true, | |
| 63 | + flag: 'output', | |
| 64 | + }); | |
| 65 | + }; | |
| 66 | + const deleteOutParItem = (index) => { | |
| 67 | + unref(outputParamData).splice(index, 1); | |
| 68 | + }; | |
| 69 | + const editOutParItem = (item) => { | |
| 70 | + openModal(true, { | |
| 71 | + isUpdate: false, | |
| 72 | + record: item, | |
| 73 | + flag: 'output', | |
| 74 | + }); | |
| 75 | + }; | |
| 76 | + //回显数据 | |
| 77 | + const setFormData = (v) => { | |
| 78 | + setFieldsValue(v); | |
| 79 | + }; | |
| 80 | + //获取数据 | |
| 81 | + async function getFormData() { | |
| 82 | + const values = await validate(); | |
| 83 | + if (!values) return; | |
| 84 | + return values; | |
| 85 | + } | |
| 86 | + //清空数据 | |
| 87 | + const resetFormData = () => { | |
| 88 | + resetFields(); | |
| 89 | + }; | |
| 90 | + | |
| 91 | + defineExpose({ | |
| 92 | + setFormData, | |
| 93 | + resetFormData, | |
| 94 | + getFormData, | |
| 95 | + }); | |
| 96 | +</script> | |
| 97 | +<style lang="less" scoped></style> | ... | ... |
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <BasicForm @register="register"> | |
| 4 | + <template #inputParamSlot> | |
| 5 | + <div> | |
| 6 | + <template v-for="(item, index) in inputParamData" :key="item"> | |
| 7 | + <span style="display: none">{{ item }}</span> | |
| 8 | + <InputParamItem | |
| 9 | + :title="item.name" | |
| 10 | + :item="item" | |
| 11 | + class="mt-4" | |
| 12 | + :index="index" | |
| 13 | + :ref="dynamicBindRef.inputParamItemRef" | |
| 14 | + @delete="deleteInParItem" | |
| 15 | + @edit="editInParItem" | |
| 16 | + /> | |
| 17 | + </template> | |
| 18 | + <div style="display: flex" class="mt-2"> | |
| 19 | + <span style="color: #0170cc; cursor: pointer">+</span> | |
| 20 | + <span style="color: #0170cc; cursor: pointer" @click="handleAddInParam">增加参数</span> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + </template> | |
| 24 | + <template #outputParamSlot> | |
| 25 | + <div> | |
| 26 | + <template v-for="(item, index) in outputParamData" :key="item"> | |
| 27 | + <span style="display: none">{{ item }}</span> | |
| 28 | + <InputParamItem | |
| 29 | + :title="item.name" | |
| 30 | + :item="item" | |
| 31 | + class="mt-4" | |
| 32 | + :index="index" | |
| 33 | + :ref="dynamicBindRef.outputParamItemRef" | |
| 34 | + @delete="deleteOutParItem" | |
| 35 | + @edit="editOutParItem" | |
| 36 | + /> | |
| 37 | + </template> | |
| 38 | + <div style="display: flex" class="mt-2"> | |
| 39 | + <span style="color: #0170cc; cursor: pointer">+</span> | |
| 40 | + <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | + </template> | |
| 44 | + </BasicForm> | |
| 45 | + <AddParamsModal @register="registerModal" @data="getData" /> | |
| 46 | + </div> | |
| 47 | +</template> | |
| 48 | +<script lang="ts" setup> | |
| 49 | + import { ref, unref } from 'vue'; | |
| 50 | + import { BasicForm, useForm } from '/@/components/Form'; | |
| 51 | + import { serviceSchemas } from './config'; | |
| 52 | + import { useModal } from '/@/components/Modal'; | |
| 53 | + import InputParamItem from './components/InputParamItem.vue'; | |
| 54 | + import AddParamsModal from './components/AddParamsModal.vue'; | |
| 55 | + | |
| 56 | + const inputParamData: any = ref([]); | |
| 57 | + const outputParamData: any = ref([]); | |
| 58 | + const dynamicBindRef = { | |
| 59 | + inputParamItemRef: ref([]), | |
| 60 | + outputParamItemRef: ref([]), | |
| 61 | + }; | |
| 62 | + const [registerModal, { openModal }] = useModal(); | |
| 63 | + | |
| 64 | + const [register, { validate, setFieldsValue, resetFields }] = useForm({ | |
| 65 | + labelWidth: 100, | |
| 66 | + schemas: serviceSchemas, | |
| 67 | + actionColOptions: { | |
| 68 | + span: 14, | |
| 69 | + }, | |
| 70 | + showResetButton: false, | |
| 71 | + submitOnReset: false, | |
| 72 | + showActionButtonGroup: false, | |
| 73 | + }); | |
| 74 | + | |
| 75 | + const getData = (d, f) => { | |
| 76 | + if (f == 'input') { | |
| 77 | + unref(inputParamData).push(d); | |
| 78 | + if (d.id !== null) { | |
| 79 | + const findIndex = unref(inputParamData).findIndex((f) => f.id !== d.id); | |
| 80 | + if (findIndex !== -1) unref(inputParamData).splice(findIndex, 1); | |
| 81 | + } | |
| 82 | + } else { | |
| 83 | + unref(outputParamData).push(d); | |
| 84 | + if (d.id !== null) { | |
| 85 | + const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id); | |
| 86 | + if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1); | |
| 87 | + } | |
| 88 | + } | |
| 89 | + }; | |
| 90 | + | |
| 91 | + const handleAddInParam = () => { | |
| 92 | + openModal(true, { | |
| 93 | + isUpdate: true, | |
| 94 | + flag: 'input', | |
| 95 | + }); | |
| 96 | + }; | |
| 97 | + const handleAddOutParam = () => { | |
| 98 | + openModal(true, { | |
| 99 | + isUpdate: true, | |
| 100 | + flag: 'output', | |
| 101 | + }); | |
| 102 | + }; | |
| 103 | + | |
| 104 | + const deleteInParItem = (index) => { | |
| 105 | + unref(inputParamData).splice(index, 1); | |
| 106 | + }; | |
| 107 | + const editInParItem = (item) => { | |
| 108 | + openModal(true, { | |
| 109 | + isUpdate: false, | |
| 110 | + record: item, | |
| 111 | + flag: 'input', | |
| 112 | + }); | |
| 113 | + }; | |
| 114 | + const deleteOutParItem = (index) => { | |
| 115 | + unref(outputParamData).splice(index, 1); | |
| 116 | + }; | |
| 117 | + const editOutParItem = (item) => { | |
| 118 | + openModal(true, { | |
| 119 | + isUpdate: false, | |
| 120 | + record: item, | |
| 121 | + flag: 'output', | |
| 122 | + }); | |
| 123 | + }; | |
| 124 | + | |
| 125 | + //回显数据 | |
| 126 | + const setFormData = (v) => { | |
| 127 | + setFieldsValue(v); | |
| 128 | + }; | |
| 129 | + //获取数据 | |
| 130 | + async function getFormData() { | |
| 131 | + const values = await validate(); | |
| 132 | + if (!values) return; | |
| 133 | + return values; | |
| 134 | + } | |
| 135 | + //清空数据 | |
| 136 | + const resetFormData = () => { | |
| 137 | + resetFields(); | |
| 138 | + }; | |
| 139 | + | |
| 140 | + defineExpose({ | |
| 141 | + setFormData, | |
| 142 | + resetFormData, | |
| 143 | + getFormData, | |
| 144 | + }); | |
| 145 | +</script> | |
| 146 | +<style lang="less" scoped></style> | ... | ... |
| 1 | +{ | |
| 2 | + "_ppk": {}, | |
| 3 | + "events": [], | |
| 4 | + "productKey": "hsrnBYoBGFe", | |
| 5 | + "properties": [], | |
| 6 | + "services": [ | |
| 7 | + { | |
| 8 | + "callType": "ASYNC", | |
| 9 | + "createTs": 1666172133097, | |
| 10 | + "custom": true, | |
| 11 | + "identifier": "1", | |
| 12 | + "inputParams": [ | |
| 13 | + { | |
| 14 | + "custom": true, | |
| 15 | + "dataSpecs": { | |
| 16 | + "dataType": "INT", | |
| 17 | + "max": "2", | |
| 18 | + "min": "1", | |
| 19 | + "step": "1", | |
| 20 | + "unit": "W/㎡", | |
| 21 | + "unitName": "太阳总辐射" | |
| 22 | + }, | |
| 23 | + "dataType": "INT", | |
| 24 | + "direction": "PARAM_INPUT", | |
| 25 | + "identifier": "1", | |
| 26 | + "name": "1", | |
| 27 | + "paraOrder": 0 | |
| 28 | + } | |
| 29 | + ], | |
| 30 | + "outputParams": [], | |
| 31 | + "productKey": "hsrnBYoBGFe", | |
| 32 | + "required": false, | |
| 33 | + "serviceName": "1" | |
| 34 | + }, | |
| 35 | + { | |
| 36 | + "callType": "ASYNC", | |
| 37 | + "createTs": 1666172369588, | |
| 38 | + "custom": true, | |
| 39 | + "identifier": "wufu1", | |
| 40 | + "inputParams": [ | |
| 41 | + { | |
| 42 | + "custom": true, | |
| 43 | + "dataSpecs": { | |
| 44 | + "dataType": "INT", | |
| 45 | + "max": "200", | |
| 46 | + "min": "100", | |
| 47 | + "step": "11", | |
| 48 | + "unit": "dS/m", | |
| 49 | + "unitName": "土壤EC值" | |
| 50 | + }, | |
| 51 | + "dataType": "INT", | |
| 52 | + "direction": "PARAM_INPUT", | |
| 53 | + "identifier": "ceshi", | |
| 54 | + "name": "ceshi1", | |
| 55 | + "paraOrder": 0 | |
| 56 | + } | |
| 57 | + ], | |
| 58 | + "outputParams": [], | |
| 59 | + "productKey": "hsrnBYoBGFe", | |
| 60 | + "required": false, | |
| 61 | + "serviceName": "服务1" | |
| 62 | + } | |
| 63 | + ] | |
| 64 | +} | ... | ... |
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <BasicForm @register="registerForm"> | |
| 4 | + <template #valueRangeSlot> | |
| 5 | + <div style="display: flex"> | |
| 6 | + <a-input v-model:vlaue="minMaxObj.min" placeholder="最小值" /> | |
| 7 | + <span>~</span> | |
| 8 | + <a-input v-model:vlaue="minMaxObj.max" placeholder="最大值" /> | |
| 9 | + </div> | |
| 10 | + </template> | |
| 11 | + <template #structSlot> | |
| 12 | + <div> | |
| 13 | + <template v-for="(item, index) in outputParamData" :key="item"> | |
| 14 | + <span style="display: none">{{ item }}</span> | |
| 15 | + <InputParamItem | |
| 16 | + :title="item.name" | |
| 17 | + :item="item" | |
| 18 | + class="mt-4" | |
| 19 | + :index="index" | |
| 20 | + :ref="dynamicBindRef.outputParamItemRef" | |
| 21 | + @delete="deleteOutParItem" | |
| 22 | + @edit="editOutParItem" | |
| 23 | + /> | |
| 24 | + </template> | |
| 25 | + <div style="display: flex" class="mt-2"> | |
| 26 | + <span style="color: #0170cc; cursor: pointer">+</span> | |
| 27 | + <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span> | |
| 28 | + </div> | |
| 29 | + </div> | |
| 30 | + </template> | |
| 31 | + </BasicForm> | |
| 32 | + <AddParamsModal @register="registerModal" @data="getData" /> | |
| 33 | + </div> | |
| 34 | +</template> | |
| 35 | +<script lang="ts" setup> | |
| 36 | + import { reactive, ref, unref } from 'vue'; | |
| 37 | + import { BasicForm, useForm } from '/@/components/Form'; | |
| 38 | + import { addParamsSchemas } from '../config'; | |
| 39 | + import { useModal } from '/@/components/Modal'; | |
| 40 | + import InputParamItem from './InputParamItem.vue'; | |
| 41 | + import AddParamsModal from './AddParamsModal.vue'; | |
| 42 | + | |
| 43 | + defineEmits(['register']); | |
| 44 | + const outputParamData: any = ref([]); | |
| 45 | + const dynamicBindRef = { | |
| 46 | + outputParamItemRef: ref([]), | |
| 47 | + }; | |
| 48 | + const minMaxObj = reactive({ | |
| 49 | + min: '', | |
| 50 | + max: '', | |
| 51 | + }); | |
| 52 | + const [registerModal, { openModal }] = useModal(); | |
| 53 | + | |
| 54 | + const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ | |
| 55 | + labelWidth: 100, | |
| 56 | + schemas: addParamsSchemas, | |
| 57 | + actionColOptions: { | |
| 58 | + span: 14, | |
| 59 | + }, | |
| 60 | + showResetButton: false, | |
| 61 | + submitOnReset: false, | |
| 62 | + showActionButtonGroup: false, | |
| 63 | + }); | |
| 64 | + | |
| 65 | + const getData = (d, f) => { | |
| 66 | + if (f == 'output') { | |
| 67 | + unref(outputParamData).push(d); | |
| 68 | + if (d.id !== null) { | |
| 69 | + const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id); | |
| 70 | + if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1); | |
| 71 | + } | |
| 72 | + } | |
| 73 | + }; | |
| 74 | + | |
| 75 | + const handleAddOutParam = () => { | |
| 76 | + openModal(true, { | |
| 77 | + isUpdate: true, | |
| 78 | + flag: 'output', | |
| 79 | + }); | |
| 80 | + }; | |
| 81 | + | |
| 82 | + const deleteOutParItem = (index) => { | |
| 83 | + unref(outputParamData).splice(index, 1); | |
| 84 | + }; | |
| 85 | + const editOutParItem = (item) => { | |
| 86 | + openModal(true, { | |
| 87 | + isUpdate: false, | |
| 88 | + record: item, | |
| 89 | + flag: 'output', | |
| 90 | + }); | |
| 91 | + }; | |
| 92 | + | |
| 93 | + const getFormData = async () => { | |
| 94 | + const value = await validate(); | |
| 95 | + if (!value) return; | |
| 96 | + return value; | |
| 97 | + }; | |
| 98 | + const setFormData = (v) => { | |
| 99 | + setFieldsValue(v); | |
| 100 | + }; | |
| 101 | + const resetFormData = () => { | |
| 102 | + resetFields(); | |
| 103 | + minMaxObj.min = ''; | |
| 104 | + minMaxObj.max = ''; | |
| 105 | + }; | |
| 106 | + | |
| 107 | + defineExpose({ | |
| 108 | + setFormData, | |
| 109 | + getFormData, | |
| 110 | + resetFormData, | |
| 111 | + }); | |
| 112 | +</script> | |
| 113 | + | |
| 114 | +<style lang="less" scope></style> | ... | ... |
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <BasicModal | |
| 4 | + :title="getTitle" | |
| 5 | + :maskClosable="false" | |
| 6 | + v-bind="$attrs" | |
| 7 | + width="45rem" | |
| 8 | + @register="register" | |
| 9 | + @ok="handleSubmit" | |
| 10 | + @cancel="handleCancel" | |
| 11 | + > | |
| 12 | + <AddParamForm ref="AddParamFormRef" /> | |
| 13 | + </BasicModal> | |
| 14 | + </div> | |
| 15 | +</template> | |
| 16 | +<script lang="ts" setup> | |
| 17 | + import { ref, computed, reactive } from 'vue'; | |
| 18 | + import { BasicModal, useModalInner } from '/@/components/Modal'; | |
| 19 | + import AddParamForm from './AddParamForm.vue'; | |
| 20 | + | |
| 21 | + const emits = defineEmits(['register', 'data']); | |
| 22 | + const setEditData: any = reactive({ | |
| 23 | + getEditData: {}, | |
| 24 | + }); | |
| 25 | + const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>(); | |
| 26 | + const isUpdate = ref(false); | |
| 27 | + const isFlag = ref(''); | |
| 28 | + const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数')); | |
| 29 | + | |
| 30 | + const [register, { closeModal, setModalProps }] = useModalInner(async (data) => { | |
| 31 | + setModalProps({ loading: true }); | |
| 32 | + handleCancel(false); | |
| 33 | + isUpdate.value = data.isUpdate; | |
| 34 | + isFlag.value = data.flag; | |
| 35 | + AddParamFormRef.value?.setFormData(data.record); | |
| 36 | + setEditData.getEditData = data.record; | |
| 37 | + setModalProps({ loading: false }); | |
| 38 | + }); | |
| 39 | + | |
| 40 | + const handleCancel = (flag) => { | |
| 41 | + AddParamFormRef.value?.resetFormData(); | |
| 42 | + if (flag) { | |
| 43 | + closeModal(); | |
| 44 | + } | |
| 45 | + }; | |
| 46 | + const handleSubmit = async () => { | |
| 47 | + const value = await AddParamFormRef.value?.getFormData(); | |
| 48 | + if (!value) return; | |
| 49 | + emits( | |
| 50 | + 'data', | |
| 51 | + { | |
| 52 | + ...value, | |
| 53 | + ...{ id: !isUpdate.value ? setEditData.getEditData.id : null }, | |
| 54 | + ...{ index: !isUpdate.value ? setEditData.getEditData.index : null }, | |
| 55 | + }, | |
| 56 | + isFlag.value | |
| 57 | + ); | |
| 58 | + handleCancel(true); | |
| 59 | + }; | |
| 60 | + defineExpose({}); | |
| 61 | +</script> | |
| 62 | + | |
| 63 | +<style lang="less" scope></style> | ... | ... |
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <a-card :title="`参数名称:${title}`" style="width: 540px; margin-top: -5px"> | |
| 4 | + <template #extra> | |
| 5 | + <div style="display: flex; align-items: center"> | |
| 6 | + <span style="color: #0170cc; cursor: pointer" @click="handleEdit(item, index)">编辑</span> | |
| 7 | + <a-divider type="vertical" style="height: 12px; background-color: #d8d8d8" /> | |
| 8 | + <span style="color: #0170cc; cursor: pointer" class="ml-1" @click="handleDelete(index)" | |
| 9 | + >删除</span | |
| 10 | + > | |
| 11 | + </div> | |
| 12 | + </template> | |
| 13 | + </a-card> | |
| 14 | + </div> | |
| 15 | +</template> | |
| 16 | +<script lang="ts" setup> | |
| 17 | + import { buildUUID } from '/@/utils/uuid'; | |
| 18 | + | |
| 19 | + const emit = defineEmits(['delete', 'edit']); | |
| 20 | + defineProps({ | |
| 21 | + index: { | |
| 22 | + type: Number, | |
| 23 | + required: true, | |
| 24 | + }, | |
| 25 | + title: { | |
| 26 | + type: String, | |
| 27 | + default: '', | |
| 28 | + }, | |
| 29 | + item: { | |
| 30 | + type: Object, | |
| 31 | + required: true, | |
| 32 | + default: () => {}, | |
| 33 | + }, | |
| 34 | + }); | |
| 35 | + const handleDelete = (index) => { | |
| 36 | + emit('delete', index); | |
| 37 | + }; | |
| 38 | + const handleEdit = (item, index) => { | |
| 39 | + const value = { | |
| 40 | + ...item, | |
| 41 | + ...{ id: buildUUID() }, | |
| 42 | + ...{ index }, | |
| 43 | + }; | |
| 44 | + emit('edit', value); | |
| 45 | + }; | |
| 46 | +</script> | |
| 47 | +<style lang="less" scoped> | |
| 48 | + :deep(.ant-card-body) { | |
| 49 | + display: none !important; | |
| 50 | + } | |
| 51 | +</style> | ... | ... |
| ... | ... | @@ -52,13 +52,14 @@ export const attrSchemas: FormSchema[] = [ |
| 52 | 52 | }, |
| 53 | 53 | }, |
| 54 | 54 | { |
| 55 | - field: 'platformType', | |
| 55 | + field: 'dataType', | |
| 56 | 56 | label: '数据类型', |
| 57 | 57 | required: true, |
| 58 | 58 | component: 'ApiSelect', |
| 59 | 59 | colProps: { |
| 60 | 60 | span: 9, |
| 61 | 61 | }, |
| 62 | + defaultValue: 'int32', | |
| 62 | 63 | componentProps: { |
| 63 | 64 | placeholder: '请选择数据类型', |
| 64 | 65 | api: findDictItemByCode, |
| ... | ... | @@ -72,7 +73,6 @@ export const attrSchemas: FormSchema[] = [ |
| 72 | 73 | { |
| 73 | 74 | field: 'accessKeyId', |
| 74 | 75 | label: '单位', |
| 75 | - required: true, | |
| 76 | 76 | component: 'ApiSelect', |
| 77 | 77 | colProps: { |
| 78 | 78 | span: 9, |
| ... | ... | @@ -86,6 +86,45 @@ export const attrSchemas: FormSchema[] = [ |
| 86 | 86 | labelField: 'itemText', |
| 87 | 87 | valueField: 'itemValue', |
| 88 | 88 | }, |
| 89 | + ifShow: ({ values }) => isNumber(values.dataType), | |
| 90 | + }, | |
| 91 | + { | |
| 92 | + field: 'field1', | |
| 93 | + component: 'Input', | |
| 94 | + required: true, | |
| 95 | + label: '0 -', | |
| 96 | + colProps: { | |
| 97 | + span: 18, | |
| 98 | + }, | |
| 99 | + componentProps: { | |
| 100 | + placeholder: '如:关', | |
| 101 | + }, | |
| 102 | + ifShow: ({ values }) => isBool(values.dataType), | |
| 103 | + }, | |
| 104 | + { | |
| 105 | + field: 'field11', | |
| 106 | + component: 'Input', | |
| 107 | + required: true, | |
| 108 | + label: '1 -', | |
| 109 | + colProps: { | |
| 110 | + span: 18, | |
| 111 | + }, | |
| 112 | + componentProps: { | |
| 113 | + placeholder: '如:开', | |
| 114 | + }, | |
| 115 | + ifShow: ({ values }) => isBool(values.dataType), | |
| 116 | + }, | |
| 117 | + { | |
| 118 | + field: 'field2', | |
| 119 | + component: 'Input', | |
| 120 | + required: true, | |
| 121 | + label: '数据长度', | |
| 122 | + defaultValue: '10240', | |
| 123 | + colProps: { | |
| 124 | + span: 18, | |
| 125 | + }, | |
| 126 | + suffix: '字节', | |
| 127 | + ifShow: ({ values }) => isString(values.dataType), | |
| 89 | 128 | }, |
| 90 | 129 | { |
| 91 | 130 | field: 'brand', |
| ... | ... | @@ -117,3 +156,303 @@ export const attrSchemas: FormSchema[] = [ |
| 117 | 156 | }, |
| 118 | 157 | }, |
| 119 | 158 | ]; |
| 159 | + | |
| 160 | +export const serviceSchemas: FormSchema[] = [ | |
| 161 | + { | |
| 162 | + field: 'serviceName', | |
| 163 | + label: '功能名称', | |
| 164 | + required: true, | |
| 165 | + component: 'Input', | |
| 166 | + colProps: { | |
| 167 | + span: 18, | |
| 168 | + }, | |
| 169 | + componentProps: { | |
| 170 | + maxLength: 255, | |
| 171 | + placeholder: '请输入功能名称', | |
| 172 | + }, | |
| 173 | + }, | |
| 174 | + { | |
| 175 | + field: 'identifier', | |
| 176 | + label: '标识符', | |
| 177 | + required: true, | |
| 178 | + component: 'Input', | |
| 179 | + colProps: { | |
| 180 | + span: 18, | |
| 181 | + }, | |
| 182 | + componentProps: { | |
| 183 | + maxLength: 255, | |
| 184 | + placeholder: '请输入标识符', | |
| 185 | + }, | |
| 186 | + }, | |
| 187 | + { | |
| 188 | + field: 'callType', | |
| 189 | + component: 'ApiRadioGroup', | |
| 190 | + label: '调用方式', | |
| 191 | + required: true, | |
| 192 | + colProps: { | |
| 193 | + span: 24, | |
| 194 | + }, | |
| 195 | + defaultValue: 'asynchronous', | |
| 196 | + componentProps: { | |
| 197 | + placeholder: '请选择调用方式', | |
| 198 | + api: findDictItemByCode, | |
| 199 | + params: { | |
| 200 | + dictCode: 'call_mode', | |
| 201 | + }, | |
| 202 | + labelField: 'itemText', | |
| 203 | + valueField: 'itemValue', | |
| 204 | + }, | |
| 205 | + }, | |
| 206 | + { | |
| 207 | + field: 'inputParam', | |
| 208 | + label: '输入参数', | |
| 209 | + component: 'Input', | |
| 210 | + slot: 'inputParamSlot', | |
| 211 | + colProps: { span: 24 }, | |
| 212 | + }, | |
| 213 | + { | |
| 214 | + field: 'outputParam', | |
| 215 | + label: '输出参数', | |
| 216 | + component: 'Input', | |
| 217 | + slot: 'outputParamSlot', | |
| 218 | + colProps: { span: 24 }, | |
| 219 | + }, | |
| 220 | + { | |
| 221 | + label: '描述', | |
| 222 | + field: 'description', | |
| 223 | + component: 'InputTextArea', | |
| 224 | + componentProps: { | |
| 225 | + rows: 6, | |
| 226 | + maxLength: 255, | |
| 227 | + placeholder: '请输入描述', | |
| 228 | + }, | |
| 229 | + }, | |
| 230 | +]; | |
| 231 | + | |
| 232 | +export const eventSchemas: FormSchema[] = [ | |
| 233 | + { | |
| 234 | + field: 'configName', | |
| 235 | + label: '功能名称', | |
| 236 | + required: true, | |
| 237 | + component: 'Input', | |
| 238 | + colProps: { | |
| 239 | + span: 18, | |
| 240 | + }, | |
| 241 | + componentProps: { | |
| 242 | + maxLength: 255, | |
| 243 | + placeholder: '请输入功能名称', | |
| 244 | + }, | |
| 245 | + }, | |
| 246 | + { | |
| 247 | + field: 'configName1', | |
| 248 | + label: '标识符', | |
| 249 | + required: true, | |
| 250 | + component: 'Input', | |
| 251 | + colProps: { | |
| 252 | + span: 18, | |
| 253 | + }, | |
| 254 | + componentProps: { | |
| 255 | + maxLength: 255, | |
| 256 | + placeholder: '请输入标识符', | |
| 257 | + }, | |
| 258 | + }, | |
| 259 | + { | |
| 260 | + field: 'brand', | |
| 261 | + component: 'ApiRadioGroup', | |
| 262 | + label: '事件类型', | |
| 263 | + required: true, | |
| 264 | + colProps: { | |
| 265 | + span: 24, | |
| 266 | + }, | |
| 267 | + defaultValue: 'message', | |
| 268 | + componentProps: { | |
| 269 | + placeholder: '请选择事件类型', | |
| 270 | + api: findDictItemByCode, | |
| 271 | + params: { | |
| 272 | + dictCode: 'event_type', | |
| 273 | + }, | |
| 274 | + labelField: 'itemText', | |
| 275 | + valueField: 'itemValue', | |
| 276 | + }, | |
| 277 | + }, | |
| 278 | + { | |
| 279 | + field: 'outputParam', | |
| 280 | + label: '输出参数', | |
| 281 | + component: 'Input', | |
| 282 | + slot: 'outputParamSlot', | |
| 283 | + colProps: { span: 24 }, | |
| 284 | + }, | |
| 285 | + { | |
| 286 | + label: '描述', | |
| 287 | + field: 'description', | |
| 288 | + component: 'InputTextArea', | |
| 289 | + componentProps: { | |
| 290 | + rows: 6, | |
| 291 | + maxLength: 255, | |
| 292 | + placeholder: '请输入描述', | |
| 293 | + }, | |
| 294 | + }, | |
| 295 | +]; | |
| 296 | + | |
| 297 | +/** | |
| 298 | + * 新增参数 动态显示表单 | |
| 299 | + */ | |
| 300 | +enum DateTypeEnum { | |
| 301 | + IS_NUMBER_INT = 'int32', | |
| 302 | + IS_NUMBER_DOUBLE = 'double', | |
| 303 | + IS_STRING = 'text', | |
| 304 | + IS_STRUCT = 'struct', | |
| 305 | + IS_BOOL = 'bool', | |
| 306 | +} | |
| 307 | +const isNumber = (type: string) => { | |
| 308 | + return type === DateTypeEnum.IS_NUMBER_INT || type === DateTypeEnum.IS_NUMBER_DOUBLE; | |
| 309 | +}; | |
| 310 | + | |
| 311 | +const isString = (type: string) => { | |
| 312 | + return type === DateTypeEnum.IS_STRING; | |
| 313 | +}; | |
| 314 | +const isStruct = (type: string) => { | |
| 315 | + return type === DateTypeEnum.IS_STRUCT; | |
| 316 | +}; | |
| 317 | + | |
| 318 | +const isBool = (type: string) => { | |
| 319 | + return type === DateTypeEnum.IS_BOOL; | |
| 320 | +}; | |
| 321 | + | |
| 322 | +export const addParamsSchemas: FormSchema[] = [ | |
| 323 | + { | |
| 324 | + field: 'name', | |
| 325 | + label: '参数名称', | |
| 326 | + required: true, | |
| 327 | + component: 'Input', | |
| 328 | + colProps: { | |
| 329 | + span: 23, | |
| 330 | + }, | |
| 331 | + componentProps: { | |
| 332 | + maxLength: 255, | |
| 333 | + placeholder: '请输入参数名称', | |
| 334 | + }, | |
| 335 | + }, | |
| 336 | + { | |
| 337 | + field: 'identifier', | |
| 338 | + label: '标识符', | |
| 339 | + required: true, | |
| 340 | + component: 'Input', | |
| 341 | + colProps: { | |
| 342 | + span: 23, | |
| 343 | + }, | |
| 344 | + componentProps: { | |
| 345 | + maxLength: 255, | |
| 346 | + placeholder: '请输入标识符', | |
| 347 | + }, | |
| 348 | + }, | |
| 349 | + { | |
| 350 | + field: 'dataType', | |
| 351 | + label: '数据类型', | |
| 352 | + required: true, | |
| 353 | + component: 'ApiSelect', | |
| 354 | + colProps: { | |
| 355 | + span: 23, | |
| 356 | + }, | |
| 357 | + defaultValue: 'int32', | |
| 358 | + componentProps: { | |
| 359 | + placeholder: '请选择数据类型', | |
| 360 | + api: findDictItemByCode, | |
| 361 | + params: { | |
| 362 | + dictCode: 'data_type', | |
| 363 | + }, | |
| 364 | + labelField: 'itemText', | |
| 365 | + valueField: 'itemValue', | |
| 366 | + }, | |
| 367 | + }, | |
| 368 | + { | |
| 369 | + field: 'configNam2112111', | |
| 370 | + label: 'JSON 对象', | |
| 371 | + required: true, | |
| 372 | + component: 'Input', | |
| 373 | + slot: 'structSlot', | |
| 374 | + colProps: { | |
| 375 | + span: 23, | |
| 376 | + }, | |
| 377 | + ifShow: ({ values }) => isStruct(values.dataType), | |
| 378 | + }, | |
| 379 | + { | |
| 380 | + field: 'field1', | |
| 381 | + component: 'Input', | |
| 382 | + required: true, | |
| 383 | + label: '0 -', | |
| 384 | + colProps: { | |
| 385 | + span: 23, | |
| 386 | + }, | |
| 387 | + componentProps: { | |
| 388 | + placeholder: '如:关', | |
| 389 | + }, | |
| 390 | + ifShow: ({ values }) => isBool(values.dataType), | |
| 391 | + }, | |
| 392 | + { | |
| 393 | + field: 'field11', | |
| 394 | + component: 'Input', | |
| 395 | + required: true, | |
| 396 | + label: '1 -', | |
| 397 | + colProps: { | |
| 398 | + span: 23, | |
| 399 | + }, | |
| 400 | + componentProps: { | |
| 401 | + placeholder: '如:开', | |
| 402 | + }, | |
| 403 | + ifShow: ({ values }) => isBool(values.dataType), | |
| 404 | + }, | |
| 405 | + { | |
| 406 | + field: 'field2', | |
| 407 | + component: 'Input', | |
| 408 | + required: true, | |
| 409 | + label: '数据长度', | |
| 410 | + defaultValue: '10240', | |
| 411 | + colProps: { | |
| 412 | + span: 24, | |
| 413 | + }, | |
| 414 | + suffix: '字节', | |
| 415 | + ifShow: ({ values }) => isString(values.dataType), | |
| 416 | + }, | |
| 417 | + { | |
| 418 | + field: 'configNam2112', | |
| 419 | + label: '取值范围', | |
| 420 | + component: 'Input', | |
| 421 | + slot: 'valueRangeSlot', | |
| 422 | + colProps: { | |
| 423 | + span: 23, | |
| 424 | + }, | |
| 425 | + ifShow: ({ values }) => isNumber(values.dataType), | |
| 426 | + }, | |
| 427 | + { | |
| 428 | + field: 'configNam22', | |
| 429 | + label: '步长', | |
| 430 | + component: 'Input', | |
| 431 | + colProps: { | |
| 432 | + span: 23, | |
| 433 | + }, | |
| 434 | + componentProps: { | |
| 435 | + maxLength: 255, | |
| 436 | + placeholder: '请输入步长', | |
| 437 | + }, | |
| 438 | + ifShow: ({ values }) => isNumber(values.dataType), | |
| 439 | + }, | |
| 440 | + { | |
| 441 | + field: 'unit', | |
| 442 | + label: '单位', | |
| 443 | + component: 'ApiSelect', | |
| 444 | + colProps: { | |
| 445 | + span: 23, | |
| 446 | + }, | |
| 447 | + componentProps: { | |
| 448 | + placeholder: '请选择单位', | |
| 449 | + api: findDictItemByCode, | |
| 450 | + params: { | |
| 451 | + dictCode: 'attribute_unit', | |
| 452 | + }, | |
| 453 | + labelField: 'itemText', | |
| 454 | + valueField: 'itemValue', | |
| 455 | + }, | |
| 456 | + ifShow: ({ values }) => isNumber(values.dataType), | |
| 457 | + }, | |
| 458 | +]; | ... | ... |