Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
HHPW
/
clearticket_ota
2
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Branch: master
Branches Tags
clearticket_...
/
docs
/
superpowers
/
specs
/
2026-10-02-self-manage-menu-design.md

2026-10-02-self-manage-menu-design.md 18 KB
Permalink Lịch sử Raw

设计：自营管理菜单（票种 / 景点 / 自营分销商 / 销售日历）

  • 日期：2026-10-02
  • 仓库：E:\Data\Code\tourism\ticket-ota（clear-admin，Vue 2.5 + Element UI 2.15.3）
  • 需求来源（m00042）：「新增菜单 一级菜单 自营管理（放在产品中心下面） 二级菜单 票种管理 景点管理 自营分销商管理 用户端接口」
  • 接口依据：自营售票管理端接口.md（仓库根，593 行，下文简称「管理端文档」）
  • 范围外：微信小程序/公众号 C 端流程（用户明确「微信小程序的不用管」）；管理端统计/报表（文档第 7 节明确沿用现有数据中心页面，不新增菜单）；现有订单模块（自营订单沿用）

1. 背景与现状

  • 现有菜单由 src/router/index.js 的 routerMap 声明，登录后 src/permission.js 守卫触发 GetInfo → GenerateRoutes（src/store/modules/permission.js）按后台 resourceList 的 code 过滤，addRoutes 注入。
  • 菜单图标用 iconfont（static/font/iconfont.css，index.html 引入），meta.icon → 类名 icon-{name}；可用字形含 icon-ticket-manage（门票图标），直接复用，零图标改动。
  • 页面惯例：.form-wrap > .searchBox(el-form inline + .btn-wrap) + .tableBox(el-table stripe + 操作列 fixed right) + el-pagination；弹窗拆独立组件（参考 src/views/goodsCenter/priceList/EditDialog.vue、KSNewDialog.vue）。
  • 请求层：src/utils/request.js axios 实例，请求头 SaToken: localStorage.otaToken，code!==200 弹 Message，401/403 登出。管理端文档确认新接口走同一体系（/tenant 前缀 + 现有 satoken），直接复用，无需新实例。
  • 图片上传现成机制：el-upload picture-card + window.config.uploadUrl || 'https://pres.cleartv.cn/upload'（见 src/views/goodsCenter/priceList/KSNewDialog.vue:699-702）。
  • 线下票种列表 /tenant/otaTicketType 已有封装：src/api/ticketType.js 的 getTicketTypeList。

权限过滤的关键坑（决定菜单怎么声明）

src/store/modules/permission.js:19-25 子路由过滤逻辑：

route.children = route.children.filter(i => {
  if (i.meta && i.meta.permissionName) {
    return permissionCodes.find((code) => i.meta.permissionName.indexOf(`:${code}`) > -1)
  } else {
    return true
  }
})
  • 子路由 meta.permissionName 一旦有值，后台 code 必须以 :code 形式出现在其中才显示；写 'all' 也永远匹配不上 → 子菜单被隐藏。
  • 父级显示条件（src/router/index.js:281-296 聚合后）：meta.permissionName 数组含 'all' 则恒显示。

结论：4 个新子路由均不写 permissionName → 聚合后父级 自营管理 的 permissionName 数组全为 'all' → 菜单全员可见。后续若要按角色控制，再补 permissionName + 后端配置 resourceList code。

2. 范围（YAGNI）

做：

  1. 一级菜单「自营管理」（产品中心之后），二级 4 个页面：票种管理、景点管理、自营分销商管理、销售日历（销售日历是独立第 4 个菜单，用户已确认）。
  2. src/api/selfManage.js 新 API 封装。
  3. src/const.js 追加本模块常量。

不做：

  • 不引富文本库（用户已确认：图文描述/购买协议用 textarea 纯文本，图片用 el-upload）。
  • 不做统计/报表新页面（沿用数据中心现有页）。
  • 不改登录、权限过滤代码、request 拦截器。
  • 不碰工作区既有未提交改动（src/views/goodsCenter/priceList/EditDialog.vue、src/views/queryReport/orderList.vue）。
  • 零新增 npm 依赖（webpack 3/babel 6 老构建不冒险）。

3. 路由（src/router/index.js）

routerMap 中「产品中心」块之后、「数据中心」块之前插入：

{
  path: '/selfManage',
  component: Layout,
  name: '自营管理',
  meta: { title: '自营管理', icon: 'ticket-manage' },
  redirect: 'noredirect',
  alwaysShow: true,
  children: [
    { path: 'ticketType', name: 'selfTicketType', component: () => import('@/views/selfManage/ticketType'), meta: { title: '票种管理' } },
    { path: 'scenic', name: 'selfScenic', component: () => import('@/views/selfManage/scenic'), meta: { title: '景点管理' } },
    { path: 'thirdParty', name: 'selfThirdParty', component: () => import('@/views/selfManage/thirdParty'), meta: { title: '自营分销商管理' } },
    { path: 'saleCalendar', name: 'selfSaleCalendar', component: () => import('@/views/selfManage/saleCalendar'), meta: { title: '销售日历' } }
  ]
}

注意：name 用英文（现有中文 name 与英文混用，新模块统一英文，避免路由跳转歧义）；子路由不写 permissionName（见第 1 节）。

4. API 层（src/api/selfManage.js，新文件）

统一 http.post(url, { data: params }) 风格。函数清单（URL 均出自管理端文档）：

函数 方法+URL 说明
getSelfScenicList POST /tenant/selfScenic 筛选 name(模糊)/isOpen；分页 records/total
addSelfScenic POST /tenant/selfScenic/add
updateSelfScenic POST /tenant/selfScenic/update 多带 id
deleteSelfScenic POST /tenant/selfScenic/delete data.idList
getSelfTicketTypeList POST /tenant/selfTicketType 筛选 category/name/isSale；分页
getSelfTicketTypeDetail POST /tenant/selfTicketType/{id} 路径拼 id，body data 空对象
addSelfTicketType POST /tenant/selfTicketType/add
updateSelfTicketType POST /tenant/selfTicketType/update 必填 id；ticketTypeId/category 不可改
deleteSelfTicketType POST /tenant/selfTicketType/delete data.idList
getSaleCalendarList POST /tenant/selfTicketSaleCalendar/list 入参 selfTicketTypeId；返回数组（非分页）
saveSaleCalendar POST /tenant/selfTicketSaleCalendar/add data 是数组，全量覆盖；空数组禁止调用
deleteSaleCalendar POST /tenant/selfTicketSaleCalendar/delete data.idList = 规则 id
getUserThirdPartyList POST /tenant/userThirdParty 筛选 name(模糊)/contactName/phone/remark/status；分页
addUserThirdParty POST /tenant/userThirdParty/add
updateUserThirdParty POST /tenant/userThirdParty/update id + 可选字段；name/loginName 不可改
bindUserThirdParty POST /tenant/userThirdParty/bind userThirdPartyIdList + selfTicketTypeIdList（[] = 清空）
rechargeUserThirdParty POST /tenant/userThirdParty/recharge userThirdPartyId + amount>0
decreaseUserThirdParty POST /tenant/userThirdParty/decrease 同充值
deleteUserThirdParty POST /tenant/userThirdParty/delete data.idList；余额>0/有未完结订单会失败
getThirdPartyBalanceLog POST /tenant/thirdPartyBalanceLog 筛选 userThirdPartyId/type/tradeTimeStart/tradeTimeEnd；分页

线下票种下拉复用 src/api/ticketType.js 的 getTicketTypeList（POST /tenant/otaTicketType，传 {} 拉全量或按 name 筛），不重复封装。

5. 常量（src/const.js 追加）

SELF_TICKET_CATEGORY: ticket 景区门票 / batch 场次售票 / member 年卡次卡
SELF_REAL_NAME_TYPE: 0 不限 / 1 一证一人 / 2 一证多人
SELF_CHANNELS: wx 微信公众号 / wx-mini 微信小程序 / third-party 自营分销商
SELF_WEEKDAYS: 1 周日 … 7 周六（文档约定 1=周日）
SELF_BALANCE_LOG_TYPE: 1 充值 / 2 人工扣款 / 3 消费 / 4 退款
SELF_USE_DATE_TYPE: 1 日历票 / 2 期票
SELF_MEMBER_USE_DATE_TYPE: 1 按天 / 2 固定日期
SELF_MEMBER_ACTIVE_TYPE: 1 购买即激活 / 2 首次使用激活

6. 页面设计

6.1 票种管理 src/views/selfManage/ticketType/index.vue + FormDialog.vue

列表（POST /tenant/selfTicketType）：

  • 搜索：大类（三选）、名称（模糊）、是否在售（1/0/全部）；按钮：重置/搜索/新增/批量删除
  • 表格列：名称 / 大类(tag) / 线下票种id(ticketTypeId) / 底价(price) / 划线价(highPrice) / 在售(tag) / 实名(tag 不限/一证一人/一证多人) / 可售日期(saleDateStart~saleDateEnd) / 渠道(tags) / 绑定景点(scenicList 名称拼接) / 可退 / 创建时间
  • 操作列（fixed right）：编辑、销售日历（$router.push({path:'/selfManage/saleCalendar', query:{id}})）、删除
  • 删除：单条二次确认；顶部批量删除（selection 列）

表单弹窗 FormDialog（新增/编辑共用，show(row?) 模式）：

  • 新增：选线下票种（getTicketTypeList 下拉，显示 name，提交 ticketTypeId + category）；已创建过的后端报「票种已存在」，前端把已创建票种（getSelfTicketTypeList 全量）置 disabled 并提示
  • 选定后 category 锁定为只读展示（创建后不可改）
  • 公共必填：name、price（底价，数字 >0）、realNameType、saleDateStart/saleDateEnd（date 选择器 yyyy-MM-dd）、saleTimeStart/saleTimeEnd（time 选择器 HH:mm:ss，默认 00:00:00~23:59:59）
  • 公共选填：isSale（switch 默认 1）、highPrice、saleMaxPreDays、saleMinPreDays、saleMinNums、saleMaxNums、dayStock、totalStock（0 不限）、isAllowCancel（switch 默认 1）、isAgreeProtocol（switch 默认 0）+ buyProtocol（textarea 纯文本）
  • 渠道：el-checkbox-group 勾 wx/wx-mini/third-party（要给分销商卖必须勾 third-party，文案提示）
  • 景点：el-select multiple，数据源 getSelfScenicList 全量，提交 scenicIds 数组
  • 按大类条件块：
    • ticket：useDays（数字）、useDateType（1 日历票 / 2 期票）；期票时 show useDateStart/useDateEnd
    • member：memberUseDateType（1 按天 / 2 固定日期）；按天 show useDays；固定日期 show useDateStart/useDateEnd；memberActiveType（1/2）
    • batch：展示所选线下票种的 batchConfigList（只读表格：场次名称/时段/最大数量），说明「场次来自线下票种，不在此维护」
  • 编辑：getSelfTicketTypeDetail 回填；ticketTypeId/category 只读；景点、渠道整表覆盖提交（清空传空数组）
  • 提交前前端校验：必填项、价格/库存数字、日期区间合法

6.2 景点管理 src/views/selfManage/scenic/index.vue + FormDialog.vue

列表（POST /tenant/selfScenic）：

  • 搜索：名称（模糊）、是否开放（1/0/全部）；按钮：重置/搜索/新增/批量删除
  • 表格列：名称 / 地址 / 开放时间(openingTime) / 轮播图(picture 首图缩略 + 张数) / 开放状态(tag 开放/关闭) / 公告(publicAnnouncement 截断，title 悬浮全文) / 创建时间
  • 操作列：编辑（用列表行数据回填，无详情接口）、删除
  • 删除二次确认提示：「已绑到票种的景点删除后，C 端景点列表可能不再展示该景点」

表单弹窗：

  • name 必填、isOpen（radio 1/0 必填）、address、openingTime（文本，如 08:00~18:00）
  • picture：el-upload picture-card，:limit="6"，action = window.config.uploadUrl || 'https://pres.cleartv.cn/upload'，上传成功取返回 URL（与 KSNewDialog 同款 on-change/on-remove 处理，失败提示重试），保存为英文逗号串；编辑时按逗号拆成 fileList 回填
  • publicAnnouncement：el-input type=textarea
  • scenicDescription：el-input type=textarea rows≈8（纯文本，不做富文本）
  • 编辑提交 = update（多带 id）

6.3 自营分销商管理 src/views/selfManage/thirdParty/index.vue + 4 个子弹窗

列表（POST /tenant/userThirdParty）：

  • 搜索：名称（模糊）、联系人（精确）、电话（精确）、状态（1/0/全部）；按钮：重置/搜索/新增/批量授权票种/批量删除
  • 表格列：名称 / 登录名(loginName) / 联系人 / 电话 / 余额(balance，两位小数) / 状态(tag 正常/禁用红色) / 已授权票种(selfTicketTypeList 数量 + 名称拼接，title 悬浮) / 最近登录(lastLoginTime) / 创建时间 / 备注
  • 行操作列：编辑、充值、扣款、票种授权、流水、删除
  • 顶部「批量授权票种」：表格 selection 多选分销商 → BindDialog（userThirdPartyIdList 多选）
  • 删除：前端先拦 balance > 0（提示先扣款）；未完结订单前端不可见，靠后端报错弹 Message

子弹窗：

  • FormDialog（新增/编辑）
    • 新增：name 必填、loginName 必填、password 必填 + 前端校验（≥8 位且含大写、小写字母、数字三者中的字母大小写都有 + 数字，正则 /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/）、contactName、phone、remark；文案提示「新建余额为 0，创建后需单独授权票种」
    • 编辑：name/loginName 只读展示；contactName/phone/remark 可改；password 选填（空 = 不改，填了同样校验）；status（switch 正常/禁用，文案「禁用会立即踢下线」，切到禁用时二次确认）
  • MoneyDialog（充值/扣款共用，mode 参数区分）
    • amount 必填 >0 最小 0.01；扣款时显示「当前余额 X」并前端拦超余额；提交 recharge/decrease
  • BindDialog（票种授权，支持单行/多选）
    • 票种 el-select multiple（getSelfTicketTypeList 全量，label 用 name）
    • 文案：「提交将覆盖所选分销商的原有授权；被授权票种需勾 third-party 渠道分销商端才可见」
    • 允许清空：选 0 个票种也可提交（selfTicketTypeIdList: [] = 清空授权），用 confirm 二次确认
  • BalanceLogDialog（流水，只读）
    • 打开时 userThirdPartyId 固定为该行分销商
    • 搜索：type（1充值/2扣款/3消费/4退款/全部）、交易时间范围（datetime，转 yyyy-MM-dd HH:mm:ss）
    • 表格：类型(tag) / 发生额(amount) / 变动前(beforeBalance) / 变动后(afterBalance) / 关联订单(orderId) / 操作人(operatorAdminId) / 交易时间(tradeTime)；el-pagination

6.4 销售日历 src/views/selfManage/saleCalendar/index.vue（独立菜单）

  • 顶部工具条：自营票种下拉（getSelfTicketTypeList 全量，显示 name；支持 this.$route.query.id 预选并自动加载）+ 提示文案「规则覆盖该票种某天价格/是否可售；C 端列表显示底价，详情/下单走日历」
  • 规则表（getSaleCalendarList，按 priority 升序展示）：
    • 列：优先级(priority，带 ↑↓ 两按钮调整顺序) / 价格(price) / 可售(isSale tag) / 规则内容（特定日期：specificDate 原文；周期：startDate~endDate + 周几中文名）/ 删除（单条，二次确认）
  • 新增规则（行内小表单或弹窗，二选一实现为弹窗 CalendarRuleDialog）：
    • price 必填 >0、isSale 必填（1/0）
    • 类型 radio 二选一：
    • 特定日期：可录入多个日期（el-date-picker type=date + 动态加行/或逗号分隔输入），提交拼 specificDate 逗号串
    • 周期性：startDate/endDate 必填（date）+ weekdays el-checkbox-group 7 项（1 周日…7 周六，至少勾 1 个），提交拼逗号串
    • 新规则追加到列表尾部（priority 按当前末尾 +1）
  • 保存（全量）：把整表按当前顺序重排 priority = 1..n，data 以数组提交 saveSaleCalendar（每条含 selfTicketTypeId/price/isSale/priority + specificDate 或 startDate/endDate/weekdays；已有规则保留原 id）
  • 清空保护：表内规则为 0 条时，「保存」按钮改为「恢复/清空」逻辑——若之前有规则且用户全部删掉，调用 deleteSaleCalendar（data.idList = 全部规则 id），绝不用空数组调 /add（后端取第 0 条会报错）；无任何 id 可删时禁用保存
  • 未选票种时表格区显示空态提示

7. 错误处理与交互约定

  • 全部走 src/utils/request.js 统一 Message 提示与 401/403 登出，页面内不重复弹错
  • 二次确认：所有删除/清空授权/禁用分销商用 this.$confirm
  • 分页：{ pageNum: 1, pageSize: 10 }，res.data.records / res.data.total，el-pagination :current-page.sync + @current-change 重载（与现有页一致）
  • 时间显示统一 parseTime（src/utils/index.js）
  • 金额展示统一两位小数

8. 文件清单（新增/修改）

新增：

  • src/api/selfManage.js
  • src/views/selfManage/ticketType/index.vue、src/views/selfManage/ticketType/FormDialog.vue
  • src/views/selfManage/scenic/index.vue、src/views/selfManage/scenic/FormDialog.vue
  • src/views/selfManage/thirdParty/index.vue、FormDialog.vue、MoneyDialog.vue、BindDialog.vue、BalanceLogDialog.vue
  • src/views/selfManage/saleCalendar/index.vue、CalendarRuleDialog.vue

修改：

  • src/router/index.js（routerMap 插入自营管理块）
  • src/const.js（追加常量）

不改：permission.js、request.js、login、layout、既有业务页。

9. 验收标准

  1. npm run dev 启动后侧边栏出现「自营管理」（产品中心之后），展开有 4 个二级菜单；任意已登录账号可见
  2. 景点：新增（含 ≤6 张图上传、逗号串保存）→ 列表可见 → 编辑回填正确 → 删除（含已绑票种提示）
  3. 票种：选线下票种建自营票种（三类字段块均正确）→ 重复选同一线下票种被拦 → 编辑回填（含渠道/景点整表覆盖）→ 从列表跳销售日历带参
  4. 销售日历：选票种加载规则 → 增/删/调序 → 保存后 list 核对（priority 重排正确）→ 删空规则走 delete 不走 add
  5. 分销商：新增（密码复杂度校验）→ 充值/扣款（超余额拦截）→ 授权覆盖生效 → 流水只读可见 → 禁用踢下线确认 → 余额>0 删除被拦
  6. 所有接口失败时弹后端 msg，无白屏、无未捕获 Promise

10. 风险与备注

  • 接口均为文档约定，后端如未部署 /tenant/selfScenic 等，页面表现为 Message 报错（开发期需先与后端确认环境已联调，见管理端文档联调顺序）
  • el-upload 返回结构沿用 KSNewDialog 的处理方式实现，联调时以实际 upload 响应字段为准
  • 菜单全员可见是临时决策（用户确认「先用 all」）；后续上权限时只需给 4 个子路由补 permissionName 并在后端 resourceList 配 code