阻止input type=“date“弹出日期选项卡

这篇博客介绍了如何在Android微信浏览器中实现一个功能,即在7月1日之后才允许用户选择日期。通过在input标签中添加onclick属性,并设置特定的JavaScript代码,实现了对日期选择的条件控制,防止用户提前选择日期。此方法适用于疫情防控期间预约功能的控制。

需求:在7月1日之后才能进行日期选择

解决方法:

设备:Android 微信浏览器

在input标签中填一个οnclick=“”

<input class="date" type="date" id="date" name="date" onclick="if(Date.parse('2022-07-01') > new Date) {alert('由于疫情防控,预约功能将在7月开始');return false}return true" />
<!--  注意:onclick 中的部分不能写成函数(电脑上的浏览器可以写成函数)  -->
请详细分析下面代码:<#import "/decorators/includes/macros.ftl" as m> <#assign ww = JspTaglibs["/WEB-INF/webwork.tld"] /> <#include "/template/includes/actionerrors.ftl"> <#assign useStepNo=false> <#if requestForm.stepForms?exists> <#list requestForm.stepForms as stepForm> <#if stepForm.stepNo?exists> <#assign useStepNo=true> </#if> </#list> </#if> <script> document.onkeydown = function() { if(event.keyCode==116) { event.keyCode=0; event.returnValue = false; } if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4 event.keyCode=0; event.returnValue=false; alert("Please do not exit like this again. This case maybe have some problem cause of the action.Please check it.\r\n 请下次不要再这样退出。由于你的这个动作,这个单子可能已经产生了错误,请检查。"); return false; } if ((event.ctrlKey)&&(event.keyCode==87)){ //屏蔽 Ctrl+n event.keyCode=0; event.returnValue=false; return false; } } //document.oncontextmenu = function() {event.returnValue = false;} function continueRuncard(){ var date = new Date(); var minute=date.getMinutes(); if(parseInt(minute)>=0 && parseInt(minute)<=5) { alert("整点系统同步中.\n请稍后再试!"); return false; } var compareResultComment=document.getElementById("compareResultComment"); if (compareResultComment!=null){ confineStringLength(compareResultComment,500); if(compareResultComment.value==""){ return false; } } var form = document.forms['']; form.action="continueRuncard.action"; form.submit(); } function cancelRuncard(){ var date = new Date(); var minute=date.getMinutes(); if(parseInt(minute)>=0 && parseInt(minute)<=5) { alert("整点系统同步中.\n请稍后再试!"); return false; } var form = document.forms['']; form.action="cancelRuncard.action"; form.submit(); } function compareWithMes(){ <#if Rework> alert("Because RunCard's category is rework. \r\n System will not execute this function!"); return false; </#if> var form = document.forms['submitRequestFormForm']; if(!confirm("Do you want to create the comparison with MES document?\n你是否需要E-RC与MES做对比?\n\n确定 = E-RC对比MES(此动作可能需要花费几分钟时间,请耐心等待)\n\n取消 = E-RC不比对MES")){ return false; } form.action="eRuncardRule.action"; form.submit(); } function submitRunCard(){ var compareResultComment=document.getElementById("compareResultComment"); if (compareResultComment!=null){ confineStringLength(compareResultComment,500); if(compareResultComment.value==""){ return false; } } var date = new Date(); var minute=date.getMinutes(); if(parseInt(minute)>=0 && parseInt(minute)<=5) { alert("整点系统同步中.\n请稍后再试!"); return false; } disableButton(); var f=document.submitRequestFormForm; f.action = "submitRequestForm.action"; var xmlHttp = XmlHttp.create(); var async = false; xmlHttp.open("GET", "checkStepNoExistInFecp.action?lotId=${requestForm.lotId?if_exists}&holdStepNo=${requestForm.holdStepNo?if_exists}", async); xmlHttp.send(null); if(xmlHttp.responseText != null && xmlHttp.responseText == '<success/>'){ if (!confirm("你确认是否需要在这步做STR/MSTR and Link STR/MSTR \nNumber? If yes, 请确认E-runcard condition exactly \n match with FECP/STR, MSTR system\n\n确定 = 确认 Link STR/MSTR Number, submit E-runcard \n\n取消 = 修改 E-runcard")){ f.action = "viewUpdateRequestForm.action"; //f.submit(); } f.submit(); }else if(xmlHttp.responseXML != null && xmlHttp.responseXML.getElementsByTagName("success").length > 0){ if (!confirm("你确认是否需要在这步做STR/MSTR and Link STR/MSTR \nNumber? If yes, 请确认E-runcard condition exactly \n match with FECP/STR, MSTR system\n\n确定 = 确认 Link STR/MSTR Number, submit E-runcard \n\n取消 = 修改 E-runcard")){ f.action = "viewUpdateRequestForm.action"; //f.submit(); } f.submit(); }else{ f.submit(); } } </script> <@ww.form name="'submitRequestFormForm'" namespace="'/user'" validate="'true'" method="'post'" theme="'simple'"> <@ww.hidden name="'requestFormId'" value="${requestForm.id}"/> <@ww.token name="submitToken"/> <div class="app"> <h3>View e-Runcard Request Form</h3> <table border="0" cellspacing="1" cellpadding="8" width="100%"> <tr class="b"> <td>RunCard No.:</td> <td>${requestForm.caseNo?if_exists}</td> <td>Status:</td> <td><font color="red">${requestForm.status?if_exists}</font></td> </tr> <tr class="b"> <td>Applicant:</td> <td><@m.directoryLink requestForm.applicant?if_exists/> </td> <td>Organization:</td> <td>${requestForm.applicantOrg?if_exists}</td> </tr> <tr class="b"> <td>Submit Date:</td> <td>${requestForm.submitDate?if_exists}</td> <td>Effective Date:</td> <td>${requestForm.effectiveDate?if_exists}</td> </tr> <#include "viewIncludeLotInfo.ftl"/> <#include "viewIncludeSignInfo.ftl"/> <#include "viewIncludeErcHeaderInfo.ftl"/> <#include "viewIncludeErcCompleteInfo.ftl"/> <#switch requestForm.formType> <#case "Auto Reposition Step"> <#break> <#default> <table border="0" cellspacing="1" cellpadding="8" width="100%"> <tr> <th colspan="4">RunCard Steps Information</th> </tr> <#assign showWGAction = true > <#include "stepForm/includeStepForm.ftl"/> </table> </#switch> </table> <hr/> <#if requestForm.match?default("")=="N"> <table border="0" cellspacing="1" cellpadding="8" width="100%"> <tr class="b"> <td>Compare Result Comment <BR>请输入原因(Only 500 characters)</td> <td><@ww.textarea name="'requestForm.compareResultComment'" id="compareResultComment" cols="80" rows="5" theme="'simple'"/></td> </tr> </table> </#if> <table width="100%"> <tr> <td class="center"> <#if requestForm.formType="Normal"> <input type="button" onclick="compareWithMes()" value="Compare"/>     </#if> <#if requestForm.haveQtime?exists> <#if requestForm.haveQtime=="Y"> <#if requestForm.formType!="Scan Defect"> <#if requestForm.formType="Normal" && useStepNo && requestForm.match=="No Comparison" && !Rework> <input type="button" class="btn" value="Continue Runcard" onclick="alert('please compare runcard first.');"/>     <#else> <input type="button" class="btn" value="Continue Runcard" onclick="continueRuncard()"/>     </#if> </#if> <input type="button" class="btn" value="Cancel Runcard" onclick="cancelRuncard()"/>     </#if> <#else> <#if requestForm.formType="Normal" && useStepNo && requestForm.match=="No Comparison" && !Rework> <input type="button" class="btn" value="Submit" onclick="alert('please compare runcard first.');"/>     <#else> <input type="button" class="btn" value="Submit" onclick="submitRunCard()"/>     </#if> <input type="button" class="btn" value="Back" onclick="document.location.href='${req.contextPath}/user/viewUpdateRequestForm.action?requestFormId=${requestForm.id}'"/> </#if> </td> </tr> </table> <div> </@ww.form>
09-20
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> <el-form-item label="角色名称" prop="roleName"> <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="权限字符" prop="roleKey"> <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px" > <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="创建时间"> <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:role:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:role:export']" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="角色编号" prop="roleId" width="120" /> <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" /> <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" /> <el-table-column label="显示顺序" prop="roleSort" width="100" /> <el-table-column label="状态" align="center" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" ></el-switch> </template> </el-table-column> <el-table-column label="创建时间" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope" v-if="scope.row.roleId !== 1"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']" >删除</el-button> <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']"> <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item> <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改角色配置对话框 --> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="角色名称" prop="roleName"> <el-input v-model="form.roleName" placeholder="请输入角色名称" /> </el-form-item> <el-form-item prop="roleKey"> <span slot="label"> <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 权限字符 </span> <el-input v-model="form.roleKey" placeholder="请输入权限字符" /> </el-form-item> <el-form-item label="角色顺序" prop="roleSort"> <el-input-number v-model="form.roleSort" controls-position="right" :min="0" /> </el-form-item> <el-form-item label="状态"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> <el-form-item label="菜单权限"> <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox> <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox> <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" empty-text="加载中,请稍候" :props="defaultProps" ></el-tree> </el-form-item> <el-form-item label="备注"> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <!-- 分配角色数据权限对话框 --> <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body> <el-form :model="form" label-width="80px"> <el-form-item label="角色名称"> <el-input v-model="form.roleName" :disabled="true" /> </el-form-item> <el-form-item label="权限字符"> <el-input v-model="form.roleKey" :disabled="true" /> </el-form-item> <el-form-item label="权限范围"> <el-select v-model="form.dataScope" @change="dataScopeSelectChange"> <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item label="数据权限" v-show="form.dataScope == 2"> <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox> <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox> <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id" :check-strictly="!form.deptCheckStrictly" empty-text="加载中,请稍候" :props="defaultProps" ></el-tree> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitDataScope">确 定</el-button> <el-button @click="cancelDataScope">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role" import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu" export default { name: "Role", dicts: ['sys_normal_disable'], data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 角色表格数据 roleList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 是否显示弹出层(数据权限) openDataScope: false, menuExpand: false, menuNodeAll: false, deptExpand: true, deptNodeAll: false, // 日期范围 dateRange: [], // 数据范围选项 dataScopeOptions: [ { value: "1", label: "全部数据权限" }, { value: "2", label: "自定数据权限" }, { value: "3", label: "本部门数据权限" }, { value: "4", label: "本部门及以下数据权限" }, { value: "5", label: "仅本人数据权限" } ], // 菜单列表 menuOptions: [], // 部门列表 deptOptions: [], // 查询参数 queryParams: { pageNum: 1, pageSize: 10, roleName: undefined, roleKey: undefined, status: undefined }, // 表单参数 form: {}, defaultProps: { children: "children", label: "label" }, // 表单校验 rules: { roleName: [ { required: true, message: "角色名称不能为空", trigger: "blur" } ], roleKey: [ { required: true, message: "权限字符不能为空", trigger: "blur" } ], roleSort: [ { required: true, message: "角色顺序不能为空", trigger: "blur" } ] } } }, created() { this.getList() }, methods: { /** 查询角色列表 */ getList() { this.loading = true listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.roleList = response.rows this.total = response.total this.loading = false } ) }, /** 查询菜单树结构 */ getMenuTreeselect() { menuTreeselect().then(response => { this.menuOptions = response.data }) }, // 所有菜单节点数据 getMenuAllCheckedKeys() { // 目前被选中的菜单节点 let checkedKeys = this.$refs.menu.getCheckedKeys() // 半选中的菜单节点 let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys() checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) return checkedKeys }, // 所有部门节点数据 getDeptAllCheckedKeys() { // 目前被选中的部门节点 let checkedKeys = this.$refs.dept.getCheckedKeys() // 半选中的部门节点 let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys() checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) return checkedKeys }, /** 根据角色ID查询菜单树结构 */ getRoleMenuTreeselect(roleId) { return roleMenuTreeselect(roleId).then(response => { this.menuOptions = response.menus return response }) }, /** 根据角色ID查询部门树结构 */ getDeptTree(roleId) { return deptTreeSelect(roleId).then(response => { this.deptOptions = response.depts return response }) }, // 角色状态修改 handleStatusChange(row) { let text = row.status === "0" ? "启用" : "停用" this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function() { return changeRoleStatus(row.roleId, row.status) }).then(() => { this.$modal.msgSuccess(text + "成功") }).catch(function() { row.status = row.status === "0" ? "1" : "0" }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 取消按钮(数据权限) cancelDataScope() { this.openDataScope = false this.reset() }, // 表单重置 reset() { if (this.$refs.menu != undefined) { this.$refs.menu.setCheckedKeys([]) } this.menuExpand = false, this.menuNodeAll = false, this.deptExpand = true, this.deptNodeAll = false, this.form = { roleId: undefined, roleName: undefined, roleKey: undefined, roleSort: 0, status: "0", menuIds: [], deptIds: [], menuCheckStrictly: true, deptCheckStrictly: true, remark: undefined } this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery() { this.dateRange = [] this.resetForm("queryForm") this.handleQuery() }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.roleId) this.single = selection.length!=1 this.multiple = !selection.length }, // 更多操作触发 handleCommand(command, row) { switch (command) { case "handleDataScope": this.handleDataScope(row) break case "handleAuthUser": this.handleAuthUser(row) break default: break } }, // 树权限(展开/折叠) handleCheckedTreeExpand(value, type) { if (type == 'menu') { let treeList = this.menuOptions for (let i = 0; i < treeList.length; i++) { this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value } } else if (type == 'dept') { let treeList = this.deptOptions for (let i = 0; i < treeList.length; i++) { this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value } } }, // 树权限(全选/全不选) handleCheckedTreeNodeAll(value, type) { if (type == 'menu') { this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []) } else if (type == 'dept') { this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []) } }, // 树权限(父子联动) handleCheckedTreeConnect(value, type) { if (type == 'menu') { this.form.menuCheckStrictly = value ? true: false } else if (type == 'dept') { this.form.deptCheckStrictly = value ? true: false } }, /** 新增按钮操作 */ handleAdd() { this.reset() this.getMenuTreeselect() this.open = true this.title = "添加角色" }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() const roleId = row.roleId || this.ids const roleMenu = this.getRoleMenuTreeselect(roleId) getRole(roleId).then(response => { this.form = response.data this.open = true this.$nextTick(() => { roleMenu.then(res => { let checkedKeys = res.checkedKeys checkedKeys.forEach((v) => { this.$nextTick(()=>{ this.$refs.menu.setChecked(v, true ,false) }) }) }) }) }) this.title = "修改角色" }, /** 选择角色权限范围触发 */ dataScopeSelectChange(value) { if(value !== '2') { this.$refs.dept.setCheckedKeys([]) } }, /** 分配数据权限操作 */ handleDataScope(row) { this.reset() const deptTreeSelect = this.getDeptTree(row.roleId) getRole(row.roleId).then(response => { this.form = response.data this.openDataScope = true this.$nextTick(() => { deptTreeSelect.then(res => { this.$refs.dept.setCheckedKeys(res.checkedKeys) }) }) }) this.title = "分配数据权限" }, /** 分配用户操作 */ handleAuthUser: function(row) { const roleId = row.roleId this.$router.push("/system/role-auth/user/" + roleId) }, /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.roleId != undefined) { this.form.menuIds = this.getMenuAllCheckedKeys() updateRole(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { this.form.menuIds = this.getMenuAllCheckedKeys() addRole(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, /** 提交按钮(数据权限) */ submitDataScope: function() { if (this.form.roleId != undefined) { this.form.deptIds = this.getDeptAllCheckedKeys() dataScope(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.openDataScope = false this.getList() }) } }, /** 删除按钮操作 */ handleDelete(row) { const roleIds = row.roleId || this.ids this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function() { return delRole(roleIds) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) }, /** 导出按钮操作 */ handleExport() { this.download('system/role/export', { ...this.queryParams }, `role_${new Date().getTime()}.xlsx`) } } } </script>美化
最新发布
09-24
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>板材库存查询系统</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入 Popper.js 和 Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> <script src="../js/main.js"></script> <style> .card-header { background: linear-gradient(to right, #1e3c72, #2a5298); color: white; } .search-section { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 10px; } .result-section { max-height: 70vh; overflow: auto; border-left: 3px solid #1e3c72; } .table-hover tbody tr:hover { background-color: rgba(42, 82, 152, 0.05); } .material-kucun { font-weight: 700; color: #1e3c72; } .material-kucun-low { color: #dc3545 !important; } .no-results { min-height: 200px; display: flex; align-items: center; justify-content: center; } .stats-card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } body { background-color: #f8f9fa; padding-bottom: 2rem; } .search-control { position: relative; } .search-icon { position: absolute; left: 12px; top: 12px; color: #6c757d; } .form-control.with-icon { padding-left: 35px; } .highlight { background-color: rgba(255, 255, 0, 0.3) !important; } .info-badge { font-size: 0.8rem; font-weight: normal; } </style> </head> <body> <div class="container py-4"> <!-- 标题部分 --> <div class="text-center mb-4"> <h1 class="text-primary"><i class="bi bi-boxes"></i> 板材库存管理系统</h1> <p class="text-muted">查询订单、产品、板材及库存信息</p> </div> <!-- 统计卡片 --> <div class="row mb-4"> <div class="col-md-3"> <div class="card stats-card border-primary"> <div class="card-body"> <h5 class="card-title">订单总数</h5> <p class="card-text fs-3 text-primary" id="orderCount">0</p> </div> </div> </div> <div class="col-md-3"> <div class="card stats-card border-info"> <div class="card-body"> <h5 class="card-title">产品种类</h5> <p class="card-text fs-3 text-info" id="productCount">0</p> </div> </div> </div> <div class="col-md-3"> <div class="card stats-card border-success"> <div class="card-body"> <h5 class="card-title">板材库存</h5> <p class="card-text fs-3 text-success" id="materialCount">0</p> </div> </div> </div> <div class="col-md-3"> <div class="card stats-card border-warning"> <div class="card-body"> <h5 class="card-title">库存总量</h5> <p class="card-text fs-3 text-warning" id="totalStock">0</p> </div> </div> </div> </div> <!-- 搜索区域 --> <div class="card search-section mb-4"> <div class="card-header"> <h5 class="mb-0"><i class="bi bi-search me-2"></i>高级搜索</h5> </div> <div class="card-body"> <div class="row g-3"> <!-- 订单搜索 --> <div class="col-md-6"> <div class="search-control"> <i class="bi bi-clipboard-search search-icon"></i> <input type="text" class="form-control with-icon" id="orderSearch" placeholder="搜索订单号..." aria-label="订单号搜索"> </div> </div> <!-- 产品搜索 --> <div class="col-md-6"> <div class="search-control"> <i class="bi bi-grid search-icon"></i> <input type="text" class="form-control with-icon" id="productSearch" placeholder="搜索产品编号..." aria-label="产品编号搜索"> </div> </div> <!-- 板材搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-box search-icon"></i> <input type="text" class="form-control with-icon" id="materialSearch" placeholder="搜索板材ID或材质..." aria-label="板材搜索"> </div> </div> <!-- 木皮搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-tree search-icon"></i> <input type="text" class="form-control with-icon" id="woodSearch" placeholder="搜索木皮名称..." aria-label="木皮搜索"> </div> </div> <!-- 厚度范围 --> <div class="col-md-4"> <div class="input-group"> <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span> <input type="number" class="form-control" id="minThickness" placeholder="最小厚度(mm)" min="0" step="0.1"> <span class="input-group-text">~</span> <input type="number" class="form-control" id="maxThickness" placeholder="最大厚度(mm)" min="0" step="0.1"> <button class="btn btn-primary" type="button" id="thicknessBtn"> <i class="bi bi-arrow-right"></i> </button> </div> </div> <!-- 库存阈值 --> <div class="col-md-12"> <div class="d-flex align-items-center"> <span class="me-2">库存阈值:</span> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="lowStockCheck" checked> <label class="form-check-label" for="lowStockCheck">显示低库存<small class="text-danger ms-1"><i class="bi bi-exclamation-triangle"></i></small></label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="normalStockCheck" checked> <label class="form-check-label" for="normalStockCheck">显示正常库存</label> </div> <div class="ms-auto"> <button class="btn btn-primary me-2" id="searchBtn"> <i class="bi bi-search me-1"></i>搜索 </button> <button class="btn btn-outline-secondary" id="resetBtn"> <i class="bi bi-arrow-counterclockwise me-1"></i>重置 </button> </div> </div> </div> </div> </div> </div> <!-- 结果区域 --> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0"><i class="bi bi-table me-2"></i>查询结果</h5> <div class="text-secondary"> <span id="resultCount">0</span> 条记录 <span class="ms-2"><i class="bi bi-info-circle"></i> <small>实时数据更新时间: <span id="lastUpdate">--:--:--</span></small></span> </div> </div> <div class="card-body result-section"> <div class="table-responsive"> <table class="table table-hover" id="resultTable"> <thead class="table-light sticky-top"> <tr> <th>订单号</th> <th>产品信息</th> <th>板材</th> <th>材质</th> <th>木皮1</th> <th>木皮2</th> <th>厚度(mm)</th> <th>库存</th> <th>操作</th> </tr> </thead> <tbody id="resultBody"> <!-- 数据加载中 --> <tr id="loadingRow"> <td colspan="9" class="text-center py-5"> <div class="d-flex align-items-center justify-content-center"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="ms-3">正在加载数据,请稍候...</div> </div> </td> </tr> </tbody> </table> </div> <!-- 空结果提示 --> <div id="noResults" class="no-results text-center py-5" style="display: none;"> <div> <i class="bi bi-inboxes text-muted" style="font-size: 3rem;"></i> <h4 class="mt-3 text-muted">没有找到匹配的记录</h4> <p class="text-muted">请尝试调整您的搜索条件</p> </div> </div> </div> </div> </div> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { const modal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false // 配置选项 }); // 手动触发 Modal document.getElementById('launchModal').addEventListener('click', function () { modal.show(); }); }); </script> <script src="../js/test.js?222"></script> 添加分别创建订单产品组件板材按钮弹窗,编辑订单时出现产品下拉框,下拉框旁边有添加按钮,点下弹出添加产品弹窗 以此类推 不需要js部分
06-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值