优化代码

src/components/query-components/XcQuery.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-form ref=formRef
+           :rules="rules"
+           :model="props.testJson.queryParam"
+           :inline="testJson.inline || true">
+    <el-form-item :label="value.label"
+                  :prop="value.key"
+                  @click="itemClick(value,key)"
+                  v-for="(value,key) in testJson.header">
+      <component
+          v-model="testJson.queryParam[value.key]"
+          v-bind="value.bind"
+          :remote-method="(val)=> {remoteMethod(val,value)}"
+          :style="{width: value.width + 'px' }"
+          :is="el[value.name]">
+        <template v-if="value.selectData && value.name ==='ElSelect'">
+          <el-option :label="select.label"
+                     :value="select.value"
+                     v-for="select in value.selectData"/>
+        </template>
+        <template v-if="value.text">
+          {{ value.text }}
+        </template>
+
+      </component>
+    </el-form-item>
+    <el-form-item>
+      <el-button icon="Search" type="primary" @click="submit">查询</el-button>
+      <el-button icon="RefreshLeft" @click="formReset">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import * as el from "element-plus";
+import {FormInstance, FormRules} from "element-plus";
+import {onMounted, ref} from 'vue'
+import XEUtils from 'xe-utils'
+import {componentType, headerType} from "./page-help-type";
+import {useVModel} from "@vueuse/core";
+import {watch} from "@vue/runtime-core";
+import {callAxios} from "../../components/query-components/page-help";
+
+
+const props = defineProps<{
+  testJson: componentType
+}>()
+
+const emits = defineEmits(['submit', 'itemClick'])
+
+const formRef = ref<FormInstance | null>(null)
+const paramType = new Map<string, any>()
+const rules = ref<FormRules>({})
+
+const queryParam = ref({})
+
+let tempQuerySql = ''
+
+const testJson = useVModel(props, 'testJson', emits)
+
+watch(() => testJson.value, async () => {
+  intiRules()
+}, {deep: true})
+
+function replaceTheContent(str) {
+  if (!str) return
+  let one = str[0]
+  let two = str[1]
+  let regex = /{{([\s\S]*?)}}/g;
+  let match = regex.exec(one);
+
+  function clear() {
+    tempQuerySql = tempQuerySql.replace(one, '')
+  }
+
+  if (match) {
+    let key = match[1]
+    let value = testJson.value.queryParam.value[key]
+    if (value != null) {
+      if (XEUtils.isString(value) && XEUtils.isEmpty(value)) {
+        clear()
+      } else {
+        let isString = paramType.get(key) === 'string'
+        let temp = {}
+        if (XEUtils.isArray(value)) {
+          let tempStr = ''
+          let tempLen = value.length
+          value.forEach((item, key) => {
+            tempStr += isString ? "'" + item + "'" : item
+            if (key !== tempLen - 1) {
+              tempStr += ','
+            }
+          })
+          temp[key] = tempStr
+        } else {
+          temp[key] = isString ? "'" + value + "'" : value
+        }
+        tempQuerySql = tempQuerySql.replace(one, XEUtils.template(two, temp))
+      }
+    } else {
+      clear()
+    }
+  }
+}
+
+function countIfTags(str) {
+  let regex = /<if>([\s\S]*?)<\/if>/g;
+  let match = null
+  do {
+    match = regex.exec(str);
+    if (match) {
+      replaceTheContent(match)
+    }
+  } while (match)
+}
+
+const submit = async () => {
+  await formRef.value.validate()
+  if (testJson.value.querySql) {
+    tempQuerySql = testJson.value.querySql
+    countIfTags(tempQuerySql)
+  }
+  emits('submit', testJson.value.queryParam)
+}
+
+const dataReset = () => {
+  headerFor((item, key) => {
+    testJson.value.queryParam[item.key] = item.defaultValue
+  })
+}
+
+const headerFor = (iterate: (val: headerType, key: number) => void) => {
+  for (let i = 0; i < testJson.value.header.length; i++) {
+    iterate(testJson.value.header[i], i)
+  }
+}
+
+const intiRules = () => {
+  rules.value = {}
+  headerFor((item, key) => {
+    if (item.required) {
+      rules.value[item.key] = [{required: true, message: '必填项', trigger: 'blur'}]
+    }
+  })
+}
+
+const formReset = () => {
+  formRef.value.resetFields()
+  dataReset()
+}
+
+const itemClick = (data, key) => {
+  emits('itemClick', data, key)
+}
+
+const remoteMethod = async (val, key: headerType) => {
+  let {networkRequests} = key
+  if (networkRequests && networkRequests.url) {
+    key.bind.options = await callAxios(testJson.value, key, val)
+  }
+}
+
+onMounted(() => {
+  dataReset()
+  intiRules()
+  console.log(el)
+})
+
+</script>

src/components/query-components/page-help-type.ts

@@ -0,0 +1,67 @@
+import {Arrayable} from "element-plus/es/utils";
+import {FormItemRule} from "element-plus/es/tokens/form";
+
+export interface codeName {
+    value: string | number
+    label: string
+}
+
+export interface networkRequests {
+    method: string,
+    url: string,
+    params?: {
+        queryName: string,
+        queryValue: string | number
+    }[],
+    requestInterfaced: '创智中台' | '工作集成平台' | '其他',
+    // 返回体解析
+    returnsVolumeResolutionDetail?: string
+}
+
+export interface headerType {
+    key: string,
+    // el 组件的名称
+    name: string
+    bind?: any,
+    // 在 el 的组件中文本值
+    text?: string
+    // el-from 中的 label
+    label?: string
+    col?: number
+    // 默认值
+    defaultValue?: string | number | any[]
+    // 默认下拉框
+    selectData?: codeName[],
+    keyType?: 'string' | 'number',
+    required?: boolean
+    rules?: Arrayable<FormItemRule>
+    width?: number
+    networkRequests?: networkRequests
+}
+
+export interface componentType {
+    header: headerType[]
+    querySql: string,
+    inline?: boolean
+    queryParam: any
+}
+
+
+export interface bindType {
+    label: string,
+    selectData?: any[],
+    renderName: 'input' | 'select' | 'boolean' | 'number',
+    defaultValue: any
+    func?: string
+}
+
+export interface elComponentType {
+    [key: string]: CompType
+}
+
+export interface CompType {
+    bind: {
+        [key: string]: bindType
+    }
+    networkRequests?: networkRequests
+}

src/components/query-components/page-help.ts

@@ -0,0 +1,222 @@
+import {componentType, elComponentType, headerType, networkRequests} from "./page-help-type";
+import axios from "axios";
+
+export const collapseData: {
+    title: string,
+    name: string,
+    children?: headerType[]
+}[] = [
+    {
+        title: '文本输入框',
+        name: '1',
+        children: [
+            {
+                key: '',
+                name: 'ElInput',
+                label: '文本框',
+                keyType: "string",
+                defaultValue: '',
+                required: false,
+            },
+            {
+                key: '',
+                name: 'ElInputNumber',
+                label: '数字计数器',
+                keyType: 'number',
+                defaultValue: 0,
+                required: false,
+            }
+        ]
+    }, {
+        title: '下拉框',
+        name: '2',
+        children: [
+            {
+                key: '',
+                name: 'ElSelect',
+                label: '下拉框',
+                keyType: "string",
+                defaultValue: '',
+                required: false,
+                selectData: [],
+                bind: {}
+            },
+            {
+                key: '',
+                name: 'ElSelectV2',
+                label: '虚拟化下拉框',
+                keyType: 'string',
+                defaultValue: '',
+                required: false,
+                bind: {
+                    options: [],
+                    remote: true,
+                    filterable: true,
+                },
+                networkRequests: {
+                    method: 'get',
+                    url: '/bdp/dataservice/api/f64e8d769e5149fe88ce5dbb84326235',
+                    params: [{queryName: 'query', queryValue: ''}],
+                    requestInterfaced: '创智中台',
+                    returnsVolumeResolutionDetail: 'data.rows'
+                }
+            }
+        ]
+    }
+]
+
+
+export const elComponent: elComponentType = {
+    ElInput: {
+        bind: {
+            size: {
+                label: '大小',
+                selectData: ['large', 'default', 'small'],
+                renderName: 'select',
+                defaultValue: '',
+            },
+            clearable: {
+                label: '可删',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            placeholder: {
+                label: '占位符',
+                renderName: "input",
+                defaultValue: '',
+            },
+            type: {
+                label: '类型',
+                selectData: ['text', 'textarea', 'password'],
+                renderName: 'select',
+                defaultValue: 'text',
+            }
+        },
+    },
+    ElInputNumber: {
+        bind: {
+            min: {
+                label: '最小値',
+                defaultValue: null,
+                renderName: 'number',
+            },
+            max: {
+                label: '最大値',
+                renderName: 'number',
+                defaultValue: null,
+            }
+        }
+    },
+    ElSelect: {
+        bind: {
+            clearable: {
+                label: '可删',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            multiple: {
+                label: '多选',
+                renderName: 'boolean',
+                defaultValue: false,
+                func: `if(value){
+                state('defaultValue', [])
+                }else{
+                state('defaultValue', '')
+                }`
+            },
+            filterable: {
+                label: '筛选',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            collapseTags: {
+                label: '折叠标筬',
+                renderName: 'boolean',
+                defaultValue: false,
+            }
+        }
+    },
+    ElSelectV2: {
+        bind: {
+            clearable: {
+                label: '可删',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            filterable: {
+                label: '筛选',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            collapseTags: {
+                label: '折叠标筬',
+                renderName: 'boolean',
+                defaultValue: false,
+            },
+            multiple: {
+                label: '多选',
+                renderName: 'boolean',
+                defaultValue: false,
+                func: `if(value){
+                state('defaultValue', [])
+                }else{
+                state('defaultValue', '')
+                }`
+            },
+            remote: {
+                label: '远程搜索',
+                renderName: 'boolean',
+                defaultValue: true,
+            }
+        },
+        networkRequests: {
+            method: 'get',
+            url: '',
+            requestInterfaced: '创智中台',
+        }
+    }
+}
+
+export function generateRandomString(length): string {
+    let result = '';
+    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    let charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+
+export async function callAxios(data: componentType, currentFunc: headerType, query = '') {
+    let tempData = {}
+
+    let net = currentFunc.networkRequests
+
+    net.params.forEach(item => {
+        if (item.queryValue) {
+            tempData[item.queryName] = data.queryParam[item.queryValue]
+        } else {
+            tempData[item.queryName] = query
+        }
+    })
+
+
+    let res
+    try {
+        res = await axios({
+            method: net.method,
+            url: net.url,
+            params: tempData
+        })
+    } catch {
+        return []
+    }
+
+    let a = new Function('res', 'return res.' + net.returnsVolumeResolutionDetail)
+    return a(res)
+}
+
+
+
+
+

src/router/modules/dashboard.js

@@ -822,7 +822,11 @@ const route = [
                 path: 'parseJson',
                 component: createNameComponent(() => import('@/views/utilities/ParseJson.vue')),
                 meta: {title: 'JSON格式化'},
-            },
+            }, {
+                path: 'pageEditorHelp',
+                component: createNameComponent(() => import('@/views/utilities/page-editor-help/PageEditorHelp.vue')),
+                meta: {title: '页面编辑'}
+            }
         ],
     },
 

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/EmrMain.vue

@@ -494,8 +494,6 @@ const emrEvent = {
     let walker = modelService.createTreeWalker(node);
     let values = modelService.getElementsDataFromWalker(walker, '编辑者');
     let editorCode = values['编辑者']?.value[0]?.code;
-    console.log(123)
-    // console.log(editorCode, userData.code)
     if (editorCode) {
       openTheTraceByUser(editorCode)
     }

src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/TemplateMaintenance.vue

@@ -613,12 +613,11 @@ const tianJiaYiZhu = () => {
     list: [yiZhuData.value],
   }
   singleDataCheck(data).then((res) => {
-    console.log(res)
     let temp = res.message
-    if (temp.warning) {
+    if (temp && temp.warning) {
       tiShiBiaoTi.value = temp.warning
     }
-    if (temp.error) {
+    if (temp && temp.error) {
       if (errorElNotification !== null) {
         errorElNotification.close()
       }

src/views/settings/Test.vue

@@ -1,84 +1,132 @@
 <template>
-  <el-form>
-    <el-row :gutter="2">
-      <el-col v-for="item in testJson.header" :span="item.col || 4">
-        <el-form-item :label="item.label">
-          <component
-              v-model="queryParam[item.key]"
-              v-bind="item.bind"
-              :is="el[item.name]">
-            <template v-if="item.selectData">
-              <el-option :label="select.name"
-                         :value="select.code"
-                         v-for="select in item.selectData"/>
-            </template>
-            {{ item.text }}
-          </component>
-        </el-form-item>
-      </el-col>
-      <el-col :span="3">
-        <el-button @click="执行查询">查询</el-button>
-        <el-button>重置</el-button>
-      </el-col>
-    </el-row>
-  </el-form>
+  <el-select-v2 v-model="el" :options="tset"/>
 </template>
 
 <script setup lang="ts">
-import * as el from "element-plus";
-import {onMounted, ref} from 'vue'
-import XEUtils from 'xe-utils'
+import {ref} from 'vue'
 
-interface codeName {
-  code: string | number
-  name: string
-}
-
-interface header {
-  name: string
-  bind?: any,
-  text?: string
-  key?: string
-  label?: string
-  col?: number
-  selectData?: codeName[]
-}
-
-interface componentType {
-  header: Array<header>,
-  querySql: string,
-}
-
-let testJson: componentType = {
-  header: [
-    {name: 'ElInput', label: '人员编码', bind: {style: {width: "220px"}}, key: 'code'},
-    {
-      name: 'ElSelect', label: '停用', key: 'del_flag',
-      selectData: [
-        {code: 1, name: '删除'},
-        {code: 2, name: '启用'},
-      ]
-    }
-  ],
-  querySql: "select * from a_employee_mi where 1=1 <if> and code = '{{code}}' </if> <if> and isnull(del_flag, '0') = '{{del_flag}}' </if>",
-}
-
-const queryParam = ref({})
-
-const 执行查询 = () => {
-  let regex = /<if>([\s\S]*?)<\/if>/g;
-  let match = regex.exec(testJson.querySql);
-
-  console.log(match)
-  console.log(XEUtils.template(testJson.querySql, queryParam.value));
-}
-
-onMounted(() => {
-  testJson.header.forEach(item => {
-    queryParam.value[item.key] = ''
-  })
-  console.log(queryParam.value)
-  console.log(el)
-})
+const el = ref()
+const tset = [
+  {
+    "code": "1010000",
+    "name": "综合外科",
+    "label": "综合外科",
+    "value": "1010000"
+  },
+  {
+    "code": "1010100",
+    "name": "普外科",
+    "label": "普外科",
+    "value": "1010100"
+  },
+  {
+    "code": "1010200",
+    "name": "泌尿外科",
+    "label": "泌尿外科",
+    "value": "1010200"
+  },
+  {
+    "code": "1010300",
+    "name": "骨科创伤关节",
+    "label": "骨科创伤关节",
+    "value": "1010300"
+  },
+  {
+    "code": "1010400",
+    "name": "神经外科",
+    "label": "神经外科",
+    "value": "1010400"
+  },
+  {
+    "code": "1010500",
+    "name": "心胸外科",
+    "label": "心胸外科",
+    "value": "1010500"
+  },
+  {
+    "code": "1020000",
+    "name": "综合内科",
+    "label": "综合内科",
+    "value": "1020000"
+  },
+  {
+    "code": "1020100",
+    "name": "呼吸内科",
+    "label": "呼吸内科",
+    "value": "1020100"
+  },
+  {
+    "code": "1020200",
+    "name": "消化内科",
+    "label": "消化内科",
+    "value": "1020200"
+  },
+  {
+    "code": "1020300",
+    "name": "神经内科",
+    "label": "神经内科",
+    "value": "1020300"
+  },
+  {
+    "code": "1020400",
+    "name": "心血管内科",
+    "label": "心血管内科",
+    "value": "1020400"
+  },
+  {
+    "code": "1020500",
+    "name": "肾内科",
+    "label": "肾内科",
+    "value": "1020500"
+  },
+  {
+    "code": "1020600",
+    "name": "血液内科",
+    "label": "血液内科",
+    "value": "1020600"
+  },
+  {
+    "code": "1020700",
+    "name": "内分泌与代谢疾病专科",
+    "label": "内分泌与代谢疾病专科",
+    "value": "1020700"
+  },
+  {
+    "code": "1020800",
+    "name": "老年康复科",
+    "label": "老年康复科",
+    "value": "1020800"
+  },
+  {
+    "code": "1030101",
+    "name": "妇科急诊",
+    "label": "妇科急诊",
+    "value": "1030101"
+  },
+  {
+    "code": "1030200",
+    "name": "产科",
+    "label": "产科",
+    "value": "1030200"
+  },
+  {
+    "code": "1030300",
+    "name": "产后康复中心",
+    "label": "产后康复中心",
+    "value": "1030300"
+  },
+  {
+    "code": "1040000",
+    "name": "儿科",
+    "label": "儿科",
+    "value": "1040000"
+  },
+  {
+    "code": "1050100",
+    "name": "眼科",
+    "label": "眼科",
+    "value": "1050100"
+  }
+]
 
 </script>

src/views/utilities/page-editor-help/PageEditorHelp.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import {collapseData, generateRandomString} from "../../../components/query-components/page-help.ts";
+import XcQuery from "../../../components/query-components/XcQuery.vue";
+import {componentType, headerType} from "../../../components/query-components/page-help-type";
+import PageEditotInfo from "./PageEditotInfo.vue";
+
+
+const activeNames = ref(['1', '2'])
+const infoRef = ref()
+
+const addEl = (val: headerType) => {
+  let key = generateRandomString(5)
+  let data = val
+  if (!val.bind) {
+    data['bind'] = {}
+  }
+  data.key = key
+  pageJson.value.header.push(data)
+  pageJson.value.queryParam[key] = val.defaultValue
+}
+
+const pageJson = ref<componentType>({
+  header: [],
+  querySql: "",
+  queryParam: {}
+})
+
+const theCurrentComponent = ref('')
+const itemClick = (data: headerType, index) => {
+  infoRef.value.editComp(data)
+  theCurrentComponent.value = index
+}
+
+onMounted(() => {
+  addEl(collapseData[0].children[0])
+  addEl(collapseData[0].children[1])
+  addEl(collapseData[1].children[0])
+  addEl(collapseData[1].children[1])
+})
+
+</script>
+
+<template>
+  <el-container style="background-color: white">
+    <el-aside>
+      <el-collapse v-model="activeNames">
+        <el-collapse-item :title="item.title"
+                          :name="item.name"
+                          v-for="item in collapseData">
+          <el-row :gutter="6"
+                  style="margin: 5px">
+            <el-col :span="12"
+                    @contextmenu.prevent="addEl(child)"
+                    v-for="child in item.children"
+                    class="field-widget-item">
+              {{ child.label }}
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
+    </el-aside>
+    <el-main>
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <div style="display: flex; overflow-y: auto" :style="{height: height -50 +'px'}">
+            <div style="flex: 1; box-sizing: border-box">
+              <xc-query v-model:testJson="pageJson" @item-click="itemClick"/>
+            </div>
+            <div class="right_box">
+              <page-editot-info ref="infoRef"
+                                :page-json="pageJson"
+                                v-model:data="pageJson.header[theCurrentComponent]"/>
+            </div>
+          </div>
+        </template>
+      </el-auto-resizer>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped lang="scss">
+.field-widget-item {
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e8e9eb;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.right_box {
+  width: 320px;
+  border: 1px solid #e8e9eb;
+  padding: 5px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+</style>

src/views/utilities/page-editor-help/PageEditotInfo.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import {defineExpose, ref, h} from 'vue'
+import {callAxios, elComponent} from "../../../components/query-components/page-help";
+import {useVModel} from "@vueuse/core";
+import {bindType, componentType, CompType, headerType} from "../../../components/query-components/page-help-type";
+import XEUtils from "xe-utils";
+import {ElInput, ElOption, ElSelect, ElSwitch} from 'element-plus'
+import * as el from 'element-plus'
+
+const props = defineProps<{
+  data: headerType,
+  pageJson: componentType
+}>()
+
+const emits = defineEmits(['update:data'])
+const dataVal = useVModel(props, 'data', emits)
+
+const comp = ref<CompType>({bind: null})
+const show = ref(false)
+
+const editComp = (data: headerType) => {
+  comp.value = elComponent[data.name]
+  if (typeof comp.value === 'undefined') {
+    comp.value = {bind: null}
+  }
+  show.value = true
+}
+
+
+const selectRender = (data: bindType, key) => {
+  let optionList = [];
+  data.selectData?.forEach(item => {
+    let hTemp = h(ElOption,
+        {
+          label: item,
+          value: item
+        },
+        null)
+    optionList.push(hTemp)
+  })
+  return h(ElSelect,
+      {
+        modelValue: dataVal.value['bind'][key],
+        "onUpdate:modelValue": (val) => {
+          dataVal.value['bind'][key] = val
+        }
+      },
+      () => optionList)
+}
+
+let elComp = {
+  boolean: 'ElSwitch',
+  number: 'ElInputNumber',
+  input: 'ElInput'
+}
+
+const bindRendering = (data: bindType, key: any) => {
+  if (typeof dataVal.value['bind'][key] === 'undefined') {
+    if (data.defaultValue) {
+      dataVal.value['bind'][key] = data.defaultValue
+    }
+  }
+
+  if (data.renderName === 'select') {
+    return selectRender(data, key)
+  } else {
+    let temp = elComp[data.renderName]
+    if (temp) {
+      return h(
+          el[temp],
+          {
+            modelValue: dataVal.value['bind'][key],
+            "onUpdate:modelValue": (val) => {
+              dataVal.value['bind'][key] = val
+            },
+          }
+      )
+    } else {
+      return h('span', {}, '没有找到组件');
+    }
+  }
+}
+
+const isSelect = () => {
+  return dataVal.value.name === 'ElSelect'
+}
+const isSelectV2 = () => {
+  return dataVal.value['name'] === 'ElSelectV2'
+}
+
+const addSelectData = () => {
+  dataVal.value['selectData'].push({
+    value: '',
+    label: ''
+  })
+}
+
+const addNetParams = () => {
+  dataVal.value['networkRequests'].params.push({
+    queryName: '',
+    queryValue: ''
+  })
+}
+
+const interfaceDisplay = ref({
+  dialog: false,
+  data: []
+})
+
+const callTheInterface = async () => {
+  interfaceDisplay.value.dialog = true
+  interfaceDisplay.value.data = await callAxios(props.pageJson, dataVal.value)
+}
+
+const clearSelectData = () => {
+  if (dataVal.value['bind'].multiple) {
+    dataVal.value['defaultValue'] = []
+  } else {
+    dataVal.value['defaultValue'] = ''
+  }
+}
+
+const state = (path, data) => {
+  dataVal.value[path] = data
+}
+
+const test = (value, el) => {
+  if (el.func) {
+    let unboundFunc = new Function('value', 'state', el.func);
+    unboundFunc(value, state)
+  }
+}
+
+const interFaced = {
+  创智中台: () => {
+    return 'data.rows'
+  },
+  工作集成平台: () => {
+    return 'data.data'
+  },
+  其他: () => {
+    return ''
+  }
+}
+
+const changeInterFaced = (val) => {
+  dataVal.value.networkRequests.returnsVolumeResolutionDetail = interFaced[val]()
+}
+
+
+defineExpose({
+  editComp
+})
+
+</script>
+
+<template>
+
+  <el-dialog v-model="interfaceDisplay.dialog" title="接口测试">
+    <div>
+      <JsonViewer :value="interfaceDisplay.data"
+                  copyable
+                  :expandDepth="3"/>
+    </div>
+  </el-dialog>
+
+  <el-form label-width="80px">
+
+    <template v-if="show">
+      <el-divider content-position="center">
+        基本设置
+      </el-divider>
+
+      <el-form-item label="唯一名称 ">
+        <el-input v-model="dataVal.key"/>
+      </el-form-item>
+
+      <el-form-item label="前缀">
+        <el-input v-model="dataVal['label']"/>
+      </el-form-item>
+
+      <el-form-item label="默认值"
+                    v-if="!isSelect() && !isSelectV2()">
+        <el-input
+            v-model="dataVal.defaultValue"
+            v-if="XEUtils.isString(dataVal.defaultValue)"
+        />
+        <el-input-number v-model="dataVal.defaultValue"
+                         v-if="XEUtils.isNumber(dataVal.defaultValue)"/>
+
+      </el-form-item>
+
+      <el-form-item label="必填">
+        <el-switch v-model="dataVal.required"/>
+      </el-form-item>
+
+      <el-form-item label="宽度:">
+        <el-input-number v-model="dataVal.width"/>
+      </el-form-item>
+
+    </template>
+
+    <template v-if="comp.bind">
+      <el-divider content-position="center">
+        内置信息
+      </el-divider>
+
+      <template v-for="(item,key) in comp.bind">
+        <el-form-item :label="item.label + '：'">
+          <component :is="bindRendering(item,key)" @change=" (value) =>{test(value,item )}"/>
+        </el-form-item>
+      </template>
+
+      <template v-if="isSelect()">
+        <el-divider content-position="center">
+          内置信息
+        </el-divider>
+        <div style="max-height: 200px; overflow-y: auto">
+          <template v-if="dataVal.bind.multiple">
+            <el-checkbox-group v-model="dataVal.defaultValue">
+              <template v-for="selectItem in dataVal.selectData">
+                <el-checkbox :label="selectItem.value">
+                  <el-input v-model="selectItem.value" style="width: 100px"/>
+                  <el-input v-model="selectItem.label" style="width: 100px"/>
+                  <el-button icon="Minus" type="danger" style="margin-left: 5px" circle/>
+                </el-checkbox>
+              </template>
+            </el-checkbox-group>
+          </template>
+          <template v-else>
+            <el-radio-group v-model="dataVal.defaultValue">
+              <template v-for="selectItem in dataVal.selectData">
+                <el-radio :label="selectItem.value">
+                  <el-input v-model="selectItem.value" style="width: 100px"/>
+                  <el-input v-model="selectItem.label" style="width: 100px"/>
+                  <el-button icon="Minus" type="danger" style="margin-left: 5px" circle/>
+                </el-radio>
+              </template>
+            </el-radio-group>
+          </template>
+
+          <div style="  margin-top:5px">
+            <el-button text type="primary" @click="addSelectData">新增</el-button>
+            <el-button text type="primary" @click="clearSelectData">清空默认</el-button>
+          </div>
+        </div>
+
+      </template>
+
+      <template v-if="comp.networkRequests">
+        <el-divider content-position="center">
+          远程请求
+        </el-divider>
+
+        <el-form-item label="请求方式">
+          <el-select v-model="dataVal.networkRequests.method">
+            <el-option label="get" value="get"/>
+            <el-option label="post" value="post"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="请求接口">
+          <el-select v-model="dataVal.networkRequests.requestInterfaced"
+                     @change="changeInterFaced">
+            <el-option label="创智中台" value="创智中台"/>
+            <el-option label="工作集成平台" value="工作集成平台"/>
+            <el-option label="其他" value="其他"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="返回体">
+          <el-input type="textarea"
+                    :autosize="{ minRows: 4, maxRows: 10 }"
+                    v-model="dataVal.networkRequests.returnsVolumeResolutionDetail"/>
+        </el-form-item>
+
+        <el-form-item label="请求地址">
+          <el-input type="textarea"
+                    :autosize="{ minRows: 4, maxRows: 10 }"
+                    v-model="dataVal.networkRequests.url"/>
+        </el-form-item>
+
+
+        <el-form-item label="请求参数">
+          <template v-for="item in dataVal.networkRequests.params">
+            <el-input v-model="item.queryName" style="width: 100px"/>
+            <el-input v-model="item.queryValue" style="width: 100px"/>
+          </template>
+
+          <div style="  margin-top:5px">
+            <el-button text type="primary" @click="addNetParams">新增</el-button>
+            <el-button text type="primary" @click="callTheInterface">测试调用</el-button>
+          </div>
+        </el-form-item>
+
+      </template>
+    </template>
+  </el-form>
+</template>
+
+<style scoped lang="scss">
+
+</style>