伴随着AI的强势发展，一直没觉得对工作有什么实际性的帮助，只感觉是更加强大的搜索工具，直至今天尝试让AI帮我写代码，直呼强出天际！
先演示需要做的功能：
功能需求：把一段JSON数据渲染成可视化的流程节点，并且节点信息可以编辑、删除。
以下是跟阿里通义的部分对话过程：
先上传了JSON格式数据
直接讲述需求
有需求继续提出
这里太6了，我描述的比较含糊，但是通义理解的非常全面到位！
虽然写的代码会报错，但是它能解决啊！
提出逻辑瑕疵也能修正
这里上点难度了，需要找出“当前审批节点”，AI还是可以胜任的！
以下是全靠AI生成的html代码
<style>.process-node {display: flex;align-items: center;justify-content: space-between;padding: 10px;margin: 5px 0;border: 1px solid #ddd;border-radius: 5px;cursor: pointer;}.process-node.completed { background-color: #e6ffe6; } /* 已审批 */.process-node.pending { background-color: #ffe6e6; } /* 未审批 */.process-node.current { background-color: #ffffcc; border: 2px solid red; /* 更醒目的边框 */font-weight: bold; /* 加粗文本 */}.edit, .delete, .set-current { color: blue; text-decoration: underline; }.hidden { display: none; }.input-group { display: flex; }.input-group input { margin-right: 10px; }
</style><form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="col-xs-12"><h1>{$head_info.uname}{$row.shijian}绩效考核流程</h1><div id="processContainer"></div></div><div class="col-xs-12"><div class="form-group"><label class="control-label col-xs-12 col-sm-4">审批节点</label><div class="col-xs-12 col-sm-8"><textarea rows="15" class="form-control" name="row[sp_node]" id="spNodeTextarea">{$row.sp_node}</textarea></div></div></div><div class="col-xs-12"><div class="form-group"><label class="control-label col-xs-12 col-sm-4">状态</label><div class="col-xs-12 col-sm-8"><input placeholder="状态" class="form-control" name="row[status]" type="text" value="{$row.status}" id="statusInput"></div></div></div><div class="col-xs-12"><div class="form-group"><label class="control-label col-xs-12 col-sm-4">状态中文</label><div class="col-xs-12 col-sm-8"><input placeholder="状态中文" class="form-control" name="row[status_zh]" type="text" value="{$row.status_zh}" id="statusZhInput"></div></div></div><div class="form-group layer-footer"><label class="control-label col-xs-12 col-sm-4"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-primary btn-embossed">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form><script src="/assets/js/../libs/jquery/dist/jquery.min.js"></script><script>// 假设 $row.sp_node 是一个合法的 JSON 字符串const processSteps = JSON.parse('{$row.sp_node}'.replace(/"/g, '"'));function renderProcessNodes(steps) {$('#processContainer').empty();steps.forEach((step, index) => {const nodeClass = step.SpStatus == "1" ? 'completed' : 'pending';const isCurrent = index === parseInt($('#statusInput').val(), 10) ? 'current' : '';const $node = $(`<div class="process-node ${nodeClass} ${isCurrent}" data-index="${index}"><span>${escapeHtml(step.SpName)} - ${escapeHtml(step.Approver || '未指定')} - ${escapeHtml(step.SpTime || '未完成')}</span><div><button class="set-current">设为当前节点</button> | <span class="edit">编辑</span> | <span class="delete">删除</span></div></div>`);$('#processContainer').append($node);});// 使用事件委托来处理动态添加的元素的事件$('#processContainer').off('click', '.set-current').on('click', '.set-current', function(event) {event.stopPropagation(); // 阻止事件冒泡const dataIndex = $(this).closest('.process-node').data('index');updateNodeToCurrent(dataIndex);});// 编辑和删除功能$('#processContainer').on('click', '.edit', function(event) {event.stopPropagation(); // 阻止事件冒泡到父级元素const $node = $(this).closest('.process-node');const dataIndex = $node.data('index');if (typeof processSteps[dataIndex] === 'undefined') {console.error("无法找到对应的步骤信息，索引:", dataIndex);return;}const step = processSteps[dataIndex];// 移除当前节点下的已有编辑框$node.find('.input-group').remove();$node.find('.edit, .delete, .set-current').hide(); // 隐藏所有链接const $inputGroup = $(`<div class="input-group"><input type="text" placeholder="负责人" value="${escapeHtml(step.Approver || '')}"><input type="text" placeholder="审批时间" value="${escapeHtml(step.SpTime || '')}"><button class="save">保存</button></div>`);$(this).parent().before($inputGroup);$('.save', $inputGroup).click(function() {const newApprover = $('input:first', $inputGroup).val();const newSpTime = $('input:last', $inputGroup).val();if (typeof processSteps[dataIndex] !== 'undefined') { // 确认步骤信息存在step.Approver = newApprover;step.SpTime = newSpTime;$inputGroup.remove();$node.find('.edit, .delete, .set-current').show(); // 重新显示所有链接renderProcessNodes(processSteps); // 重新渲染updateTextarea(); // 更新textarea内容} else {console.error("无法更新步骤信息，索引:", dataIndex);}});});$('#processContainer').on('click', '.delete', function(event) {event.stopPropagation(); // 阻止事件冒泡到父级元素const $node = $(this).closest('.process-node');const dataIndex = $node.data('index');if (typeof processSteps[dataIndex] === 'undefined') {console.error("无法找到对应的步骤信息，索引:", dataIndex);return;}processSteps.splice(dataIndex, 1);renderProcessNodes(processSteps); // 重新渲染updateTextarea(); // 更新textarea内容});}function updateNodeToCurrent(dataIndex) {for (let i = 0; i < processSteps.length; i++) {if (i < dataIndex) {processSteps[i].SpStatus = "1"; // 已审批} else {processSteps[i].SpStatus = "0"; // 未审批}}$('#statusInput').val(dataIndex);renderProcessNodes(processSteps); // 重新渲染$('#statusZhInput').val(escapeHtml(processSteps[dataIndex].SpName)); // 设置状态中文为节点的名称updateTextarea(); // 更新textarea内容}function updateTextarea() {const updatedJson = JSON.stringify(processSteps, null, 4);$('#spNodeTextarea').val(updatedJson);}function escapeHtml(unsafe) {return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");}$(document).ready(function() {renderProcessNodes(processSteps); // 渲染流程节点});
</script>全程我只提需求，代码基本不用动，换作自己手撸，不得最少一天时间！
AI帮写可用性太高啦！
