新增主页面快捷修改状态+备注
一、本次优化核心说明
本次对客户列表快捷编辑功能进行全面重构升级,废弃冗余独立接口,统一沿用系统原生编辑逻辑,解决表格下拉渲染BUG、数据清空、多按钮杂乱、操作繁琐等问题,大幅提升后台操作效率与系统稳定性,界面更加简洁统一。
二、新增优化功能
1. 整合快捷编辑功能(核心升级)
- 将原本独立的状态编辑、备注编辑双按钮、双弹窗功能,整合为统一单按钮、单弹窗快捷编辑
- 一个弹窗内支持同时修改:客户状态 + 客户备注
- 彻底告别重复按钮、操作繁琐、多弹窗混乱问题
-代码如下,涉及三个文件主控制器/controller/Client.php代码如下:在index控制器内return $this->fetch();上方
新增
$deepconlist = Db::table('deepcon')->select();
$this->assign('deepconlist', $deepconlist);perCliList控制器内$this -> assign('khRankList',$khRankList);上方新增
$deepconlist = Db::table('deepcon')->select();
$this->assign('deepconlist', $deepconlist);perCliList在控制器内
$listlycx = Db::name('crm_client_hangye')->select(); //相似账户查询
foreach ($list['data'] as $key => $val) {处下方新增
$list['data'][$key]['real_source'] = $val['xs_source']; // 真实来源在
return $result = ['code'=>0,'msg'=>'获取成功!','data'=>$list['data'],'count'=>$list['total'],'rel'=>1,'zhuangtai'=>self::zhuangtai($userinfo)];上方新增
else {
foreach ($list['data'] as $key => $val) {
$list['data'][$key]['real_source'] = $val['xs_source'];
}
}//有权限查看来源的人,也要传 real_source给编辑读取下面两个渲染页面
②渲染页面1:/view/client/index.html
将原有的{field: 'kh_status', title: '客户状态' ,width:100,sort: true},替换成
{field: 'kh_status', title: '客户状态', width: 180, sort: true,
templet: function(d){
// 状态为 null、空时,显示“—”
var statusText = d.kh_status || d.kh_status === 0 ? d.kh_status : '';
return `
<div style="display: flex; align-items: center; gap: 6px;">
<button class="layui-btn layui-btn-xs layui-btn-normal"
lay-event="editAll">
<i class="layui-icon layui-icon-edit" ></i>编辑
</button>
<span style="color: #333; font-weight: 500;">${statusText}</span>
</div>
`;
}},在var data = obj.data;处下方新增代码:
// 统一编辑:状态 + 备注(永久修复版)
if (obj.event === 'editAll') {
var id = data.id;
var phone = data.phone || '';
var showPhone = phone.length == 11 ? phone.substr(0,3)+'****'+phone.substr(7) : '无手机号';
var old_status = data.kh_status || '';
var old_remark = data.remark || '';
var xs_source = data.xs_source || '';
var options = '<option value="">请选择状态</option>';
if(xs_source === "本地推拉取"){
{volist name='deepconlist' id='vo'}
options += '<option value="{$vo.label}" '+(old_status=="{$vo.label}" ? "selected" : "")+'>{$vo.label}</option>';
{/volist}
}else{
{volist name='khStatusList' id='vo'}
options += '<option value="{$vo.status_name}" '+(old_status=="{$vo.status_name}" ? "selected" : "")+'>{$vo.status_name}</option>';
{/volist}
}
layer.open({
title: '快捷编辑 - 客户:'+showPhone,
area: ['420px', '420px'],
content: `
<div style="padding:20px;">
<div class="layui-form-item">
<label>客户状态</label>
<select name="kh_status" id="kh_status" class="layui-input">${options}</select>
</div>
<div class="layui-form-item" style="margin-top:10px;">
<label>备注</label>
<textarea name="remark" id="remark" class="layui-textarea" rows="4" placeholder="输入备注">${old_remark}</textarea>
</div>
</div>`,
btn: ['保存', '取消'],
success: function(){
// 渲染表单
layui.form.render('select');
},
yes: function(index, layero){
var kh_status = layero.find('#kh_status').val();
var remark = layero.find('#remark').val();
var postData = {
id: id,
kh_status: kh_status || old_status,
remark: remark || old_remark
};
$.post("{:url('Client/edit')}", postData, function(res){
if(res.code == 0){
layer.msg('保存成功!', {icon:1});
tableIn.reload();
}else{
layer.msg('保存失败', {icon:2});
}
layer.close(index);
},'json');
}
});
}//快速编辑状态客户列表页面将原有的
{field: 'kh_status', title: '客户状态' ,width:100,sort: true},替换成
{field: 'kh_status', title: '客户状态', width: 180, sort: true,
templet: function(d){
// 状态为 null、空时,显示“—”
var statusText = d.kh_status || d.kh_status === 0 ? d.kh_status : '';
return `
<div style="display: flex; align-items: center; gap: 6px;">
<button class="layui-btn layui-btn-xs layui-btn-normal"
lay-event="editAll">
<i class="layui-icon layui-icon-edit" ></i>编辑
</button>
<span style="color: #333; font-weight: 500;">${statusText}</span>
</div>
`;
}},并且找到var data = obj.data;在这代码下方新增代码
//快捷编辑
if (obj.event === 'editAll') {
var id = data.id;
var phone = data.phone || '';
var showPhone = phone.length == 11 ? phone.substr(0,3)+'****'+phone.substr(7) : '无手机号';
var old_status = data.kh_status || '';
var old_remark = data.remark || '';
var real_source = data.real_source || '';
//console.log(real_source )
var options = '<option value="">请选择状态</option>';
if(real_source === "本地推拉取"){
{volist name='deepconlist' id='vo'}
options += '<option value="{$vo.label}" '+(old_status=="{$vo.label}" ? "selected" : "")+'>{$vo.label}</option>';
{/volist}
}else{
{volist name='khStatusList' id='vo'}
options += '<option value="{$vo.status_name}" '+(old_status=="{$vo.status_name}" ? "selected" : "")+'>{$vo.status_name}</option>';
{/volist}
}
layer.open({
title: '快捷编辑 - 客户:'+showPhone,
area: ['420px', '420px'],
content: `
<div style="padding:20px;">
<div class="layui-form-item">
<label>客户状态</label>
<select name="kh_status" id="kh_status" class="layui-input">${options}</select>
</div>
<div class="layui-form-item" style="margin-top:10px;">
<label>备注</label>
<textarea name="remark" id="remark" class="layui-textarea" rows="4" placeholder="输入备注">${old_remark}</textarea>
</div>
</div>`,
btn: ['保存', '取消'],
success: function(){
// 渲染表单
layui.form.render('select');
},
yes: function(index, layero){
var kh_status = layero.find('#kh_status').val();
var remark = layero.find('#remark').val();
var postData = {
id: id,
kh_status: kh_status || old_status,
remark: remark || old_remark
};
$.post("{:url('Client/edit')}", postData, function(res){
if(res.code == 0){
layer.msg('保存成功!', {icon:1});
tableIn.reload();
}else{
layer.msg('保存失败', {icon:2});
}
layer.close(index);
},'json');
}
});
}此处考虑另外升级渲染页面2:/view/personclient/index.html
三、升级后优势总结
1. 操作更高效:一个按钮搞定状态+备注双编辑,无需多点弹窗
2. 数据更安全:智能保留原值,杜绝数据丢失、清空问题
3. 界面更整洁:去除冗余按钮,样式统一美观
4. 代码更规范:废弃冗余接口,统一原生逻辑,便于后期维护
5. 业务更精准:渠道状态动态适配,完全贴合业务规则