@zeyue0329/xiaoma-cli 1.20.0 → 1.22.0

package/src/zqyl-skills/front/components/xiaoma-zqyl-search-form-front/SKILL.md

@@ -0,0 +1,239 @@
+---
+name: xiaoma-zqyl-search-form-front
+description: 前台列表页查询条件/搜索表单的 Vue2 实现规范与 searchParmas 结构（ylSearchForm）。在用户提及 ylSearchForm、查询条件、搜索表单、筛选、重置查询、展开收起，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the search-form (ylSearchForm) component on a ZQYL front page.
+---
+
+# 查询条件（搜索表单）（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`searchForm`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 mock）
+
+- **禁止**在生成业务页面中填充 mock、演示、假数据或静态业务行（如手写 `loadData: [{ companyName: 'xxx' }]`、`reqData` 示例值、`mounted` 里写死 `total` 等）。
+- 列表/表格：`tableData.loadData` 保持 `[]`，数据由 `ylTableSimple` / `ylMpsTable` 通过 `searchParmas.request` / `queryListUrl` **调接口**获取；`request.url` / `queryListUrl` 写项目已有 `INTERFACE.xxx`，未知时留 `''` 并注释 `// TODO: 补充接口常量`。
+- 查询区：`searchParmas.request` 配置 `url`、`type`、`method`、`options`；有 `url` 时 `:load="true"`（或省略，默认加载），由组件触发查询。
+- 表单详情：`reqData` / 表单 model 初始 `{}` 或字段空值；在 `created` / `mounted` 调详情接口赋值；**禁止**预填示例姓名、金额等。
+- 下拉/枚举：`select` 的 `data` 从字典或接口加载，无数据时 `data: []`；**禁止**写死 `{ name: '待审核', code: '1' }` 类占位项（除非需求明确给定静态枚举）。
+- 统计区 `ylDataCensus`：`:list` 由接口或 `computed` 赋值，**禁止**手写示例金额/数量。
+- 动态行表格：`detailRows` 等初始 `[]`，由接口回显或用户操作增删。
+- 本 skill「示例」章节的静态数据**仅供理解组件 API**；生成业务页面时**不得**照搬进 `data()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skills 并按规则产出代码：
+- 列表页顶部查询区、筛选表单、搜索条件、重置/查询按钮、展开收起。
+- 查询条件与 `ylTableSimple` 联动分页查询。
+- 用户提到「ylSearchForm」、「查询条件」、「搜索表单」时。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 少于 3 个查询项：仅「查询」，不设重置（组件自动隐藏重置按钮）。
+- 3 个及以上：显示「查询」+「重置」；与表格同卡片时 `isCard=false`。
+- 已配置 `:tableRefs` + `tableRefsName` 联动表格时：**勿**写 `@searchDate` / `@resetDate` 及 `onSearch` / `onReset`，由组件自动触发查询；仅 Tab 切换、中台 `hideSearch` 同步 `queryParams`、`beforeSearch` 校验等特殊场景才绑定事件。
+- **勿**显式写 `:toggleNum`（默认 `5`）；仅产品明确要求非默认折叠阈值时设置。
+- 规范平台预览无接口时可 `:load="false"`；**业务页面须配置 `request.url` 接接口**。
+
+## API（ylSearchForm）
+
+> 标签：`<yl-search-form>` / `ylSearchForm`；须在入口 `import ylSearchForm from 'zqyl-component-base/lib/ylSearchForm'` + `Vue.component('ylSearchForm', ylSearchForm)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+- `searchParmas: Object` 查询配置（见下方结构）
+- `load: boolean` 是否挂载后自动请求（默认 `true`；纯展示/预览用 `false`）
+- `isCard: boolean` 是否使用 `el-card` 包裹（默认 `true`；与表格同卡片用 `false`）
+- `platformType: String` 平台类型（`yx` 前台 / `yxManager` 后台 / `mps` 中台）
+- `tableRefs` / `tableRefsName` 关联表格 `$refs` 与 ref 名（有接口联动时传入）
+- `toggleNum: number` 超过几项后折叠（默认 `5`）
+- `isShowToggle: boolean` 是否显示展开/收起（默认 `true`）
+- `beforeSearch: Function` 点击「查询」前回调，返回 `false` 拦截本次查询（无入参，需自行读取 `searchParmas.request.options`）
+
+### 插槽
+- `rightBtn` 查询区右侧额外操作按钮（与「查询/重置」分列展示）
+- `searchBtn` 自定义查询按钮区域（替换默认查询/重置/展开）
+- `search-custom` 完全自定义查询表单项（`searchParmas.custom: true`）
+
+### searchParmas 结构
+- `request` 列表请求配置（见下表）
+- `parmas[]` 表单项配置：`title`、`type`、`prop`、`placeholder`、`data`（select）、`formAttr`、`tooltip` 等
+- 表单项 `type` 可选：`text` / `select` / `date` / `daterange` / `datetimerange` / `cascader` / `mobile` 等
+- `routerPush: boolean` 是否将查询参数同步到路由
+
+### 表单项 tooltip（`parmas[].tooltip`）
+- 在某一查询项上配置 `tooltip: string` 后，该项标签文字后会显示提示图标（`el-icon-warning-outline`）。
+- 鼠标悬停在图标上时，通过 `el-tooltip` 展示 `tooltip` 中的详细释义；未配置则不显示图标。
+- 有 `tooltip` 时标签展示 `title` 前 7 个字符 + 图标（组件内置截断）。
+
+### request 配置项（`searchParmas.request`）
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `url` | String | - | 是 | 请求接口地址 |
+| `options` | Object | - | 是 | 请求参数对象（查询字段默认值） |
+| `expand` | Object | - | 否 | 扩展参数对象 |
+| `type` | String | axios | 否 | 请求类型；GET 用默认 `axios`，POST 用 `axiosJson` |
+| `method` | String | get | 否 | 请求方法；GET 用默认 `get`，POST 用 `post` |
+| `assign` | String | - | 否 | 列表数据在响应体中的字段路径 |
+
+> **POST 列表接口**：`request.type = 'axiosJson'`，`request.method = 'post'`（勿沿用默认的 `axios` + `get`）。
+
+### 事件
+- `searchDate` 点击查询时抛出当前查询参数
+- `resetDate` 点击重置时抛出重置后的参数
+- `getFullData` / `changeListTotal` 启用接口请求时的列表数据回调
+
+### 方法（ref）
+- `getList(pageData?)` 按当前条件请求列表
+- `reset()` 重置表单并触发查询
+- `searchBtn()` 触发查询
+
+### 规范要点
+- 查询项 &lt; 3：只显示查询按钮；≥ 3：显示查询 + 重置。
+- 查询按钮与条件左对齐；输入框宽度、项间距为设计固定值。
+- 条件较少时可与表格同卡片（`isCard=false`）。
+- `parmas[].tooltip`：标签后出现提示图标，悬停图标展示详细释义。
+- `beforeSearch` + `rightBtn`：查询前校验拦截；查询区右侧扩展操作按钮。
+- **生成默认**：已写 `:tableRefs` + `tableRefsName` 时省略 `@searchDate` / `@resetDate` 与对应 methods；省略 `:toggleNum`（用默认 `5`）。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（与表格同卡片、少于 3 项）
+```vue
+<yl-search-form
+  ref="ylSearchForm"
+  :platformType="'yx'"
+  :searchParmas="searchParmas"
+  :tableRefs="$refs"
+  tableRefsName="ylTableSimple"
+  :load="false"
+  :isCard="false"
+/>
+
+// data.searchParmas 示例
+searchParmas: {
+  routerPush: false,
+  request: {
+    url: '', // 有接口时填写
+    type: 'axios',   // GET 默认；POST 改为 axiosJson
+    method: 'get',   // GET 默认；POST 改为 post
+    options: { keyword: '', status: '' },
+  },
+  parmas: [
+    { title: '关键字', type: 'text', prop: 'keyword', placeholder: '请输入' },
+    { title: '状态', type: 'select', prop: 'status', placeholder: '请选择',
+      data: [] }, // 从字典/接口加载
+  ],
+},
+```
+
+### 三项及以上（含重置、联动表格）
+```vue
+<yl-search-form
+  ref="ylSearchForm"
+  :platformType="'yx'"
+  :searchParmas="searchParmas"
+  :tableRefs="$refs"
+  tableRefsName="ylTableSimple"
+  :isCard="false"
+/>
+<yl-table-simple ref="ylTableSimple" :data="tableData" :search="$refs" searchRefsName="ylSearchForm" />
+```
+
+> 已配置 `tableRefs` 联动时**勿**写 `@searchDate` / `@resetDate`；重置按钮由组件按查询项数量自动控制。
+
+### POST 列表接口（request 配置）
+```js
+request: {
+  url: INTERFACE.list,
+  type: 'axiosJson',
+  method: 'post',
+  options: { keyword: '', status: '' },
+},
+```
+
+### 表单项 tooltip（标签后提示图标）
+```js
+// parmas 某项配置 tooltip 即可
+{
+  title: '融资编号',
+  type: 'text',
+  prop: 'applyNo',
+  placeholder: '请输入融资编号',
+  tooltip: '支持按业务流水号精确查询；可与企业名称组合筛选。',
+},
+```
+
+### 搜索前拦截 + 右侧按钮（beforeSearch / rightBtn）
+```vue
+<yl-search-form
+  ref="ylSearchForm"
+  :platformType="'yx'"
+  :searchParmas="searchParmas"
+  :beforeSearch="beforeSearch"
+  :load="false"
+  @searchDate="handleSearch"
+>
+  <template slot="rightBtn">
+    <el-button size="small">取消</el-button>
+    <el-button size="small" type="primary">操作按钮</el-button>
+  </template>
+</yl-search-form>
+```
+
+```js
+// methods
+beforeSearch() {
+  const { keyword } = this.searchParmas.request.options;
+  if (!keyword || !String(keyword).trim()) {
+    this.$message.warning('请输入关键词');
+    return false; // 拦截查询
+  }
+  return true;
+},
+handleSearch(params) {
+  console.log('搜索参数', params);
+},
+```
+
+### 条件较多（展开/收起，使用默认 toggleNum）
+```vue
+<yl-search-form
+  ref="ylSearchForm"
+  :platformType="'yx'"
+  :searchParmas="searchParmas"
+  :tableRefs="$refs"
+  tableRefsName="ylTableSimple"
+  :isCard="true"
+/>
+```
+
+> 折叠阈值默认 `toggleNum=5`，**勿**显式书写，除非产品明确要求其他值。
+
+## 注意事项
+- 预览/文档页请设置 `:load="false"`，避免无 `request.url` 时仍触发默认请求逻辑。
+- `parmas` 为组件内历史拼写，勿写成 `params`。
+- 重置按钮由 `parmas.length > 2` 控制，即至少 3 个查询项才显示。
+- select 选项默认字段：`name` / `code`，可通过 `label` / `code` 属性覆盖。
+- POST 列表：`searchParmas.request.type = 'axiosJson'` 且 `method = 'post'`（默认 `axios` + `get` 仅适用于 GET）。
+- `tooltip`：标签后出现提示图标，悬停图标显示详细释义；勿将 placeholder 当作 tooltip 文案。
+- `beforeSearch` 无入参，返回 `false` 阻止查询；右侧按钮使用 `slot="rightBtn"`，事件名为 `searchDate`（非 searchData）。
+- 已配置 `tableRefs` 联动表格时：**勿**生成 `@searchDate` / `@resetDate` 与 `onSearch` / `onReset`；**勿**写 `:toggleNum`（默认 5）。

package/src/zqyl-skills/front/components/xiaoma-zqyl-select-tree-front/SKILL.md

@@ -0,0 +1,161 @@
+---
+name: xiaoma-zqyl-select-tree-front
+description: 前台下拉树选择（单选/多选、Tag 折叠、父子勾选策略、自定义过滤）的 Vue2 实现规范（ylSelectTree）。在用户提及 ylSelectTree、yl-select-tree、下拉树、树形选择、部门选择、角色树、组织树、checkStrictly、collapseTags，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the select-tree (ylSelectTree) component on a ZQYL front page.
+---
+
+# 下拉树选择（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`selectTree`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 mock）
+
+- **禁止**在生成业务页面中填充 mock、演示、假数据或静态业务行（如手写 `loadData: [{ companyName: 'xxx' }]`、`reqData` 示例值、`mounted` 里写死 `total` 等）。
+- 列表/表格：`tableData.loadData` 保持 `[]`，数据由 `ylTableSimple` / `ylMpsTable` 通过 `searchParmas.request` / `queryListUrl` **调接口**获取；`request.url` / `queryListUrl` 写项目已有 `INTERFACE.xxx`，未知时留 `''` 并注释 `// TODO: 补充接口常量`。
+- 查询区：`searchParmas.request` 配置 `url`、`type`、`method`、`options`；有 `url` 时 `:load="true"`（或省略，默认加载），由组件触发查询。
+- 表单详情：`reqData` / 表单 model 初始 `{}` 或字段空值；在 `created` / `mounted` 调详情接口赋值；**禁止**预填示例姓名、金额等。
+- 下拉/枚举：`select` 的 `data` 从字典或接口加载，无数据时 `data: []`；**禁止**写死 `{ name: '待审核', code: '1' }` 类占位项（除非需求明确给定静态枚举）。
+- 统计区 `ylDataCensus`：`:list` 由接口或 `computed` 赋值，**禁止**手写示例金额/数量。
+- 动态行表格：`detailRows` 等初始 `[]`，由接口回显或用户操作增删。
+- 本 skill「示例」章节的静态数据**仅供理解组件 API**；生成业务页面时**不得**照搬进 `data()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skills 并按规则产出代码：
+- 表单/查询区需要从**树形数据**中选择一项或多项（部门、角色、组织、地区等）。
+- 用户提到「下拉树」、「树形选择」、「ylSelectTree」、「yl-select-tree」。
+- 多选树需 Tag 展示、折叠（+N）、或父子勾选策略（`checkStrictly`）。
+
+不适用：
+- 选项扁平、无层级 → 优先 `el-select` 或远程搜索下拉。
+- 仅需级联省市区 → 优先 `el-cascader` 或 `ylFormEditor` 的 `type: region`。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 单选：`multiple: false`（默认），`v-model` 绑定标量 id。
+- 多选：`multiple: true`，`v-model` 绑定 id 数组；需折叠 Tag 时加 `collapse-tags`。
+- 业务字段非默认 `label`/`id`：配置 `props` 与 `value-key`。
+- 父子独立勾选：`check-strictly: true`；联动勾选保持默认 `false`。
+- 大数据树：`default-expand-all: false`，或后端过滤 / 懒加载。
+
+## API（ylSelectTree）
+
+> 标签：`<yl-select-tree>` / `ylSelectTree`；须在入口 `import ylSelectTree from 'zqyl-component-base/lib/ylSelectTree'` + `Vue.component('ylSelectTree', ylSelectTree)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `value` / `v-model` | String \| Number \| Array | 单选 `''` / 多选 `[]` | 选中值；单选标量，多选 id 数组 |
+| `data` | Array | `[]` | 树数据 |
+| `multiple` | Boolean | `false` | 是否多选（展示复选框） |
+| `collapseTags` | Boolean | `false` | 多选时折叠为 1 个 Tag +「+N」 |
+| `props` | Object | `{ children: 'children', label: 'label' }` | 透传 `el-tree` 字段映射 |
+| `valueKey` | String | `'id'` | 节点唯一标识字段名 |
+| `placeholder` | String | `'请选择'` | 占位文案 |
+| `disabled` | Boolean | `false` | 是否禁用 |
+| `clearable` | Boolean | `false` | 是否可清空 |
+| `checkStrictly` | Boolean | `false` | 多选时父子是否不关联（`true` 为独立勾选） |
+| `defaultExpandAll` | Boolean | `true` | 是否默认展开全部节点 |
+| `filterNodeMethod` | Function | `null` | 自定义过滤，透传 `el-tree` |
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| `input` | 单选：节点值；多选：值数组 | `v-model` 同步 |
+| `change` | 单选：`(value, data, node)`；多选：`(values)` | 选中变化 |
+| `clear` | — | 清空后触发 |
+
+### Methods（ref）
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setValue(val)` | 外部设置选中值（触发 `input`） |
+| `getCheckedNodes()` | 多选模式下获取已勾选节点 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 单选（自定义 label 字段）
+```vue
+<template>
+  <yl-select-tree
+    v-model="deptId"
+    :data="treeData"
+    :props="{ label: 'name', children: 'children' }"
+    value-key="id"
+    placeholder="请选择部门"
+    clearable
+    @change="onDeptChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deptId: '',
+      treeData: [
+        { id: 1, name: '总部', children: [{ id: 11, name: '研发部' }] },
+      ],
+    };
+  },
+  methods: {
+    onDeptChange(value, data) {
+      // 单选：value 为 id，data 为节点数据
+    },
+  },
+};
+</script>
+```
+
+### 多选 + Tag 折叠
+```vue
+<yl-select-tree
+  v-model="roleIds"
+  :data="treeData"
+  :props="{ label: 'name', children: 'children' }"
+  value-key="id"
+  multiple
+  collapse-tags
+  clearable
+  placeholder="请选择角色"
+/>
+```
+
+### 父子不联动（checkStrictly）
+```vue
+<yl-select-tree
+  v-model="checkedIds"
+  :data="treeData"
+  multiple
+  :check-strictly="true"
+  placeholder="父子独立勾选"
+/>
+```
+
+## 注意事项
+- **`props` 与 `valueKey`** 必须与业务树数据字段一致；`label` 映射为 `name` 时，`filterNodeMethod` 内也应读 `data.name`。
+- 单选 `v-model` 为标量，多选为 **id 数组**；勿混用类型。
+- 多选 Tag 移除会通过 tree 勾选状态同步，无需手动 splice 数组。
+- 大数据量树建议 `defaultExpandAll: false` 或后端过滤，避免一次展开全部节点卡顿。
+- 与 `ylFormEditor` 组合时，树形字段可用 `type: 'slot'` 插槽内嵌本组件。