低代码更新

Ben Lin

2024-06-04 bb1f9ebd40b18a99d0709271481092bc94a3a93c

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

@@ -54,11 +54,27 @@
              style="width: 20%"
              :options="options"
              :readonly="true"
              @change="(value, option) => searchOnChange(value, option, field)"
            />
          </a-input-group>
        </template>
        <template #[item]="{ model, field }" v-for="item in swSlots" :key="item">
          <a-switch v-model:checked="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchApiSlots" :key="item">
          <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]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchResultFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchLabelFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in searchValueFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </a-card>
@@ -178,6 +194,7 @@
              style="width: 20%"
              :options="options"
              :readonly="true"
              @change="(value, option) => componentChange(value, option, field)"
            />
          </a-input-group>
        </template>
@@ -186,6 +203,27 @@
        </template>
        <template #[item]="{ model, field }" v-for="item in crudrSwSlots" :key="item">
          <a-switch v-model:checked="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudApiSlots" :key="item">
          <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]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudResultFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudLabelFieldSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudValueFieldSlots" :key="item">
          <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]" />
        </template>
        <template #[item]="{ model, field }" v-for="item in crudOnChangeSlots" :key="item">
          <a-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </a-card>
@@ -197,7 +235,7 @@
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { nextTick, onMounted, ref, unref } from 'vue';
  import { Card, InputGroup, Select, Input, Switch } from 'ant-design-vue';
  import { ApiSelect } from '/@/components/Form/index';
@@ -252,7 +290,7 @@
      validate,
    },
  ] = useForm({
    labelWidth: 120,
    labelWidth: 130,
    baseColProps: {
      span: 24,
    },
@@ -269,7 +307,7 @@
      validate: crudvalidate,
    },
  ] = useForm({
    labelWidth: 120,
    labelWidth: 130,
    baseColProps: {
      span: 24,
    },
@@ -286,35 +324,51 @@
      validate: validateMainForm,
    },
  ] = useForm({
    labelWidth: 120,
    labelWidth: 130,
    baseColProps: {
      span: 24,
    },
    schemas: mainSchemas,
    showActionButtonGroup: false,
  });
  /* 查询 */
  const SearchEntName = ref('');
  const MainEntName = ref('');
  const CrudEntName = ref('');
  const objInputs = ref({} as { [key: string]: any });
  const mainInputs = ref({} as { [key: string]: any });
  const crudInputs = ref({} as { [key: string]: any });
  const searchProperties = ref([] as EntityPropertie[]);
  const mainProperties = ref([] as EntityPropertie[]);
  const crudProperties = ref([] as EntityPropertie[]);
  const searchSlots = ref([] as string[]);
  const mainSlots = ref([] as string[]);
  const crudSlots = ref([] as string[]);
  const searchSelectVals = ref({} as { [key: string]: any });
  const swSlots = ref([] as string[]);
  const searchApiSlots = ref([] as string[]);
  const searchParamsSlots = ref([] as string[]);
  const searchResultFieldSlots = ref([] as string[]);
  const searchLabelFieldSlots = ref([] as string[]);
  const searchValueFieldSlots = ref([] as string[]);
  /* 主表 */
  const MainEntName = ref('');
  const mainSelectVals = ref({} as { [key: string]: any });
  const mainProperties = ref([] as EntityPropertie[]);
  const mainInputs = ref({} as { [key: string]: any });
  const mainSlots = ref([] as string[]);
  const mainSwSlots = ref([] as string[]);
  const crudSwSlots = ref([] as string[]);
  const mainsSwSlots = ref([] as string[]);
  const mainwSwSlots = ref([] as string[]);
  const mainIaSlots = ref([] as string[]);
  const crudrSwSlots = ref([] as string[]);
  const searchSelectVals = ref({} as { [key: string]: any });
  const mainSelectVals = ref({} as { [key: string]: any });
  /* 增删改 */
  const CrudEntName = ref('');
  const crudInputs = ref({} as { [key: string]: any });
  const crudProperties = ref([] as EntityPropertie[]);
  const crudSelectVals = ref({} as { [key: string]: any });
  const crudSlots = ref([] as string[]);
  const crudSwSlots = ref([] as string[]);
  const crudrSwSlots = ref([] as string[]);
  const crudApiSlots = ref([] as string[]);
  const crudParamsSlots = ref([] as string[]);
  const crudResultFieldSlots = ref([] as string[]);
  const crudLabelFieldSlots = ref([] as string[]);
  const crudValueFieldSlots = ref([] as string[]);
  const crudOptionsSlots = ref([] as string[]);
  const crudOnChangeSlots = ref([] as string[]);

  const options = ref<SelectTypes['options']>([
    {
      value: 'Input',
@@ -365,6 +419,22 @@
        for (const i in searchForms) {
          if (searchForms[i]['field'] != '0') {
            condAdd();
            if (searchForms[i]['component'] == 'ApiSelect') {
              addApiSelectOption(`${SearchEntName.value}${Number(i) + 1}a`, 'search');
              setFieldsValue({
                [`ApiSelect${SearchEntName.value}${Number(i) + 1}a`]:
                  searchForms[i]['componentProps']['api'],
                [`Params${SearchEntName.value}${Number(i) + 1}a`]: JSON.stringify(
                  searchForms[i]['componentProps']['params'],
                ),
                [`Result${SearchEntName.value}${Number(i) + 1}a`]:
                  searchForms[i]['componentProps']['resultField'],
                [`Label${SearchEntName.value}${Number(i) + 1}a`]:
                  searchForms[i]['componentProps']['labelField'],
                [`Value${SearchEntName.value}${Number(i) + 1}a`]:
                  searchForms[i]['componentProps']['valueField'],
              });
            }
            setFieldsValue({
              [`${SearchEntName.value}${Number(i) + 1}a`]: searchForms[i]['field'],
              [`InputNumber${Number(i) + 1}`]: searchForms[i]['colProps'].span,
@@ -383,6 +453,32 @@
        setFieldsValueCrud({ crudAssemblyName: data.Data.Items[0].CRUD_ASSY_NAME });
        for (const i in crudForms) {
          crudCondAdd();
          if (crudForms[i]['component'] == 'ApiSelect') {
            addApiSelectOption(`${CrudEntName.value}${Number(i) + 1}a`, 'crud');
            setFieldsValueCrud({
              [`ApiSelect${CrudEntName.value}${Number(i) + 1}a`]:
                crudForms[i]['componentProps']['api'],
              [`Params${CrudEntName.value}${Number(i) + 1}a`]: JSON.stringify(
                crudForms[i]['componentProps']['params'],
              ),
              [`Result${CrudEntName.value}${Number(i) + 1}a`]:
                crudForms[i]['componentProps']['resultField'],
              [`Label${CrudEntName.value}${Number(i) + 1}a`]:
                crudForms[i]['componentProps']['labelField'],
              [`Value${CrudEntName.value}${Number(i) + 1}a`]:
                crudForms[i]['componentProps']['valueField'],
            });
          }
          if (crudForms[i]['component'] == 'Select') {
            addSelectOption(`${CrudEntName.value}${Number(i) + 1}a`, 'crud');
            setFieldsValueCrud({
              [`XSelect${CrudEntName.value}${Number(i) + 1}a`]: JSON.stringify(
                crudForms[i]['componentProps']['options'],
              ),
              [`XOnChange${CrudEntName.value}${Number(i) + 1}a`]:
                crudForms[i]['componentProps']['onChange'],
            });
          }
          setFieldsValueCrud({
            [`${CrudEntName.value}${Number(i) + 1}a`]: crudForms[i]['field'],
            [`InputNumber${Number(i) + 1}`]: crudForms[i]['colProps'].span,
@@ -430,6 +526,15 @@
          _json['label'] = objInputs.value[Keys[k]];
          _json['defaultValue'] = '';
          _json['component'] = searchSelectVals.value[Keys[k]];
          if (searchSelectVals.value[Keys[k]] == 'ApiSelect') {
            _json['componentProps'] = {
              api: values[`ApiSelect${Keys[k]}`],
              params: JSON.parse(values[`Params${Keys[k]}`]),
              resultField: values[`Result${Keys[k]}`],
              labelField: values[`Label${Keys[k]}`],
              valueField: values[`Value${Keys[k]}`],
            };
          }
          _n = _n + 4;
        }
        if (Keys[k].toString().startsWith('InputNumber')) {
@@ -511,8 +616,25 @@
        console.log(`${k}:${cKeys[k]}`);
        if (cKeys[k].toString().startsWith(getFieldsValueCrud().crudAssemblyName)) {
          cjson['field'] = isNullOrEmpty(crudvalues[cKeys[k]]) ? '' : crudvalues[cKeys[k]];
          cjson['label'] = isNullOrEmpty(crudvalues[cKeys[k]]) ? '' : crudInputs.value[cKeys[k]];
          cjson['label'] = isNullOrEmpty(crudInputs.value[cKeys[k]])
            ? ''
            : crudInputs.value[cKeys[k]];
          cjson['component'] = crudSelectVals.value[cKeys[k]];
          if (crudSelectVals.value[cKeys[k]] == 'ApiSelect') {
            cjson['componentProps'] = {
              api: crudvalues[`ApiSelect${cKeys[k]}`],
              params: JSON.parse(crudvalues[`Params${cKeys[k]}`]),
              resultField: crudvalues[`Result${cKeys[k]}`],
              labelField: crudvalues[`Label${cKeys[k]}`],
              valueField: crudvalues[`Value${cKeys[k]}`],
            };
          }
          if (crudSelectVals.value[cKeys[k]] == 'Select') {
            cjson['componentProps'] = {
              options: JSON.parse(crudvalues[`XSelect${cKeys[k]}`]),
              onChange: crudvalues[`XOnChange${cKeys[k]}`],
            };
          }
          c = c + 3;
        }
        if (cKeys[k].toString().startsWith('Switch')) {
@@ -638,6 +760,213 @@
    console.log(value, option, field);
    crudInputs.value[field] = option.label;
  }
  /* 查询组件选择事件 */
  function searchOnChange(value, option, field) {
    console.log(value, option, field);
    if (value == 'ApiSelect') {
      addApiSelectOption(field, 'search');
    } else {
      delApiSelectOption(field, 'search');
    }
    // if (value == 'PoPSelect') {}
  }
  /* 增删改组件选择事件 */
  function componentChange(value, option, field) {
    console.log(value, option, field);
    if (value == 'ApiSelect') {
      addApiSelectOption(field, 'crud');
      delSelectOption(field, 'crud');
    } else {
      delApiSelectOption(field, 'crud');
    }
    if (value == 'Select') {
      addSelectOption(field, 'crud');
      delApiSelectOption(field, 'crud');
    } else {
      delSelectOption(field, 'crud');
    }
    // if (value == 'PoPSelect') {}
  }

  function addApiSelectOption(field: string, type: string) {
    const appendData: FormSchema[] = [
      {
        field: `ApiSelect${field}`,
        component: 'Input',
        label: `api`,
        slot: `Api${field}`,
        colProps: { span: 5 },
      },
      {
        field: `Params${field}`,
        component: 'Input',
        label: 'params',
        slot: `Params_${field}`,
        colProps: { span: 6 },
      },
      {
        field: `Result${field}`,
        component: 'Input',
        label: 'resultField',
        slot: `ResultField${field}`,
        colProps: { span: 5 },
      },
      {
        field: `Label${field}`,
        component: 'Input',
        label: 'labelField',
        slot: `LabelField${field}`,
        colProps: { span: 4 },
      },
      {
        field: `Value${field}`,
        component: 'Input',
        label: 'valueField',
        slot: `ValueField${field}`,
        colProps: { span: 4 },
      },
    ];
    switch (type) {
      case 'search':
        appendSchemaByField(appendData, '');
        searchSlotsPush(field);
        break;
      case 'crud':
        appendSchemaByFieldCrud(appendData, '');
        crudSlotsPush(field);
        break;
    }
  }

  /* 增删改ApiSelect插槽数据添加 */
  function crudSlotsPush(field: string) {
    crudApiSlots.value.push(`Api${field}`);
    crudParamsSlots.value.push(`Params_${field}`);
    crudResultFieldSlots.value.push(`ResultField${field}`);
    crudLabelFieldSlots.value.push(`LabelField${field}`);
    crudValueFieldSlots.value.push(`ValueField${field}`);
  }
  /* 查询ApiSelect插槽数据添加 */
  function searchSlotsPush(field: string) {
    searchApiSlots.value.push(`Api${field}`);
    searchParamsSlots.value.push(`Params_${field}`);
    searchResultFieldSlots.value.push(`ResultField${field}`);
    searchLabelFieldSlots.value.push(`LabelField${field}`);
    searchValueFieldSlots.value.push(`ValueField${field}`);
  }

  function delApiSelectOption(field: string, type: string) {
    const removeData: string[] = [
      `ApiSelect${field}`,
      `Params${field}`,
      `Result${field}`,
      `Label${field}`,
      `Value${field}`,
    ];
    switch (type) {
      case 'search':
        //if (!isNullOrEmpty(getFieldsValue()[`ApiSelect${field}`])) {
        removeSchemaByField(removeData);
        searchSlotsSplice(field);
        //}
        break;
      case 'crud':
        //if (!isNullOrEmpty(getFieldsValueCrud()[`ApiSelect${field}`])) {
        removeSchemaByFieldCrud(removeData);
        crudSlotsSplice(field);
        //}
        break;
    }
  }

  /* 增删改插槽删除项 */
  function crudSlotsSplice(field: string) {
    crudApiSlots.value = crudApiSlots.value.filter((item) => item !== `Api${field}`);
    crudParamsSlots.value = crudParamsSlots.value.filter((item) => item !== `Params_${field}`);
    crudResultFieldSlots.value = crudResultFieldSlots.value.filter(
      (item) => item !== `ResultField${field}`,
    );
    crudLabelFieldSlots.value = crudLabelFieldSlots.value.filter(
      (item) => item !== `LabelField${field}`,
    );
    crudValueFieldSlots.value = crudValueFieldSlots.value.filter(
      (item) => item !== `ValueField${field}`,
    );
  }
  /* 增删改插槽删除项 */
  function searchSlotsSplice(field: string) {
    searchApiSlots.value = searchApiSlots.value.filter((item) => item !== `Api${field}`);
    searchParamsSlots.value = searchParamsSlots.value.filter((item) => item !== `Params_${field}`);
    searchResultFieldSlots.value = searchResultFieldSlots.value.filter(
      (item) => item !== `ResultField${field}`,
    );
    searchLabelFieldSlots.value = searchLabelFieldSlots.value.filter(
      (item) => item !== `LabelField${field}`,
    );
    searchValueFieldSlots.value = searchValueFieldSlots.value.filter(
      (item) => item !== `ValueField${field}`,
    );
  }

  function addSelectOption(field: string, type: string) {
    const appendData: FormSchema[] = [
      {
        field: `XSelect${field}`,
        component: 'Input',
        label: `options`,
        slot: `Select_${field}`,
        colProps: { span: 12 },
      },
      {
        field: `XOnChange${field}`,
        component: 'Input',
        label: 'onChange',
        slot: `OnChange_${field}`,
        colProps: { span: 12 },
      },
    ];
    switch (type) {
      case 'search':
        appendSchemaByField(appendData, '');
        // searchSelSlotsPush(field);
        break;
      case 'crud':
        appendSchemaByFieldCrud(appendData, '');
        crudSelSlotsPush(field);
        break;
    }
  }

  function delSelectOption(field: string, type: string) {
    const removeData: string[] = [`XSelect${field}`, `XOnChange${field}`];
    switch (type) {
      case 'search':
        //if (!isNullOrEmpty(getFieldsValue()[`XSelect${field}`])) {
        removeSchemaByField(removeData);
        // searchSelSlotsSplice(field);
        //}
        break;
      case 'crud':
        //if (!isNullOrEmpty(getFieldsValueCrud()[`XSelect${field}`])) {
        removeSchemaByFieldCrud(removeData);
        crudSelSlotsSplice(field);
        //}
        break;
    }
  }

  /* 增删改Select插槽数据添加 */
  function crudSelSlotsPush(field: string) {
    crudOptionsSlots.value.push(`Select_${field}`);
    crudOnChangeSlots.value.push(`OnChange_${field}`);
  }

  /* 增删改插槽删除项 */
  function crudSelSlotsSplice(field: string) {
    crudOptionsSlots.value = crudOptionsSlots.value.filter((item) => item !== `Select_${field}`);
    crudOnChangeSlots.value = crudOnChangeSlots.value.filter((item) => item !== `Select_${field}`);
  }

  const n = ref(1);
  const m = ref(1);
  const j = ref(1);
@@ -693,8 +1022,8 @@
      `InputNumber${field}`,
      `${field}`,
    ]);
    swSlots.value.splice(swSlots.value.indexOf(`sw${field}`), 1);
    searchSlots.value.splice(searchSlots.value.indexOf(`fac${field}`), 1);
    swSlots.value = swSlots.value.filter((item) => item !== `sw${field}`);
    searchSlots.value = searchSlots.value.filter((item) => item !== `fac${field}`);
    if (searchSlots.value.length == 0) {
      n.value = 1;
    }
@@ -774,11 +1103,11 @@
      `InputTextArea${field}`,
      `${field}`,
    ]);
    mainSwSlots.value.splice(mainSwSlots.value.indexOf(`mainSw${field}`), 1);
    mainsSwSlots.value.splice(mainsSwSlots.value.indexOf(`mainsSw${field}`), 1);
    mainwSwSlots.value.splice(mainwSwSlots.value.indexOf(`mainwSw${field}`), 1);
    mainIaSlots.value.splice(mainIaSlots.value.indexOf(`mainwIa${field}`), 1);
    mainSlots.value.splice(mainSlots.value.indexOf(`mainfac${field}`), 1);
    mainSwSlots.value = mainSwSlots.value.filter((item) => item !== `mainSw${field}`);
    mainsSwSlots.value = mainsSwSlots.value.filter((item) => item !== `mainsSw${field}`);
    mainwSwSlots.value = mainwSwSlots.value.filter((item) => item !== `mainwSw${field}`);
    mainIaSlots.value = mainIaSlots.value.filter((item) => item !== `mainwIa${field}`);
    mainSlots.value = mainSlots.value.filter((item) => item !== `mainfac${field}`);
    if (mainSlots.value.length == 0) {
      m.value = 1;
    }
@@ -843,12 +1172,13 @@
      `InputNumber${field}`,
      `${field}`,
    ]);
    crudSwSlots.value.splice(crudSwSlots.value.indexOf(`crudSw${field}`), 1);
    crudrSwSlots.value.splice(crudrSwSlots.value.indexOf(`crudrSw${field}`), 1);
    crudSlots.value.splice(crudSlots.value.indexOf(`crudfac${field}`), 1);
    crudSwSlots.value = crudSwSlots.value.filter((item) => item !== `crudSw${field}`);
    crudrSwSlots.value = crudrSwSlots.value.filter((item) => item !== `crudrSw${field}`);
    crudSlots.value = crudSlots.value.filter((item) => item !== `crudfac${field}`);
    if (crudSlots.value.length == 0) {
      j.value = 1;
    }
    delApiSelectOption(`${CrudEntName.value}${field}a`, 'crud');
  }

  function goBack() {