淘宝客户自己做网站怎么做,wordpress小程序怎么不用认证审核,重庆网站seo按天计费,网站建设论文选题背景需求#xff1a;一个机构下拉菜单#xff0c;一个人员下拉菜单#xff0c;默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口#xff0c;模糊查询为一个接口不包含懒加载#xff0c;默认非模糊查询情况下为一个接口#xff0c;点击节点懒加载。机构下拉菜单数据…需求一个机构下拉菜单一个人员下拉菜单默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口模糊查询为一个接口不包含懒加载默认非模糊查询情况下为一个接口点击节点懒加载。机构下拉菜单数据变动更新人员下拉菜单数据。日期默认为当天 templatediv classapp-containerdiv idapp classmb82 grid-content pd20divel-row :gutter20el-col idtittle检查信息/el-col/el-rowel-divider /el-divider/divdiv classcenterel-form :modelruleForm :rulesrules refruleForm label-width100px classdemo-ruleFormel-form-item label检查时间 propcheckTimeel-date-pickerclasswidth100v-modelruleForm.checkTimetypedatevalue-formatyyyy-MM-dd HH:mm:ssplaceholder选择日期/el-date-picker/el-form-itemel-form-item label检查机构 propselectOrgel-selectclassel-input-search width100v-modelruleForm.selectOrgrefrefSelectOrg:multipletrueremove-tagremovetagOrgclearclearallOrgclearablechange $forceUpdate();el-optionvaluestyleheight:auto;background-color: #fff;el-input:validate-eventfalsev-modelfilterTextOrgrefrefSelectOrgSearchplaceholder请输入click.stop.nativeclearableclearclearallOrgSearchstylemargin-bottom:8px;/el-inputel-tree:show-checkboxtruestylepadding:20px 10px;:dataorgList:propsdefaultPropsOrgnode-keyorgIdcheck-strictlyhighlight-current:expand-on-click-nodetruerefrefTreeOrg:default-expanded-keysexpandedKeysOrgData:default-checked-keyscheckedKeysOrgDatacheck-changehandleNodeCheckOrgnode-clickhandleNodeClick/el-tree/el-option/el-select/el-form-itemel-form-item label检查人员 propselectUserel-selectclassel-input-search width100v-modelruleForm.selectUserrefrefSelectOrg:multipletrueremove-tagremovetagUserclearclearallUserclearablechange $forceUpdate();el-optionvaluestyleheight:auto;background-color: #fff;el-input:validate-eventfalsev-modelfilterTextUserrefrefSelectUserSearchplaceholder请输入click.stop.nativeclearableclearclearallUserSearchstylemargin-bottom:8px;/el-inputel-tree:show-checkboxtruestylepadding:20px 10px;:datauserList:propsdefaultPropsUsernode-keyuserIdcheck-strictlyhighlight-current:expand-on-click-nodetruerefrefTreeUser:default-expanded-keysexpandedKeysUserData:default-checked-keyscheckedKeysUserDatacheck-changehandleNodeCheckUser/el-tree/el-option/el-select/el-form-itemel-form-item label检查结果 propcheckResultel-input typetextarea v-modelruleForm.checkResult/el-input/el-form-item/el-form/div/divdiv classfooterBtn bgel-divider/el-dividerel-row classpd20el-col :span23 styletext-align: right;el-button sizesmall clickgoback返回/el-buttonel-button typeprimary sizesmall clicksubmitBtn(ruleForm)提交/el-button/el-col/el-row/div/div /templatescript import axios from axios; import {warnView,getInfo,childNode,childNodeFuzzyQuery,getUserListByOrg,saveCheck} from ../../../../api/warning export default {data() {return {// 检察机构startfilterTextOrg:,orgList:[],defaultPropsOrg: {children: childNodeList,label: orgName,value:orgId,isLeaf: leaf},expandedKeysOrgData:[792394093041156096],checkedKeysOrgData:[],nodeCheckedOrgData:[],// 检察机构end// 检察人员startfilterTextUser:,userList:[],defaultPropsUser: {children: userList,label: realName,value:userId,isLeaf: leaf},expandedKeysUserData:[],checkedKeysUserData:[],nodeCheckedUserData:[],// 检察人员endruleForm: {checkTime: ,selectOrg: [],selectUser: [],checkResult: ,},rules: {checkTime: [{ required: true, message: 检查时间不能为空, trigger: change },],selectOrg: [{ type: array, required: true, message: 检查机构不能为空, trigger: change },],selectUser: [{ type: array, required: true, message: 检查人员不能为空, trigger: change },],checkResult: [{ required: true, message: 检查结果不能为空, trigger: blur },],},orgId:,orgName:,}},watch: {// 检察机构start// 监听输入值filterTextOrg(val) {if(val){this.childNodeFuzzyQueryChange(val)}else{this.childNodeChangeAll(this.orgId)}},ruleForm.selectOrg: {handler: function (newVal, oldVal) {let that thisif(newVal){// this.$refs.refTreeOrg.filter(newVal);}else{console.log(newVal1111111,newVal)}},deep: true},// 检察机构end// 检察人员startfilterTextUser(val) {this.getUserListByOrgChange(val)},// 检察人员end},created() {getInfo().then((res) {this.userId res.data.userId;this.realName res.data.realName;this.orgId res.data.orgId;this.orgName res.data.orgName;this.nodeCheckedOrgData [{orgId:this.orgId,orgName:this.orgName,}]this.ruleForm.selectOrg.push(this.orgName)this.checkedKeysOrgData.push(this.orgId)this.childNodeChangeAll(792394093041156096)this.nodeCheckedUserData [{userId:this.userId,realName:this.realName,}]this.ruleForm.selectUser.push(this.realName)this.checkedKeysUserData.push(this.userId)this.getUserListByOrgChange();})},mounted() {this.ruleForm.superviseId this.$route.query.superviseId; // 监管idDate().getTime(); // 检查编号this.ruleForm.checkTime this.dateTypeFormat(YYYY-mm-dd HH:MM:SS, new Date())},methods: {// 去重unique(arr){return Array.from(new Set(arr))},// 返回上一页goback() {this.$router.go(-1);},// 格式化日期dateTypeFormat(fmt, date) {let retconst opt {Y: date.getFullYear().toString(), // 年m: (date.getMonth() 1).toString(), // 月d: date.getDate().toString(), // 日H: date.getHours().toString(), // 时M: date.getMinutes().toString(), // 分S: date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加必须转化成字符串}for (const k in opt) {ret new RegExp(( k )).exec(fmt)if (ret) {fmt fmt.replace(ret[1], (ret[1].length 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, 0)))}}return fmt}, // 检察机构start// 获取模糊查询机构树childNodeFuzzyQueryChange(val){let data {orgId:,value:val}childNodeFuzzyQuery(data).then((res) {this.orgList res.data || [];})},// 获取机构树非模糊查询childNodeChangeAll(id){let orgId id || childNode(orgId).then((res) {res.data.node.childNodeList res.data.childOrgListthis.orgList []this.orgList.push(res.data.node);})},// 删除机构单个下拉菜单标签removetagOrg(val){this.nodeCheckedOrgData.forEach((item, index, arr) {if(item.orgName val) {arr.splice(index, 1)this.checkedKeysOrgData this.checkedKeysOrgData.filter(i i ! item.orgId)}})this.checkedKeysOrgData this.unique(this.checkedKeysOrgData)this.$nextTick(() {this.$refs.refTreeOrg.setCheckedKeys(this.checkedKeysOrgData,true)})// 数据变动更改人员树this.nodeCheckedUserData[];this.ruleForm.selectUser[];this.checkedKeysUserData[];this.getUserListByOrgChange()},// 清空机构下拉菜单clearallOrg(){},// 清空机构模糊查询clearallOrgSearch(){},// 点击机构树复选框handleNodeCheckOrg(data,checked){if(checked true) {this.ruleForm.selectOrg.push(data.orgName)this.checkedKeysOrgData.push(data.orgId)this.nodeCheckedOrgData.push(data)if(this.ruleForm.selectOrg)this.ruleForm.selectOrg this.unique(this.ruleForm.selectOrg)this.checkedKeysOrgData this.unique(this.checkedKeysOrgData)const map new Map();this.nodeCheckedOrgData.filter(i !map.has(i.orgId) map.set(i.orgId, i));this.$refs.refTreeOrg.setChecked(data.orgId, true)}else{this.nodeCheckedOrgData.forEach((item, index, arr) {if(item.orgId data.orgId) {arr.splice(index, 1)this.checkedKeysOrgData this.checkedKeysOrgData.filter(i i ! item.orgId)}})if(this.ruleForm.selectOrg.includes(data.orgName)) {this.ruleForm.selectOrg.forEach((item, index, arr) {if(item data.orgName) {arr.splice(index, 1)}})this.$refs.refTreeOrg.setChecked(data.orgId, false)}}// 数据变动更改人员树this.nodeCheckedUserData[];this.ruleForm.selectUser[];this.checkedKeysUserData[];this.getUserListByOrgChange()},// 点击机构树节点handleNodeClick(data,node){console.log(data)console.log(node)let that thislet orgId ;if (node.level 1) {orgId node.data.orgId;}childNode(orgId).then((res) {if(res.code 20000){let parentData [];let data;if (node.level 0) {parentData[0] res.data.nodedata parentData;}if (node.level 1) {data res.data.childOrgList;}//TODO 追加数据 append datathis.$refs.refTreeOrg.updateKeyChildren(orgId,res.data.childOrgList);setTimeout((){if(res.data.childOrgList){ node.expanded true}},300)} else {this.$message({message: res.message,type: error});}})}, // 检查机构end // 检察人员start// 获取模糊查询人员树getUserListByOrgChange(val){this.checkedKeysOrgData this.unique(this.checkedKeysOrgData)let data {orgIds:this.checkedKeysOrgData,searchValue:val || }getUserListByOrg(data).then((res) {this.userList res.data || [];})},// 删除人员单个下拉菜单标签removetagUser(val){this.nodeCheckedUserData.forEach((item, index, arr) {if(item.realName val) {arr.splice(index, 1)this.checkedKeysUserData this.checkedKeysUserData.filter(i i ! item.userId)}})this.checkedKeysUserData this.unique(this.checkedKeysUserData)this.$nextTick(() {this.$refs.refTreeUser.setCheckedKeys(this.checkedKeysUserData,true)})},// 清空人员下拉菜单clearallUser(){},// 清空人员模糊查询clearallUserSearch(){},// 点击人员树复选框handleNodeCheckUser(data,checked){if(checked true) {this.ruleForm.selectUser.push(data.realName)this.checkedKeysUserData.push(data.userId)this.nodeCheckedUserData.push(data)if(this.ruleForm.selectUser)this.ruleForm.selectUser this.unique(this.ruleForm.selectUser)this.checkedKeysUserData this.unique(this.checkedKeysUserData)const map new Map();this.nodeCheckedUserData.filter(i !map.has(i.userId) map.set(i.userId, i));this.$refs.refTreeUser.setChecked(data.userId, true)}else{this.nodeCheckedUserData.forEach((item, index, arr) {if(item.userId data.userId) {arr.splice(index, 1)this.checkedKeysUserData this.checkedKeysUserData.filter(i i ! item.userId)}})if(this.ruleForm.selectUser.includes(data.realName)) {this.ruleForm.selectUser.forEach((item, index, arr) {if(item data.realName) {arr.splice(index, 1)}})this.$refs.refTreeUser.setChecked(data.userId, false)}}},// 检查人员end// 表单提交弹窗submitBtn(formName){this.$refs[formName].validate((valid) {if (valid) {this.$confirm(确定提交吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.submitChange();}).catch(() {this.$message({type: info,message: 已取消});});} else {return false;}});},// 提交表单submitChange(){const map new Map();this.nodeCheckedOrgData this.nodeCheckedOrgData.filter(i !map.has(i.orgId) map.set(i.orgId, i));this.nodeCheckedUserData this.nodeCheckedUserData.filter(i !map.has(i.userId) map.set(i.userId, i));this.ruleForm.orgList this.nodeCheckedOrgData;this.ruleForm.userList this.nodeCheckedUserData;let data {superviseId:this.ruleForm.superviseId,orgList:this.ruleForm.orgList,userList:this.ruleForm.userList,checkResult:this.ruleForm.checkResult,checkTime:this.ruleForm.checkTime,}console.log(data,data)saveCheck(data).then((res) {if(res.code 20000){this.$message({message: 提交成功,type: success});this.$router.go(-1);}else{this.$message({message: res.message,type: error});}})},} } /scriptstyle scoped langless .app-container {margin: 10px; } #app {/* padding: 15px; */background-color: #fff;font-size: 14px; }.title{text-align: center;color: #0066FF;font-weight:800;font-size: 16px;}.chart-container{position: relative;width: 100%;height: calc(100vh - 84px);}.description{font-size: 12px;padding-left: 20px;color: #555;}.mt10{margin-top: 10px;}.mg15-0{margin: 15px 0;}.mt30{margin-top: 30px;}.mt26{margin-top: 26px;}.state-box{width: 10px;height: 10px;margin-right: 5px;margin-bottom: 1px;display: inline-block;}.state-box-max {width: 19px;height: 16px;text-align: center;line-height: 16px;color: #fff;margin-right: 10px;margin-top: 1px;display: inline-block;}.violet{background: #9933FF;}.yellow{background: #e6a23c;}.blue{background: #0066FF;}.footerBtn{position: fixed;bottom: 0;right: 0;z-index: 9;width: calc(100%);-webkit-transition: width 0.28s;transition: width 0.28s;}.el-divider--horizontal{margin: 0px 15px;}.bg{background: #fff;}.el-col{margin:0 24px;}.pdt10{padding-top: 10px;}.mb15{margin-bottom: 15px;}.mb82{margin-bottom: 82px;}.mb60{margin-bottom: 60px;}.mb10{margin-bottom: 10px;margin-top: 10px;}.diaglogClas{margin-bottom: 15px;}.grid-content {/* padding-top: 15px; */border-radius: 4px;min-height: 36px;background: #fff;}.bg-purple {/* background: #dddfe6; */width: 100%;height: 55px;line-height: 55px;font-size: 12px;/* font-weight:800; */text-align: center;border: 1px solid #d3dce6;}.expClas{float: right;position: initial;margin-top: 30px;}.footCenter{text-align: center;} /deep/.el-autocomplete-suggestion{display: inline-table; } .width100{width: 100%;} .center{width: 700px;margin: 0 auto;padding-top: 20px;padding-bottom: 20px; } .footerBtn{position: fixed;bottom: 0;right: 0;z-index: 9;width: calc(100%);-webkit-transition: width 0.28s;transition: width 0.28s; } .bg{background: #fff;} .pd20{padding: 15px;padding-right: 0;} /style