ai-agent-admin/web/apps/web-ele/src/components/report-design/modules/column-config-dialog.vue

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';

import { $t } from '@vben/locales';

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadio,
  ElRadioGroup,
  ElSwitch,
} from 'element-plus';

import { ZqDialog } from '#/components/zq-dialog';

export interface ColumnListConfig {
  columnState: boolean;
  columnStyle: 'col' | 'row';
  columnType: '1' | '2';
  maxCol: number;
  rowCount: number;
  maxRow: number;
  colCount: number;
  columnData: string;
  copyCol: string;
  copyRow: string;
  fillEmptyRows: boolean;
}

function defaultColumnConfig(): ColumnListConfig {
  return {
    columnState: false,
    columnStyle: 'col',
    columnType: '1',
    maxCol: 0,
    rowCount: 0,
    maxRow: 0,
    colCount: 0,
    columnData: '',
    copyCol: '',
    copyRow: '',
    fillEmptyRows: false,
  };
}

const visible = defineModel<boolean>('visible', { default: false });

const props = defineProps<{
  columnList: any[];
  defaultSheetId?: string;
}>();

const emit = defineEmits<{
  confirm: [any[]];
}>();

const sheetId = ref('sheet1');
const form = reactive<ColumnListConfig>(defaultColumnConfig());

watch(
  () => props.columnList,
  (list) => {
    const first = list?.[0];
    sheetId.value = first?.sheet || props.defaultSheetId || 'sheet1';
    const cfg = first?.columnList;
    Object.assign(form, defaultColumnConfig(), cfg || {});
  },
  { immediate: true, deep: true },
);

function handleConfirm() {
  emit('confirm', [
    {
      sheet: sheetId.value,
      sheetName: sheetId.value,
      columnList: { ...form },
    },
  ]);
  visible.value = false;
}
</script>

<template>
  <ZqDialog
    v-model="visible"
    :title="$t('report-manager.column.title')"
    width="720px"
    @confirm="handleConfirm"
  >
    <p class="mb-3 text-xs text-[var(--el-text-color-secondary)]">
      {{ $t('report-manager.column.previewNote') }}
    </p>
    <ElForm label-position="top" size="small">
      <ElFormItem :label="$t('report-manager.column.enable')">
        <ElSwitch v-model="form.columnState" />
      </ElFormItem>

      <template v-if="form.columnState">
        <ElFormItem :label="$t('report-manager.column.style')">
          <ElRadioGroup v-model="form.columnStyle">
            <ElRadio value="col">
              {{ $t('report-manager.column.styleCol') }}
            </ElRadio>
            <ElRadio value="row">
              {{ $t('report-manager.column.styleRow') }}
            </ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <template v-if="form.columnStyle === 'col'">
          <ElFormItem :label="$t('report-manager.column.type')">
            <ElRadioGroup v-model="form.columnType">
              <ElRadio value="1">
                {{ $t('report-manager.column.overRows') }}
                <ElInputNumber
                  v-model="form.maxCol"
                  :min="0"
                  size="small"
                  class="mx-2 w-24"
                />
                {{ $t('report-manager.column.splitCols') }}
              </ElRadio>
              <ElRadio value="2" class="mt-2 block">
                {{ $t('report-manager.column.splitInto') }}
                <ElInputNumber
                  v-model="form.rowCount"
                  :min="0"
                  size="small"
                  class="mx-2 w-24"
                />
                {{ $t('report-manager.column.colsUnit') }}
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem :label="$t('report-manager.column.copyColNo')">
            <ElInput
              v-model="form.copyCol"
              :placeholder="$t('report-manager.column.rangeHint')"
              clearable
            />
          </ElFormItem>
        </template>

        <template v-else>
          <ElFormItem :label="$t('report-manager.column.type')">
            <ElRadioGroup v-model="form.columnType">
              <ElRadio value="1">
                {{ $t('report-manager.column.overCols') }}
                <ElInputNumber
                  v-model="form.maxRow"
                  :min="0"
                  size="small"
                  class="mx-2 w-24"
                />
                {{ $t('report-manager.column.splitRows') }}
              </ElRadio>
              <ElRadio value="2" class="mt-2 block">
                {{ $t('report-manager.column.splitInto') }}
                <ElInputNumber
                  v-model="form.colCount"
                  :min="0"
                  size="small"
                  class="mx-2 w-24"
                />
                {{ $t('report-manager.column.rowsUnit') }}
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem :label="$t('report-manager.column.copyRowNo')">
            <ElInput
              v-model="form.copyRow"
              :placeholder="$t('report-manager.column.rangeHint')"
              clearable
            />
          </ElFormItem>
        </template>

        <ElFormItem :label="$t('report-manager.column.dataRange')">
          <ElInput
            v-model="form.columnData"
            :placeholder="$t('report-manager.column.dataRangePlaceholder')"
            clearable
          />
        </ElFormItem>
        <ElFormItem :label="$t('report-manager.column.fillEmpty')">
          <ElSwitch v-model="form.fillEmptyRows" />
        </ElFormItem>
      </template>
    </ElForm>
  </ZqDialog>
</template>