You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
519 lines
20 KiB
519 lines
20 KiB
/**
|
|
* 应用示例
|
|
* 使用简单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] || '未知';
|
|
}
|