311 lines
8.7 KiB
HTML
311 lines
8.7 KiB
HTML
<form class="layui-form page-content p-4" lay-filter="webform">
|
|
<input type="hidden" name="id" id="id" value="<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>" />
|
|
<h3 class="h3-title">处理工单</h3>
|
|
<table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray-2">分派处理人<font>*</font>
|
|
</td>
|
|
<td>
|
|
<select name="solve" lay-verify="required" lay-reqText="请选择处理人" class="layui-select" lay-search=""
|
|
lay-filter="solve" <?php if(isset($detail['status']) && ($detail['status']==2 || $detail['status']==3))
|
|
echo 'disabled' ; ?>>
|
|
<option value="">请选择处理人</option>
|
|
</select>
|
|
</td>
|
|
<td class="layui-td-gray-2">工单状态<font>*</font>
|
|
</td>
|
|
<td colspan="3">
|
|
<select name="status" lay-verify="required" lay-reqText="请选择工单状态" class="layui-select" id="status-select" <?php
|
|
if(isset($detail['status']) && $detail['status']==3) echo 'disabled' ; ?>>
|
|
<option value="">请选择工单状态</option>
|
|
<option value="1" <?php if(isset($detail['status']) && $detail['status']==1) echo 'selected' ; ?>
|
|
<?php if(isset($detail['status']) && $detail['status']==2) echo 'disabled'; ?>>解决中
|
|
</option>
|
|
<option value="2" <?php if(isset($detail['status']) && $detail['status']==2) echo 'selected' ; ?>
|
|
<?php if(isset($detail['status']) && $detail['status']==2) echo 'disabled'; ?>>已解决
|
|
</option>
|
|
<option value="3" <?php if(isset($detail['status']) && $detail['status']==3) echo 'selected' ; ?>>已关闭</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<?php if (!isset($detail['status']) || $detail['status'] != 3): ?>
|
|
<div class="pt-1">
|
|
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
|
|
立即提交
|
|
</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="wtjs-box">
|
|
<h3 class="h3-title">基础信息</h3>
|
|
<table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray-2">工单ID</td>
|
|
<td>
|
|
{$detail['id']}
|
|
</td>
|
|
<td class="layui-td-gray-2">项目工单ID</td>
|
|
<td>
|
|
{$detail['id']}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray-2">隶属项目</td>
|
|
<td>
|
|
{$detail['project_id']}
|
|
</td>
|
|
<td class="layui-td-gray-2">问题类型</td>
|
|
<td>
|
|
{$detail['problemtype']}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray-2">提交人</td>
|
|
<td>
|
|
{$detail['creater']}
|
|
</td>
|
|
<td class="layui-td-gray-2">联系电话</td>
|
|
<td>
|
|
{$detail['contact']}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray-2">电子邮箱</td>
|
|
<td>
|
|
{$detail['email']}
|
|
</td>
|
|
<td class="layui-td-gray-2">提交时间</td>
|
|
<td>
|
|
{$detail['sub_time']}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="wtjs-box">
|
|
<h3 class="h3-title">问题沟通</h3>
|
|
<div style="display: flex;gap: 15px;">
|
|
<div class="wtjs-content">
|
|
<h4>问题描述</h4>
|
|
<div id="workorder-content">
|
|
<?= $detail['content'] ?>
|
|
</div>
|
|
</div>
|
|
<div class="wtbz">
|
|
<h4>备注</h4>
|
|
<p>{$detail.remark}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray-2">项目问题</td>
|
|
<td>
|
|
<div id="workorder-content">
|
|
<?= $detail['content'] ?>
|
|
</div>
|
|
</td>
|
|
<td class="layui-td-gray-2">备注</td>
|
|
<td>{$detail.remark}</td>
|
|
</tr>
|
|
</table> -->
|
|
|
|
|
|
</form>
|
|
|
|
<script>
|
|
// 工具函数：获取URL参数
|
|
function getQueryParam(name) {
|
|
var params = new URLSearchParams(window.location.search);
|
|
return params.get(name) || '';
|
|
}
|
|
|
|
// 需要填充的字段
|
|
var fields = [
|
|
'id', 'project_id', 'problemtype', 'creater', 'contact', 'email', 'sub_time', 'remark', 'status'
|
|
];
|
|
|
|
// 页面内容填充
|
|
function fillFieldsFromUrl() {
|
|
fields.forEach(function(field) {
|
|
var value = getQueryParam(field);
|
|
var el = document.getElementById('workorder-' + field);
|
|
if (el) el.textContent = value;
|
|
// 隐藏input赋值
|
|
var inputEl = document.querySelector('input[name="' + field + '"]');
|
|
if (inputEl && !inputEl.value) inputEl.value = value;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
fillFieldsFromUrl();
|
|
});
|
|
|
|
layui.use(['form', 'layer'], function () {
|
|
var form = layui.form,
|
|
layer = layui.layer;
|
|
|
|
// 1. 工单状态禁用逻辑
|
|
function handleStatusDisable() {
|
|
var status = getQueryParam('status');
|
|
var statusNum = parseInt(status, 10);
|
|
var formElem = document.querySelector('form.layui-form');
|
|
var allInputs = formElem ? formElem.querySelectorAll('input, select, textarea, button[lay-submit]') : [];
|
|
if (statusNum === 3 || statusNum === 4) {
|
|
allInputs.forEach(function (el) {
|
|
if (el.name === 'status') {
|
|
Array.from(el.options).forEach(function (opt) {
|
|
if (opt.value !== '4' && opt.value !== '') {
|
|
opt.disabled = true;
|
|
opt.style.display = 'none';
|
|
} else if (opt.value === '4') {
|
|
opt.selected = true;
|
|
}
|
|
});
|
|
el.disabled = false;
|
|
} else {
|
|
el.disabled = true;
|
|
}
|
|
});
|
|
}
|
|
if (statusNum === 4) {
|
|
allInputs.forEach(function (el) {
|
|
el.disabled = true;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2. 渲染处理人下拉框
|
|
function renderSolveSelect() {
|
|
fetch('/api/index/getallstaff')
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
var select = document.querySelector('select[name="solve"]');
|
|
select.innerHTML = '<option value="">请选择处理人</option>';
|
|
var solveVal = getQueryParam('solve') || "<?php echo isset($detail['solve']) ? $detail['solve'] : ''; ?>";
|
|
var found = false;
|
|
data.data.forEach((solve) => {
|
|
var option = document.createElement('option');
|
|
option.value = solve.id;
|
|
option.innerText = solve.name;
|
|
if (String(solve.id) === String(solveVal)) {
|
|
option.selected = true;
|
|
found = true;
|
|
}
|
|
select.appendChild(option);
|
|
});
|
|
// 如果solve的值不在接口返回的列表中，手动添加一个option
|
|
if (solveVal && !found) {
|
|
var option = document.createElement('option');
|
|
option.value = solveVal;
|
|
// 这里可以显示solveVal本身，或者显示“未知处理人”
|
|
option.innerText = "<?php echo isset($detail['solve']) && isset($detail['solve_name']) ? $detail['solve_name'] : '未知处理人'; ?>";
|
|
option.selected = true;
|
|
select.appendChild(option);
|
|
}
|
|
form.render('select');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching staff:', error);
|
|
});
|
|
}
|
|
|
|
// 3. 渲染工单状态
|
|
function renderStatusSelect() {
|
|
var statusVal = getQueryParam('status');
|
|
if (statusVal) {
|
|
form.val('webform', {
|
|
status: String(statusVal)
|
|
});
|
|
}
|
|
}
|
|
|
|
// 4. 图片预览
|
|
layer.photos({
|
|
photos: '#workorder-content',
|
|
anim: 5
|
|
});
|
|
|
|
// 5. 初始化
|
|
handleStatusDisable();
|
|
renderSolveSelect();
|
|
renderStatusSelect();
|
|
|
|
// 6. 表单提交
|
|
form.on('submit(webform)', function (data) {
|
|
var id = getQueryParam('id');
|
|
fetch('/workorder/index/edit?id=' + id, {
|
|
method: 'POST',
|
|
body: JSON.stringify(data.field),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((result) => {
|
|
layer.msg(result.msg);
|
|
if (result.code === 2) {
|
|
setTimeout(function () {
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);
|
|
parent.location.reload();
|
|
}, 1000);
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
<style>
|
|
.page-content img {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.layui-layer-shade {
|
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
.pt-1 {
|
|
margin-top: 15px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
width: 100%;
|
|
}
|
|
|
|
.layui-table {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.wtjs-box {
|
|
border: 1px solid #eee;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.wtjs-content {
|
|
border: 1px solid #eee;
|
|
width: 60%;
|
|
}
|
|
|
|
.wtbz {
|
|
border: 1px solid #eee;
|
|
width: 40%;
|
|
}
|
|
|
|
.wtjs-content,
|
|
.wtbz {
|
|
padding: 15px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.wtjs-box h4 {
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #949494;
|
|
padding-bottom: 15px;
|
|
color: #4b4b4b;
|
|
}
|
|
</style> |