594 lines
17 KiB
HTML
594 lines
17 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 echo (isset($detail['status']) && $detail['status']==1) ? 'selected' : '' ; ?>>解决中
|
||
</option>
|
||
<option value="2" <?php echo (isset($detail['status']) && $detail['status']==2) ? 'selected' : '' ; ?>>已解决
|
||
</option>
|
||
<option value="3" <?php echo (isset($detail['status']) && $detail['status']==3) ? '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>
|
||
|
||
<div class="yhgt-box">
|
||
<h3 class="h3-title">用户沟通</h3>
|
||
<div style="display: flex;gap: 15px;">
|
||
<div class="yhgt-content">
|
||
<h4>用户留言</h4>
|
||
<div id="workorder-message">
|
||
<?= $detail['content'] ?>
|
||
</div>
|
||
</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') || "<?php echo isset($detail['status']) ? $detail['status'] : ''; ?>";
|
||
var statusNum = parseInt(status, 10);
|
||
|
||
// 仅当状态为3(已关闭)时才禁用下拉框
|
||
if (statusNum === 3) {
|
||
document.querySelector('select[name="status"]').disabled = true;
|
||
}
|
||
|
||
// 确保已解决状态可见
|
||
if (statusNum === 2) {
|
||
var statusSelect = document.getElementById('status-select');
|
||
Array.from(statusSelect.options).forEach(function (opt) {
|
||
opt.disabled = false;
|
||
opt.style.display = '';
|
||
});
|
||
}
|
||
}
|
||
|
||
// 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') || "<?php echo isset($detail['status']) ? $detail['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;
|
||
});
|
||
});
|
||
|
||
//调取用户沟通信息
|
||
var order_id = getQueryParam('id') || "<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>";
|
||
function loadUserMessages() {
|
||
if (!order_id) return;
|
||
fetch('/workorder/index/usermessagelist?order_id=' + order_id)
|
||
.then(response => response.json())
|
||
.then(res => {
|
||
var html = '';
|
||
if (res.code === 0 && Array.isArray(res.data)) {
|
||
res.data.forEach(function (msg) {
|
||
var who = '';
|
||
var labelClass = '';
|
||
var avatarClass = '';
|
||
var avatarText = '';
|
||
var userMsgClass = 'user-message';
|
||
if (msg.msgby == 1) {
|
||
who = '客户留言';
|
||
labelClass = 'msgby-customer';
|
||
avatarClass = 'avatar msgby-customer';
|
||
avatarText = '客';
|
||
// 客户留言不加 platform 类
|
||
} else if (msg.msgby == 0) {
|
||
who = '平台回复';
|
||
labelClass = 'msgby-platform';
|
||
avatarClass = 'avatar msgby-platform';
|
||
avatarText = '平';
|
||
userMsgClass += ' platform'; // 平台回复加 platform 类
|
||
} else {
|
||
who = '未知';
|
||
labelClass = '';
|
||
avatarClass = 'avatar';
|
||
avatarText = '?';
|
||
}
|
||
html += '<div class="' + userMsgClass + '">';
|
||
html += '<div class="msg-main">';
|
||
html += '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span>';
|
||
html += '<span class="msg-time">' + (msg.create_time || '') + '</span></div>';
|
||
html += '<div class="msg-content">' + (msg.content || '') + '</div>';
|
||
html += '<div class="msg-actions">';
|
||
if (msg.msgby == 1) {
|
||
html += '<button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button>';
|
||
}
|
||
if (msg.msgby == 0) {
|
||
html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">删除</button>';
|
||
}
|
||
html += '</div>';
|
||
html += '</div>';
|
||
html += '</div>';
|
||
});
|
||
}
|
||
if (!html) html = '<div style="color:#888;">暂无沟通信息</div>';
|
||
document.getElementById('workorder-message').innerHTML = html;
|
||
|
||
// 绑定回复按钮事件
|
||
var replyBtns = document.querySelectorAll('.reply-btn');
|
||
replyBtns.forEach(function (btn) {
|
||
btn.onclick = function () {
|
||
var msgid = this.getAttribute('data-msgid');
|
||
var orderid = this.getAttribute('data-orderid');
|
||
layer.prompt({ title: '回复客户', formType: 2 }, function (value, index) {
|
||
if (!value) {
|
||
layer.msg('回复内容不能为空');
|
||
return;
|
||
}
|
||
// 调用接口提交
|
||
fetch('/workorder/index/messageadd', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
order_id: orderid,
|
||
msg_id: msgid,
|
||
msgby: 0, // 平台回复
|
||
content: value
|
||
})
|
||
})
|
||
.then(res => res.json())
|
||
.then(resp => {
|
||
if (resp.code === 0) {
|
||
layer.msg('回复成功');
|
||
layer.close(index);
|
||
loadUserMessages();
|
||
} else {
|
||
layer.msg(resp.msg || '回复失败');
|
||
}
|
||
})
|
||
.catch(function () {
|
||
layer.msg('网络错误');
|
||
});
|
||
});
|
||
};
|
||
});
|
||
|
||
// 绑定删除按钮事件
|
||
var deleteBtns = document.querySelectorAll('.delete-btn');
|
||
deleteBtns.forEach(function (btn) {
|
||
btn.onclick = function () {
|
||
var msgid = this.getAttribute('data-msgid');
|
||
var order_id = this.getAttribute('data-orderid');
|
||
layer.confirm('确定要删除这条平台回复吗？', { icon: 3, title: '提示' }, function (index) {
|
||
fetch('/workorder/index/messagedel', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
msg_id: msgid,
|
||
order_id: order_id
|
||
})
|
||
})
|
||
.then(res => res.json())
|
||
.then(resp => {
|
||
if (resp.code === 0) {
|
||
layer.msg('删除成功');
|
||
loadUserMessages();
|
||
} else {
|
||
layer.msg(resp.msg || '删除失败');
|
||
}
|
||
})
|
||
.catch(function () {
|
||
layer.msg('网络错误');
|
||
});
|
||
layer.close(index);
|
||
});
|
||
};
|
||
});
|
||
})
|
||
.catch(function () {
|
||
document.getElementById('workorder-message').innerHTML = '<div style="color:#888;">加载沟通信息失败</div>';
|
||
});
|
||
}
|
||
|
||
// 页面加载时调用
|
||
loadUserMessages();
|
||
</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,
|
||
.yhgt-box {
|
||
border: 1px solid #eee;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.wtjs-content {
|
||
border: 1px solid #eee;
|
||
width: 60%;
|
||
}
|
||
|
||
.yhgt-content {
|
||
border: 1px solid #eee;
|
||
width: 100%;
|
||
}
|
||
|
||
.wtbz {
|
||
border: 1px solid #eee;
|
||
width: 40%;
|
||
}
|
||
|
||
.wtjs-content,
|
||
.yhgt-content,
|
||
.wtbz {
|
||
padding: 15px;
|
||
background-color: #f8fafc;
|
||
}
|
||
|
||
.wtjs-box h4,
|
||
.yhgt-box h4 {
|
||
margin-bottom: 15px;
|
||
border-bottom: 1px solid #ddd;
|
||
padding-bottom: 15px;
|
||
color: #4b4b4b;
|
||
}
|
||
|
||
.user-message .msgby-label {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.user-message .msgby-customer {
|
||
background: #e6f7ff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.user-message .msgby-platform {
|
||
background: #f0f9eb;
|
||
color: #67c23a;
|
||
}
|
||
/* 留言区整体背景 */
|
||
.yhgt-content {
|
||
background: #f8fafc;
|
||
border-radius: 10px;
|
||
padding: 24px;
|
||
min-height: 120px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
/* 单条留言卡片 */
|
||
.user-message {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
padding: 16px 20px;
|
||
margin-bottom: 18px;
|
||
border: none;
|
||
position: relative;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
.user-message:hover {
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
|
||
}
|
||
|
||
/* 气泡箭头 */
|
||
.user-message::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 24px;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
border-right: 8px solid #fff;
|
||
}
|
||
|
||
/* 平台回复三角标在右 */
|
||
.user-message.platform {
|
||
flex-direction: row-reverse;
|
||
}
|
||
.user-message.platform::before {
|
||
left: auto;
|
||
right: -8px;
|
||
border-right: none;
|
||
border-left: 8px solid #fff;
|
||
}
|
||
.user-message.platform .avatar {
|
||
background: #f0f9eb;
|
||
color: #67c23a;
|
||
box-shadow: 0 1px 4px rgba(103,194,58,0.08);
|
||
}
|
||
|
||
/* 客户留言和平台回复头像 */
|
||
.user-message .avatar {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
background: #e6f7ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: #409eff;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 1px 4px rgba(64,158,255,0.08);
|
||
}
|
||
.user-message .msgby-platform.avatar {
|
||
background: #f0f9eb;
|
||
color: #67c23a;
|
||
box-shadow: 0 1px 4px rgba(103,194,58,0.08);
|
||
}
|
||
|
||
/* 留言内容主体 */
|
||
.user-message .msg-main {
|
||
flex: 1;
|
||
}
|
||
.user-message .msgby-label {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
padding: 2px 10px;
|
||
border-radius: 12px;
|
||
vertical-align: middle;
|
||
}
|
||
.user-message .msgby-customer {
|
||
background: #e6f7ff;
|
||
color: #409eff;
|
||
}
|
||
.user-message .msgby-platform {
|
||
background: #f0f9eb;
|
||
color: #67c23a;
|
||
}
|
||
.user-message .msg-time {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.user-message .msg-content {
|
||
font-size: 15px;
|
||
color: #333;
|
||
margin-bottom: 6px;
|
||
line-height: 1.7;
|
||
padding: 20px;
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* 按钮区 */
|
||
.user-message .msg-actions {
|
||
margin-top: 8px;
|
||
}
|
||
.user-message .layui-btn-xs {
|
||
padding: 0 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.layui-td-gray, .layui-td-gray-2, .layui-td-gray-3, .layui-td-gray-4{
|
||
background-color:#f8fafc ;
|
||
}
|
||
</style> |