User
22 hours ago
commit
f41efb60c7
17 changed files with 2068 additions and 0 deletions
@ -0,0 +1,157 @@ |
|||
/** |
|||
* API服务模块 |
|||
* 处理前后端通信 |
|||
*/ |
|||
|
|||
const API_BASE_URL = 'http://192.168.1.101:8080/api'; // API基础路径
|
|||
|
|||
/** |
|||
* 基础请求函数 |
|||
* @param {string} url - 请求路径 |
|||
* @param {Object} options - 请求选项 |
|||
* @returns {Promise} - 返回Promise对象 |
|||
*/ |
|||
async function request(url, options = {}) { |
|||
try { |
|||
// 构建完整的请求URL
|
|||
const fullUrl = `${API_BASE_URL}${url}`; |
|||
|
|||
// 设置默认请求头
|
|||
const headers = { |
|||
'Content-Type': 'application/json', |
|||
...options.headers |
|||
}; |
|||
|
|||
// 发送请求
|
|||
const response = await fetch(fullUrl, { |
|||
...options, |
|||
headers |
|||
}); |
|||
|
|||
// 检查响应状态
|
|||
if (!response.ok) { |
|||
const errorData = await response.json().catch(() => ({})); |
|||
throw new Error(errorData.message || `请求失败: ${response.status}`); |
|||
} |
|||
|
|||
// 解析响应数据
|
|||
return await response.json(); |
|||
} catch (error) { |
|||
console.error('API请求错误:', error); |
|||
throw error; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 认证相关API |
|||
*/ |
|||
const authApi = { |
|||
/** |
|||
* 用户登录 |
|||
* @param {Object} data - 登录数据 |
|||
* @param {string} data.mobile - 手机号 |
|||
* @param {string} data.password - 密码 |
|||
* @returns {Promise} - 返回登录结果 |
|||
*/ |
|||
login: async (data) => { |
|||
return request('/auth/login', { |
|||
method: 'POST', |
|||
body: JSON.stringify(data) |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 用户注册 |
|||
* @param {Object} data - 注册数据 |
|||
* @param {number} data.companyId - 公司ID |
|||
* @param {number} data.deptId - 部门ID |
|||
* @param {number} data.positionId - 职位ID |
|||
* @param {string} data.empName - 姓名 |
|||
* @param {string} data.mobile - 手机号 |
|||
* @param {string} data.password - 密码 |
|||
* @returns {Promise} - 返回注册结果 |
|||
*/ |
|||
register: async (data) => { |
|||
return request('/auth/register', { |
|||
method: 'POST', |
|||
body: JSON.stringify(data) |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* 数据模型相关API |
|||
*/ |
|||
const modelApi = { |
|||
/** |
|||
* 获取模型列表 |
|||
* @param {string} modelName - 模型名称 |
|||
* @param {Object} params - 查询参数 |
|||
* @returns {Promise} - 返回模型列表 |
|||
*/ |
|||
getList: async (modelName, params = {}) => { |
|||
// 构建查询字符串
|
|||
const queryString = new URLSearchParams(params).toString(); |
|||
const url = `/models/${modelName}${queryString ? `?${queryString}` : ''}`; |
|||
return request(url); |
|||
}, |
|||
|
|||
/** |
|||
* 获取模型详情 |
|||
* @param {string} modelName - 模型名称 |
|||
* @param {number} id - 模型ID |
|||
* @returns {Promise} - 返回模型详情 |
|||
*/ |
|||
getDetail: async (modelName, id) => { |
|||
return request(`/models/${modelName}/${id}`); |
|||
}, |
|||
|
|||
/** |
|||
* 创建模型 |
|||
* @param {string} modelName - 模型名称 |
|||
* @param {Object} data - 模型数据 |
|||
* @returns {Promise} - 返回创建结果 |
|||
*/ |
|||
create: async (modelName, data) => { |
|||
return request(`/models/${modelName}`, { |
|||
method: 'POST', |
|||
body: JSON.stringify(data) |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 更新模型 |
|||
* @param {string} modelName - 模型名称 |
|||
* @param {number} id - 模型ID |
|||
* @param {Object} data - 模型数据 |
|||
* @returns {Promise} - 返回更新结果 |
|||
*/ |
|||
update: async (modelName, id, data) => { |
|||
return request(`/models/${modelName}/${id}`, { |
|||
method: 'PUT', |
|||
body: JSON.stringify(data) |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 删除模型 |
|||
* @param {string} modelName - 模型名称 |
|||
* @param {number} id - 模型ID |
|||
* @returns {Promise} - 返回删除结果 |
|||
*/ |
|||
delete: async (modelName, id) => { |
|||
return request(`/models/${modelName}/${id}`, { |
|||
method: 'DELETE' |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 导出API服务
|
|||
const API = { |
|||
auth: authApi, |
|||
model: modelApi, |
|||
request // 导出基础请求函数，方便扩展
|
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.API = API; |
|||
@ -0,0 +1,519 @@ |
|||
/** |
|||
* 应用示例 |
|||
* 使用简单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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>审核权限详情</h4> |
|||
<p><strong>UUID:</strong> ${auditPermission.uuid}</p> |
|||
<p><strong>公司ID:</strong> ${auditPermission.company_id}</p> |
|||
<p><strong>岗位ID:</strong> ${auditPermission.position_id}</p> |
|||
<p><strong>审核类型:</strong> ${auditPermission.audit_type}</p> |
|||
<p><strong>审核层级:</strong> ${auditPermission.audit_level}</p> |
|||
<p><strong>审核范围:</strong> ${auditPermission.audit_scope}</p> |
|||
<p><strong>最大审核金额:</strong> ${auditPermission.max_audit_amount}</p> |
|||
<p><strong>状态:</strong> ${auditPermission.status === 1 ? '正常' : '禁用'}</p> |
|||
<p><strong>创建时间:</strong> ${auditPermission.create_time}</p> |
|||
<p><strong>备注:</strong> ${auditPermission.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试公司模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>公司详情</h4> |
|||
<p><strong>UUID:</strong> ${company.uuid}</p> |
|||
<p><strong>公司名称:</strong> ${company.company_name}</p> |
|||
<p><strong>租户ID:</strong> ${company.tenant_id}</p> |
|||
<p><strong>上级公司ID:</strong> ${company.parent_company_id}</p> |
|||
<p><strong>公司简称:</strong> ${company.short_name}</p> |
|||
<p><strong>所属行业:</strong> ${company.industry}</p> |
|||
<p><strong>联系电话:</strong> ${company.contact_mobile}</p> |
|||
<p><strong>联系邮箱:</strong> ${company.contact_email}</p> |
|||
<p><strong>状态:</strong> ${getStatusText(company.status)}</p> |
|||
<p><strong>创建时间:</strong> ${company.create_time}</p> |
|||
<p><strong>备注:</strong> ${company.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试客户模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>客户详情</h4> |
|||
<p><strong>客户ID:</strong> ${customer.customer_id}</p> |
|||
<p><strong>客户名称:</strong> ${customer.customer_name}</p> |
|||
<p><strong>建户日期:</strong> ${customer.create_date}</p> |
|||
<p><strong>最后下单日期:</strong> ${customer.last_order_date}</p> |
|||
<p><strong>最后跟进日期:</strong> ${customer.last_followup_date}</p> |
|||
<p><strong>跟进情况:</strong> ${customer.followup_status}</p> |
|||
<p><strong>负责人:</strong> ${customer.responsible_person}</p> |
|||
<p><strong>部门:</strong> ${customer.department}</p> |
|||
<p><strong>协助人:</strong> ${customer.assistant}</p> |
|||
<p><strong>客户地区:</strong> ${customer.region}</p> |
|||
<p><strong>客户类型:</strong> ${customer.customer_type}</p> |
|||
<p><strong>客户等级:</strong> ${customer.customer_level}</p> |
|||
<p><strong>基本需求:</strong> ${customer.basic_requirements}</p> |
|||
<p><strong>规格:</strong> ${customer.specifications}</p> |
|||
<p><strong>创建时间:</strong> ${customer.created_at}</p> |
|||
<p><strong>更新时间:</strong> ${customer.updated_at}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试客户联系信息模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>客户联系信息详情</h4> |
|||
<p><strong>联系ID:</strong> ${customerContact.contact_id}</p> |
|||
<p><strong>客户ID:</strong> ${customerContact.customer_id}</p> |
|||
<p><strong>微信号:</strong> ${customerContact.wechat_id}</p> |
|||
<p><strong>联系人姓名:</strong> ${customerContact.contact_name}</p> |
|||
<p><strong>电话:</strong> ${customerContact.phone}</p> |
|||
<p><strong>账户名称:</strong> ${customerContact.account}</p> |
|||
<p><strong>账号:</strong> ${customerContact.account_number}</p> |
|||
<p><strong>开户行:</strong> ${customerContact.bank}</p> |
|||
<p><strong>地址:</strong> ${customerContact.address}</p> |
|||
<p><strong>客户公司:</strong> ${customerContact.company_name}</p> |
|||
<p><strong>创建时间:</strong> ${customerContact.created_at}</p> |
|||
<p><strong>更新时间:</strong> ${customerContact.updated_at}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试部门模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>部门详情</h4> |
|||
<p><strong>部门ID:</strong> ${department.id}</p> |
|||
<p><strong>UUID:</strong> ${department.uuid}</p> |
|||
<p><strong>公司ID:</strong> ${department.company_id}</p> |
|||
<p><strong>部门名称:</strong> ${department.dept_name}</p> |
|||
<p><strong>上级部门ID:</strong> ${department.parent_id}</p> |
|||
<p><strong>部门级别:</strong> ${department.dept_level}</p> |
|||
<p><strong>部门编码:</strong> ${department.dept_code}</p> |
|||
<p><strong>部门负责人ID:</strong> ${department.leader_id}</p> |
|||
<p><strong>排序号:</strong> ${department.sort}</p> |
|||
<p><strong>状态:</strong> ${department.status === 1 ? '正常' : '禁用'}</p> |
|||
<p><strong>创建时间:</strong> ${department.create_time}</p> |
|||
<p><strong>备注:</strong> ${department.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试员工模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>员工详情</h4> |
|||
<p><strong>员工ID:</strong> ${employee.id}</p> |
|||
<p><strong>UUID:</strong> ${employee.uuid}</p> |
|||
<p><strong>公司ID:</strong> ${employee.company_id}</p> |
|||
<p><strong>部门ID:</strong> ${employee.dept_id}</p> |
|||
<p><strong>岗位ID:</strong> ${employee.position_id}</p> |
|||
<p><strong>员工姓名:</strong> ${employee.emp_name}</p> |
|||
<p><strong>手机号:</strong> ${employee.mobile}</p> |
|||
<p><strong>员工工号:</strong> ${employee.emp_no}</p> |
|||
<p><strong>邮箱:</strong> ${employee.email}</p> |
|||
<p><strong>身份证号:</strong> ${employee.id_card}</p> |
|||
<p><strong>入职时间:</strong> ${employee.entry_time}</p> |
|||
<p><strong>是否公司管理员:</strong> ${employee.is_admin === 1 ? '是' : '否'}</p> |
|||
<p><strong>是否部门负责人:</strong> ${employee.is_leader === 1 ? '是' : '否'}</p> |
|||
<p><strong>状态:</strong> ${employee.status === 1 ? '正常' : employee.status === 2 ? '离职' : '禁用'}</p> |
|||
<p><strong>最后登录时间:</strong> ${employee.last_login_time}</p> |
|||
<p><strong>创建时间:</strong> ${employee.create_time}</p> |
|||
<p><strong>备注:</strong> ${employee.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试操作日志模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>操作日志详情</h4> |
|||
<p><strong>日志ID:</strong> ${operationLog.id}</p> |
|||
<p><strong>UUID:</strong> ${operationLog.uuid}</p> |
|||
<p><strong>租户ID:</strong> ${operationLog.tenant_id}</p> |
|||
<p><strong>操作表名:</strong> ${operationLog.table_name}</p> |
|||
<p><strong>数据ID:</strong> ${operationLog.data_id}</p> |
|||
<p><strong>操作类型:</strong> ${getOperTypeText(operationLog.oper_type)}</p> |
|||
<p><strong>操作内容:</strong> ${operationLog.oper_content}</p> |
|||
<p><strong>操作人:</strong> ${operationLog.oper_by}</p> |
|||
<p><strong>操作时间:</strong> ${operationLog.oper_time}</p> |
|||
<p><strong>操作IP:</strong> ${operationLog.ip}</p> |
|||
<p><strong>备注:</strong> ${operationLog.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
|
|||
// 测试岗位模型
|
|||
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 = ` |
|||
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px;"> |
|||
<h4>岗位详情</h4> |
|||
<p><strong>岗位ID:</strong> ${position.id}</p> |
|||
<p><strong>UUID:</strong> ${position.uuid}</p> |
|||
<p><strong>公司ID:</strong> ${position.company_id}</p> |
|||
<p><strong>部门ID:</strong> ${position.dept_id}</p> |
|||
<p><strong>岗位名称:</strong> ${position.position_name}</p> |
|||
<p><strong>岗位编码:</strong> ${position.position_code}</p> |
|||
<p><strong>岗位类型:</strong> ${getPositionTypeText(position.position_type)}</p> |
|||
<p><strong>排序:</strong> ${position.sort}</p> |
|||
<p><strong>状态:</strong> ${position.status === 1 ? '正常' : '禁用'}</p> |
|||
<p><strong>创建时间:</strong> ${position.create_time}</p> |
|||
<p><strong>备注:</strong> ${position.remark}</p> |
|||
</div> |
|||
`;
|
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取公司状态文本 |
|||
* @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] || '未知'; |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>登录页面</title> |
|||
<style> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
line-height: 1.6; |
|||
color: #333; |
|||
background-color: #f5f5f5; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
} |
|||
.login-container { |
|||
background-color: white; |
|||
padding: 40px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|||
width: 100%; |
|||
max-width: 400px; |
|||
} |
|||
h2 { |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
color: #3498db; |
|||
} |
|||
.form-group { |
|||
margin-bottom: 20px; |
|||
} |
|||
label { |
|||
display: block; |
|||
margin-bottom: 8px; |
|||
font-weight: bold; |
|||
} |
|||
input { |
|||
width: 100%; |
|||
padding: 10px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
} |
|||
.button { |
|||
width: 100%; |
|||
padding: 12px; |
|||
background-color: #3498db; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
transition: background-color 0.3s; |
|||
} |
|||
.button:hover { |
|||
background-color: #2980b9; |
|||
} |
|||
.error-message { |
|||
color: red; |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
} |
|||
.back-link { |
|||
display: block; |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
color: #3498db; |
|||
text-decoration: none; |
|||
} |
|||
.back-link:hover { |
|||
text-decoration: underline; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="login-container"> |
|||
<h2>用户登录</h2> |
|||
<form id="login-form"> |
|||
<div class="form-group"> |
|||
<label for="mobile">手机号</label> |
|||
<input type="text" id="mobile" name="mobile" placeholder="请输入手机号" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="pwd">密码</label> |
|||
<input type="password" id="pwd" name="pwd" placeholder="请输入密码" required> |
|||
</div> |
|||
<button type="submit" class="button">登录</button> |
|||
<div id="error-message" class="error-message"></div> |
|||
<a href="../index.html" class="back-link">返回首页</a> |
|||
<a href="register.html" class="back-link" style="margin-top: 10px;">没有账号？点击注册</a> |
|||
</form> |
|||
</div> |
|||
<script src="../models/employee.js"></script> |
|||
<script src="../framework.js"></script> |
|||
<script src="../api/api.js"></script> |
|||
<script src="login.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,55 @@ |
|||
/** |
|||
* 登录页面逻辑 |
|||
*/ |
|||
|
|||
// 等待DOM加载完成
|
|||
document.addEventListener('DOMContentLoaded', function() { |
|||
// 获取登录表单
|
|||
const loginForm = document.getElementById('login-form'); |
|||
const errorMessage = document.getElementById('error-message'); |
|||
|
|||
// 监听表单提交事件
|
|||
loginForm.addEventListener('submit', async function(e) { |
|||
e.preventDefault(); |
|||
|
|||
// 获取用户输入
|
|||
const mobile = document.getElementById('mobile').value; |
|||
const pwd = document.getElementById('pwd').value; |
|||
|
|||
// 验证输入
|
|||
if (!mobile || !pwd) { |
|||
errorMessage.textContent = '请输入手机号和密码'; |
|||
return; |
|||
} |
|||
|
|||
// 构建请求数据
|
|||
const loginData = { |
|||
mobile: mobile, |
|||
password: pwd |
|||
}; |
|||
|
|||
try { |
|||
// 使用API服务发送登录请求
|
|||
const data = await API.auth.login(loginData); |
|||
|
|||
// 登录成功，创建员工实例
|
|||
const employee = Framework.model.Employee.create({ |
|||
mobile: data.mobile, |
|||
emp_name: data.empName, |
|||
emp_no: data.empNo, |
|||
dept_id: data.deptId, |
|||
position_id: data.positionId |
|||
}); |
|||
|
|||
// 存储用户信息到本地存储
|
|||
localStorage.setItem('currentUser', JSON.stringify(employee)); |
|||
|
|||
// 跳转到首页
|
|||
window.location.href = '../index.html'; |
|||
} catch (error) { |
|||
// 登录失败
|
|||
errorMessage.textContent = '登录失败，请检查手机号和密码'; |
|||
console.error('登录错误:', error); |
|||
} |
|||
}); |
|||
}); |
|||
@ -0,0 +1,150 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>注册页面</title> |
|||
<style> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
line-height: 1.6; |
|||
color: #333; |
|||
background-color: #f5f5f5; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
} |
|||
.register-container { |
|||
background-color: white; |
|||
padding: 40px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|||
width: 100%; |
|||
max-width: 500px; |
|||
} |
|||
h2 { |
|||
text-align: center; |
|||
margin-bottom: 30px; |
|||
color: #3498db; |
|||
} |
|||
.form-group { |
|||
margin-bottom: 20px; |
|||
} |
|||
label { |
|||
display: block; |
|||
margin-bottom: 8px; |
|||
font-weight: bold; |
|||
} |
|||
input { |
|||
width: 100%; |
|||
padding: 10px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
} |
|||
select { |
|||
width: 100%; |
|||
padding: 10px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
} |
|||
.button { |
|||
width: 100%; |
|||
padding: 12px; |
|||
background-color: #3498db; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
transition: background-color 0.3s; |
|||
} |
|||
.button:hover { |
|||
background-color: #2980b9; |
|||
} |
|||
.error-message { |
|||
color: red; |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
} |
|||
.success-message { |
|||
color: green; |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
} |
|||
.login-link { |
|||
display: block; |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
color: #3498db; |
|||
text-decoration: none; |
|||
} |
|||
.login-link:hover { |
|||
text-decoration: underline; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="register-container"> |
|||
<h2>用户注册</h2> |
|||
<form id="register-form"> |
|||
<div class="form-group"> |
|||
<label for="company">公司</label> |
|||
<select id="company" name="company" required> |
|||
<option value="">请选择公司</option> |
|||
<option value="1">示例科技有限公司</option> |
|||
<option value="2">测试企业集团</option> |
|||
</select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="department">部门</label> |
|||
<select id="department" name="department" required> |
|||
<option value="">请选择部门</option> |
|||
<option value="1">销售部</option> |
|||
<option value="2">技术部</option> |
|||
<option value="3">财务部</option> |
|||
</select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="position">职位</label> |
|||
<select id="position" name="position" required> |
|||
<option value="">请选择职位</option> |
|||
<option value="1">经理</option> |
|||
<option value="2">主管</option> |
|||
<option value="3">员工</option> |
|||
</select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="organization">组织</label> |
|||
<input type="text" id="organization" name="organization" placeholder="请输入组织名称" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="emp_name">姓名</label> |
|||
<input type="text" id="emp_name" name="emp_name" placeholder="请输入姓名" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="mobile">电话号码</label> |
|||
<input type="text" id="mobile" name="mobile" placeholder="请输入电话号码" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="pwd">密码</label> |
|||
<input type="password" id="pwd" name="pwd" placeholder="请输入密码" required> |
|||
</div> |
|||
<button type="submit" class="button">注册</button> |
|||
<div id="message" class="error-message"></div> |
|||
<a href="login.html" class="login-link">已有账号？点击登录</a> |
|||
</form> |
|||
</div> |
|||
<script src="../models/employee.js"></script> |
|||
<script src="../framework.js"></script> |
|||
<script src="../api/api.js"></script> |
|||
<script src="register.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,74 @@ |
|||
/** |
|||
* 注册页面逻辑 |
|||
*/ |
|||
|
|||
// 等待DOM加载完成
|
|||
document.addEventListener('DOMContentLoaded', function() { |
|||
// 获取注册表单
|
|||
const registerForm = document.getElementById('register-form'); |
|||
const message = document.getElementById('message'); |
|||
|
|||
// 监听表单提交事件
|
|||
registerForm.addEventListener('submit', async function(e) { |
|||
e.preventDefault(); |
|||
|
|||
// 获取用户输入
|
|||
const company = document.getElementById('company').value; |
|||
const department = document.getElementById('department').value; |
|||
const position = document.getElementById('position').value; |
|||
const organization = document.getElementById('organization').value; |
|||
const emp_name = document.getElementById('emp_name').value; |
|||
const mobile = document.getElementById('mobile').value; |
|||
const pwd = document.getElementById('pwd').value; |
|||
|
|||
// 验证输入
|
|||
if (!company || !department || !position || !organization || !emp_name || !mobile || !pwd) { |
|||
message.textContent = '请填写所有必填字段'; |
|||
message.className = 'error-message'; |
|||
return; |
|||
} |
|||
|
|||
// 验证手机号格式
|
|||
if (!/^1[3-9][0-9]{9}$/.test(mobile)) { |
|||
message.textContent = '请输入正确的手机号'; |
|||
message.className = 'error-message'; |
|||
return; |
|||
} |
|||
|
|||
// 验证密码长度
|
|||
if (pwd.length < 6) { |
|||
message.textContent = '密码长度至少6位'; |
|||
message.className = 'error-message'; |
|||
return; |
|||
} |
|||
|
|||
// 构建请求数据
|
|||
const registerData = { |
|||
companyId: parseInt(company), |
|||
deptId: parseInt(department), |
|||
positionId: parseInt(position), |
|||
empName: emp_name, |
|||
mobile: mobile, |
|||
password: pwd |
|||
}; |
|||
|
|||
try { |
|||
// 使用API服务发送注册请求
|
|||
await API.auth.register(registerData); |
|||
|
|||
// 注册成功
|
|||
message.textContent = '注册成功！即将跳转到登录页面...'; |
|||
message.className = 'success-message'; |
|||
|
|||
// 3秒后跳转到登录页面
|
|||
setTimeout(function() { |
|||
window.location.href = 'login.html'; |
|||
}, 3000); |
|||
} catch (error) { |
|||
// 注册失败
|
|||
message.textContent = '注册失败，请稍后重试'; |
|||
message.className = 'error-message'; |
|||
console.error('注册错误:', error); |
|||
} |
|||
}); |
|||
}); |
|||
@ -0,0 +1,293 @@ |
|||
/** |
|||
* 简单HTML5前端框架 |
|||
* 作者：前端架构师 |
|||
* 创建时间：2026-03-06 |
|||
* 版本：1.0.0 |
|||
* |
|||
* 框架功能： |
|||
* 1. DOM操作API |
|||
* 2. 组件系统 |
|||
* 3. 路由功能 |
|||
* 4. 状态管理 |
|||
*/ |
|||
|
|||
// 框架核心对象
|
|||
const Framework = { |
|||
/** |
|||
* DOM操作API |
|||
*/ |
|||
dom: { |
|||
/** |
|||
* 根据选择器获取元素 |
|||
* @param {string} selector - CSS选择器 |
|||
* @param {Element} context - 上下文元素，默认为document |
|||
* @returns {Element|null} - 匹配的元素 |
|||
*/ |
|||
query: function(selector, context = document) { |
|||
return context.querySelector(selector); |
|||
}, |
|||
|
|||
/** |
|||
* 根据选择器获取多个元素 |
|||
* @param {string} selector - CSS选择器 |
|||
* @param {Element} context - 上下文元素，默认为document |
|||
* @returns {NodeList} - 匹配的元素列表 |
|||
*/ |
|||
queryAll: function(selector, context = document) { |
|||
return context.querySelectorAll(selector); |
|||
}, |
|||
|
|||
/** |
|||
* 创建元素 |
|||
* @param {string} tagName - 标签名 |
|||
* @param {Object} options - 元素属性和事件 |
|||
* @returns {Element} - 创建的元素 |
|||
*/ |
|||
create: function(tagName, options = {}) { |
|||
const element = document.createElement(tagName); |
|||
|
|||
// 设置属性
|
|||
if (options.attributes) { |
|||
Object.keys(options.attributes).forEach(attr => { |
|||
element.setAttribute(attr, options.attributes[attr]); |
|||
}); |
|||
} |
|||
|
|||
// 设置样式
|
|||
if (options.style) { |
|||
Object.assign(element.style, options.style); |
|||
} |
|||
|
|||
// 设置事件监听器
|
|||
if (options.events) { |
|||
Object.keys(options.events).forEach(event => { |
|||
element.addEventListener(event, options.events[event]); |
|||
}); |
|||
} |
|||
|
|||
// 设置文本内容
|
|||
if (options.text) { |
|||
element.textContent = options.text; |
|||
} |
|||
|
|||
return element; |
|||
}, |
|||
|
|||
/** |
|||
* 添加事件监听器 |
|||
* @param {Element} element - 目标元素 |
|||
* @param {string} event - 事件类型 |
|||
* @param {Function} callback - 回调函数 |
|||
*/ |
|||
on: function(element, event, callback) { |
|||
element.addEventListener(event, callback); |
|||
}, |
|||
|
|||
/** |
|||
* 移除事件监听器 |
|||
* @param {Element} element - 目标元素 |
|||
* @param {string} event - 事件类型 |
|||
* @param {Function} callback - 回调函数 |
|||
*/ |
|||
off: function(element, event, callback) { |
|||
element.removeEventListener(event, callback); |
|||
}, |
|||
|
|||
/** |
|||
* 触发事件 |
|||
* @param {Element} element - 目标元素 |
|||
* @param {string} event - 事件类型 |
|||
* @param {Object} detail - 事件详情 |
|||
*/ |
|||
trigger: function(element, event, detail = {}) { |
|||
const customEvent = new CustomEvent(event, { detail }); |
|||
element.dispatchEvent(customEvent); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 组件系统 |
|||
*/ |
|||
component: { |
|||
/** |
|||
* 注册组件 |
|||
* @param {string} name - 组件名称 |
|||
* @param {Function} constructor - 组件构造函数 |
|||
*/ |
|||
register: function(name, constructor) { |
|||
if (!this.components) { |
|||
this.components = {}; |
|||
} |
|||
this.components[name] = constructor; |
|||
}, |
|||
|
|||
/** |
|||
* 创建组件实例 |
|||
* @param {string} name - 组件名称 |
|||
* @param {Object} props - 组件属性 |
|||
* @param {Element} container - 容器元素 |
|||
* @returns {Object} - 组件实例 |
|||
*/ |
|||
create: function(name, props = {}, container = null) { |
|||
if (!this.components || !this.components[name]) { |
|||
throw new Error(`Component ${name} not registered`); |
|||
} |
|||
|
|||
const Component = this.components[name]; |
|||
const instance = new Component(props); |
|||
|
|||
if (container) { |
|||
instance.mount(container); |
|||
} |
|||
|
|||
return instance; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 路由功能 |
|||
*/ |
|||
router: { |
|||
/** |
|||
* 路由配置 |
|||
*/ |
|||
routes: {}, |
|||
|
|||
/** |
|||
* 初始化路由 |
|||
*/ |
|||
init: function() { |
|||
// 监听哈希变化
|
|||
window.addEventListener('hashchange', this.handleHashChange.bind(this)); |
|||
// 初始加载
|
|||
this.handleHashChange(); |
|||
}, |
|||
|
|||
/** |
|||
* 注册路由 |
|||
* @param {string} path - 路由路径 |
|||
* @param {Function} handler - 路由处理函数 |
|||
*/ |
|||
register: function(path, handler) { |
|||
this.routes[path] = handler; |
|||
}, |
|||
|
|||
/** |
|||
* 处理哈希变化 |
|||
*/ |
|||
handleHashChange: function() { |
|||
const hash = window.location.hash || '#home'; |
|||
const path = hash.substring(1); |
|||
|
|||
if (this.routes[path]) { |
|||
this.routes[path](); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 状态管理 |
|||
*/ |
|||
store: { |
|||
/** |
|||
* 状态数据 |
|||
*/ |
|||
state: {}, |
|||
|
|||
/** |
|||
* 订阅者列表 |
|||
*/ |
|||
subscribers: [], |
|||
|
|||
/** |
|||
* 获取状态 |
|||
* @param {string} key - 状态键名 |
|||
* @returns {*} - 状态值 |
|||
*/ |
|||
get: function(key) { |
|||
return this.state[key]; |
|||
}, |
|||
|
|||
/** |
|||
* 设置状态 |
|||
* @param {string} key - 状态键名 |
|||
* @param {*} value - 状态值 |
|||
*/ |
|||
set: function(key, value) { |
|||
this.state[key] = value; |
|||
this.notify(); |
|||
}, |
|||
|
|||
/** |
|||
* 订阅状态变化 |
|||
* @param {Function} callback - 回调函数 |
|||
* @returns {Function} - 取消订阅函数 |
|||
*/ |
|||
subscribe: function(callback) { |
|||
this.subscribers.push(callback); |
|||
return () => { |
|||
this.subscribers = this.subscribers.filter(sub => sub !== callback); |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 通知订阅者 |
|||
*/ |
|||
notify: function() { |
|||
this.subscribers.forEach(callback => callback(this.state)); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 工具方法 |
|||
*/ |
|||
utils: { |
|||
/** |
|||
* 防抖函数 |
|||
* @param {Function} func - 要防抖的函数 |
|||
* @param {number} wait - 等待时间（毫秒） |
|||
* @returns {Function} - 防抖后的函数 |
|||
*/ |
|||
debounce: function(func, wait) { |
|||
let timeout; |
|||
return function(...args) { |
|||
clearTimeout(timeout); |
|||
timeout = setTimeout(() => func.apply(this, args), wait); |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 节流函数 |
|||
* @param {Function} func - 要节流的函数 |
|||
* @param {number} limit - 时间限制（毫秒） |
|||
* @returns {Function} - 节流后的函数 |
|||
*/ |
|||
throttle: function(func, limit) { |
|||
let inThrottle; |
|||
return function(...args) { |
|||
if (!inThrottle) { |
|||
func.apply(this, args); |
|||
inThrottle = true; |
|||
setTimeout(() => inThrottle = false, limit); |
|||
} |
|||
}; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 数据模型服务 |
|||
*/ |
|||
model: { |
|||
AuditPermission: window.AuditPermission || {}, |
|||
Company: window.Company || {}, |
|||
Customer: window.Customer || {}, |
|||
CustomerContact: window.CustomerContact || {}, |
|||
Department: window.Department || {}, |
|||
Employee: window.Employee || {}, |
|||
OperationLog: window.OperationLog || {}, |
|||
Position: window.Position || {} |
|||
} |
|||
}; |
|||
|
|||
// 导出框架
|
|||
window.Framework = Framework; |
|||
@ -0,0 +1,199 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>简单HTML5前端框架</title> |
|||
<style> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
line-height: 1.6; |
|||
color: #333; |
|||
background-color: #f5f5f5; |
|||
} |
|||
.container { |
|||
max-width: 1200px; |
|||
margin: 0 auto; |
|||
padding: 20px; |
|||
} |
|||
header { |
|||
background-color: #3498db; |
|||
color: white; |
|||
padding: 10px 0; |
|||
text-align: center; |
|||
} |
|||
nav { |
|||
background-color: #2c3e50; |
|||
color: white; |
|||
padding: 10px 0; |
|||
} |
|||
nav ul { |
|||
list-style: none; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
nav ul li { |
|||
margin: 0 10px; |
|||
} |
|||
nav ul li a { |
|||
color: white; |
|||
text-decoration: none; |
|||
padding: 5px 10px; |
|||
border-radius: 3px; |
|||
transition: background-color 0.3s; |
|||
} |
|||
nav ul li a:hover { |
|||
background-color: #34495e; |
|||
} |
|||
section { |
|||
background-color: white; |
|||
padding: 20px; |
|||
margin: 20px 0; |
|||
border-radius: 5px; |
|||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|||
} |
|||
footer { |
|||
background-color: #2c3e50; |
|||
color: white; |
|||
text-align: center; |
|||
padding: 10px 0; |
|||
margin-top: 20px; |
|||
} |
|||
.button { |
|||
display: inline-block; |
|||
padding: 10px 20px; |
|||
background-color: #3498db; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
transition: background-color 0.3s; |
|||
} |
|||
.button:hover { |
|||
background-color: #2980b9; |
|||
} |
|||
.counter { |
|||
text-align: center; |
|||
margin: 20px 0; |
|||
} |
|||
.counter h2 { |
|||
margin-bottom: 10px; |
|||
} |
|||
.counter-buttons { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<header> |
|||
<h1>简单HTML5前端框架</h1> |
|||
<div id="user-info" style="float: right; margin-right: 20px;"> |
|||
<span id="welcome-message"></span> |
|||
<a href="auth/login.html" id="login-link">登录</a> |
|||
<a href="#" id="logout-link" style="display: none;">登出</a> |
|||
</div> |
|||
</header> |
|||
<nav> |
|||
<ul> |
|||
<li><a href="#home">首页</a></li> |
|||
<li><a href="#about">关于</a></li> |
|||
<li><a href="#counter">计数器</a></li> |
|||
<li><a href="#models">数据模型</a></li> |
|||
</ul> |
|||
</nav> |
|||
<div class="container"> |
|||
<section id="home"> |
|||
<h2>首页</h2> |
|||
<p>欢迎使用简单HTML5前端框架！这是一个轻量级的前端框架，包含基本的DOM操作、组件系统、路由和状态管理功能。</p> |
|||
<a href="#counter" class="button">查看计数器示例</a> |
|||
</section> |
|||
<section id="about" style="display: none;"> |
|||
<h2>关于</h2> |
|||
<p>这个前端框架是使用HTML5和原生JavaScript实现的，旨在提供一个简单易用的开发环境，帮助开发者快速构建前端应用。</p> |
|||
<p>框架特点：</p> |
|||
<ul> |
|||
<li>轻量级设计</li> |
|||
<li>简单的DOM操作API</li> |
|||
<li>组件化开发</li> |
|||
<li>基础路由功能</li> |
|||
<li>状态管理</li> |
|||
</ul> |
|||
</section> |
|||
<section id="counter" style="display: none;"> |
|||
<div class="counter"> |
|||
<h2>计数器</h2> |
|||
<p id="count">0</p> |
|||
<div class="counter-buttons"> |
|||
<button class="button" id="increment">增加</button> |
|||
<button class="button" id="decrement">减少</button> |
|||
<button class="button" id="reset">重置</button> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<section id="models" style="display: none;"> |
|||
<h2>数据模型</h2> |
|||
<p>以下是使用框架数据模型的示例：</p> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>审核权限模型</h3> |
|||
<div id="audit-permission-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>公司模型</h3> |
|||
<div id="company-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>客户主表模型</h3> |
|||
<div id="customer-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>客户联系信息子表模型</h3> |
|||
<div id="customer-contact-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>部门表模型</h3> |
|||
<div id="department-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>公司员工表模型</h3> |
|||
<div id="employee-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>系统操作日志表模型</h3> |
|||
<div id="operation-log-demo"></div> |
|||
</div> |
|||
|
|||
<div style="margin: 20px 0;"> |
|||
<h3>公司岗位表模型</h3> |
|||
<div id="position-demo"></div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
<footer> |
|||
<p>© 2026 简单HTML5前端框架</p> |
|||
</footer> |
|||
<script src="models/auditPermission.js"></script> |
|||
<script src="models/company.js"></script> |
|||
<script src="models/customer.js"></script> |
|||
<script src="models/customerContact.js"></script> |
|||
<script src="models/department.js"></script> |
|||
<script src="models/employee.js"></script> |
|||
<script src="models/operationLog.js"></script> |
|||
<script src="models/position.js"></script> |
|||
<script src="framework.js"></script> |
|||
<script src="api/api.js"></script> |
|||
<script src="app.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,64 @@ |
|||
/** |
|||
* 审核权限配置表模型 |
|||
*/ |
|||
|
|||
const AuditPermission = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
company_id: 'number', |
|||
position_id: 'number', |
|||
audit_type: 'string', |
|||
audit_level: 'number', |
|||
audit_scope: 'string', |
|||
max_audit_amount: 'number', |
|||
sort: 'number', |
|||
status: 'number', |
|||
effective_time: 'date', |
|||
invalid_time: 'date', |
|||
create_by: 'string', |
|||
create_time: 'date', |
|||
update_by: 'string', |
|||
update_time: 'date', |
|||
delete_by: 'number', |
|||
delete_time: 'date', |
|||
remark: 'string', |
|||
deleted: 'number' |
|||
}, |
|||
|
|||
/** |
|||
* 创建审核权限实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 审核权限实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
company_id: data.company_id || 0, |
|||
position_id: data.position_id || 0, |
|||
audit_type: data.audit_type || '', |
|||
audit_level: data.audit_level || 0, |
|||
audit_scope: data.audit_scope || '*', |
|||
max_audit_amount: data.max_audit_amount || null, |
|||
sort: data.sort || 0, |
|||
status: data.status || 1, |
|||
effective_time: data.effective_time || null, |
|||
invalid_time: data.invalid_time || null, |
|||
create_by: data.create_by || null, |
|||
create_time: data.create_time || new Date(), |
|||
update_by: data.update_by || null, |
|||
update_time: data.update_time || null, |
|||
delete_by: data.delete_by || null, |
|||
delete_time: data.delete_time || null, |
|||
remark: data.remark || '', |
|||
deleted: data.deleted || 0 |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.AuditPermission = AuditPermission; |
|||
@ -0,0 +1,66 @@ |
|||
/** |
|||
* 公司模型 |
|||
*/ |
|||
|
|||
const Company = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
company_name: 'string', |
|||
tenant_id: 'string', |
|||
parent_company_id: 'number', |
|||
short_name: 'string', |
|||
industry: 'string', |
|||
contact_mobile: 'string', |
|||
contact_email: 'string', |
|||
expire_time: 'date', |
|||
effective_time: 'date', |
|||
invalid_time: 'date', |
|||
status: 'number', |
|||
create_by: 'number', |
|||
create_time: 'date', |
|||
update_by: 'number', |
|||
update_time: 'date', |
|||
delete_by: 'number', |
|||
delete_time: 'date', |
|||
remark: 'string', |
|||
deleted: 'number' |
|||
}, |
|||
|
|||
/** |
|||
* 创建公司实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 公司实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
company_name: data.company_name || '', |
|||
tenant_id: data.tenant_id || '', |
|||
parent_company_id: data.parent_company_id || 0, |
|||
short_name: data.short_name || null, |
|||
industry: data.industry || null, |
|||
contact_mobile: data.contact_mobile || null, |
|||
contact_email: data.contact_email || null, |
|||
expire_time: data.expire_time || null, |
|||
effective_time: data.effective_time || null, |
|||
invalid_time: data.invalid_time || null, |
|||
status: data.status || 1, |
|||
create_by: data.create_by || 0, |
|||
create_time: data.create_time || new Date(), |
|||
update_by: data.update_by || null, |
|||
update_time: data.update_time || null, |
|||
delete_by: data.delete_by || null, |
|||
delete_time: data.delete_time || null, |
|||
remark: data.remark || '', |
|||
deleted: data.deleted || 0 |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.Company = Company; |
|||
@ -0,0 +1,56 @@ |
|||
/** |
|||
* 客户主表模型 |
|||
*/ |
|||
|
|||
const Customer = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
customer_id: 'number', |
|||
customer_name: 'string', |
|||
create_date: 'date', |
|||
last_order_date: 'date', |
|||
last_followup_date: 'date', |
|||
followup_status: 'string', |
|||
responsible_person: 'string', |
|||
department: 'string', |
|||
assistant: 'string', |
|||
region: 'string', |
|||
customer_type: 'string', |
|||
customer_level: 'string', |
|||
basic_requirements: 'string', |
|||
specifications: 'string', |
|||
created_at: 'date', |
|||
updated_at: 'date' |
|||
}, |
|||
|
|||
/** |
|||
* 创建客户实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 客户实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
customer_id: data.customer_id || null, |
|||
customer_name: data.customer_name || '', |
|||
create_date: data.create_date || null, |
|||
last_order_date: data.last_order_date || null, |
|||
last_followup_date: data.last_followup_date || null, |
|||
followup_status: data.followup_status || '', |
|||
responsible_person: data.responsible_person || null, |
|||
department: data.department || null, |
|||
assistant: data.assistant || null, |
|||
region: data.region || null, |
|||
customer_type: data.customer_type || null, |
|||
customer_level: data.customer_level || null, |
|||
basic_requirements: data.basic_requirements || '', |
|||
specifications: data.specifications || '', |
|||
created_at: data.created_at || new Date(), |
|||
updated_at: data.updated_at || new Date() |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.Customer = Customer; |
|||
@ -0,0 +1,48 @@ |
|||
/** |
|||
* 客户联系信息子表模型 |
|||
*/ |
|||
|
|||
const CustomerContact = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
contact_id: 'number', |
|||
customer_id: 'number', |
|||
wechat_id: 'string', |
|||
contact_name: 'string', |
|||
phone: 'string', |
|||
account: 'string', |
|||
account_number: 'string', |
|||
bank: 'string', |
|||
address: 'string', |
|||
company_name: 'string', |
|||
created_at: 'date', |
|||
updated_at: 'date' |
|||
}, |
|||
|
|||
/** |
|||
* 创建客户联系信息实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 客户联系信息实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
contact_id: data.contact_id || null, |
|||
customer_id: data.customer_id || 0, |
|||
wechat_id: data.wechat_id || null, |
|||
contact_name: data.contact_name || null, |
|||
phone: data.phone || null, |
|||
account: data.account || null, |
|||
account_number: data.account_number || null, |
|||
bank: data.bank || null, |
|||
address: data.address || '', |
|||
company_name: data.company_name || null, |
|||
created_at: data.created_at || new Date(), |
|||
updated_at: data.updated_at || new Date() |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.CustomerContact = CustomerContact; |
|||
@ -0,0 +1,64 @@ |
|||
/** |
|||
* 部门表模型 |
|||
*/ |
|||
|
|||
const Department = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
company_id: 'number', |
|||
dept_name: 'string', |
|||
parent_id: 'number', |
|||
dept_level: 'number', |
|||
dept_code: 'string', |
|||
leader_id: 'number', |
|||
sort: 'number', |
|||
status: 'number', |
|||
effective_time: 'date', |
|||
invalid_time: 'date', |
|||
create_by: 'number', |
|||
create_time: 'date', |
|||
update_by: 'number', |
|||
update_time: 'date', |
|||
delete_by: 'number', |
|||
delete_time: 'date', |
|||
remark: 'string', |
|||
deleted: 'number' |
|||
}, |
|||
|
|||
/** |
|||
* 创建部门实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 部门实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
company_id: data.company_id || 0, |
|||
dept_name: data.dept_name || '', |
|||
parent_id: data.parent_id || 0, |
|||
dept_level: data.dept_level || 1, |
|||
dept_code: data.dept_code || null, |
|||
leader_id: data.leader_id || null, |
|||
sort: data.sort || 0, |
|||
status: data.status || 1, |
|||
effective_time: data.effective_time || null, |
|||
invalid_time: data.invalid_time || null, |
|||
create_by: data.create_by || null, |
|||
create_time: data.create_time || new Date(), |
|||
update_by: data.update_by || null, |
|||
update_time: data.update_time || new Date(), |
|||
delete_by: data.delete_by || null, |
|||
delete_time: data.delete_time || null, |
|||
remark: data.remark || '', |
|||
deleted: data.deleted || 0 |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.Department = Department; |
|||
@ -0,0 +1,82 @@ |
|||
/** |
|||
* 公司员工表模型 |
|||
*/ |
|||
|
|||
const Employee = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
company_id: 'number', |
|||
dept_id: 'number', |
|||
position_id: 'number', |
|||
emp_name: 'string', |
|||
mobile: 'string', |
|||
pwd: 'string', |
|||
emp_no: 'string', |
|||
email: 'string', |
|||
id_card: 'string', |
|||
id_card_encrypted: 'string', |
|||
entry_time: 'date', |
|||
leave_time: 'date', |
|||
is_admin: 'number', |
|||
is_leader: 'number', |
|||
status: 'number', |
|||
effective_time: 'date', |
|||
invalid_time: 'date', |
|||
last_login_time: 'date', |
|||
create_by: 'number', |
|||
create_time: 'date', |
|||
update_by: 'number', |
|||
update_time: 'date', |
|||
delete_by: 'number', |
|||
delete_time: 'date', |
|||
remark: 'string', |
|||
deleted: 'number', |
|||
mobile_encrypted: 'string' |
|||
}, |
|||
|
|||
/** |
|||
* 创建员工实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 员工实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
company_id: data.company_id || 0, |
|||
dept_id: data.dept_id || 0, |
|||
position_id: data.position_id || 0, |
|||
emp_name: data.emp_name || '', |
|||
mobile: data.mobile || null, |
|||
pwd: data.pwd || null, |
|||
emp_no: data.emp_no || '', |
|||
email: data.email || null, |
|||
id_card: data.id_card || null, |
|||
id_card_encrypted: data.id_card_encrypted || null, |
|||
entry_time: data.entry_time || null, |
|||
leave_time: data.leave_time || null, |
|||
is_admin: data.is_admin || 0, |
|||
is_leader: data.is_leader || 0, |
|||
status: data.status || 1, |
|||
effective_time: data.effective_time || null, |
|||
invalid_time: data.invalid_time || null, |
|||
last_login_time: data.last_login_time || null, |
|||
create_by: data.create_by || null, |
|||
create_time: data.create_time || new Date(), |
|||
update_by: data.update_by || null, |
|||
update_time: data.update_time || new Date(), |
|||
delete_by: data.delete_by || null, |
|||
delete_time: data.delete_time || null, |
|||
remark: data.remark || '', |
|||
deleted: data.deleted || 0, |
|||
mobile_encrypted: data.mobile_encrypted || null |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.Employee = Employee; |
|||
@ -0,0 +1,28 @@ |
|||
/** |
|||
* 模型管理索引文件 |
|||
* 集中导出所有数据模型 |
|||
*/ |
|||
|
|||
// 导入各个模型
|
|||
import AuditPermission from './auditPermission.js'; |
|||
import Company from './company.js'; |
|||
import Customer from './customer.js'; |
|||
import CustomerContact from './customerContact.js'; |
|||
import Department from './department.js'; |
|||
import Employee from './employee.js'; |
|||
import OperationLog from './operationLog.js'; |
|||
import Position from './position.js'; |
|||
|
|||
// 导出所有模型
|
|||
const models = { |
|||
AuditPermission, |
|||
Company, |
|||
Customer, |
|||
CustomerContact, |
|||
Department, |
|||
Employee, |
|||
OperationLog, |
|||
Position |
|||
}; |
|||
|
|||
export default models; |
|||
@ -0,0 +1,46 @@ |
|||
/** |
|||
* 系统操作日志表模型 |
|||
*/ |
|||
|
|||
const OperationLog = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
tenant_id: 'string', |
|||
table_name: 'string', |
|||
data_id: 'number', |
|||
oper_type: 'number', |
|||
oper_content: 'string', |
|||
oper_by: 'string', |
|||
oper_time: 'date', |
|||
remark: 'string', |
|||
ip: 'string' |
|||
}, |
|||
|
|||
/** |
|||
* 创建操作日志实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 操作日志实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
tenant_id: data.tenant_id || '', |
|||
table_name: data.table_name || '', |
|||
data_id: data.data_id || 0, |
|||
oper_type: data.oper_type || 0, |
|||
oper_content: data.oper_content || '', |
|||
oper_by: data.oper_by || '', |
|||
oper_time: data.oper_time || new Date(), |
|||
remark: data.remark || '', |
|||
ip: data.ip || null |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.OperationLog = OperationLog; |
|||
@ -0,0 +1,62 @@ |
|||
/** |
|||
* 公司岗位表模型 |
|||
*/ |
|||
|
|||
const Position = { |
|||
/** |
|||
* 模型字段定义 |
|||
*/ |
|||
fields: { |
|||
id: 'number', |
|||
uuid: 'string', |
|||
company_id: 'number', |
|||
dept_id: 'number', |
|||
position_name: 'string', |
|||
position_code: 'string', |
|||
position_type: 'number', |
|||
sort: 'number', |
|||
status: 'number', |
|||
effective_time: 'date', |
|||
invalid_time: 'date', |
|||
create_by: 'number', |
|||
create_time: 'date', |
|||
update_by: 'number', |
|||
update_time: 'date', |
|||
delete_by: 'number', |
|||
delete_time: 'date', |
|||
remark: 'string', |
|||
deleted: 'number' |
|||
}, |
|||
|
|||
/** |
|||
* 创建岗位实例 |
|||
* @param {Object} data - 数据对象 |
|||
* @returns {Object} - 岗位实例 |
|||
*/ |
|||
create: function(data) { |
|||
return { |
|||
id: data.id || null, |
|||
uuid: data.uuid || '', |
|||
company_id: data.company_id || 0, |
|||
dept_id: data.dept_id || 0, |
|||
position_name: data.position_name || '', |
|||
position_code: data.position_code || null, |
|||
position_type: data.position_type || 1, |
|||
sort: data.sort || 0, |
|||
status: data.status || 1, |
|||
effective_time: data.effective_time || null, |
|||
invalid_time: data.invalid_time || null, |
|||
create_by: data.create_by || null, |
|||
create_time: data.create_time || new Date(), |
|||
update_by: data.update_by || null, |
|||
update_time: data.update_time || new Date(), |
|||
delete_by: data.delete_by || null, |
|||
delete_time: data.delete_time || null, |
|||
remark: data.remark || '', |
|||
deleted: data.deleted || 0 |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
// 导出为全局变量
|
|||
window.Position = Position; |
|||
Loading…
Reference in new issue