AiDOPWarehouse/Web/src/views/aidop/kanban/components/SmartOpsBaseQueryFields.vue

<!--
  仅用于「智慧运营看板」分组内：九宫格 + S1～S9 共 10 个看板页。
  不要在 cockpit、S0 建模、智慧诊断、业务列表等页面引用。
-->
<template>
  <!-- 仅 S1～S9 引用；白底下拉与深色条内的日期/其它输入框视觉对齐（九宫格不用本组件） -->
  <div class="smart-ops-base-fields smart-ops-base-fields--light-selects">
  <el-form-item v-if="!compact" label-width="0" class="smart-ops-base-fields__hint-row">
    <span class="smart-ops-base-fields__hint">基础查询：日期、产品、订单号、产线</span>
  </el-form-item>
  <el-form-item label="日期">
    <el-date-picker
      :model-value="modelValue.dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始"
      end-placeholder="结束"
      value-format="YYYY-MM-DD"
      style="width: 240px"
      @update:model-value="patch({ dateRange: $event })"
    />
  </el-form-item>
  <el-form-item label="产品">
    <el-select
      :model-value="modelValue.product || undefined"
      filterable
      clearable
      placeholder="全部"
      style="width: 180px"
      :loading="optionsLoading"
      @update:model-value="patch({ product: $event == null ? '' : String($event) })"
    >
      <el-option v-for="p in productOptions" :key="'p-' + p" :label="p" :value="p" />
    </el-select>
  </el-form-item>
  <el-form-item label="订单号">
    <el-select
      :model-value="modelValue.orderNo || undefined"
      filterable
      clearable
      placeholder="全部"
      style="width: 180px"
      :loading="optionsLoading"
      @update:model-value="patch({ orderNo: $event == null ? '' : String($event) })"
    >
      <el-option v-for="o in orderNoOptions" :key="'o-' + o" :label="o" :value="o" />
    </el-select>
  </el-form-item>
  <el-form-item label="产线">
    <el-select
      :model-value="modelValue.productionLine || undefined"
      filterable
      clearable
      placeholder="全部"
      style="width: 160px"
      :loading="optionsLoading"
      @update:model-value="patch({ productionLine: $event == null ? '' : String($event) })"
    >
      <el-option v-for="l in productionLineOptions" :key="'l-' + l" :label="l" :value="l" />
    </el-select>
  </el-form-item>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { loadSmartOpsFilterOptions } from '../utils/smartOpsFilterOptionsCache'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  /** 单行紧凑（九宫格顶栏等），不显示占满行的说明文字 */
  compact: { type: Boolean, default: false },
})

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

const optionsLoading = ref(true)
const productOptions = ref([])
const orderNoOptions = ref([])
const productionLineOptions = ref([])

function patch(p) {
  emit('update:modelValue', { ...props.modelValue, ...p })
}

onMounted(async () => {
  optionsLoading.value = true
  try {
    const d = await loadSmartOpsFilterOptions(1, 1)
    productOptions.value = d.products ?? []
    orderNoOptions.value = d.orderNos ?? []
    productionLineOptions.value = d.productionLines ?? []
  } finally {
    optionsLoading.value = false
  }
})
</script>

<style scoped>
.smart-ops-base-fields__hint-row {
  margin-right: 0 !important;
  margin-bottom: 2px !important;
  width: 100%;
  flex-basis: 100%;
}
.smart-ops-base-fields__hint-row :deep(.el-form-item__content) {
  justify-content: flex-start;
}
.smart-ops-base-fields__hint {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
}
</style>