vue-vben-admin/src/views/demo/onlineform/formModule/modalDesign.vue

<template>
  <div class="l-auto-window">
    <el-tabs v-model="pageActiveName" :stretch="true">
      <el-tab-pane :label="$t('布局设置')" name="tab01">
        <webcodeLayout />
      </el-tab-pane>
      <el-tab-pane v-if="config.layoutType == 2" :label="$t('左侧树形设置')" name="tab05">
        <webcodeLefttree :colslist="colslist" />
      </el-tab-pane>
      <el-tab-pane :label="$t('列表设置')" name="tab02">
        <webcodeColumns :columnsTree="columnsTree" :columnsCheckedKeys="columnsCheckedKeys" />
      </el-tab-pane>
      <el-tab-pane :label="$t('查询设置')" name="tab03">
        <webcodeQuery :queryTree="queryTree" :queryCheckedKeys="queryCheckedKeys" />
      </el-tab-pane>
      <el-tab-pane :label="$t('按钮设置')" name="tab04">
        <webcodeBtns :btnsTree="btnsTree" :btnsCheckedKeys="btnsCheckedKeys" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { ref, provide, defineExpose, watch, defineProps } from 'vue';
  import WebcodeLayout from './config/layout.vue';
  import webcodeLefttree from './config/leftTree.vue';
  import webcodeColumns from './config/columns.vue';
  import webcodeQuery from './config/query.vue';
  import webcodeBtns from './config/btns.vue';
  import { functionGetPreviewForm, functionGetSchemeInfoEntity } from '@/api/demo/formScheme';

  // 定义props
  const props = defineProps({
    modalFormVerison: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
  });

  watch(
    () => props.modalFormVerison,
    (newVal, oldVal) => {
      if (newVal != oldVal) {
        validateSteps(newVal);
      }
    },
  );

  // 初始数据
  let pageActiveName = 'tab01';
  // 左侧树形设置tree
  const colslist = ref([]);
  // 列表设置tree
  const columnsTree = ref([
    {
      label: '全选',
      children: [],
    },
  ]);
  // 列表设置Checked
  const columnsCheckedKeys = ref([]);
  // 查询设置tree
  const queryTree = ref([
    {
      label: '全选',
      children: [],
    },
  ]);
  // 查询设置Checked
  const queryCheckedKeys = ref([]);
  // 按钮设置tree
  const btnsTree = ref([]);
  // 按钮设置Checked
  const btnsCheckedKeys = ref([]);

  const config = ref({
    layoutType: 1,
    queryType: 1,
    left: {
      title: '左侧树形',
      colField: '',
      dataType: '1',
      dataIdKey: '',
      dataPIdKey: '',
      dataValueKey: '',
      dataLabelKey: '',
      colNames: [], // 数据源字段列表
      options: [], // 静态数据
      dataCode: '',
    },
    table: {
      isPage: true,
      columns: [],
      querys: [],
      btns: [],
      sidx: '',
      isDESC: false,
    },
    btns: [
      {
        label: '新增',
        id: 'Add',
        prop: 'Add',
        icon: 'ant-design:plus-outlined',
        isRowBtn: false,
        class: 'primary',
        sort: 0,
      },
      {
        label: '导入',
        id: 'Import',
        prop: 'Import',
        icon: 'ant-design:upload-outlined',
        isRowBtn: false,
        class: 'primary',
        sort: 1,
      },
      {
        label: '导出',
        id: 'Export',
        prop: 'Export',
        icon: 'ant-design:download-outlined',
        isRowBtn: false,
        class: 'primary',
        sort: 2,
      },
      {
        label: '编辑',
        id: 'Edit',
        prop: 'Edit',
        icon: 'ant-design:edit-outlined',
        isRowBtn: true,
        class: 'success',
        sort: 3,
      },
      {
        label: '删除',
        id: 'Delete',
        prop: 'Delete',
        icon: 'ant-design:delete-outlined',
        isRowBtn: true,
        class: 'error',
        sort: 4,
      },
      {
        label: '详情',
        id: 'Details',
        prop: 'Details',
        icon: 'ant-design:align-center-outlined',
        isRowBtn: true,
        class: 'primary',
        sort: 5,
      },
    ],
  });

  const formScheme = ref('');

  // 表单验证
  async function validateSteps(formVerison) {
    if (!formVerison) {
      return;
    }
    // 选中的历史记录表单
    // let keyValue = typeof formVerison === 'string' ? formVerison : formVerison.value;
    const scheme = await functionGetPreviewForm({ keyValue: formVerison });
    formScheme.value = JSON.parse(scheme.scheme);

    const columns = [];
    formScheme.value.formInfo.schemas.forEach((tab) => {
      if (!(tab.component in ['Gridtable', 'Divider', 'Password', 'Viewtable', 'Card', 'Btn'])) {
        columns.push(tab);
      }
    });

    const colunmsMap = {};
    columns.forEach((item) => {
      colunmsMap[item.field] = item;
    });

    // 左侧树形设置
    colslist.value = columns.map((t) => {
      return { value: t.field, label: t.label };
    });

    // 列表设置-树
    columnsTree.value[0].children = [];
    columns.map((t) => {
      columnsTree.value[0].children.push({
        key: t.field,
        label: t.label,
        value: t.label,
        width: 120,
        align: 'left',
        isMinWidth: false,
      });
    });

    // 查询设置-树
    queryTree.value[0].children = [];
    queryTree.value[0].children = columns
      .filter(
        (t) =>
          !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
      )
      .map((t) => {
        return { key: t.field, label: t.label };
      });

    // 常用按钮-树
    const schemeInfo = await functionGetSchemeInfoEntity({ id: scheme.schemeInfoId });
    if (schemeInfo.formType === 1) {
      // 如果是视图表单就关闭部分按钮
      btnsTree.value = config.value.btns.filter((t) =>
        ['Import', 'Export', 'Details'].includes(t.id),
      );
    } else {
      btnsTree.value = config.value.btns;
    }

    // 编辑时的先前内容
    if (props.editData.formEdit) {
      if (props.editData.record.formVerison === formVerison) {
        const editDataScheme = JSON.parse(props.editData.record.scheme);
        // 布局
        config.value.layoutType = editDataScheme.layoutType;
        // 查询设置-风格
        config.value.queryType = editDataScheme.queryType;
        // 左边树
        config.value.left = editDataScheme.left;
        // 列表设置-表
        config.value.table.columns = editDataScheme.table.columns;
        // 查询设置-表
        config.value.table.querys = editDataScheme.table.querys;
        // 常用按钮-表
        config.value.table.btns = editDataScheme.table.btns;
      }
    } else {
      // 列表设置-表
      config.value.table.columns = columnsTree.value[0].children;
      // 查询设置-表
      config.value.table.querys = queryTree.value[0].children;
      // 常用按钮-表
      config.value.table.btns = btnsTree.value;
    }

    // 设置预选的单选项
    config.value.table.columns.forEach((t) => {
      columnsCheckedKeys.value.push(t.key);
    });
    config.value.table.querys.forEach((t) => {
      queryCheckedKeys.value.push(t.key);
    });
    config.value.table.btns.forEach((t) => {
      btnsCheckedKeys.value.push(t.id);
    });
  }

  provide('formConfig', config.value);

  defineExpose({
    config,
  });
</script>