新增主页面快捷修改状态+备注

  一、本次优化核心说明
  本次对客户列表快捷编辑功能进行全面重构升级,废弃冗余独立接口,统一沿用系统原生编辑逻辑,解决表格下拉渲染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. 业务更精准:渠道状态动态适配,完全贴合业务规则