以防止你没见过代码能写的多屎
https://gist.github.com/eq1024/efb38f1b5e8760853c60f0b89f9bd1d7
就是一个筛选条件(支持动态隐藏/显示) + 表格 能干到 3500 行
改他的 bug 简直想吃赤石 😆
AI 评价如下:
这代码确实写得令人发指，完全是“CV 工程师”（Ctrl+C / Ctrl+V）的典型反面教材。你说得太对了，这就是典型的用战术上的勤奋（疯狂复制粘贴）来掩盖战略上的懒惰（缺乏抽象思维）。
我来给你犀利地剖析一下这坨代码到底有多“屎”，以及它是如何把简单问题复杂化的：
1. 模板层面的“屎山堆积” (Template Bloat)
从第 61 行到 323 行，整整 260 多行 代码，全是在重复写同一个逻辑：Tag 包裹 FormItem 包裹 Select 或 Input。
- 症状：为了加一个筛选条件（比如“产品分类”），开发者需要手动复制一段 HTML，改一下
v-show的 ID（比如20），改一下label，改一下v-model。 - 后果：代码极度冗余，可读性极差，维护成本极高。Vue 的
v-for是被吃了吗？
2. 逻辑层面的“Switch 地狱” (Switch Statement Hell)
为了配合模板里那些硬编码的 Magic Number（2, 3, ... 20），JavaScript 部分写了令人窒息的 switch-case。
- 案发地点 1 (
tagCloseHandle)：第 1446 行。为了重置一个查询字段，写了 50 行的 switch。 - 案发地点 2 (
selectSearchVal)：第 1175 行。为了回显搜索条件，又写了一遍 switch，把字段名映射回 Magic Number。 - 案发地点 3 (
savedSearch)：第 1268 行。为了保存搜索条件，第三次写了同样的 switch。 - 评价：这完全违背了 DRY (Don't Repeat Yourself) 原则。如果要加第 21 个筛选条件，你得在四个不同的地方改代码，漏改一个就是 Bug。
3. 数据结构的“脑死亡”
代码里充斥着 17, 18, 2 这种毫无意义的数字。
defaultFilter.includes(17)是什么意思？上帝才知道17代表ai_qa_status。- 这种硬编码的映射关系散落在代码的各个角落，而不是集中在一个配置对象里管理。
如何用“一个 JSON + 2 个循环”重构？
正如你所说，这本该是 100 行以内解决的事情。
1. 定义配置 (The JSON):
把所有筛选条件抽象成一个数组配置。
// data 中定义
filterConfig: [
{ id: 2, key: 'status', label: 'status', type: 'select', options: [...] },
{ id: 3, key: 'initiation_method', label: 'initiation_method', type: 'select', options: [...] },
{ id: 7, key: 'customer_name', label: 'customer', type: 'input' },
// ... 其他所有字段
]
2. 模板循环 (Loop 1):
模板里那 260 行垃圾代码直接删掉，换成这几行：
<Tag
v-for="conf in filterConfig"
:key="conf.id"
v-if="defaultFilter.includes(conf.id)"
closable
@on-close="handleClose(conf)"
>
<div class="headLine3_select">
<FormItem :label="$t(conf.label)">
<!-- 动态组件渲染 Input 或 Select -->
<component
:is="conf.type === 'select' ? 'Select' : 'Input'"
v-model="query[conf.key]"
@on-change="ccCaseLogListPage(1)"
clearable
>
<!-- 如果是 Select，再加个内层循环渲染 Options -->
<Option v-for="opt in conf.options" :value="opt.value" :key="opt.value">{{ opt.label }}</Option>
</component>
</FormItem>
</div>
</Tag>
3. 逻辑循环 (Loop 2):
那三个巨大的 switch 语句全部可以被简单的映射查找取代。
例如 tagCloseHandle 可以重构为：
handleClose(conf) {
this.query[conf.key] = ''; // 动态重置
const index = this.defaultFilter.indexOf(conf.id);
if (index > -1) this.defaultFilter.splice(index, 1);
this.ccCaseLogListPage();
}
回显和保存逻辑：
直接遍历 filterConfig，根据 key 查找对应的 id，一行 find 代码解决战斗，根本不需要 switch。
总结
这代码写得就像是按行计费的。重构后至少能删掉 400-500 行 代码，逻辑清晰度提升 10 倍。原作者不仅在浪费公司的存储空间，更是在侮辱后续维护者的智商。
从另一种角度来说，如果 ta 写的很好，那可能不会招你来了噢
直接全删了，自己重构一下吧。几千行的代码确实看得头的大了