AI帮写代码初体验

王國慶 · 2025-3-6 13:20:53

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

陪同着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帮写可用性太高啦！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

AI帮写代码初体验

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块