greater_wms/templates/src/pages/outbound/freshorder.vue

<template>
  <q-card class="q-pa-md shadow-5">
    <!-- 条件组操作栏 -->
    <div class="q-mb-md">
      <div class="row">
        <q-btn
          label="添加条件"
          icon="add"
          color="primary"
          @click="addCondition"
        />
        <q-select
          v-model="logicOperator"
          :options="['AND', 'OR']"
          dense
          class="q-ml-md"
          style="width: 100px"
        />
      </div>
    </div>

    <!-- 拖拽式条件容器 -->
    <draggable :list="conditions" handle=".handle">
      <div
        v-for="(condition, index) in conditions"
        :key="condition.id"
        class="row q-gutter-sm q-mb-md"
      >
        <!-- 拖拽手柄 -->

        <q-icon name="drag_indicator" class="handle text-grey-6" size="24px" />

        <!-- 字段选择 -->
        <q-select
          v-model="condition.field"
          :options="fieldOptions"
          label="字段"
          dense
          emit-value
          map-options
          style="min-width: 160px"
        />

        <!-- 运算符 -->
        <q-select
          v-model="condition.operator"
          :options="operatorOptions(condition.field)"
          label="条件"
          dense
          emit-value
          map-options
          style="min-width: 130px"
        />

        <!-- 值输入 -->
        <component
          v-if="condition.field !== 'date'"
          :is="inputComponent(condition.field)"
          class="col"
        />
        <template v-else>
          <div class="row q-gutter-xs">
            <!-- 年 -->
            <q-select
              v-model="year"
              :options="yearOptions"
              label="年"
              dense
              emit-value
              @update:model-value="handleChange"
            />

            <!-- 月 -->
            <q-select
              v-model="month"
              :options="monthOptions"
              label="月"
              dense
              emit-value
              :disable="!year"
              @update:model-value="handleChange"
            />

            <!-- 日 -->
            <q-select
              v-model="day"
              :options="dayOptions"
              label="日"
              dense
              emit-value
              :disable="!month"
              @update:model-value="handleChange"
            />
          </div>
        </template>

        <!-- 删除按钮 -->
        <q-btn
          flat
          round
          icon="delete"
          color="negative"
          @click="removeCondition(index)"
        />
      </div>
    </draggable>
    <div class="q-mt-md" align="right">
      <q-btn label="重置" @click="resetConditions" />
      <q-btn label="执行查询" color="primary" @click="executeQuery" />
    </div>
    <!-- 查询预览 & 操作 -->
    <div class="q-mt-lg">
      <q-card flat bordered>
        <q-card-section>
          <div class="text-caption">生成查询条件：</div>
          <pre>{{ generatedQuery }}</pre>
        </q-card-section>

        <q-card-actions align="right"> </q-card-actions>
      </q-card>
    </div>
  </q-card>
</template>

<script>
import draggable from "vuedraggable";
import CustomDateInput from "components/CustomDateInput.vue";

export default {
  components: {
    draggable,
    CustomDateInput,
  },
  data() {
    return {
      conditions: [],
      logicOperator: "AND",
      fieldOptions: [
        { label: "物料编码", value: "material_code" },
        { label: "物料名称", value: "material_name" },
        { label: "批次号", value: "batch" },
        { label: "库存数量", value: "quantity" },
        { label: "入库日期", value: "date" },
      ],
      operatorMap: {
        default: [
          { label: "等于", value: "eq" },
          { label: "包含", value: "contains" },
          { label: "开头为", value: "startswith" },
        ],
        quantity: [
          { label: "大于", value: "gt" },
          { label: "等于", value: "eq" },
          { label: "小于", value: "lt" },
        ],
        date: [
          { label: "之前", value: "lte" },
          { label: "之后", value: "gte" },
        ],
      },
    };
  },
  computed: {
    // 生成查询参数
    generatedQuery() {
      return this.conditions
        .map((cond) => {
          const suffix = {
            eq: "",
            contains: "__icontains",
            startswith: "__istartswith",
            gt: "__gt",
            lt: "__lt",
            gte: "__gte",
            lte: "__lte",
          }[cond.operator];

          return `${cond.field}${suffix}=${cond.value}`;
        })
        .join(` ${this.logicOperator} `);
    },

    // 动态输入组件
    inputComponent() {
      return function (field) {
        const components = {
          material_code: "q-input",
          material_name: "q-input",
          batch: "q-input",
          quantity: "q-input",
          date: "CustomDateInput",
        };
        return components[field] || "q-input";
      };
    },
  },
  methods: {
    // 获取运算符选项
    operatorOptions(field) {
      return this.operatorMap[field] || this.operatorMap.default;
    },

    // 添加条件
    addCondition() {
      this.conditions.push({
        id: Date.now(),
        field: "material_code",
        operator: "eq",
        value: "",
        ...(this.field === "date" && { value: "2025-01-01" }),
      });
    },
    getDefaultDate() {
      const today = new Date();
      return `${today.getFullYear()}-${(today.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-01`;
    },
    // 删除条件
    removeCondition(index) {
      this.conditions.splice(index, 1);
    },

    // 重置条件
    resetConditions() {
      this.conditions = [];
    },

    // 执行查询
    executeQuery() {
      console.log("执行查询:", this.generatedQuery);
      // 这里接入实际API调用
    },
  },
};
</script>

<style scoped>
.handle {
  cursor: move;
  padding: 8px;
}
</style>