smartai_desk_pc/src/modules/data-source-manage/add-source/components/ApiFieldConfig.vue

<template>
  <div class="api-field-config-container">
    <div class="section-header">
      <h3 class="section-title">字段配置</h3>
      <div class="add-field-btn-container">
        <a-button type="primary" @click="addField"> + 添加字段 </a-button>
      </div>
    </div>
    <div class="table-wrapper">
      <table class="field-table">
        <thead>
          <tr>
            <th>字段名称</th>
            <th>字段描述</th>
            <th>字段类型</th>
            <th>字段Key</th>
            <th>字段角色</th>
            <th>是否可聚合</th>
            <th>是否必填</th>
            <th>是否支持接口参数</th>
            <th>通用配置类型</th>
            <th>是否需要展示字段</th>
            <th>接口参数是否支持多值</th>
            <th>接口参数是否支持模糊查询</th>
            <th>多值分隔符</th>
            <th>枚举类型ID</th>
            <th>日期格式</th>
            <th>时间限制</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(field, index) in metric_fields" :key="index">
            <td>
              <a-input v-model="field.field_name" placeholder="字段名称" @input="handleFieldChange" />
            </td>
            <td>
              <a-input v-model="field.field_description" placeholder="字段描述" @input="handleFieldChange" />
            </td>
            <td>
              <a-select v-model="field.field_type" @change="handleFieldChange">
                <a-option value="int"> int </a-option>
                <a-option value="date"> date </a-option>
                <a-option value="str"> str </a-option>
              </a-select>
            </td>
            <td>
              <a-input v-model="field.field_key" placeholder="字段Key" @input="handleFieldChange" />
            </td>
            <td>
              <a-select v-model="field.column_role" @change="handleFieldChange">
                <a-option value="dim"> 维度 </a-option>
                <a-option value="meas"> 度量 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.is_aggregatable" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.is_required" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.is_support_api_query_condition" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-input v-model="field.common_config_type" placeholder="通用配置类型" @input="handleFieldChange" />
            </td>
            <td>
              <a-select v-model="field.is_needs_show_fields" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.is_api_support_multi_value" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.is_api_support_fuzzy_query" @change="handleFieldChange">
                <a-option :value="0"> 否 </a-option>
                <a-option :value="1"> 是 </a-option>
              </a-select>
            </td>
            <td>
              <a-input v-model="field.multi_value_delimiter" placeholder="多值分隔符" @input="handleFieldChange" />
            </td>
            <td>
              <a-select v-model="field.enum_type_id" @change="handleFieldChange">
                <a-option :value="0"> 无 </a-option>
                <a-option :value="1"> 有 </a-option>
              </a-select>
            </td>
            <td>
              <a-select v-model="field.format_str" :disabled="field.field_type !== 'date'" @change="handleFieldChange">
                <a-option value="year_month"> 精确到年月 </a-option>
                <a-option value="date"> 精确到日期 </a-option>
                <a-option value="datetime"> 精确到时间 </a-option>
              </a-select>
            </td>
            <td>
              <a-select
                v-model="field.time_limit"
                :disabled="field.field_type !== 'date'"
                allow-clear
                :style="{ width: '170px' }"
                @change="handleFieldChange"
              >
                <a-option value="limit_to_yesterday_start"> 昨天的 00：00：00 </a-option>
                <a-option value="limit_to_yesterday_end"> 昨天的 23：59：59 </a-option>
                <a-option value="limit_to_day_start"> 今天的 00：00：00 </a-option>
                <a-option value="limit_to_day_end"> 今天的 23：59：59 </a-option>
              </a-select>
            </td>
            <td>
              <a-button type="outline" status="danger" @click="deleteField(index)">
                <icon-delete />
              </a-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['update:modelValue']);

// 使用独立的响应式变量
const metric_fields = ref(props.modelValue.metric_fields || []);

// 监听props变化，更新本地数据
watch(() => props.modelValue, (newValue) => {
  metric_fields.value = newValue.metric_fields || [];
}, { deep: true });

// 通知父组件数据变化
const notifyParent = () => {
  // 处理非date类型的字段，不保留日期格式和时间限制
  const processedFields = metric_fields.value.map(field => {
    if (field.field_type !== 'date') {
      return {
        ...field,
        format_str: undefined,
        time_limit: undefined
      };
    }
    return field;
  });

  emit('update:modelValue', {
    metric_fields: processedFields
  });
};

// 处理字段变化
const handleFieldChange = () => {
  notifyParent();
};

// 添加字段
const addField = () => {
  metric_fields.value = [...metric_fields.value, {
    field_name: '',
    field_description: '',
    field_type: 'str',
    field_key: '',
    column_role: 'dim',
    is_aggregatable: 0,
    is_required: 0,
    is_support_api_query_condition: 0,
    common_config_type: null,
    is_api_support_multi_value: 0,
    is_api_support_fuzzy_query: 0,
    multi_value_delimiter: ',',
    is_needs_show_fields: 1,
    enum_type_id: 0,
    format_str: 'date', // 默认精确到日期
    time_limit: 'limit_to_day_start' // 默认截止到昨天
  }];
  notifyParent();
};

// 删除字段
const deleteField = (index) => {
  metric_fields.value = metric_fields.value.filter((_, i) => i !== index);
  notifyParent();
};
</script>

<style scoped lang="css">
.api-field-config-container {
  /* width: 90%; */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 300px;
  margin-bottom: 16px;
}

.field-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1800px;
}

.field-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.field-table th,
.field-table td {
  min-width: 180px;
  padding: 8px;
  border: 1px solid #e8e8e8;
  text-align: left;
}

.field-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  white-space: nowrap;
}

.field-table td {
  white-space: nowrap;
}

.add-field-btn-container {
  margin-top: 16px;
}
</style>