meteteme/projectmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加用户沟通

Browse Source
This commit is contained in:
hero920103
2025-07-02 17:36:30 +08:00
parent e45dce9a01
commit 7937db5733
6 changed files with 393 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/workorder/view/index/edit.html
+292 -143
View File
@@ -18,13 +18,12 @@
<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 value="1" <?php echo (isset($detail['status']) && $detail['status']==1) ? 'selected' : '' ; ?>>解决中
</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 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>
<option value="3" <?php if(isset($detail['status']) && $detail['status']==3) echo 'selected' ; ?>>已关闭</option>
</select>
</td>
</tr>
@@ -85,7 +84,7 @@
</div>
<div class="wtjs-box">
<h3 class="h3-title">问题沟通</h3>
<h3 class="h3-title">问题</h3>
<div style="display: flex;gap: 15px;">
<div class="wtjs-content">
<h4>问题描述</h4>
@@ -100,6 +99,18 @@
</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>
@@ -117,147 +128,259 @@
</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;
});5
}
// 工具函数：获取URL参数
function getQueryParam(name) {
var params = new URLSearchParams(window.location.search);
return params.get(name) || '';
}
// 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);
// 需要填充的字段
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 = '';
});
// 如果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)
});
}
}
// 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 color = '';
var labelClass = '';
if (msg.msgby == 1) {
who = '客户留言';
color = '#409eff';
labelClass = 'msgby-customer';
} else if (msg.msgby == 0) {
who = '平台回复';
color = '#67c23a';
labelClass = 'msgby-platform';
} else {
who = '未知';
color = '#aaa';
labelClass = '';
}
html += '<div class="user-message" style="margin-bottom:10px;padding:10px;border-bottom:1px solid #eee;">';
html += '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span> <strong>时间：</strong>' + (msg.create_time || '') + '</div>';
html += '<div><strong>内容：</strong>' + (msg.content || '') + '</div>';
// 客户留言下方加回复按钮
if (msg.msgby == 1) {
html += '<div style="margin-top:8px;"><button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button></div>';
}
// 平台回复下方加删除按钮
if (msg.msgby == 0) {
html += '<div style="margin-top:8px;"><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></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>';
});
}
// 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;
});
});
// 页面加载时调用
loadUserMessages();
</script>
<style>
.page-content img {
@@ -280,7 +403,8 @@ layui.use(['form', 'layer'], function () {
margin-bottom: 20px;
}
.wtjs-box {
.wtjs-box,
.yhgt-box {
border: 1px solid #eee;
padding: 20px;
margin-bottom: 20px;
@@ -291,21 +415,46 @@ layui.use(['form', 'layer'], function () {
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: #f5f5f5;
}
.wtjs-box h4 {
.wtjs-box h4,
.yhgt-box h4 {
margin-bottom: 15px;
border-bottom: 1px solid #949494;
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;
}
</style>