/** * 应用示例 * 使用简单HTML5前端框架实现页面交互 */ // 等待DOM加载完成 document.addEventListener('DOMContentLoaded', function() { // 初始化登录状态 initLoginStatus(); // 初始化路由 initRouter(); // 初始化计数器组件 initCounter(); }); /** * 初始化登录状态 */ function initLoginStatus() { const currentUser = localStorage.getItem('currentUser'); const welcomeMessage = document.getElementById('welcome-message'); const loginLink = document.getElementById('login-link'); const logoutLink = document.getElementById('logout-link'); if (currentUser) { const user = JSON.parse(currentUser); welcomeMessage.textContent = `欢迎，${user.emp_name} `; loginLink.style.display = 'none'; logoutLink.style.display = 'inline'; } else { welcomeMessage.textContent = ''; loginLink.style.display = 'inline'; logoutLink.style.display = 'none'; } // 登出功能 if (logoutLink) { logoutLink.addEventListener('click', function(e) { e.preventDefault(); localStorage.removeItem('currentUser'); window.location.reload(); }); } } /** * 初始化路由 */ function initRouter() { // 注册路由 Framework.router.register('home', function() { showSection('home'); }); Framework.router.register('about', function() { showSection('about'); }); Framework.router.register('counter', function() { showSection('counter'); }); Framework.router.register('models', function() { showSection('models'); initDataModels(); }); // 初始化路由 Framework.router.init(); } /** * 显示指定 section * @param {string} sectionId - section ID */ function showSection(sectionId) { // 隐藏所有 section const sections = Framework.dom.queryAll('section'); sections.forEach(section => { section.style.display = 'none'; }); // 显示指定 section const targetSection = Framework.dom.query(`#${sectionId}`); if (targetSection) { targetSection.style.display = 'block'; } } /** * 初始化计数器组件 */ function initCounter() { // 初始化状态 Framework.store.set('count', 0); // 获取DOM元素 const countElement = Framework.dom.query('#count'); const incrementButton = Framework.dom.query('#increment'); const decrementButton = Framework.dom.query('#decrement'); const resetButton = Framework.dom.query('#reset'); // 订阅状态变化 Framework.store.subscribe(function(state) { countElement.textContent = state.count; }); // 添加事件监听器 Framework.dom.on(incrementButton, 'click', function() { const currentCount = Framework.store.get('count'); Framework.store.set('count', currentCount + 1); }); Framework.dom.on(decrementButton, 'click', function() { const currentCount = Framework.store.get('count'); Framework.store.set('count', currentCount - 1); }); Framework.dom.on(resetButton, 'click', function() { Framework.store.set('count', 0); }); } // 示例：注册一个简单的组件 Framework.component.register('HelloComponent', function(props) { this.props = props; this.element = null; this.render = function() { return Framework.dom.create('div', { text: `Hello, ${this.props.name}!`, style: { padding: '20px', backgroundColor: '#f0f0f0', borderRadius: '5px', marginTop: '20px' } }); }; this.mount = function(container) { this.element = this.render(); container.appendChild(this.element); }; this.update = function(newProps) { this.props = newProps; if (this.element) { const parent = this.element.parentNode; parent.removeChild(this.element); this.element = this.render(); parent.appendChild(this.element); } }; }); // 示例：创建组件实例 // const helloComponent = Framework.component.create('HelloComponent', { name: 'World' }, document.body); /** * 初始化数据模型示例 */ function initDataModels() { // 测试审核权限模型 const auditPermissionDemo = Framework.dom.query('#audit-permission-demo'); if (auditPermissionDemo) { // 创建审核权限实例 const auditPermission = Framework.model.AuditPermission.create({ uuid: '12345678901234567890123456789012', company_id: 1, position_id: 101, audit_type: 'order', audit_level: 1, audit_scope: '*', max_audit_amount: 10000.00, sort: 1, status: 1, remark: '订单初审权限' }); // 展示审核权限数据 auditPermissionDemo.innerHTML = `

审核权限详情

UUID: ${auditPermission.uuid}

公司ID: ${auditPermission.company_id}

岗位ID: ${auditPermission.position_id}

审核类型: ${auditPermission.audit_type}

审核层级: ${auditPermission.audit_level}

审核范围: ${auditPermission.audit_scope}

最大审核金额: ${auditPermission.max_audit_amount}

状态: ${auditPermission.status === 1 ? '正常' : '禁用'}

创建时间: ${auditPermission.create_time}

备注: ${auditPermission.remark}

`; } // 测试公司模型 const companyDemo = Framework.dom.query('#company-demo'); if (companyDemo) { // 创建公司实例 const company = Framework.model.Company.create({ uuid: '98765432109876543210987654321098', company_name: '示例科技有限公司', tenant_id: 'tenant_001', parent_company_id: 0, short_name: '示例科技', industry: '互联网', contact_mobile: '13800138000', contact_email: 'contact@example.com', status: 1, remark: '这是一个示例公司' }); // 展示公司数据 companyDemo.innerHTML = `

公司详情

UUID: ${company.uuid}

公司名称: ${company.company_name}

租户ID: ${company.tenant_id}

上级公司ID: ${company.parent_company_id}

公司简称: ${company.short_name}

所属行业: ${company.industry}

联系电话: ${company.contact_mobile}

联系邮箱: ${company.contact_email}

状态: ${getStatusText(company.status)}

创建时间: ${company.create_time}

备注: ${company.remark}

`; } // 测试客户模型 const customerDemo = Framework.dom.query('#customer-demo'); if (customerDemo) { // 创建客户实例 const customer = Framework.model.Customer.create({ customer_id: 1, customer_name: '张三', create_date: '2026-01-01', last_order_date: '2026-03-01', last_followup_date: '2026-03-05', followup_status: '跟进中，客户对产品有兴趣', responsible_person: '李四', department: '销售部', assistant: '王五', region: '北京市', customer_type: '个人', customer_level: 'A', basic_requirements: '需要定制化服务', specifications: '产品规格要求：中型企业级解决方案' }); // 展示客户数据 customerDemo.innerHTML = `

客户详情

客户ID: ${customer.customer_id}

客户名称: ${customer.customer_name}

建户日期: ${customer.create_date}

最后下单日期: ${customer.last_order_date}

最后跟进日期: ${customer.last_followup_date}

跟进情况: ${customer.followup_status}

负责人: ${customer.responsible_person}

部门: ${customer.department}

协助人: ${customer.assistant}

客户地区: ${customer.region}

客户类型: ${customer.customer_type}

客户等级: ${customer.customer_level}

基本需求: ${customer.basic_requirements}

规格: ${customer.specifications}

创建时间: ${customer.created_at}

更新时间: ${customer.updated_at}

`; } // 测试客户联系信息模型 const customerContactDemo = Framework.dom.query('#customer-contact-demo'); if (customerContactDemo) { // 创建客户联系信息实例 const customerContact = Framework.model.CustomerContact.create({ contact_id: 1, customer_id: 1, wechat_id: 'zhangsan123', contact_name: '张三', phone: '13800138000', account: '张三', account_number: '6222021234567890123', bank: '中国工商银行', address: '北京市朝阳区建国路88号', company_name: '个人' }); // 展示客户联系信息数据 customerContactDemo.innerHTML = `

客户联系信息详情

联系ID: ${customerContact.contact_id}

客户ID: ${customerContact.customer_id}

微信号: ${customerContact.wechat_id}

联系人姓名: ${customerContact.contact_name}

电话: ${customerContact.phone}

账户名称: ${customerContact.account}

账号: ${customerContact.account_number}

开户行: ${customerContact.bank}

地址: ${customerContact.address}

客户公司: ${customerContact.company_name}

创建时间: ${customerContact.created_at}

更新时间: ${customerContact.updated_at}

`; } // 测试部门模型 const departmentDemo = Framework.dom.query('#department-demo'); if (departmentDemo) { // 创建部门实例 const department = Framework.model.Department.create({ id: 1, uuid: '12345678901234567890123456789012', company_id: 1, dept_name: '销售部', parent_id: 0, dept_level: 1, dept_code: 'SALES', leader_id: 101, sort: 1, status: 1, remark: '公司销售部门' }); // 展示部门数据 departmentDemo.innerHTML = `

部门详情

部门ID: ${department.id}

UUID: ${department.uuid}

公司ID: ${department.company_id}

部门名称: ${department.dept_name}

上级部门ID: ${department.parent_id}

部门级别: ${department.dept_level}

部门编码: ${department.dept_code}

部门负责人ID: ${department.leader_id}

排序号: ${department.sort}

状态: ${department.status === 1 ? '正常' : '禁用'}

创建时间: ${department.create_time}

备注: ${department.remark}

`; } // 测试员工模型 const employeeDemo = Framework.dom.query('#employee-demo'); if (employeeDemo) { // 创建员工实例 const employee = Framework.model.Employee.create({ id: 1, uuid: '12345678901234567890123456789012', company_id: 1, dept_id: 1, position_id: 1, emp_name: '张三', mobile: '13800138000', emp_no: 'EMP001', email: 'zhangsan@example.com', id_card: '1101**********1234', entry_time: '2026-01-01', is_admin: 0, is_leader: 1, status: 1, last_login_time: '2026-03-05 10:30:00', remark: '销售部经理' }); // 展示员工数据 employeeDemo.innerHTML = `

员工详情

员工ID: ${employee.id}

UUID: ${employee.uuid}

公司ID: ${employee.company_id}

部门ID: ${employee.dept_id}

岗位ID: ${employee.position_id}

员工姓名: ${employee.emp_name}

手机号: ${employee.mobile}

员工工号: ${employee.emp_no}

邮箱: ${employee.email}

身份证号: ${employee.id_card}

入职时间: ${employee.entry_time}

是否公司管理员: ${employee.is_admin === 1 ? '是' : '否'}

是否部门负责人: ${employee.is_leader === 1 ? '是' : '否'}

状态: ${employee.status === 1 ? '正常' : employee.status === 2 ? '离职' : '禁用'}

最后登录时间: ${employee.last_login_time}

创建时间: ${employee.create_time}

备注: ${employee.remark}

`; } // 测试操作日志模型 const operationLogDemo = Framework.dom.query('#operation-log-demo'); if (operationLogDemo) { // 创建操作日志实例 const operationLog = Framework.model.OperationLog.create({ id: 1, uuid: '12345678901234567890123456789012', tenant_id: 'tenant_001', table_name: 'employee', data_id: 1, oper_type: 2, oper_content: '修改员工姓名：张三→张三丰', oper_by: 'EMP001', ip: '192.168.1.100', remark: '员工信息更新' }); // 展示操作日志数据 operationLogDemo.innerHTML = `

操作日志详情

日志ID: ${operationLog.id}

UUID: ${operationLog.uuid}

租户ID: ${operationLog.tenant_id}

操作表名: ${operationLog.table_name}

数据ID: ${operationLog.data_id}

操作类型: ${getOperTypeText(operationLog.oper_type)}

操作内容: ${operationLog.oper_content}

操作人: ${operationLog.oper_by}

操作时间: ${operationLog.oper_time}

操作IP: ${operationLog.ip}

备注: ${operationLog.remark}

`; } // 测试岗位模型 const positionDemo = Framework.dom.query('#position-demo'); if (positionDemo) { // 创建岗位实例 const position = Framework.model.Position.create({ id: 1, uuid: '12345678901234567890123456789012', company_id: 1, dept_id: 1, position_name: '销售部经理', position_code: 'MANAGER', position_type: 1, sort: 1, status: 1, remark: '销售部负责人' }); // 展示岗位数据 positionDemo.innerHTML = `

岗位详情

岗位ID: ${position.id}

UUID: ${position.uuid}

公司ID: ${position.company_id}

部门ID: ${position.dept_id}

岗位名称: ${position.position_name}

岗位编码: ${position.position_code}

岗位类型: ${getPositionTypeText(position.position_type)}

排序: ${position.sort}

状态: ${position.status === 1 ? '正常' : '禁用'}

创建时间: ${position.create_time}

备注: ${position.remark}

`; } } /** * 获取公司状态文本 * @param {number} status - 状态码 * @returns {string} - 状态文本 */ function getStatusText(status) { const statusMap = { 0: '禁用', 1: '正常', 2: '过期' }; return statusMap[status] || '未知'; } /** * 获取操作类型文本 * @param {number} operType - 操作类型码 * @returns {string} - 操作类型文本 */ function getOperTypeText(operType) { const operTypeMap = { 1: '新增', 2: '修改', 3: '删除', 4: '禁用' }; return operTypeMap[operType] || '未知'; } /** * 获取岗位类型文本 * @param {number} positionType - 岗位类型码 * @returns {string} - 岗位类型文本 */ function getPositionTypeText(positionType) { const positionTypeMap = { 1: '管理岗', 2: '技术岗', 3: '职能岗' }; return positionTypeMap[positionType] || '未知'; }