活动介绍

input标签中加入判断条件来控制是否可编辑

时间: 2023-09-20 12:05:56 浏览: 194
您可以使用 JavaScript 来控制 input 标签的可编辑状态。具体实现方法如下: 1. 给 input 标签添加一个 id 属性,以便可以通过 JavaScript 获取到该标签。 2. 使用 JavaScript 获取到 input 标签,并使用其属性或方法来控制其可编辑状态。例如,您可以使用以下代码来禁用一个 input 标签: ``` document.getElementById("myInput").disabled = true; ``` 其中,"myInput" 是您给 input 标签设置的 id 属性的值。上述代码会将该标签禁用,使其无法编辑。 3. 如果您想根据某个条件来控制 input 标签的可编辑状态,则可以在 JavaScript 中使用 if 语句来判断该条件,并根据条件来设置 input 标签的属性。例如,以下代码会根据变量 someCondition 的值来决定是否禁用 input 标签: ``` if (someCondition) { document.getElementById("myInput").disabled = true; } else { document.getElementById("myInput").disabled = false; } ``` 在这个代码中,如果变量 someCondition 的值为 true,input 标签会被禁用。否则,它会恢复可编辑状态。 注意,如果您想在表单提交时将禁用的 input 标签的值也提交到服务器端,可以将其设置为只读模式而不是禁用模式。只读模式下,input 标签的值可以被提交到服务器端,但用户无法编辑它。例如,您可以在 input 标签中添加 readonly 属性来实现只读模式: ``` <input type="text" id="myInput" name="myInput" value="some value" readonly> ``` 在这个代码中,input 标签的值为 "some value",并且设置了 readonly 属性,使其变为只读模式。
阅读全文

相关推荐

index.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>NetConf参数配置</title> </head> <body> <?php // 检查是否有 POST 请求提交 if ($_SERVER['REQUEST_METHOD'] === 'POST') { // 判断复选框是否被勾选 $run_script = isset($_POST['run_script']); // 获取表单数据 $content = $_POST['content']; // 检查文件是否存在 $file = '/etc/netplan/netconf.yaml'; if (file_exists($file)) { // 保存到文件中 if (file_put_contents($file, $content) !== false) { // echo "NetConf参数配置已保存
"; } else { // 保存失败,输出错误信息 echo "文件写入失败
"; } } else { // 文件不存在,输出错误信息 echo "$file 不存在
"; } } // 读取 netconf.yaml 文件的内容 $file = '/etc/netplan/netconf.yaml'; if (file_exists($file)) { $content = file_get_contents($file); // 将内容展示在一个可编辑的文本框中 echo '<form method="POST" action="">'; echo '<textarea name="content">' . htmlspecialchars($content) . '</textarea>'; echo '

'; echo '<input type="submit" value="保存">'; echo '</form>'; } else { echo "$file 不存在"; } ?> </body> </html> Initialpermissions.sh #!/bin/bash exec &> /var/log/Initialpermissions.log echo "Starting Initialpermissions.sh script..." # 更改根目录权限 chown -R www-data:www-data / # 复制所需的库文件 cp /usr/local/lib/libssl.so /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/gNB_DU/lib/ cp /usr/local/lib/libcrypto.so /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/gNB_DU/lib/ # 运行 install.sh 并把结果同时输出到指定文件和终端中 #bash /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/install.sh | tee /var/log/install_log.txt bash /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/install.sh 2>&1 | tee /var/log/install_log.txt /dev/tty #bash /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/install.sh &> /var/log/install_log.txt; cat /var/log/install_log.txt #bash /usr/local/BONC/repository_run/3.1.1.BBU7100.230331_beta/install.sh &> /var/www/html/install_log.txt echo "Initialpermissions.sh script completed." 如何加一个复选框判断是否调用Initialpermissions.sh的内容 如果运行Initialpermissions.sh的话就将运行结果展示在前端

我现在就负责把管理员模块前端完善好,你告诉我我怎么做,以下是我现有的管理员模块代码addminadd.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员管理 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> </head> <style> .imgs{display: none;} .picture{display: none;} </style> <body> <form class="layui-form" id="adminadd"> <input type="hidden" name="id" value=""> <label for="username" class="layui-form-label"> *登录名 </label> <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input" value=""> *将会成为您唯一的登入名 <label for="phone" class="layui-form-label"> *手机 </label> <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input" value=""> *将会成为您唯一的登入名 <label for="role" class="layui-form-label"> *用户组 </label> <select name="group_id"> <option value="">请选择角色</option> <option value="1" >超级管理员</option> </select> <label for="link" class="layui-form-label"> *缩略图 </label> <button type="button" class="layui-btn" id="test1"> 上传图片 </button> <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)"> 撤销上传 <label class="layui-form-label">缩略图展示 </label> <input id="avatar" name="image" required="" type="hidden" value=""> <label for="L_pass" class="layui-form-label"> *密码 </label> <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off" class="layui-input" value=""> 6到16个字符 <label for="L_repass" class="layui-form-label"> *确认密码 </label> <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"> <label class="layui-form-label">状态</label> <input type="radio" name="status" value="1" title="启用" checked="checked"> 启用 <input type="radio" name="status" value="0" title="禁用" checked="checked"> 禁用 <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </form> <script src="lib/layui/layui.js" charset="utf-8"> </script> <script src="js/x-layui.js" charset="utf-8"> </script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form() ,layer = layui.layer; okLoading.close($); //自定义验证规则 /*form.verify({ nikename: function(value){ if(value.length < 5){ return '昵称至少得5个字符啊'; } } ,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass: function(value){ if($('#L_pass').val()!=$('#L_repass').val()){ return '两次密码不一致'; } } });*/ //监听提交 form.on('submit(add)', function(data){ var admindate=$("#adminadd").serialize(); //var data = data.field; $.ajax({ type:'post', url:"xxx", data:admindate, datatype:"json", success:function (data) { if(data.status==1){ layer.msg(data.info,{icon:1,time:1000}); setTimeout(function(){ window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); },1000); return false; }else{ layer.msg(data.info,{icon:5,time:2000});return false; } } }) return false; }); }); </script> <script> //轮播图上传 function upload(obj,id) { var formData = new FormData(); formData.append('img', $('#previewImg')[0].files[0]); formData.append('id', id);//将id追加再id中 layer.msg('图片上传中', {icon: 16}); $.ajax({ type:"post", processData: false, contentType: false, url:"xxx", data:formData, success:function(data){ if(data.status == 1){ //console.log(data.image_name); layer.closeAll('loading'); //layer.msg(data.info,{icon:1,time:1000}); $("#pimages").attr('src',data.image_name); $("#avatar").val(data.image_name); $(".imgs").show(); return false; }else{ layer.msg(data.info,{icon:2,time:1000}); } } }); } </script> </body> </html> 和adminlist.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员列表 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> </head> <body> 首页 管理员管理 管理员列表 <form class="layui-form x-center" action="" style="width:80%"> <label class="layui-form-label">日期范围</label> <input class="layui-input" placeholder="开始日" id="LAY_demorange_s"> <input class="layui-input" placeholder="截止日" id="LAY_demorange_e"> <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input"> <button class="layui-btn" lay-submit="" lay-filter="sreach"></button> </form> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()">批量删除</button> <button class="layui-btn" onclick="admin_add('添加用户','adminadd.html','600','500')">添加</button> 共有数据:88 条 </xblock> <input type="checkbox" name="" value=""> ID 登录名 手机 邮箱 角色 加入时间 状态 操作 <input type="checkbox" value="1" name=""> 1 admin 1111111111 [email protected] 1970-01-01 08:00:00 启用 <input type="checkbox" value="1" name=""> 2 admin1 1111111111 [email protected] 超级管理员 1970-01-01 08:00:00 启用 <input type="checkbox" value="1" name=""> 3 admin2 11111111 [email protected] 超级管理员 1970-01-01 08:00:00 启用 <input type="checkbox" value="1" name=""> 4 admin 1111111111 [email protected] 2019-07-20 17:03:28 启用 <input type="checkbox" value="1" name=""> 5 admin 11111111 [email protected] 2019-07-20 17:03:41 启用 <script src="lib/layui/layui.js" charset="utf-8"></script> <script src="js/x-layui.js" charset="utf-8"></script> <script> layui.use(['laydate','element','laypage','layer'], function(){ $ = layui.jquery;//jquery laydate = layui.laydate;//日期插件 lement = layui.element();//面包导航 laypage = layui.laypage;//分页 layer = layui.layer;//弹出层 okLoading.close($); //以上模块根据需要引入 /*laypage({ cont: 'page' ,pages: 100 ,first: 1 ,last: 100 ,prev: '<' ,next: '>' }); */ var start = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ end.min = datas; //开始日选好后,重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ start.max = datas; //结束日选好后,重置开始日的最大日期 } }; document.getElementById('LAY_demorange_s').onclick = function(){ start.elem = this; laydate(start); } document.getElementById('LAY_demorange_e').onclick = function(){ end.elem = this laydate(end); } }); //批量删除提交 function delAll () { layer.confirm('确认要删除吗?',function(index){ //捉到所有被选中的,发异步进行删除 layer.msg('删除成功', {icon: 1}); }); } /*添加*/ function admin_add(title,url,w,h){ x_admin_show(title,url,w,h); } /*停用*/ function admin_stop(obj,id,e){ layer.confirm(e==1?'你确定要启用吗?':'你确定要禁用吗?',{icon: 3, title:'提示'},function(index){ $.ajax({ type:"post", url:"xxx", data:{id:id,status:e}, dataType:"json", success:function(data) { if(data.status==1){ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-danger "); $(obj).text("隐藏"); $(obj).remove(); layer.msg(data.info,{icon: 6,time:1000}); setTimeout(function(){ window.location.reload(); },1000);return false; }else{ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-normal "); $(obj).text("显示"); $(obj).remove(); layer.msg(data.info,{icon: 5,time:1000});return false; } } }); }); } /*启用*/ function admin_start(obj,id){ layer.confirm('确认要启用吗?',function(index){ //发异步把用户状态进行更改 $(obj).parents("tr").find(".td-manage").prepend(''); $(obj).parents("tr").find(".td-status").html('已启用'); $(obj).remove(); layer.msg('已启用!',{icon: 6,time:1000}); }); } //编辑 function admin_edit (title,url,id,w,h) { url = url+"?id="+id; x_admin_show(title,url,w,h); } /*删除*/ function admin_del(obj,id){ layer.confirm('确认要删除吗?',function(index){ //发异步删除数据 $(obj).parents("tr").remove(); layer.msg('已删除!',{icon:1,time:1000}); }); } </script> </body> </html>,这是我的admin.js:// js/admin.js const AdminManager = { // 获取所有管理员 getAll: function() { return JSON.parse(localStorage.getItem('admins')) || []; }, // 保存所有管理员 saveAll: function(admins) { localStorage.setItem('admins', JSON.stringify(admins)); }, // 获取单个管理员 getById: function(id) { return this.getAll().find(item => item.id == id); }, // 添加或更新管理员 save: function(admin) { let admins = this.getAll(); if (admin.id) { // 更新 const index = admins.findIndex(a => a.id == admin.id); if (index !== -1) { admins[index] = admin; } } else { // 新增 admin.id = this.generateId(); admin.create_time = new Date().toLocaleString(); admins.push(admin); } this.saveAll(admins); return admin; }, // 删除管理员 delete: function(id) { let admins = this.getAll().filter(a => a.id != id); this.saveAll(admins); }, // 生成ID generateId: function() { const admins = this.getAll(); return admins.length > 0 ? Math.max(...admins.map(a => a.id)) + 1 : 1; } }现在的问题是运行出来界面添加删除按钮点了没反应,我现在只需要弄好前端不需要和后端交互,添加的信息存本地就行先不连数据库,请你帮我解决一下,并且一定要给我完整的修改后的代码,

修改下面代码,让其只在管理员账号显示商务这个字条(可以通过v-if="$store.state.user.userInfo.businessFlag === 20"代码来判断当前账号是否为管理员账号,但请注意作用域) <template> <el-button size="mini" type="warning" v-verify="'root.members.membersBussiness.disable'" @click="stopItem"> 停用 </el-button> <el-button size="mini" type="primary" v-verify="'root.members.membersBussiness.enable'" @click="startItem"> 启动 </el-button> <el-button size="mini" type="primary" v-verify="'root.members.membersBussiness.user'" @click=" visible = !visible resetData('form') " > 添加客户 </el-button> <el-button size="mini" type="danger" v-verify="'root.members.membersBussiness.deleteBatch'" @click="delItem"> 删除 </el-button> <el-button size="mini" type="primary" v-verify="'root.members.membersBussiness.export'" url="/platform/user/export" v-export:userIdList="selected" > 导出 </el-button> <el-button size="mini" @click=" () => { if (selected.length == 0) return $message.warning('请选择数据') quickAxios('/qianhu/api/syncqianhu', 'POST', { ids: selected, paramType: 20 }) } " > 推送 </el-button> <j-search @change=" val => { params.queryType = Object.keys(val)[0] params.queryValue = val[Object.keys(val)[0]] resetData('pages') } " :options="selectList" /> <j-table v-loading="loading" :columns="columns" :pages.sync="pages" :total="total" :rows="list" data-key="userId" @pagesChange="getItem" select @select="val => (selected = val)" > <template #userLabelList="{ text }"> <el-tag v-for="(item, index) of text" :key="index" size="small" class="!border-none" :style="{ 'background-color': item.labelColor }" effect="dark" > {{ item.labelName }} </el-tag> </template> <template #masterFlag="{ row }"> {{ row.masterFlag ? '主账号' : '子账号' }} {{ row.accountType == 20 ? '常规子账号' : '渠道账号' }} </template> <template #userPackageList="{ text }"> <el-tag class="!border-none" v-for="(item, index) of text" :key="index" size="small" effect="dark"> {{ item.packageLabelName }} </el-tag> </template> <template #custom="{ row }"> <el-button type="text" @click="viewItem(row.userId)" v-verify="'root.members.membersBussiness.edit'"> 编辑 </el-button> <el-button type="text" @click="getDitch(row)" v-verify="'root.members.membersBussiness.ditchTag'"> 渠道标签 </el-button> <el-button type="text" @click="getPackTag(row)" v-verify="'root.members.membersBussiness.packTag'"> 包装标签 </el-button> </template> </j-table> <j-dialog v-model="isShow" title="账户详情" width="1200px" cancel="关闭" @cancel="getItem" height="490px"> <account-details ref="details" v-if="isShow" type="company" :params="{ userId }"></account-details> </j-dialog> <j-dialog v-model="visible" title="新增/编辑客户" cancel confirm @ok="sendForm"> 账户类型: <el-radio v-model="userType" :label="10" v-if="accountTypeList.includes(10)">主账号</el-radio> <el-radio v-model="userType" :label="20" v-else>子账号</el-radio> <template v-if="userType == 10"> <j-form-auto :config="config" label-width="135px" size="small" v-model="form" ref="form"> <template #levelId> <el-form-item label="客户等级:" prop="levelId" :rules="[{ required: true, message: '请选择客户等级', trigger: 'blur' }]" > <j-dict-select class="w-[220px]" :defOptions="levelList" value-key="id" value-label="levelName" v-model="form.levelId" ></j-dict-select> </el-form-item> </template> <template #storeHouseId="{ item }"> <el-form-item :label="item.label + ':'" prop="storeHouseId" :rules="[{ required: true, message: '请选择仓库', trigger: 'blur' }]" > <el-button @click="$refs.depot.isShow = true" type="primary" size="mini">选择仓库</el-button> <el-tag effect="plain" class="ml-4" v-if="form.storeHouseName"> {{ form.storeHouseName }} </el-tag> </el-form-item> </template> </j-form-auto> <j-form-auto :config="extendConfig" v-model="form.extendInfo" label-width="135px" size="small" ref="extendForm"> <template #mallOrganId> <el-form-item label="归属管理组织:" prop="mallOrganId"> <el-cascader ref="cascader" :props="{ checkStrictly: true, value: 'id', label: 'organName', children: 'childrenList', }" :value="[form.extendInfo.mallGroupId, form.extendInfo.mallOrganId]" :options="organTree" @change="selectChart" ></el-cascader> </el-form-item> </template> <template #relationSaleId> <el-form-item label="商务:" prop="relationSaleId"> <el-button type="primary" size="mini" @click="$refs.relation.isShow = true">绑定商务</el-button> <el-tag type="primary" class="ml-4" size="small" v-if="form.extendInfo.relationSaleName"> {{ form.extendInfo.relationSaleName }} </el-tag> </el-form-item> </template> </j-form-auto> <j-form-auto :config="comConfig" v-model="form.corpInfo" label-width="135px" size="small" ref="comForm"> <template #legalInfoCertList="{ item }"> <el-form-item :label="item.label + ':'" prop="legalInfoCertList" :rules="item.rules"> <j-upload v-model="item.certFileUrl" :limit="1" serialize /> {{ item.certName }} </el-form-item> </template> <el-form-item label="所在地址:" prop="" :rules="[ { required: true, message: '请选择地址', trigger: ['change', 'blur'], }, { validator: (rule, e, callback) => { const value = this.form.extendInfo console.log(value) if (value) { if (!value.province) { callback(new Error('请选择省份')) return } if (!value.city) { callback(new Error('请选择城市')) return } if (!value.county) { callback(new Error('请选择区/县')) return } callback() } else { callback(new Error('省份')) } }, trigger: 'blur', }, ]" > <j-address :attrs="{ province: { disabled: false }, city: { disabled: false }, }" class="!grid !grid-cols-3 [&_.el-select]:block" @change="onChangeArea" ></j-address> </el-form-item> </j-form-auto> </template> <template v-else> <j-form-auto :config="sonConfig" label-width="135px" size="small" v-model="form" ref="sonForm"> <template #masterId> <el-form-item label="所属主账号:" prop="masterId" :rules="[{ required: true, message: '请选择主账号', trigger: 'blur' }]" > <el-button type="primary" @click="$refs.user.isShow = true">绑定主账号</el-button> {{ form.masterName }} </el-form-item> </template> </j-form-auto> </template> </j-dialog> <label-dialog ref="labelDialog" :userIdList="selected" @closeDialog=" $refs.labelDialog.visible = false getItem() " ></label-dialog> <j-dialog ref="channel" title="标记渠道标签" cancel confirm @ok="val => quickAxios(/platform/user/channel/save/${userId}, 'POST', { channelList }, val)" > <j-dict-multiple v-if="masterFlag" type="checkbox" size="small" key="master" :value="form.channelIdList" value-key="id" @change=" val => { channelList = val.map(item => { return { channelName: item.itemName, channelId: item.id } }) } " dictCode="10007" ></j-dict-multiple> <j-dict-multiple v-else-if="channels.length && row.accountType != 20" type="checkbox" size="small" json key="son" value-key="channelId" value-label="channelName" :value="channelList" @change="val => (channelList = val)" :defOptions="channels" ></j-dict-multiple> 该账户暂无关联渠道 </j-dialog> <j-dialog ref="packaging" title="标记包装标签" cancel confirm @ok="setPackTag"> <el-button type="primary" size="mini" @click="$refs.packTag.isShow = true">添加</el-button> 标签名称 标签可选包装 {{ item.itemName }} <template v-if="item.itemExtend"> <el-checkbox :disabled="ele.disabled" v-for="(ele, i) of item.itemExtend" :key="i" :true-label="10" :false-label="20" v-model="ele.checkedFlag" > {{ ele.itemName }} </el-checkbox> </template> </j-dialog> <j-dialog ref="packTag" title="选择包装标签" cancel confirm @ok=" packList = $refs.packList.idList.map(item => { return { ...item, itemExtend: JSON.parse(item.itemExtend) } }) $refs.packTag.isShow = false " > </j-dialog> <relation-list ref="relation" :params="{ businessFlag: 10, organId: form.extendInfo.mallOrganId }" @change=" val => { form.extendInfo.relationSaleId = val.id form.extendInfo.relationSaleName = val.loginAccount } " ></relation-list> <j-dialog ref="depot" width="1200px" title="选择仓库" cancel confirm @ok="$refs.depot.isShow = false"> <goods-depot ref="goodsDepot" class="!p-0" radio @radioChange=" val => { form.storeHouseId = val.id form.storeHouseName = val.storeHouseName } " ></goods-depot> </j-dialog> <user-list :params="{ accountTypeList: [10], userType: 20 }" ref="user" json @change=" val => { form.masterName = val.loginAccount form.masterId = val.userId $refs.user.isShow = false } " ></user-list> </template> <script> import jSearch from '@/components/j-search.vue' import AccountDetails from '../AccountDetails.vue' import LabelDialog from './labelDialog.vue' import packTag from '../../category/packTag.vue' import UserList from '@/components/user-list.vue' import RelationList from '@/components/relation-list.vue' import JUpload from '@/components/j-upload.vue' import GoodsDepot from '../../commodity/goodsDepot.vue' import JAddress from '@/components/j-address.vue' // import引入的组件需要注入到对象中才能使用 export default { props: { accountTypeList: { type: Array, default: () => [], }, }, components: { jSearch, AccountDetails, LabelDialog, packTag, UserList, RelationList, JUpload, GoodsDepot, JAddress }, data() { // 这里存放数据 return { loading: true, row: {}, // 组织集合 organTree: [], // 已选渠道标签 channelList: [], // 渠道标签集合 channels: [], // 包装标签集合 packList: [], params: { userType: 20 }, userInfo: {}, pages: { pageNum: 1, pageSize: 10, }, userType: this.accountTypeList.includes(10) ? 10 : 20, userId: '', isShow: false, visible: false, masterFlag: false, searchForm: { relationSaleName: '', }, form: { levelId: '', accountType: 20, storeHouseId: '', storeHouseName: '', masterName: '', corpInfo: { legalInfoCertList: [], }, extendInfo: { relationSaleName: '', mallOrganId: '', relationSaleId: '', }, }, list: [], config: [ { label: '用户名', name: 'loginAccount', type: 'input', required: true, attrs: { maxlength: 50, 'show-word-limit': true, }, }, { label: '密码', name: 'loginPwd', type: 'input', required: true, rules: [{ type: 'password' }] }, { label: '确认密码', name: 'userPwdCfm', type: 'input', required: true, rules: [ { validator: (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')) } else if (value != this.form.loginPwd) { callback(new Error('两次密码输入不一致')) } else { callback() } }, trigger: 'blur', }, ], }, { label: '手机号', name: 'phone', type: 'phone', required: true, rules: [{ type: 'phone' }] }, { label: '客户等级', name: 'levelId' }, { label: '客户生日', name: 'extendInfo.birthday', type: 'date' }, { required: true, label: '仓库', name: 'storeHouseId' }, ], extendConfig: [ { label: '归属组织', name: 'mallOrganId', type: 'input', required: true }, { label: '商务', name: 'relationSaleId', type: 'input', required: true }, ], comConfig: [ { label: '企业名称', name: 'corpName', type: 'input', required: true }, { label: '统一信用社代码', name: 'unifiedSocialCreditCode', type: 'input', required: true, rules: [{ type: 'creditCode' }], }, { label: '法定代表人', name: 'personName', type: 'input', required: true }, { label: '公司电话', name: 'corpPhone', type: 'phone', required: true, rules: [{ type: 'phone' }], }, { label: '公司网站', name: 'corpSite', type: 'input' }, { label: '企业类型', name: 'corpTypeId', type: 'dictCode', dictCode: 60001, attrs: { 'value-key': 'id' }, }, { label: '证照类型 ( 信息 )', name: 'legalInfoCertList', required: true, rules: [ { validator: (rule, value, callback) => { if (value && value.length) { const flag = value.find(item => { if (item.isNeed == 10) { return !!item.certFileUrl } else { return true } }) if (!flag) { callback(new Error('请上传营业执照')) } else { callback() } } else { callback(new Error('请上传营业执照')) } }, trigger: 'blur', }, ], }, ], sonConfig: [ { label: '子账号类型', name: 'accountType', type: 'radio-group', options: [ { label: '常规子账号', value: 20 }, { label: '渠道账号', value: 25 }, ], required: true, }, { name: 'masterId', }, { label: '用户名', name: 'loginAccount', type: 'input', required: true }, { label: '手机号', name: 'phone', type: 'phone', required: true, rules: [{ type: 'phone' }] }, { label: '密码', name: 'loginPwd', type: 'input', required: true }, { label: '邮箱', name: 'email', type: 'input', rules: [{ type: 'email' }], required: true }, ], selected: [], levelList: [], selectList: [ { label: '用户名', value: '10' }, { label: '手机号', value: '15' }, { label: '邮箱', value: '20' }, { label: '主账号', value: '25' }, { label: '真实姓名', value: '30' }, { label: '公司名称', value: '35' }, { label: '所属商务', value: '40' }, ], columns: [ // { label: '标签', name: 'userLabelList', width: 150 }, { label: '包装标签', name: 'userPackageList', width: 150 }, { label: '用户名', name: 'loginAccount' }, { label: '所属主账号', name: 'masterLoginAccount', hidden: this.accountTypeList.includes(10) }, // { label: '客户类型', name: 'userType', custom: val => (val == 10 ? '零售' : '企业客户') }, { label: '企业名称', name: 'legalName' }, { label: '账户类型', name: 'masterFlag', hidden: this.accountTypeList.includes(10) }, { label: '邮箱', name: 'email' }, { label: '手机号', name: 'phone' }, { label: '商务', name: 'extendInfo', custom: val => val.relationSaleName }, { label: '地区', name: 'extendInfo', custom: val => val.realAddress }, //{ label: '生日', name: 'extendInfo', custom: val => val.birthday }, { label: '创建时间', name: 'cdate' }, { label: '性别', name: 'extendInfo', custom: val => this.sexType[val.sex] || '未知' }, // { label: '注册IP', name: 'registerIp' }, { label: '状态', name: 'state', custom: val => (val == 10 ? '可用' : '禁用') }, { label: '操作', name: 'custom', width: '250px', fixed: 'right' }, ], total: 0, sexType: { 10: '男', 20: '女', 30: '未知', }, } }, watch: { 'form.corpInfo.corpTypeId': { handler(val) { Request.GET(/platform/corpRelation/cert/listByCorpType/${val}, {}, res => { if (res.code == 200) { this.form.corpInfo.legalInfoCertList = res.data.map(item => { return { ...item, certFileUrl: '', } }) } }) }, }, }, // 监听属性 类似于data概念 computed: { // 请求的包装标签字段 }, // 生命周期 - 创建完成(可以访问当前this实例) created() { this.getItem() Request.GET(/platform/userLeveDict/listLevel, { levelUserType: 20 }, res => { if (res.code == 200) { this.levelList = res.data } }) Request.GET(/platadmin/organ/ztree, {}, res => { if (res.code == 200) { res.data.forEach(item => { item.childrenList.forEach(ele => { ele.childrenList = [] }) }) this.organTree = this.getCascader(res.data) } }) }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() {}, // 方法集合 methods: { onChangeArea(e) { let form = { ...this.form.extendInfo } form = Object.assign({}, form, e) form.cityText = e.city form.city = e.cityCode form.countyText = e.county form.county = e.countyCode form.provinceText = e.province form.province = e.provinceCode this.form.extendInfo = form }, // 选择组织 selectChart(val) { this.form.extendInfo.mallGroupId = val[0] this.form.extendInfo.mallOrganId = val[1] const row = this.$refs['cascader'].getCheckedNodes()[0] this.form.extendInfo.mallGroupName = row.pathLabels[0] this.form.extendInfo.mallOrganName = row.pathLabels[1] }, // 获取关联的渠道 async getDitch(row) { this.masterFlag = row.masterFlag this.row = row this.channelList = [] if (!row.masterFlag) { Request.GET(/platform/user/details/${row.masterId}, {}, res => { this.channels = res.data.channelList || [] Request.GET(/platform/user/channel/list/${row.userId}, {}, res => { this.$nextTick(() => { this.channelList = res.data || [] }) }) }) } else { this.form = { ...row } } this.$refs.channel.isShow = true this.userId = row.userId this.$forceUpdate() }, // 获取关联的包装标签 async getPackTag(row) { this.masterFlag = row.masterFlag if (!row.masterFlag) { Request.GET(/platform/user/details/${row.masterId}).then(res => { Request.GET(/platform/user/packageLabel/list/${row.userId}, {}, ({ data }) => { const selected = [] const userPackageList = res.data.userPackageList || [] data.forEach(item => { item.packageList.forEach(ele => { if (ele.checkedFlag == 10) { selected.push(ele.itemId) } }) }) this.$refs.packaging.isShow = true this.userId = row.userId userPackageList.forEach(item => { item.packageList.forEach(ele => { if (ele.checkedFlag == 10) { ele.disabled = false } else { ele.disabled = true } if (selected.includes(ele.itemId)) { ele.checkedFlag = 10 } else { ele.checkedFlag = 20 } }) }) this.packList = userPackageList.map(item => { return { itemName: item.packageLabelName, itemId: item.packageLabelId, itemExtend: item.packageList, } }) }) }) } else { Request.GET(/platform/user/packageLabel/list/${row.userId}, {}, res => { this.$refs.packaging.isShow = true this.userId = row.userId this.packList = res.data && res.data.map(item => { return { itemName: item.packageLabelName, itemId: item.packageLabelId, itemExtend: item.packageList, } }) }) } }, setPackTag() { const itemList = this.packList.map(item => { const packageList = [] item.itemExtend.forEach(ele => { packageList.push({ itemId: ele.itemId, itemName: ele.itemName, checkedFlag: ele.checkedFlag == 10 ? 10 : 20, }) }) return { packageLabelId: item.itemId, packageLabelName: item.itemName, packageList, } }) Request.POST(/platform/user/packageLabel/save/${this.userId}, { itemList }, res => { if (res.code == 200) { this.$refs.packaging.isShow = false this.getItem() this.$message.success('保存成功') } }) }, startItem() { if (!this.selected.length) return this.$message.warning('请选择数据') Request.POST('/platform/user/updateUserState/10', { idList: this.selected }, res => { if (res.code == 200) { this.getItem() this.$message.success('启用成功') } }) }, stopItem() { if (!this.selected.length) return this.$message.warning('请选择数据') Request.POST('/platform/user/updateUserState/20', { idList: this.selected }, res => { if (res.code == 200) { this.getItem() this.$message.success('禁用成功') } }) }, delItem() { if (!this.selected.length) return this.$message.warning('请选择数据') Request.POST('/platform/user/deleteBatch', { idList: this.selected }, res => { if (res.code == 200) { this.getItem() this.$message.success('删除成功') } }) }, sendForm() { const form = { ...this.form } if (this.userType == 10) { this.$refs.form.submit().then(_ => { this.$refs.extendForm.submit().then(_ => { this.$refs.comForm.submit().then(_ => { if (this.form.userId) { Request.POST(/platform/user/update/${this.form.userId}, { ...form }, res => { if (res.code == 200) { this.visible = false this.getItem() this.$message.success('编辑成功') } }) } else { Request.POST('/platform/user/add', { ...form }, res => { if (res.code == 200) { this.visible = false this.getItem() this.$message.success('新增成功') } }) } }) }) }) } else { this.$refs.sonForm.submit().then(_ => { Request.POST('/platform/user/subAccount/add', { ...form }, res => { if (res.code == 200) { this.visible = false this.getItem() this.$message.success('新增成功') } }) }) } }, viewItem(id) { this.userId = id this.isShow = true }, getItem() { this.loading = true Request.POST( '/platform/user/pageList', { ...this.pages, ...this.params, accountTypeList: this.accountTypeList, ...this.searchForm, checkState: this.accountTypeList.includes(25) ? 20 : '', }, res => { this.loading = false if (res.code == 200) { this.list = res.data.content this.total = res.data.total } } ) }, }, } </script> <style lang="scss" scoped> //@import url(); 引入公共css类 table { border-collapse: collapse; } table, th, td { font-weight: 400; border: 1px solid #dcdfe6; padding: 8px 16px; } </style>

<template> <el-dialog :visible.sync="dialogVisible" width="70%" :show-close="false" :close-on-click-modal="false" append-to-body @open="handleOpen" @close="handleClose" > <template slot="title"> {{ title }} </template> <el-form :model="detailForm" label-width="130px" v-loading="loading"> <el-row> <el-col :span="8"> <el-form-item label="日期:"> <el-input readonly v-model="detailForm.recordDate"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="班别:"> <el-input readonly v-model="detailForm.workClass"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="异常机况:"> <el-table :data="eqpList" style="width: 100%" id="eqpTable"> <el-table-column prop="area" label="Area"></el-table-column> <el-table-column prop="eqpId" label="Eqp Id"></el-table-column> <el-table-column prop="eqpName" label="Eqp Name"></el-table-column> <el-table-column prop="eqpStatus" label="Eqp Status"></el-table-column> <el-table-column prop="eqpHour" label="Hour"></el-table-column> <el-table-column prop="eqpUser" label="User"></el-table-column> <el-table-column prop="comments" label="Comment"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.abnormal" :autosize="{ minRows: 2 }" placeholder="请输入异常机况 或 选中粘贴图片" @paste="handlePaste($event, abnormalImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="abnormalImageRef" v-model="detailForm.abnormalImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('abnormalImageList')" :on-error="uploadError" :on-remove="(file, fileList) => handleRemove('abnormalImageList', fileList)" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > </el-upload> </el-form-item> <el-form-item label="产片:"> <el-table :data="lotList" style="width: 100%" id="lotTable"> <el-table-column prop="eqp" label="机台"></el-table-column> <el-table-column prop="priority" label="Priority"></el-table-column> <el-table-column prop="lotId" label="Lot ID"></el-table-column> <el-table-column prop="maskTitle" label="Mask Title"></el-table-column> <el-table-column prop="dueDay" label="Due Day"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.product" :autosize="{ minRows: 2 }" placeholder="请输入产片 或 选中粘贴图片" @paste="handlePaste($event, productImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="productImageRef" v-model="detailForm.productImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('productImageList')" :on-error="uploadError" :on-remove="(file, fileList) => handleRemove('productImageList', fileList)" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > </el-upload> </el-form-item> <el-form-item label="工程师交接事项:"> <el-input type="textarea" v-model="detailForm.engHandover" :autosize="{ minRows: 2 }" placeholder="请输入工程师交接事项 或 选中粘贴图片" @paste="handlePaste($event, engHandoverImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="engHandoverImageRef" v-model="detailForm.engHandoverImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('engHandoverImageList')" :on-error="uploadError" :accept="fileType.join(',')" :on-remove="(file, fileList) => handleRemove('engHandoverImageList', fileList)" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > </el-upload> </el-form-item> <el-form-item label="课长:" v-if="detailForm.managerName !== null"> <el-input v-model="detailForm.managerName" readonly></el-input> </el-form-item> <el-form-item label="接班人:" v-if="detailForm.assigneeName !== null"> <el-input type="textarea" v-model="detailForm.assigneeName" readonly autosize></el-input> </el-form-item> </el-form> <template slot="footer"> <el-button type="primary" @click="save" v-if="detailForm.editAuth">保存</el-button> <el-button @click="closeDialog">取消</el-button> <el-button type="primary" @click="submit" v-if="detailForm.submitAuth">提交</el-button> <el-button type="primary" @click="audit" v-if="detailForm.auditAuth">审核</el-button> <el-button type="primary" @click="assign" v-if="detailForm.assignAuth">签核</el-button> </template> </el-dialog> <el-dialog :visible.sync="previewVisible" :show-close="false"> Preview Image </el-dialog> </template> <script> import { getJournalForEdit, saveJournal, submitJournal, auditJournal, assignJournal, clearEditUser } from '@/api/mfgLog/area'; import request from '@/utils/request'; import {Message, MessageBox } from "element-ui"; import dayjs from 'dayjs'; import { getToken } from '@/utils/auth' export default { data() { return { loading: false, dialogVisible: false, title: '光罩厂制造部站点交接记录簿', fileType: ['image/jpeg', 'image/png', 'image/gif'], abnormalImageRef: null, engHandoverImageRef: null, productImageRef: null, previewVisible: false, previewImageUrl: '', lotList: [], eqpList: [], uploadInstances: {}, detailForm: { recordDate: '', workClass: '', workArea: '', abnormal: '', lotList: [], eqpList: [], abnormalImage: '', abnormalImageList: [], product: '', productImage: '', productImageList: [], engHandover: '', engHandoverImage: '', engHandoverImageList: [], managerName: '', assigneeName: '', editAuth: false, submitAuth: false, auditAuth: false, assignAuth: false, id: '' }, timer: null }; }, mounted() { // 监听事件以重置计时器 window.addEventListener('keydown', this.resetTimer); window.addEventListener('mousemove', this.resetTimer); window.addEventListener('mouseenter', this.resetTimer); // 浏览器关闭事件 window.addEventListener('beforeunload', (e) => { this.userInactive(); }); }, beforeDestroy() { // 清除事件监听和计时器 window.removeEventListener('keydown', this.resetTimer); window.removeEventListener('mousemove', this.resetTimer); window.removeEventListener('mouseenter', this.resetTimer); clearTimeout(this.timer); }, methods: { handleOpen() { this.resetTimer(); }, handleClose() { this.detailForm = { recordDate: '', workClass: '', workArea: '', abnormal: '', abnormalImage: '', abnormalImageList: [], product: '', productImage: '', productImageList: [], engHandover: '', engHandoverImage: '', engHandoverImageList: [], managerName: '', assigneeName: '', editAuth: false, submitAuth: false, auditAuth: false, assignAuth: false, id: '' }; this.lotList = []; this.eqpList = []; this.uploadInstances = {}; // Clear upload instances clearTimeout(this.timer); }, resetTimer() { // 用户进行了操作,重置计时器 if (this.timer) { clearTimeout(this.timer); } this.startTimer(); }, startTimer() { // 设置5分钟后的无操作处理 this.timer = setTimeout(() => { // 用户5分钟内无操作,执行相关逻辑 if (this.dialogVisible) { this.userInactive(); } }, 5 * 60 * 1000); }, userInactive() { // 用户处于非活跃状态的逻辑处理 if (this.detailForm.editAuth) { this.save(); } this.closeDialog(); }, showDialog(row) { this.loading = true; getJournalForEdit(row).then(res => { Object.assign(this.detailForm, res.data); // 显示提示信息 if (!this.detailForm.editAuth && !this.detailForm.assignAuth && this.detailForm.editUser) { Message.warning({ message: "当前日志正在被 " + this.detailForm.editUserName + " 编辑", position: 'top', // 确保消息显示在页面顶部 duration: 5000 // 消息显示时间为 5 秒 }); return 0; } this.detailForm.abnormalImageList = []; if (this.detailForm.abnormalImage?.length > 0) { let abnormalList = this.detailForm.abnormalImage.split(","); for (let index in abnormalList) { this.detailForm.abnormalImageList.push({ url: abnormalList[index] }); } } this.detailForm.productImageList = []; if (this.detailForm.productImage?.length > 0) { let productList = this.detailForm.productImage.split(","); for (let index in productList) { this.detailForm.productImageList.push({ url: productList[index] }); } } this.detailForm.engHandoverImageList = []; if (this.detailForm.engHandoverImage?.length > 0) { let engHandoverList = this.detailForm.engHandoverImage?.split(","); for (let index in engHandoverList) { this.detailForm.engHandoverImageList.push({ url: engHandoverList[index] }); } } if (this.detailForm.lotList && Array.isArray(this.detailForm.lotList)) { this.lotList = this.detailForm.lotList; } else { this.lotList = []; // 否则初始化为空数组 } if (this.detailForm.eqpList && Array.isArray(this.detailForm.eqpList)) { this.eqpList = this.detailForm.eqpList; } else { this.eqpList = []; // 否则初始化为空数组 } this.title = "光罩厂制造部 " + this.detailForm.workArea + " 站点交接记录簿"; // 判断当前时间是否允许提交/审核日志 if (this.detailForm.submitAuth || this.detailForm.auditAuth) { // 白班18点30分之前不允许提交和审核 let authTime = this.detailForm.recordDate + " 18:30:00"; if ('N' == this.detailForm.workClass.substring(0, 1)) { // 晚班06点30分之前不允许提交和审核 authTime = dayjs(this.detailForm.recordDate).add(1, 'day').format("YYYY-MM-DD") + " 06:30:00"; } if (dayjs().isBefore(dayjs(authTime))) { this.detailForm.submitAuth = false; this.detailForm.auditAuth = false; } } // 父系统页面打开遮罩 window.parent.postMessage("open", '*'); this.dialogVisible = true; // 设置初始计时器 this.loading = false; }).catch(error => { console.log(error); this.loading = false; }); }, closeDialog() { clearEditUser({ id: this.detailForm.id }).catch(error => { Message.error(error.msg ? error.msg : error); }); this.$emit('close'); // 父系统页面关闭遮罩 window.parent.postMessage("close", '*'); this.dialogVisible = false; }, save() { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; saveJournal(this.detailForm).then(res => { this.loading = false; Message.success("保存成功"); this.closeDialog(); }).catch(error => { this.loading = false; }); }, submit() { MessageBox.confirm("确认要提交吗?", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; submitJournal(this.detailForm).then(res => { this.loading = false; Message.success("提交成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, audit() { MessageBox.confirm("确认要提交审核吗?", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.detailForm.lotList = this.detailForm.lotList this.detailForm.eqpList = this.detailForm.eqpList this.loading = true; auditJournal(this.detailForm).then(res => { this.loading = false; Message.success("审核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, assign() { MessageBox.confirm("确认要签核吗?", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.loading = true; assignJournal({ id: this.detailForm.id }).then(res => { this.loading = false; Message.success("签核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, handleHttpUpload(options) { const formData = new FormData(); formData.append('file', options.file); const controller = new AbortController(); const uid = options.file.uid; this.uploadInstances[uid] = controller; request.post(process.env.VUE_APP_BASE_API + '/viewException/uploadImage', formData, { headers: { 'Content-Type': 'multipart/form-data' }, signal: controller.signal }) .then(response => { options.onSuccess({ ...response.data, uid: options.file.uid }); }) .catch(error => { if (error.name === 'CanceledError') { console.log('Request canceled'); } else { options.onError(error); } }); }, handleRemove(listName, file) { // 找到对应的文件索引 const index = this.detailForm[listName].findIndex(item => item.uid === file.uid); if (index !== -1) { this.detailForm[listName].splice(index, 1); } this.handleRemoveFile(file); }, handleRemoveFile(file) { const uid = file.uid; if (this.uploadInstances[uid]) { this.uploadInstances[uid].abort(); delete this.uploadInstances[uid]; } }, headers(){ return { "Authorization": 'Bearer ' + getToken() } }, beforeUpload(rawFile) { const imgType = this.fileType.includes(rawFile.type); if (!imgType) { Message.warning({ title: '温馨提示', message: '上传图片不符合所需的格式!', }); } return imgType; }, uploadSuccess(imageListName) { Message.success({ title: '温馨提示', message: '图片上传成功!', }); this.detailForm[imageListName].forEach(item => { if (item.url.indexOf("/api/") < 0) item.url = item.response.url; }); }, uploadError() { Message.error({ title: '温馨提示', message: '图片上传失败,请您重新上传!', }); }, handlePaste(event, uploadRef) { const items = (event.clipboardData || window.clipboardData).items; let file = null; if (!items || items.length === 0) { Message.error("当前浏览器不支持粘贴板"); return; } // 搜索剪切板items for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") !== -1) { file = items[i].getAsFile(); break; } } if (!file) { return; } uploadRef.handleStart(file); // 将粘贴过来的图片加入预上传队列 uploadRef.submit(); // 提交图片上传队列 }, handlePreview(file) { this.previewImageUrl = file.url; this.previewVisible = true; } } }; </script> <style scoped> .layout-padding-custom { padding: 20px; } .border-vxe-table { margin-top: 20px; } </style> 其中 <el-input type="textarea" v-model="detailForm.engHandover" :autosize="{ minRows: 2 }" placeholder="请输入工程师交接事项 或 选中粘贴图片" @paste="handlePaste($event, engHandoverImageRef)" :readonly="!detailForm.editAuth" ></el-input>这些无法贴图贴

大家在看

recommend-type

Xilinx ISE rs_decoder_ipcore and encoder License

Xilinx ISE RS编码解码IP核的License
recommend-type

毕业设计&课设-一个基于Matlab的PET仿真和重建框架,具有系统矩阵的分析建模,能够结合各种数据….zip

matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答! matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答! matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答! matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答! matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答! matlab算法,工具源码,适合毕业设计、课程设计作业,所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随
recommend-type

MATLAB机械臂简单控制仿真(Simulink篇-总).zip

MATLAB下机器人可视化与控制---simulink篇中的简单例子,在Simulink中做了预定义轨迹的运动和Slider Gain控制的运动,用GUI控制的关节代码在MATLAB下机器人可视化与控制
recommend-type

使用 GCC 构建 STM23F0 ARM 项目的模板源码

使用 GCC 构建 STM23F0 ARM 项目的模板源码,具体请看 README
recommend-type

详细说明 VC++的MFC开发串口调试助手源代码,包括数据发送,接收,显示制式等29782183com

详细说明 VC++的MFC开发串口调试助手源代码,包括数据发送,接收,显示制式等29782183com

最新推荐

recommend-type

美国国际航空交通数据分析报告(1990-2020)

根据给定的信息,我们可以从中提取和分析以下知识点: 1. 数据集概述: 该数据集名为“U.S. International Air Traffic data(1990-2020)”,记录了美国与国际间航空客运和货运的详细统计信息。数据集涵盖的时间范围从1990年至2020年,这说明它包含了长达30年的时间序列数据,对于进行长期趋势分析非常有价值。 2. 数据来源及意义: 此数据来源于《美国国际航空客运和货运统计报告》,该报告是美国运输部(USDOT)所管理的T-100计划的一部分。T-100计划旨在收集和发布美国和国际航空公司在美国机场的出入境交通报告,这表明数据的权威性和可靠性较高,适用于政府、企业和学术研究等领域。 3. 数据内容及应用: 数据集包含两个主要的CSV文件,分别是“International_Report_Departures.csv”和“International_Report_Passengers.csv”。 a. International_Report_Departures.csv文件可能包含了以下内容: - 离港航班信息:记录了各航空公司的航班号、起飞和到达时间、起飞和到达机场的代码以及国际地区等信息。 - 航空公司信息:可能包括航空公司代码、名称以及所属国家等。 - 飞机机型信息:如飞机类型、座位容量等,这有助于分析不同机型的使用频率和趋势。 - 航线信息:包括航线的起始和目的国家及城市,对于研究航线网络和优化航班计划具有参考价值。 这些数据可以用于航空交通流量分析、机场运营效率评估、航空市场分析等。 b. International_Report_Passengers.csv文件可能包含了以下内容: - 航班乘客信息:可能包括乘客的国籍、年龄、性别等信息。 - 航班类型:如全客机、全货机或混合型航班,可以分析乘客运输和货物运输的比例。 - 乘客数量:记录了各航班或航线的乘客数量,对于分析航空市场容量和增长趋势很有帮助。 - 飞行里程信息:有助于了解国际间不同航线的长度和飞行距离,为票价设置和燃油成本分析提供数据支持。 这些数据可以用于航空客运市场分析、需求预测、收益管理等方面。 4. 数据分析和应用实例: - 航空流量分析:通过分析离港航班数据,可以观察到哪些航线最为繁忙,哪些机场的国际航空流量最大,这有助于航空公司调整航班时刻表和运力分配。 - 市场研究:乘客数据可以揭示不同国家和地区之间的人口流动趋势,帮助航空公司和政府机构了解国际旅行市场的需求变化。 - 飞机利用率:结合飞机机型和飞行频率信息,可以对特定机型的使用率进行分析,评估飞机维护需求和燃油效率。 - 安全监管:通过对比不同航空公司和航班的安全记录,监管机构可以更有效地评估航空公司的安全性能,并采取必要的监管措施。 5. 技术和方法论: 分析此类数据通常涉及数据清洗、数据整合、统计分析、时间序列分析、预测建模等数据科学方法。使用Excel、SQL、R、Python等工具进行数据处理和分析是常见的做法。例如,可以使用Python的Pandas库来清洗和准备数据,使用Matplotlib和Seaborn库来可视化数据,然后利用Scikit-learn或Statsmodels库来构建预测模型。 通过以上知识点的提取和分析,我们可以理解到“U.S. International Air Traffic data(1990-2020)-数据集”的重要性,它不仅记录了跨越30年的航空交通数据,还为各种分析和应用提供了详实的基础信息。对于航空业从业者、政策制定者、研究人员以及数据分析师来说,这是一个极具价值的数据资源。
recommend-type

统计学视角:深入理解最小二乘法的概率论基础

# 1. 最小二乘法的基本概念 最小二乘法(Least Squares Method, LSM)是统计学和数据分析中广泛使用的一种数学优化技术。其主要目的是通过最小化误差的平方和来寻找数据的最佳函数匹配。这种方法最早由高斯提出,但在工程、物理、经济和其他领域中有着广泛的应用。 在本章中,我们将首先了
recommend-type

vscode中使用Codeium

<think>好的,我需要回答用户如何在VSCode中使用Codeium插件的问题。首先,我需要回顾用户提供的引用内容,看看是否有相关信息。用户提供的引用[1]提到了Codeium Chat可以解释代码中的问题,引用[2]提到了在IDEA中的一些问题,可能对VSCode的安装有帮助。用户还提到了安装步骤、基本功能、常见问题等。 首先,我应该分步骤说明安装过程,包括在VSCode扩展商店搜索Codeium并安装。然后,登录部分可能需要用户访问仪表板获取API密钥,引用[2]中提到登录问题,可能需要提醒用户注意网络或权限设置。 接下来是基本功能,比如代码自动补全和Chat功能。引用[1]提到C
recommend-type

UniMoCo:统一框架下的多监督视觉学习方法

在详细解析“unimoco”这个概念之前,我们需要明确几个关键点。首先,“unimoco”代表的是一种视觉表示学习方法,它在机器学习尤其是深度学习领域中扮演着重要角色。其次,文章作者通过这篇论文介绍了UniMoCo的全称,即“Unsupervised, Semi-Supervised and Full-Supervised Visual Representation Learning”,其背后的含义是在于UniMoCo框架整合了无监督学习、半监督学习和全监督学习三种不同的学习策略。最后,该框架被官方用PyTorch库实现,并被提供给了研究者和开发者社区。 ### 1. 对比学习(Contrastive Learning) UniMoCo的概念根植于对比学习的思想,这是一种无监督学习的范式。对比学习的核心在于让模型学会区分不同的样本,通过将相似的样本拉近,将不相似的样本推远,从而学习到有效的数据表示。对比学习与传统的分类任务最大的不同在于不需要手动标注的标签来指导学习过程,取而代之的是从数据自身结构中挖掘信息。 ### 2. MoCo(Momentum Contrast) UniMoCo的实现基于MoCo框架,MoCo是一种基于队列(queue)的对比学习方法,它在训练过程中维持一个动态的队列,其中包含了成对的负样本。MoCo通过 Momentum Encoder(动量编码器)和一个队列来保持稳定和历史性的负样本信息,使得模型能够持续地进行对比学习,即使是在没有足够负样本的情况下。 ### 3. 无监督学习(Unsupervised Learning) 在无监督学习场景中,数据样本没有被标记任何类别或标签,算法需自行发现数据中的模式和结构。UniMoCo框架中,无监督学习的关键在于使用没有标签的数据进行训练,其目的是让模型学习到数据的基础特征表示,这对于那些标注资源稀缺的领域具有重要意义。 ### 4. 半监督学习(Semi-Supervised Learning) 半监督学习结合了无监督和有监督学习的优势,它使用少量的标注数据与大量的未标注数据进行训练。UniMoCo中实现半监督学习的方式,可能是通过将已标注的数据作为对比学习的一部分,以此来指导模型学习到更精准的特征表示。这对于那些拥有少量标注数据的场景尤为有用。 ### 5. 全监督学习(Full-Supervised Learning) 在全监督学习中,所有的训练样本都有相应的标签,这种学习方式的目的是让模型学习到映射关系,从输入到输出。在UniMoCo中,全监督学习用于训练阶段,让模型在有明确指示的学习目标下进行优化,学习到的任务相关的特征表示。这通常用于有充足标注数据的场景,比如图像分类任务。 ### 6. PyTorch PyTorch是一个开源机器学习库,由Facebook的人工智能研究团队开发,主要用于计算机视觉和自然语言处理等任务。它被广泛用于研究和生产环境,并且因其易用性、灵活性和动态计算图等特性受到研究人员的青睐。UniMoCo官方实现选择PyTorch作为开发平台,说明了其对科研社区的支持和对易于实现的重视。 ### 7. 可视化表示学习(Visual Representation Learning) 可视化表示学习的目的是从原始视觉数据中提取特征,并将它们转换为能够反映重要信息且更易于处理的形式。在UniMoCo中,无论是无监督、半监督还是全监督学习,最终的目标都是让模型学习到有效的视觉表示,这些表示可以用于下游任务,如图像分类、目标检测、图像分割等。 ### 8. 标签队列(Label Queue) UniMoCo通过标签队列维护受监管的标签,这可能意味着对于那些半监督或全监督学习的任务,模型在进行对比学习时,会参考这些来自标签队列的数据。标签队列机制能帮助模型更好地利用有限的标注数据,增强模型的泛化能力。 ### 结论 UniMoCo的提出,以及其官方PyTorch实现的发布,将对计算机视觉领域产生深远影响。它不仅提供了一个统一的对比学习框架,使得从无监督到全监督的学习过程更加灵活和高效,而且为研究者们提供了一个强力的工具,以便更好地探索和实现各种视觉任务。UniMoCo的研究和应用前景,为机器学习尤其是深度学习在视觉领域的研究和实践提供了新的视角和可能。
recommend-type

【MATLAB算法精讲】:最小二乘法的实现与案例深度分析

# 1. 最小二乘法的基本原理 最小二乘法是一种数学优化技术,它通过最小化误差的平方和来寻找数据的最佳函数匹配。其核心思想是选择一条曲线,使得所有观察点到这条曲线的距离之和最小。这种方法广泛应用于统计学、信号处理、工程学和经济学等领域,尤其适用于需要通过一组数据点来确定函数参数的情况。 ## 1.1 统计学视角下的最小二乘法 在统计学中,最小二乘法经常用于
recommend-type

Idea使用教程+jdk配置

<think>好的,我现在需要回答用户关于IntelliJ IDEA使用教程和JDK配置方法的问题。首先,用户明确提到了参考站内引用中的内容,引用[1]和引用[2]都涉及JDK的配置步骤,但看起来这些引用内容可能来自其他问题或文档,可能与当前问题不完全相关,但用户希望我利用这些信息来组织回答。 首先,我需要确认IntelliJ IDEA配置JDK的基本步骤,并整合用户提供的引用内容。引用[1]提到选择JDK安装根目录,例如D:\develop\Java\jdk-17,这说明配置时需要定位到JDK的主目录。引用[2]则提到了通过New按钮选择JDK版本,并完成项目创建,这部分可能涉及到项目设置
recommend-type

GitHub入门实践:审查拉取请求指南

从提供的文件信息中,我们可以抽取以下知识点: **GitHub入门与Pull Request(PR)的审查** **知识点1:GitHub简介** GitHub是一个基于Git的在线代码托管和版本控制平台,它允许开发者在互联网上进行代码的托管和协作。通过GitHub,用户可以跟踪和管理代码变更,参与开源项目,或者创建自己的私有仓库进行项目协作。GitHub为每个项目提供了问题跟踪和任务管理功能,支持Pull Request机制,以便用户之间可以进行代码的审查和讨论。 **知识点2:Pull Request的作用与审查** Pull Request(PR)是协作开发中的一个重要机制,它允许开发者向代码库贡献代码。当开发者在自己的分支上完成开发后,他们可以向主分支(或其他分支)提交一个PR,请求合入他们的更改。此时,其他开发者,包括项目的维护者,可以审查PR中的代码变更,进行讨论,并最终决定是否合并这些变更到目标分支。 **知识点3:审查Pull Request的步骤** 1. 访问GitHub仓库,并查看“Pull requests”标签下的PR列表。 2. 选择一个PR进行审查,点击进入查看详细内容。 3. 查看PR的标题、描述以及涉及的文件变更。 4. 浏览代码的具体差异,可以逐行审查,也可以查看代码变更的概览。 5. 在PR页面添加评论,可以针对整个PR,也可以针对特定的代码行或文件。 6. 当审查完成后,可以提交评论,或者批准、请求修改或关闭PR。 **知识点4:代码审查的最佳实践** 1. 确保PR的目标清晰且具有针对性,避免过于宽泛。 2. 在审查代码时,注意代码的质量、结构以及是否符合项目的编码规范。 3. 提供建设性的反馈,指出代码的优点和需要改进的地方。 4. 使用清晰、具体的语言,避免模糊和主观的评论。 5. 鼓励开发者间的协作,而不是单向的批评。 6. 经常审查PR,以避免延迟和工作积压。 **知识点5:HTML基础** HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它通过各种标签(如`<p>`用于段落,`<img>`用于图片,`<a>`用于链接等)来定义网页的结构和内容。HTML文档由元素组成,这些元素通过开始标签和结束标签来标识。例如,`<p>This is a paragraph.</p>`。HTML的最新版本是HTML5,它引入了许多新的元素和API,增强了对多媒体、图形和本地存储的支持。 **知识点6:GitHub Pages功能介绍** GitHub Pages是一个静态站点托管服务,允许用户直接从GitHub仓库中发布个人、组织或项目的网站。你可以通过设置一个专门的分支来存放你的网站源代码,然后利用GitHub Pages的设置选项,选择分支并发布你的网站。发布的网站将可以通过一个自定义的URL访问,这个URL通常是`username.github.io/repo-name`的格式。这为开发者提供了一个简单而快速的方法来搭建个人或项目的展示页面。 **知识点7:简单的游戏开发实践** 文件描述中提到了一个基于项目的学习活动,通过游戏的形式,让入门人员体验操作和理解基本的游戏开发概念。在这个活动中,参与者通过键盘操作控制形状的旋转和移动,目标是创建无空隙的完整行,这涉及到游戏逻辑、用户输入处理和图形界面显示等基础知识。该活动可能使用了HTML、JavaScript和CSS等前端技术实现,参与者通过实践操作来学习如何编程,并理解基本的游戏设计原理。
recommend-type

【R语言高级教程】:最小二乘法从入门到精通

# 1. 最小二乘法的理论基础 最小二乘法是数学优化技术之一,广泛应用于统计学、数据分析和工程学等领域。其核心思想在于找到一条直线(或曲线),使得所有观测点到该直线的垂直距离之和最小,即误差平方和最小。这一方法不仅简单易行,而且可以有效减少异常值对模型的影响,使得参数估计更加稳定。 ## 1.1 最小二乘法的数学表述 在最基本的线性回归模型中,最小二乘法通过最小化误差的平方和来寻找最
recommend-type

cadence画PCB时改变线长

<think>好的,我现在需要帮助用户解决在Cadence PCB设计中调整走线长度的问题。首先,我得回想一下用户提到的引用内容,尤其是引用1、2和3,里面提到了实时显示走线长度、约束导向设计以及过孔对长度的影响。用户可能已经知道如何显示长度,现在想知道如何调整它们。 用户的问题是如何调整走线长度以满足特定需求,比如等长布线或时序要求。我应该先分步骤说明不同的调整方法,比如手动调整、使用自动优化工具、蛇形走线,以及设置约束管理器中的规则。 记得引用中的信息,比如引用2提到的约束导向环境和实时长度显示,所以需要提到约束管理器的使用。引用3讨论了过孔对长度的影响,调整过孔数量可能也是一种方法。
recommend-type

汉堡应用程序开发教程:实现汉堡跟踪功能

根据给定文件信息,可以提取出以下知识点: 1. **项目技术栈**: - **MySQL**: 一个广泛使用的开源关系型数据库管理系统,用于存储汉堡应用中的数据。 - **Node**: Node.js是一个基于Chrome V8引擎的JavaScript运行环境,允许开发者使用JavaScript进行服务器端编程,非常适合处理异步数据。 - **Express**: 是一个基于Node.js平台的最小和灵活的web应用开发框架,提供了一系列强大的功能来创建web应用。 - **Handlebars**: 是一个模板系统,允许开发者在应用中使用模板进行数据绑定,通过逻辑控制来渲染动态内容。 - **本地ORM(对象关系映射)**:虽然文件中没有明确指出具体的ORM工具,但可以推断项目中使用了一种ORM工具来抽象数据库操作,简化数据库的增删改查操作。 2. **汉堡应用功能描述**: - 用户可以输入汉堡名称,并通过提交功能将汉堡名称存储到数据库中。 - 汉堡数据将会在网页左侧展示,每个汉堡旁边都有一个“Devour It”按钮。 - 用户点击“Devour It”按钮后,系统将更新数据库中的记录状态,并将汉堡名称移动到页面右侧,表示该汉堡已被吞噬。 3. **数据库设计**: - 数据库中包含一个名为`burgers`的表,用于存储汉堡的相关信息。 - `burgers`表的结构设计包括以下字段: - `id`: 作为表的主键,类型为整型(INT),用于唯一标识每个汉堡记录。 - `名称`: 用于存储汉堡名称,类型为字符串(VARCHAR),最大长度为30。 - `isDevoured`: 一个布尔类型(BOOLEAN)字段,表示汉堡是否被吞噬。 4. **文件结构和部署**: - 该项目可以在GitHub上找到,链接可能指向具体的代码仓库。 - 项目部署和使用可以通过Node和Express框架来完成,这表明应用可能使用Express框架来处理HTTP请求,并使用Node作为应用服务器。 5. **前端技术**: - 描述中提到了HTML,但是没有详细展开前端实现的具体技术。可以推测,应用可能使用了HTML来构建用户界面,并通过Handlebars模板引擎来动态渲染汉堡列表。 - 用户界面中的按钮元素用于触发吞噬汉堡的行为,这可能涉及到JavaScript或者Express框架提供的路由处理逻辑。 6. **开发流程**: - 开发者可能首先通过orm.js文件创建了数据库模型,这些模型定义了如何与数据库交互,其中包含了创建、读取、更新和删除汉堡数据的方法。 - 通过控制器来处理用户的输入和按钮点击事件,控制器将与数据库模型交互,更新或检索数据,并使用Handlebars模板引擎来呈现动态内容。 7. **项目链接和代码库**: - 项目可以通过提供的链接进行查看和使用,这表明应用可能有一个在线的演示环境或者是一个开源的代码库。 总结以上知识点,这个名为“burger-app”的项目是一个使用现代web技术栈开发的简易应用,它展示了如何结合Node.js和Express框架以及数据库技术,来实现一个动态交互的网页应用。通过前端界面与后端逻辑的配合,用户能够与网页上的汉堡进行互动,体验到数据从输入到数据库存储,再到动态渲染展示的整个过程。同时,该应用也涉及到前端展示、用户输入处理、后端逻辑控制、数据库操作和ORM应用等多个方面的知识,是一个典型的web开发实践示例。