JPwise-Web 混入使用指南 - Claude Code

🚀 快速开始

listMixin - 列表页面必用

import listMixin from '@/mixins/basics/list'

export default {
  mixins: [listMixin],
  data() {
    return {
      apiUrl: '/api/module/list',
      loadListMethod: getPageList
    }
  }
}

formMixin - 表单页面必用

import formMixin from '@/mixins/basics/form'

export default {
  mixins: [formMixin],
  data() {
    return {
      apiUrl: '/api/module',
      dataForm: { name: '', email: '' },
      dataRule: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      }
    }
  }
}

btnPermission - 权限控制

import btnPermission from '@/mixins/btn_permission'

export default {
  mixins: [btnPermission]
  // 自动提供 buttonAuthList 和 buttonAuth(name) 方法
}

CCMixin (customComponentsMixin) - 自定义组件混入

import CCMixin from '@/mixins/basics/customComponents'

export default {
  mixins: [CCMixin],
  // 用于管理自定义组件弹窗和窗口操作
}

ckeditorMixin - 富文本编辑器混入

import ckeditorMixin from '@/mixins/basics/ckeditor'

export default {
  mixins: [ckeditorMixin],
  // 用于富文本编辑器的预览数据处理
}

🔄 常用组合

标准列表页面

import listMixin from '@/mixins/basics/list'
import btnPermission from '@/mixins/btn_permission'

export default {
  mixins: [listMixin, btnPermission],
  data() {
    return {
      apiUrl: '/api/module/list',
      loadListMethod: getPageList
    }
  }
}

标准表单页面

import formMixin from '@/mixins/basics/form'
import btnPermission from '@/mixins/btn_permission'

export default {
  mixins: [formMixin, btnPermission],
  data() {
    return {
      apiUrl: '/api/module',
      dataForm: {},
      dataRule: {}
    }
  }
}

📋 核心方法和属性

listMixin 提供

• 数据属性: list[], total, listLoading, listQuery
• 核心方法: InitPage(), search(), refresh(), reset()
• 删除操作: deleteRow(id), delBatch()
• 导出功能: exportData(), download()
• 页面操作: openPage(data)

formMixin 提供

• 数据属性: dataForm{}, dataRule{}, visible, btnLoading
• 核心方法: init(dataInfo), dataFormSubmit(), saveForm()
• 生命周期: initBefore(), initAfter(), getInfoAfter()
• 子表操作: addRow(), delRow(), moveUp(), moveDown()
• 流程专用: judgeShow(), judgeWrite(), judgeRequired()

btnPermission 提供

• 权限属性: buttonAuthList[]
• 权限方法: buttonAuth(name) - 检查按钮权限

CCMixin (customComponentsMixin) 提供

• 弹窗控制: ccVisible, popupType, popupWidth_, popupHeight_
• 组件管理: componentData, componentName, componentUrl
• 核心方法: openWindow(params) - 打开组件窗口
• 数据处理: getDynamicModelData(params) - 获取动态模型数据
• 关闭操作: close(params) - 关闭组件窗口

ckeditorMixin 提供

• 数据属性: previewData[] - 预览数据数组
• 核心方法: getPreviewData(modelId) - 获取预览数据
• 表单操作: updateFormData(key, value) - 更新表单数据

🔧 配置参数

listMixin 必需配置

{
  apiUrl: '/api/module/list',      // 必需：API端点
  loadListMethod: getPageList      // 必需：加载方法
}

formMixin 必需配置

{
  apiUrl: '/api/module',           // 必需：API基础端点
  dataForm: {},                    // 必需：表单数据对象
  dataRule: {}                     // 可选：验证规则
}

🎯 生命周期钩子

listMixin 钩子

export default {
  mixins: [listMixin],
  methods: {
    // 初始化前执行
    initPageBefore() {
      console.log('加载数据前')
    },
    
    // 初始化后执行
    initPageAfter() {
      console.log('加载数据后')
    },
    
    // 删除前确认
    delBefore(event) {
      return { cancel: false }  // true取消删除
    }
  }
}

formMixin 钩子

export default {
  mixins: [formMixin],
  methods: {
    // 初始化前执行
    initBefore(defVal) {
      console.log('表单初始化前')
    },
    
    // 初始化后执行
    initAfter(defVal) {
      console.log('表单初始化后')
    },
    
    // 保存前确认
    saveBefore({ eventType, cancel }) {
      return { cancel: false }  // true取消保存
    }
  }
}

🚫 常见错误

❌ 错误：不使用混入

// 不要这样写
export default {
  data() {
    return {
      list: [],
      loading: false
    }
  },
  methods: {
    async loadData() {
      // 重复实现基础功能
    }
  }
}

✅ 正确：使用混入

// 应该这样写
export default {
  mixins: [listMixin],
  data() {
    return {
      apiUrl: '/api/module/list',
      loadListMethod: getPageList
    }
  }
}

❌ 错误：配置不完整

export default {
  mixins: [formMixin],
  // 缺少 apiUrl 配置
}

✅ 正确：完整配置

export default {
  mixins: [formMixin],
  data() {
    return {
      apiUrl: '/api/module',  // 必需配置
      dataForm: {}            // 必需配置
    }
  }
}

🔍 调试技巧

检查混入状态

mounted() {
  console.log('列表数据:', this.list)
  console.log('加载状态:', this.listLoading)
  console.log('权限列表:', this.buttonAuthList)
}

覆盖混入方法

methods: {
  // 扩展搜索功能
  search(queryData, type) {
    console.log('自定义搜索逻辑')
    // 调用原始方法
    this.$options.mixins[0].methods.search.call(this, queryData, type)
  }
}

🔗 相关文档

• 快速参考 - 混入快速用法
• 页面模板 - 完整代码模板
• 组件库文档 - 配合使用的组件
• 工具方法参考 - 相关工具方法