低代码CodeEdit应用

Ben Lin

2024-07-23 863a544a2c50b6912f82ae36cfb04cecf1d50a42

 src/views/tigerprojects/system/lowcode/setting/pageDetail.vue

@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-05-30 22:00:44
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-07-17 11:14:27
 * @LastEditTime: 2024-07-23 15:17:45
-->
<!-- eslint-disable prettier/prettier -->
<template>
@@ -74,7 +74,8 @@
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchParamsSlots" :key="item">
          <a-input v-model:value="model[field]" />
          <!-- <a-input v-model:value="model[field]" /> -->
            <CodeEditor v-model:value="model[field]" :mode="searchModeValue" :bordered="true"/>
        </template>
        <template #[item]="{ model, field }" v-for="item in searchResultFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
@@ -86,7 +87,8 @@
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchOptionsSlots" :key="item">
          <a-input v-model:value="model[field]" />
          <!-- <a-input v-model:value="model[field]" /> -->
          <CodeEditor v-model:value="model[field]" :mode="searchModeValue" :bordered="true"/>
        </template>
        <template #[item]="{ model, field }" v-for="item in searchOnChangeSlots" :key="item">
          <a-input v-model:value="model[field]" />
@@ -155,7 +157,8 @@
            <a-switch v-model:checked="model[field]" />
          </template>
          <template #[item]="{ model, field }" v-for="item in mainIaSlots" :key="item">
            <a-input v-model:value="model[field]" />
            <!-- <a-input v-model:value="model[field]" /> -->
            <CodeEditor v-model:value="model[field]" :mode="modeValue" :bordered="true"/>
          </template>
        </BasicForm>
      </div>
@@ -233,7 +236,8 @@
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudParamsSlots" :key="item">
          <a-input v-model:value="model[field]" />
          <!-- <a-input v-model:value="model[field]" /> -->
          <CodeEditor v-model:value="model[field]" :mode="searchModeValue" :bordered="true"/>
        </template>
        <template #[item]="{ model, field }" v-for="item in crudResultFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
@@ -245,7 +249,8 @@
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudOptionsSlots" :key="item">
          <a-input v-model:value="model[field]" />
          <!-- <a-input v-model:value="model[field]" /> -->
          <CodeEditor v-model:value="model[field]" :mode="searchModeValue" :bordered="true"/>
        </template>
        <template #[item]="{ model, field }" v-for="item in crudOnChangeSlots" :key="item">
          <a-input v-model:value="model[field]" />
@@ -264,7 +269,7 @@
</template>
<script lang="ts" setup>
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { nextTick, onMounted, ref, unref } from 'vue';
  import { h, nextTick, onMounted, ref, unref } from 'vue';
  import { Card, InputGroup, Select, Input, Switch } from 'ant-design-vue';
  import { ApiSelect } from '/@/components/Form/index';
  import { useRoute, useRouter } from 'vue-router';
@@ -281,6 +286,7 @@
  import { EntityPropertie, SYS_LOW_CODE } from '/@/api/tigerapi/model/systemModel';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useUserStore } from '/@/store/modules/user';
  import { CodeEditor, MODE } from '/@/components/CodeEditor';

  const ACard = Card;
  const AInputGroup = InputGroup;
@@ -374,6 +380,7 @@
  const searchOptionsSlots = ref([] as string[]);
  const searchOnChangeSlots = ref([] as string[]);
  const searchPOptionsSlots = ref([] as string[]);
  const searchModeValue = ref<MODE>(MODE.JSON);
  /* 主表 */
  const MainEntName = ref('');
  const mainSelectVals = ref({} as { [key: string]: any });
@@ -384,6 +391,7 @@
  const mainsSwSlots = ref([] as string[]);
  const mainwSwSlots = ref([] as string[]);
  const mainIaSlots = ref([] as string[]);
  const modeValue = ref<MODE>(MODE.JAVASCRIPT);
  /* 增删改 */
  const CrudEntName = ref('');
  const crudInputs = ref({} as { [key: string]: any });
@@ -465,13 +473,17 @@
      getEntity({
        sqlcmd: "ID ='" + objParams.value.ID + "'",
        entityName: 'SYS_LOW_CODE',
        order: ''
        order: '',
      }).then((data) => {
        /* 查询加载 */
        var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON);
        SearchEntName.value = data.Data.Items[0].SEARCH_ASSY_NAME;
        setFieldsValue({ ASSEMBLY_NAME: data.Data.Items[0].SEARCH_ASSY_NAME });
        searchForms = searchForms.filter((item) => !item['field'].toString().startsWith(SearchEntName.value) && !item['field'].toString().endsWith('PSelect_0'));
        searchForms = searchForms.filter(
          (item) =>
            !item['field'].toString().startsWith(SearchEntName.value) &&
            !item['field'].toString().endsWith('PSelect_0'),
        );
        for (const i in searchForms) {
          condAdd();
            if (searchForms[i]['component'] == 'ApiSelect') {
@@ -506,7 +518,9 @@
              [`Switch${Number(i) + 1}`]: searchForms[i]['ifShow'],
            });
            objInputs.value[`${SearchEntName.value}${Number(i) + 1}a`] = searchForms[i]['label'];
            searchSelectVals.value[`${SearchEntName.value}${Number(i) + 1}a`] = searchForms[i]['comp']? searchForms[i]['comp']: searchForms[i]['component'];
          searchSelectVals.value[`${SearchEntName.value}${Number(i) + 1}a`] = searchForms[i]['comp']
            ? searchForms[i]['comp']
            : searchForms[i]['component'];
            if(searchForms[i]['comp']){
              addPopSelectOption(`${SearchEntName.value}${Number(i) + 1}a`, 'search');
              setFieldsValue({
@@ -518,7 +532,11 @@
        var crudForms = JSON.parse(data.Data.Items[0].FORM_JSON);
        CrudEntName.value = data.Data.Items[0].CRUD_ASSY_NAME;
        setFieldsValueCrud({ crudAssemblyName: data.Data.Items[0].CRUD_ASSY_NAME });
        crudForms = crudForms.filter((item) => !item['field'].toString().startsWith(CrudEntName.value) && !item['field'].toString().endsWith('PSelect_0'));
        crudForms = crudForms.filter(
          (item) =>
            !item['field'].toString().startsWith(CrudEntName.value) &&
            !item['field'].toString().endsWith('PSelect_0'),
        );
        for (const i in crudForms) {
          crudCondAdd();
            if (crudForms[i]['component'] == 'ApiSelect') {
@@ -554,7 +572,9 @@
              [`rSwitch${Number(i) + 1}`]: crudForms[i]['required'],
            });
            crudInputs.value[`${CrudEntName.value}${Number(i) + 1}a`] = crudForms[i]['label'];
            crudSelectVals.value[`${CrudEntName.value}${Number(i) + 1}a`] = crudForms[i]['comp']? crudForms[i]['comp']: crudForms[i]['component'];
          crudSelectVals.value[`${CrudEntName.value}${Number(i) + 1}a`] = crudForms[i]['comp']
            ? crudForms[i]['comp']
            : crudForms[i]['component'];
            if(crudForms[i]['comp']){
              addPopSelectOption(`${CrudEntName.value}${Number(i) + 1}a`, 'crud');
              setFieldsValueCrud({
@@ -566,7 +586,10 @@
        /* 主表加载 */
        var objs = JSON.parse(data.Data.Items[0].BASE_FORM_JSON);
        MainEntName.value = data.Data.Items[0].ASSEMBLY_NAME;
        setFieldsValueMain({ MainAssemblyName: MainEntName.value, BY_ORG:data.Data.Items[0].BY_ORG });
        setFieldsValueMain({
          MainAssemblyName: MainEntName.value,
          BY_ORG: data.Data.Items[0].BY_ORG,
        });
        for (const i in objs) {
          mainCondAdd();
          setFieldsValueMain({
@@ -973,35 +996,35 @@
        component: 'Input',
        label: `api`,
        slot: `Api${field}`,
        colProps: { span: 5 },
        colProps: { span: 6 },
      },
      {
        field: `Params${field}`,
        component: 'Input',
        label: 'params',
        slot: `Params_${field}`,
        colProps: { span: 6 },
        colProps: { span: 18 },
      },
      {
        field: `Result${field}`,
        component: 'Input',
        label: 'resultField',
        slot: `ResultField${field}`,
        colProps: { span: 5 },
        colProps: { span: 8 },
      },
      {
        field: `Label${field}`,
        component: 'Input',
        label: 'labelField',
        slot: `LabelField${field}`,
        colProps: { span: 4 },
        colProps: { span: 8 },
      },
      {
        field: `Value${field}`,
        component: 'Input',
        label: 'valueField',
        slot: `ValueField${field}`,
        colProps: { span: 4 },
        colProps: { span: 8 },
      },
    ];
    switch (type) {
@@ -1352,9 +1375,9 @@
    if (searchSlots.value.length == 0) {
      n.value = 1;
    }
    delApiSelectOption(`${CrudEntName.value}${field}a`, 'search');
    delSelectOption(`${CrudEntName.value}${field}a`, 'search');
    delPSelectOption(`${CrudEntName.value}${field}a`, 'search');
    delApiSelectOption(`${SearchEntName.value}${field}a`, 'search');
    delSelectOption(`${SearchEntName.value}${field}a`, 'search');
    delPSelectOption(`${SearchEntName.value}${field}a`, 'search');
  }

  /**
@@ -1395,14 +1418,14 @@
        },
        {
          field: `InputTextArea${m.value}`,
          component: 'InputTextArea',
          component: 'Input',
          label: '自定义渲染',
          slot: `mainwIa${m.value}`,
          colProps: { span: 21 },
          componentProps: {
            placeholder: '请编辑渲染代码',
            rows: 4,
          },
          // componentProps: {
          //   placeholder: '请编辑渲染代码',
          //   rows: 4,
          // },
        },
        {
          field: `${m.value}`,