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> |