<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>