JPwise-Web 开发模板 - Claude Code

列表页面模板

Vue 文件结构

vue

<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <div class="JNPF-common-layout-main JNPF-flex-main">
        
        <!-- 搜索区域 -->
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="query.$LK$NAME" placeholder="请输入名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        
        <!-- 操作栏 -->
        <div class="JNPF-common-head">
          <el-button type="primary" icon="el-icon-plus" @click="openPage">
            新增
          </el-button>
          <div class="JNPF-common-head-right">
            <el-input v-model="quickQuery.value" placeholder="快速搜索" clearable style="width: 300px">
              <i class="el-icon-search el-input__icon" slot="suffix" @click="search"></i>
            </el-input>
          </div>
        </div>
        
        <!-- 表格 -->
        <JNPF-table :data="list" row-key="ID">
          <el-table-column prop="NAME" label="名称" min-width="150" :show-overflow-tooltip="true" />
          <el-table-column prop="CREATEDATE" label="创建时间" width="120" :dateFormat="'yyyy-MM-dd'" :formatter="formatter" />
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="openPage({ defVal: { ID: scope.row.ID } })">编辑</el-button>
              <el-button type="text" @click="deleteRow(scope.row.ID)" class="JNPF-table-delBtn">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        
        <!-- 分页 -->
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="InitPage" />
      </div>
    </div>
    <form v-if="formVisible" ref="Form" @refresh="refresh" />
  </div>
</template>

<script>
import listMixin from "@/mixins/basics/list.js";
import Form from "./form.vue";
import { getPageList } from "@/api/basic";

export default {
  mixins: [listMixin],
  components: { Form },
  data() {
    return {
      list: [],
      apiUrl: "your/api/endpoint",        // 📝 修改为实际API路径
      query: {
        $LK$NAME: "",                     // 📝 添加搜索字段
      },
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "CREATEDATE"                // 📝 修改排序字段
      },
      quickQuery: {
        field: "NAME",                    // 📝 修改快速搜索字段
        value: ""
      },
      loadListMethod: getPageList
    };
  }
};
</script>

数据配置说明

javascript

// 基本配置
apiUrl: "模块名/控制器名/方法名"        // 后端API路径
enumCode: "STATUS,TYPE"               // 枚举代码（逗号分隔）

// 查询配置
query: {
  $LK$NAME: "",          // 模糊查询
  $EQ$STATUS: "",        // 精确查询  
  $GE$STARTDATE: "",     // 大于等于
  $LE$ENDDATE: ""        // 小于等于
}

// 快速查询
quickQuery: {
  field: "NAME,CODE",    // 支持多字段（逗号分隔）
  value: ""
}

表单脚本模板

onLoad 表单加载脚本

javascript

// 基础数据设置
setFormData("字段名", "默认值");

// 根据用户信息设置默认值
if (userState.userInfo) {
  setFormData("CREATOR", userState.userInfo.userId);
  setFormData("DEPTID", userState.userInfo.organizeId);
}

// 根据流程信息控制字段
if (flowTaskInfo && flowTaskInfo.thisStepCode === "step1") {
  setShowOrHide("APPROVER", false);
  setRequired("REASON", true);
}

// 设置字段选项
const options = [
  { enCode: "1", fullName: "启用" },
  { enCode: "0", fullName: "禁用" }
];
setFieldOptions("STATUS", options);

// 权限控制
if (!this.jnpf.hasFormP("SALARY")) {
  setShowOrHide("SALARY", false);
}

beforeSubmit 提交前脚本

javascript

// 根据操作类型处理
if (eventType === "submit") {
  // 提交时的处理
  if (!formData.NAME) {
    this.$message.error("请输入名称");
    return false;  // 阻止提交
  }
} else if (eventType === "save") {
  // 暂存时的处理
  console.log("暂存数据");
}

// 数据验证
if (formData.STARTDATE > formData.ENDDATE) {
  this.$message.error("开始日期不能晚于结束日期");
  return false;
}

openWindow 使用模板

打开表单页面

javascript

// 新增
openWindow({
  url: "views/basic/dynamicModel/list/Form",
  title: "新增数据",
  width: "800px",
  height: "600px",
  data: {
    TmplCode: "你的功能设计ID",
    formType: 2
  },
  onDestroy: {
    confirm: () => this.refresh()
  }
});

// 编辑
openWindow({
  url: "views/basic/dynamicModel/list/Form", 
  title: "编辑数据",
  data: {
    TmplCode: "你的功能设计ID",
    id: "数据ID",
    formType: 2
  },
  onDestroy: {
    confirm: () => this.refresh()
  }
});

// 详情
openWindow({
  url: "views/basic/dynamicModel/list/Form",
  title: "查看详情", 
  isDetail: true,
  data: {
    TmplCode: "你的功能设计ID",
    id: "数据ID",
    formType: 2
  }
});

打开流程页面

javascript

openWindow({
  url: "views/workFlow/components/FlowBox",
  title: "流程审批",
  data: {
    flowId: "流程设计ID",
    id: "数据ID", 
    formType: 2,
    opType: "1",  // 待办
    taskId: "任务ID",
    taskNodeId: "节点ID"
  },
  onDestroy: {
    confirm: () => this.refresh()
  }
});

打开选择页面

javascript

openWindow({
  url: "views/basic/dynamicModel/list/index",
  title: "选择数据",
  showFooter: true,
  data: {
    TmplCode: "选择页面的功能设计ID"
  },
  onDestroy: {
    confirm: ({ selectedData }) => {
      // 处理选中的数据
      if (selectedData && selectedData.length > 0) {
        setFormData("SELECTED_ID", selectedData[0].ID);
        setFormData("SELECTED_NAME", selectedData[0].NAME);
      }
    }
  }
});

常用工具方法模板

日期处理

javascript

// 设置日期范围
const today = this.jnpf.getDate('YYYY-MM-DD', 'd', 0);
const nextWeek = this.jnpf.getDate('YYYY-MM-DD', 'd', 7);
setFormData("STARTDATE", today);
setFormData("ENDDATE", nextWeek);

// 格式化显示
const formatDate = this.jnpf.toDate(formData.CREATEDATE, 'YYYY年MM月DD日');

数值计算

javascript

// 安全计算
const total = this.jnpf.add(formData.PRICE, formData.TAX);
const average = this.jnpf.div(total, formData.QUANTITY);
setFormData("TOTAL", total);
setFormData("AVERAGE", this.jnpf.toDecimal(average));

权限检查模板

javascript

// 按钮权限
if (this.jnpf.hasBtnP({ code: 'delete' })) {
  // 显示删除按钮
}

// 字段权限
if (this.jnpf.hasFormP('CONFIDENTIAL_INFO')) {
  setShowOrHide("CONFIDENTIAL_INFO", true);
} else {
  setShowOrHide("CONFIDENTIAL_INFO", false);
}

数据存储模板

javascript

// 保存用户设置
this.jnpf.storageSet({
  userPreferences: {
    pageSize: 50,
    sortField: 'CREATEDATE'
  }
});

// 读取用户设置
const preferences = this.jnpf.storageGet('userPreferences');
if (preferences) {
  this.listQuery.pageSize = preferences.pageSize;
}

外部集成模板

CAD 系统链接

javascript

// CAD链接格式
const cadUrl = `/dynamicPage?` +
  `componentsPath=views/workFlow/components/FlowBox&` +
  `modelId=${功能设计ID}&` +
  `ID=${数据ID}&` +
  `opType=-1&` +
  `outside=CAD&` +
  `flowId=${流程ID}&` +
  `token=Bearer ${token}`;

调试模板

javascript

// 表单调试
console.log('表单数据:', formData);
console.log('用户信息:', userState);
console.log('流程信息:', flowTaskInfo);

// 列表调试  
console.log('列表数据:', this.list);
console.log('查询条件:', this.query);
console.log('分页信息:', this.listQuery);

// 权限调试
console.log('表单权限:', this.jnpf.hasFormP('字段名'));
console.log('按钮权限:', this.jnpf.hasBtnP({code: '按钮码'}));

这些模板涵盖了日常开发中 90% 的使用场景，直接复制粘贴修改即可使用。

主项目-前端

配置标准

开发指南

最佳实践

参考文档

开发标准

开发指南

部署手册

开发指南

参考文档

开发标准

故障排除

文件预览

JPwise-Web 开发模板 - Claude Code

列表页面模板

Vue 文件结构

数据配置说明

表单脚本模板

onLoad 表单加载脚本

beforeSubmit 提交前脚本

openWindow 使用模板

打开表单页面

打开流程页面

打开选择页面

常用工具方法模板

日期处理

数值计算

权限检查模板

数据存储模板

外部集成模板

CAD 系统链接

调试模板

JPwise-Web 开发模板 - Claude Code ​

列表页面模板 ​

Vue 文件结构 ​

数据配置说明 ​

表单脚本模板 ​

onLoad 表单加载脚本 ​

beforeSubmit 提交前脚本 ​

openWindow 使用模板 ​

打开表单页面 ​

打开流程页面 ​

打开选择页面 ​

常用工具方法模板 ​

日期处理 ​

数值计算 ​

权限检查模板 ​

数据存储模板 ​

外部集成模板 ​

CAD 系统链接 ​

调试模板 ​

JPwise-Web 开发模板 - Claude Code

列表页面模板

Vue 文件结构

数据配置说明

表单脚本模板

onLoad 表单加载脚本

beforeSubmit 提交前脚本

openWindow 使用模板

打开表单页面

打开流程页面

打开选择页面

常用工具方法模板

日期处理

数值计算

权限检查模板

数据存储模板

外部集成模板

CAD 系统链接

调试模板