CpTemplateGroup 查询模板组

对齐旧版报表页「模板维护 / 选择模板 / 另存模板」三件套（/Common/*Programme 接口语义）：把页面当前查询条件、列配置等任意状态存为命名模板，下拉分组展示我的模板 / 公共模板，一键套用。权限沿用旧逻辑：admin 可改删所有模板，其他人只能改删自己创建的。

数据接入

组件包不绑定后端。宿主应用入口注入一次即可全站复用：

import { setTemplateContext } from "@cargoplus/ui";

setTemplateContext({
  api: {
    query: async (type) => {
      /* POST /Common/QueryProgrammeList → CpTemplateItem[] */
    },
    save: async (type, item) => {
      /* POST /Common/SaveProgramme；item.value 不传时保留原 programme_value */
    },
    remove: async (type, ids) => {
      /* POST /Common/DeleteProgramme */
    },
  },
  user: { userName: top.User.UserName, isAdmin: top.User.UserName === "admin" },
});

基础用法

基础用法

改动条件后「另存模板」，再从「选择模板」下拉套用；「模板维护」可改名、改公开状态、删除。demo 后端为 localStorage 模拟。

<template>
  <div class="demo-col">
    <CpTemplateGroup
      template-type="DemoBasic"
      :get-state="() => ({ ...form })"
      @apply="onApply"
    />

    <el-form inline label-width="70px" class="demo-row" @submit.prevent>
      <el-form-item label="客户名称">
        <el-input v-model="form.customer" style="width: 180px" clearable />
      </el-form-item>
      <el-form-item label="分公司">
        <el-input v-model="form.office" style="width: 120px" clearable />
      </el-form-item>
      <el-form-item label="进出口">
        <el-select v-model="form.io" style="width: 100px">
          <el-option label="全部" value="" />
          <el-option label="出口" value="E" />
          <el-option label="进口" value="I" />
        </el-select>
      </el-form-item>
    </el-form>

    <span class="demo-value">{{ msg }}</span>
  </div>
</template>

<script setup lang="ts">
/**
 * CpTemplateGroup 基础用法：
 * 改动上面的条件 → 另存模板 → 从「选择模板」下拉套用回来。
 * demo 后端为 localStorage 模拟（template-mock.ts），预置一条他人的公共模板。
 */
import { reactive, ref } from "vue";
import CpTemplateGroup from "../../src/components/CpTemplateGroup.vue";
import type { CpTemplateItem } from "../../src/template";
import "./template-mock";

const form = reactive({ customer: "", office: "", io: "" });
const msg = ref("先填条件 → 另存模板，再从下拉选择套用");

function onApply(value: Record<string, any>, item: CpTemplateItem) {
  Object.assign(form, value);
  msg.value = `已套用模板「${item.name}」`;
}
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
template-type *	模板类型（对应旧版 Const.TemplateType.*），同类型模板全站共享	string	必填
get-state	另存模板时取页面当前状态（条件 + 列配置等）；不传则隐藏「另存模板」	Function	—
api	覆盖全局 setTemplateContext 的接口	CpTemplateApi	—
user	覆盖全局 setTemplateContext 的当前用户	CpTemplateUser	—

事件 Events

事件	说明	回调参数
@apply	选中模板后返回其内容，由页面回填条件 / 列	(Record)

方法 Expose

方法（ref 调用）	说明
reload	手动刷新模板列表

API

属性 Props

属性	说明	类型	默认值
v-model	—	boolean	false
template-type *	模板类型（对应旧版 Const.TemplateType.*）	string	必填
api	覆盖全局 setTemplateContext 的接口	CpTemplateApi	—
user	覆盖全局 setTemplateContext 的当前用户	CpTemplateUser	—

事件 Events

事件	说明	回调参数
@apply	点击「应用」：返回模板内容与条目	(Record)
@changed	列表发生增删改（父级可据此刷新下拉）	—