jhprjv2/ruoyi-wechat/src/main/resources/templates/sspManage/sspChange.html

785 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/ssp/bootstrap.min.css">
<link rel="stylesheet" href="../../css/ssp/takePicture.css">
<link rel="stylesheet" href="../../css/ssp/date.css">
<link rel="stylesheet" href="../../css/ssp/newTips.css">
<title>质量隐患问题整改</title>
<style>
.menuTree{ margin-left:0px;}
.menuTree div{ padding-left:1px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto; margin:0; padding-left: 25px;}
.menuTree span{color:#88a2ed; display:block; height:40px; line-height:40px; padding:0 15px; margin:1px 0; cursor:pointer; border-bottom:1px solid #445577;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.arrow{width: 25px;height: 25px;position: relative;border:0;top: 4px;float: right;background: url("http://fileimg.makalu.cc/CORE_9883C8C92A0347398B4A1309E7E03A52.png") no-repeat center/25px;}
.arrow.xz{transform:rotate(90deg)}
.ssp-popup-gx{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #30384b;
z-index: 999;
display: none;
}
.ssp-popup-gx-title{
height: 2.5rem;
border-bottom: 1px solid #445577;
text-align: center;
line-height: 2.5rem;
}
.ssp-popup-gx-con{
max-height:25rem;
overflow-x:hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<header class="hide">
<div class="row">
<div class="col-xs-3" onclick="goBack()">
<img src="../../img/ssp/h_lift.png">
</div>
<div class="col-xs-6">
<p>问题整改</p>
</div>
</div>
</header>
<div id="app">
<div class="ssp-all">
<div class="loading_p">
<img src="../../img/ssp/866000e905ae45a8b79d80de52bb4e9a.gif">
<div>正在提交数据!请稍后...</div>
</div>
<div class="ssp-problem-rectification">
<div class="ssp-block">
<div class="spp-block-title">
拍摄位置
</div>
<div class="ssp-block-position" th:text="${projectName}" id="problemArea"></div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
图片上传
</div>
<div class="row eq-scene-max">
<div>
</div>
<div class="col-xs-4">
<div class="rq-add-to"></div>
<input type="file" accept="image/*" class="rq-file" onchange="xmTanUploadImg(this)">
</div>
</div>
</div>
<div class="ssp-block hide">
<div class="spp-block-title">
视频上传
</div>
<div class="row eq-scene-max">
<div class="ssp-block-video">
<video id="videoSrc" src=""></video>
<div class="rq-delete-video" onclick="deleteVideo(this)">×</div>
</div>
<input type="file" accept="video/*" class="rq-file-video" id="selectFile">
<div class="video-tips">
<div id="tipsHide">视频上传百分比:<span id="percent"></span></div>
</div>
</div>
<input type="hidden" id="bigFile" name="bigFile">
<input type="hidden" id="bigFileName" name="bigFileName">
</div>
<div class="ssp-block">
<div class="spp-block-title">
隐患类型
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择质量隐患类型" readonly id="input0" onclick="inputClick(0)" v-model="form.projectType">
<input type="hidden" id="projectType" >
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
隐患描述
</div>
<div class="ssp-ri-textarea">
<textarea placeholder="请输入隐患描述" id="constructionSite"></textarea>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
整改要求
</div>
<div class="ssp-ri-textarea">
<textarea placeholder="请输入整改要求" id="changeText"></textarea>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
整改截至时间
</div>
<div class="ssp-block-input">
<input type="text" id="dateTime" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2023,'endYear':2033}" placeholder="请选择整改截至时间" th:value="${recheckSend}" readonly />
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
整改人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择整改人" id="mainGiver" onclick="structure(1,this)" readonly>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
复检人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择复检人" id="reinspector" onclick="structure(3,this)" th:value="${recheckSend}" readonly>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
抄送人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择抄送人" id="ccto" readonly onclick="structure(2,this)">
<input type="hidden" id="cctoPhone">
</div>
</div>
</div>
<div class="ssp-btn">
<div class="row">
<div class="col-xs-6">
<button type="button" class="ssp-btn-cancel" @click="cancel()">取消</button>
</div>
<div class="col-xs-6">
<button type="button" class="ssp-btn-confirm" onclick="dataSubmit()">提交</button>
</div>
</div>
</div>
</div>
<!--施工部门下拉框-->
<div class="ssp-select-fixed" id="selectFixed">
<div class="ssp-select-content" id="selectCon">
<ul class="spp-select-ul">
<li v-for="item in projectTypeList" onclick="optionLi(this)" :id="item.id" >{{item.project_type}}</li>
</ul>
</div>
</div>
<!--组织架构-->
<div class="ssp-framework" id="framework">
<div class="ssp-framework-content" id="frameworkCon">
<div class="ssp-framework-top" id="frameworkTop">
<div class="ssp-framework-title" >
<div class="row">
<div class="col-xs-3">
<div class="ssp-framework-img" id="frameworkClose">
<img src="../../img/ssp/left.png">
</div>
</div>
<div class="col-xs-6">
<span id="frameworkTitle">请选择</span>
</div>
</div>
</div>
<div class="ssp-framework-search">
<input type="text" placeholder="搜索" v-model="name">
<button type="button" @click="searchFun()">搜索</button>
</div>
</div>
<div class="app-fold" id="fold">
<div class="app-fold-block" v-for="item in lists" v-if="item.people && item.people.length>0">
<div class="app-fold-title" onclick="foldTitle(this)">{{item.dep}}</div>
<ul class="app-fold-ul">
<li class="spp-li" v-for="li in item.people" onclick="foldLi(this)">
<span>{{li.name}}</span>
<span>{{li.phone}}</span>
</li>
</ul>
</div>
</div>
<div class="ssp-framework-btn" id="frameworkBtn">
<div class="row">
<div class="col-xs-8">
<div onclick="rise()">
<div class="spp-choice-number">已选择 <span class="contNumber">0</span></div>
<div class="spp-choice-por" id="porName"></div>
</div>
</div>
<div class="col-xs-4">
<div class="ssp-btn-right">
<button type="button" id="frameworkConfirm">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--蒙版-->
<div class="spp-mask" id="sppMask" onclick="selectedclose()"></div>
<!--已选人员-->
<div class="ssp-selected" id="sspSelected">
<div class="ssp-selected-con">
<div class="spp-selected-number">
已选择 <span class="contNumber">0</span>
<label onclick="selectedclose()">确认</label>
</div>
<div class="spp-ry-list" >
<table id="ryListTable">
</table>
</div>
</div>
</div>
</div>
<div class="ssp-popup" id="popupTj">
<div class="ssp-popup-content">
<div class="spp-window-title ssp-popup-title">
<label>消息提示</label>
</div>
<div class="ssp-popup-textarea">
<div class="ssp-popup-div">添加成功</div>
</div>
<div class="spp-popup-btn">
<button type="button" onclick="confirmBtnBack()">确定</button>
</div>
</div>
</div>
<input type="hidden" id="hiddenData">
<input type="hidden" id="posPhone">
<input type="hidden" id="reinspectorPhone" th:value="${recheckSendUser}">
</body>
<script type="text/javascript" src="/js/jquery-3.0.0.min.js"></script>
<script src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/vue-resource-1.3.4.js"></script>
<script type="text/javascript" src="/js/ssp/qiniu-3.1.2.min.js"></script>
<script type="text/javascript" src="/js/ssp/upload.js"></script>
<script type="text/javascript" src="/js/ssp/jquery.date.js"></script>
<script type="text/javascript" src="../../js/ssp/newTips.js"></script>
<script type="text/javascript" src="/js/tree.js"></script>
<script>
//项目名称
var projectName = '[[${projectName}]]';
//项目id
var projectId = '[[${projectId}]]';
//施工部门数据
var vm1 = new Vue({
el:'#app',
data:{
form: {
marksLocation: projectName,
infoType: 1
},
//施工部门数据
projectTypeList:[],
lists:[],
name:""
},
methods:{
//获取工程类型
getProjectType() {
let _this = this;
$.ajax({
type: "get",
url: "/weixin/sspManage/getProjectType",
async: false,
success: function (data) {
_this.projectTypeList = data;
}
})
},
getAllList() {
let _this = this;
this.$http.post('/weixin/sspManage/queryUserInfo').then(result => {
_this.lists = result.data
})
},
searchFun() {
let _this = this;
$.post('/weixin/sspManage/queryUserInfo', {"name":this.name}, function (result) {
_this.lists = result
})
},
//取消(重置)表单
cancel() {
this.form = {};
window.history.back();
},
},
created() {
//工程隐患类型
this.getProjectType();
this.getAllList();
},
})
//弹窗动态居中
function paddingTop() {
var screenH = window.screen.height;
var selectH = $("#selectCon").height()
var SelectTop = (screenH - selectH - 80) / 2
var selectHpo = $("#selectConPo").height()
var SelectTopPo = (screenH - selectHpo - 80) / 2
$("#selectFixed").css("padding-top",SelectTop)
$("#selectFixedPo").css("padding-top",SelectTopPo)
}
//点击工程类型、工序名称、工程名称显示选项
var num = 0;
function inputClick(n) {
$("body").css("overflow","hidden")
$(".spp-select-ul li").removeClass("li")
$("#selectFixed").fadeIn(500);
$(".spp-select-ul").hide();
if(n==0){
$("#selectCon").children().eq(n).show();
num = n
}else if(n==1){
$("#selectCon").children().eq(n).show();
num = n
}else{
$("#selectCon").children().eq(n).show();
num = n
}
paddingTop();
}
//点击显示下拉框
function optionLi(e) {
$(e).addClass("li")
$("body").css("overflow","auto")
if(num == 0){
$("#input0").val($(e).html())
$("#projectType").val($(e).attr("id"))
}else if(num == 1){
$("#input1").val($(e).html())
$("#processName").val($(e).attr("id"))
}else if(num == 2){
$("#input2").val($(e).html())
//获取code
$("#projectName").val($(e).attr("code"))
}
$("#selectFixed").fadeOut(500);
}
//点击施工部门 显示选项
function constructionSite() {
$("body").css("overflow","hidden")
$(".spp-select-ul li").removeClass("li")
$("#selectFixed").fadeIn(500);
paddingTop();
}
//点击蒙版 关闭 施工部门选项
$(function(){
$("body").bind('click',function(e){
if(e.target.className == 'ssp-select-fixed'){
$("#selectFixed").fadeOut(500);
$("body").css("overflow","auto")
}
})
})
//点击主送人 抄送人 显示组织架构
function structure(num,e) {
$("body").css("overflow","hidden")
$("#framework").fadeIn(500);
var screenH = window.screen.height;
var topH = $("#frameworkTop").innerHeight()
var bottomH = $("#frameworkBtn").innerHeight()
var topH = screenH-topH-bottomH-100
$("#fold").css("max-height",topH);
$(".spp-li").removeClass("ssp-active")
if(num == 1){
$("#frameworkTitle").html("请选择整改人");
$("#frameworkBtn").hide();
if($(e).val() != ""){
var sppLi = $(".spp-li");
for(var i = 0;i<sppLi.length;i++){
if($(sppLi[i]).children().eq(1).html() ==$("#posPhone").val()){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}else if(num == 2){
$("#frameworkTitle").html("请选择抄送人");
$("#frameworkBtn").show();
var sppLi = $(".spp-li");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() == phoneArray[j]){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}else{
$("#frameworkTitle").html("请选择复检人");
$("#frameworkBtn").show();
var sppLi = $(".spp-li");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() ==$("#reinspectorPhone").val()){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}
$("#hiddenData").val(num);
}
//关闭组织架构
$("#frameworkClose").click(function () {
closeStructure()
})
//关闭组织架构方法
function closeStructure(){
$("body").css("overflow","auto")
$("#framework").fadeOut(500);
}
//组织架构折叠
function foldTitle(e) {
if($(e).next().css("display") == "none"){
$(e).next().slideDown();
}else {
$(e).next().slideUp();
}
}
//选人
var cont = 0;
function foldLi(e) {
if($("#hiddenData").val() == 1){
$(".spp-li").removeClass("ssp-active");
$(e).addClass("ssp-active");
$("#mainGiver").val($(e).children().eq(0).html());
$("#posPhone").val($(e).children().eq(1).html());
closeStructure()
}else if($("#hiddenData").val() == 3){
$(".spp-li").removeClass("ssp-active");
$(e).addClass("ssp-active");
$("#reinspector").val($(e).children().eq(0).html());
$("#reinspectorPhone").val($(e).children().eq(1).html());
closeStructure()
}else{
if($(e).attr("class") =="spp-li ssp-active"){
cont --
$(e).removeClass("ssp-active")
for(var i = 0;i<phoneArray.length;i++){
if(phoneArray[i] == $(e).children().eq(1).html()){
nameArray.splice(i,1);
phoneArray.splice(i,1);
}
}
}else{
cont ++
$(e).addClass("ssp-active");
nameArray.push($(e).children().eq(0).html());
phoneArray.push($(e).children().eq(1).html());
}
$(".contNumber").html(cont);
$("#porName").html(nameArray.toString());
}
}
//展开已选人员
function rise() {
$("#ryListTable").empty();
$("#sppMask").fadeIn();
$("#sspSelected").animate({bottom:'0'},200);
var tableTr ='';
for(var i=0;i<nameArray.length;i++){
if(cont != 0){
tableTr += '<tr>' +
'<td><span>'+nameArray[i]+' &nbsp;&nbsp;&nbsp; '+phoneArray[i]+'</span></td>' +
'<td><button type="button" onclick="removeTr(this)">移除</button></td>' +
'</tr>'
}
}
$("#ryListTable").append(tableTr);
}
//移除tr
function removeTr(e) {
cont --;
$(".contNumber").html(cont);
var i = $(e).parents('tr').index();
nameArray.splice(i,1);
phoneArray.splice(i,1);
$("#porName").html(nameArray.toString());
var sppLi = $(".spp-li");
$(".spp-li").removeClass("ssp-active");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() == phoneArray[j]){
$(sppLi[i]).addClass("ssp-active");
}
}
}
$(e).parents('tr').remove()
}
//关闭组织架构 给抄送人 input 赋值
$("#frameworkConfirm").click(function () {
$("#ccto").val(nameArray.toString());
$("#cctoPhone").val(phoneArray.toString());
closeStructure()
for(let i=0;i<nameArray.length;i++){
let obj={};
obj.nameArray=nameArray[i];
obj.phoneArray=phoneArray[i];
options.push(obj);
}
})
//点击确认或蒙版 关闭已选人员
function selectedclose(){
$("#sppMask").fadeOut();
$("#sspSelected").animate({bottom:'-20rem'},200);
}
//返回
$("#backBut").click(function () {
window.history.back();
})
//页面提交
function dataSubmit() {
showLoading();
var problemArea = $("#problemArea").text();
//图片
var nameSrc = $("[name='imgName']");
//视频
var videoUrl = $("#bigFile").val();
//隐患类型
var projectType = $("#projectType").val();
//隐患描述
var constructionSite = $("#constructionSite").val();
//整改要求
var changeText = $("#changeText").val();
//整改人
var mainGiver = $("#mainGiver").val();
var posPhone = $("#posPhone").val();
//复检人
var reinspector = $("#reinspector").val();
var reinspectorPhone = $("#reinspectorPhone").val();
//抄送人
var ccto = $("#ccto").val();
var cctoPhone = $("#cctoPhone").val();
//整改截至时间
var nickedTime = $("#dateTime").val()
if(nameSrc.length <= 0) {
hideLoading();
toast({
message:"至少上传一张图片",
time:3000
});
return false;
}
var src=[]
for (var i=0;i<nameSrc.length;i++){
src.push(nameSrc[i].src);
}
if(projectType == "" || projectType == null) {
hideLoading();
toast({
message:"请选择质量隐患类型",
time:3000
});
return false;
}
if(constructionSite == "" || constructionSite == null) {
hideLoading();
toast({
message:"请填写隐患描述",
time:3000
});
return false;
}
if(changeText == "" || changeText == null) {
hideLoading();
toast({
message:"请填写整改要求",
time:3000
});
return false;
}
if(nickedTime == "" || nickedTime == null){
hideLoading();
toast({
message:"请选择整改截至时间",
time:3000
});
return false;
}
if(mainGiver == "" || mainGiver == null) {
hideLoading();
toast({
message:"请选择整改人",
time:3000
});
return false;
}
if(reinspector == "" || reinspector == null) {
hideLoading();
toast({
message:"请选择复检人",
time:3000
});
return false;
}
if(ccto == "" || ccto == null) {
hideLoading();
toast({
message:"请选择抄送人",
time:3000
});
return false;
}
//抄送人主送人判断
if(ccto.search(mainGiver) != -1) {
hideLoading();
toast({
message:"抄送人中不能包含整改人",
time:3000
});
return false;
}
//抄送人复检人判断
if(ccto.search(reinspector) != -1) {
hideLoading();
toast({
message:"抄送人中不能包含复检人",
time:3000
});
return false;
}
//信息提交
var data = {
"imgSrc":JSON.stringify(src),
"videoUrl":videoUrl,
"problemArea":problemArea,
"workParts":constructionSite,
"changeInfo":changeText,
"lordSent":mainGiver,
"lordSentUser":posPhone,
"copySend":ccto,
"copySendUser":cctoPhone,
"infoType":"1",
"nickedTime":nickedTime,
"dangerType":projectType,
"recheckSend":reinspector,
"recheckSendUser":reinspectorPhone
}
//请求
showLoading();
$.post("/weixin/sspManage/listSspInfoMyNicked", data, function (result) {
hideLoading();
if(result == "OK") {
$("#popupTj").fadeIn(300);
} else {
toast({
message:"添加失败请联系管理员",
time:3000
});
}
})
}
function goBack() {
window.history.back();
}
function deleteVideo() {
$("#videoSrc").attr("src","");
$("#videoSrc").hide();
$(".rq-delete-video").hide();
$("#selectFile").show();
$("#percent").html("");
}
var nameArray =new Array();
var phoneArray =new Array()
let options = [];
/*上传图片*/
var i = 0;
function xmTanUploadImg(obj) {
i++;
var a = "preview"+i;
var b = "#preview"+i;
var c = "xmTanImg"+i
$(obj).parent().prev().append('<div class="col-xs-4"><div class="eq-scene-img" id="'+a+'"><div class="rq-delete" onclick="deletes(this)">×</div></div></div>')
$(b).prepend("<img id='"+c+"' name='imgName'>");
var file = obj.files[0];
if(file == undefined){
//alert(123);
//$("#image").val("");
}else{
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
//console.log("成功读取....");
//console.log(e);
var img = document.getElementById(c);
var data = e.target.result;
var image = new Image();
image.src= data;
image.onload=function(){
img.src= data;
};
}
reader.readAsDataURL(file)
}
}
//删除上传的图片
function deletes(de){
$(de).parent().parent().remove();
}
//关闭页面
function confirmBtnBack() {
window.history.go(-1);
}
$.date('#dateTime');
</script>
</html>