运维工单--服务器申请工单

服务器申请工单，遇到三个困难点
第一个是前端页面的新建工单，服务器申请，不一定只申请一台，有可能是两台，三台，每台服务器的配置要求也有可能是不一样的，所以需要动态的添加服务器工单，如图，我实现的是点击按钮Add row 会增加一行新的服务器表格，点击Remove就删除一行服务器表格

前端html：

<thead>
<tr>
<th>设备类型</th>
<th>硬盘</th>
<th>内存</th>
<th>cpu</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr">
<td>
<select name="device_type" >
<option value="windows">windows</option>
<option value="linux">linux</option>
</select>
</td>
<td><input class="span11" id="id_title" maxlength="30" placeholder="如500G" name="disk" type="text" required="required"></td>
<td><input class="span11" id="id_title" maxlength="30" placeholder="如8G" name="memory" type="text" required="required"></td>
<td class="center"><input class="span11" id="id_title" maxlength="30" placeholder="如8" name="cpu" type="text" required="required"></td>
<td class="center"><input class="span11" id="id_title" maxlength="30" placeholder="如2" name="number" type="text" required="required"></td>
<td><input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td>
</tr>
</tbody>

jquery：

<script type="text/javascript">
function removeRow(r)
{
var root = r.parentNode;
var allRows = root.getElementsByTagName('tr')
if(allRows.length>1)
root.removeChild(r);
else
alert("only one row left, you not need to remove it.");
}
function addRow(){
$("#tbody").append('<tr id="tr"><td><select name="device_type"><option value="windows">windows</option><option value="linux">linux</option></select></td><td><input class="span11" id="id_title" maxlength="30" required="required" name="disk" type="text"></td><td><input class="span11" required="required"  id="id_title" maxlength="30" name="memory" type="text"></td><td class="center"><input class="span11" id="id_title" maxlength="30" name="cpu" type="text" required="required"></td><td class="center"><input required="required" class="span11" id="id_title" maxlength="30" name="number" type="text"></td><td><input  type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td></tr>');
}

一开始的思路是克隆代码，后来测试发现，克隆代码会连第一行服务器表格的内容都克隆到新加的服务器表格中，所以改为直接添加代码了，在addRow()中直接append写好的代码，测试效果还不错
第二个后端数据的获取以及数据的存取，如果服务器创建工单的时候，申请了一个以上的服务器，那么name属性 memory,disk,nmuber等在后端都会获取到一个字典格式的数据，如下图后端获得的
request.POST：<QueryDict: {u'creator': [u'mujibin'], u'title': [u'\u6e38\u620f\u670d\u52a1\u5668\u7533\u8bf7'], u'number': [u'2', u'1'], u'note': [u''], u'approveuser': [u'\u5434\u542f\u8d85'], u'device_type': [u'linux', u'linux'], u'memory': [u'8G', u'8G'], u'disk': [u'500G', u'500G'], u'type': [u'\u670d\u52a1\u5668\u7533\u8bf7'], u'cpu': [u'8', u'8']}> 所以需要循环取出，重新组成列表，再存入数据库中：

后端view：

if request.method == 'POST':
req_dic={}
for k in request.POST:
req_dic[k]=request.POST.getlist(k)＃取数据
note=req_dic['note'][0]
note=note.encode('utf-8')
title=req_dic['title'][0]
title=title.encode('utf-8')

number=[] ＃将内存，硬盘，cpu，数量，设备类型取出，组成列表
disk=[]
memory=[]
cpu=[]
device_type=[]
for i in range(len(req_dic['disk'])):
number.append(req_dic['number'][i].encode("utf-8"))
disk.append(req_dic['disk'][i].encode("utf-8"))
memory.append(req_dic['memory'][i].encode("utf-8"))
cpu.append(req_dic['cpu'][i].encode("utf-8"))
device_type.append(req_dic['device_type'][i].encode("utf-8"))
d=Task(number=number,note=note,disk=disk,memory=memory,device_type=device_type,title=title,approveuser=approveuser,approveuser_id=approveuser_id,cpu=cpu,type=type_id,creator=name,state='待审批',state_id=1)
d.save()
data=Task.objects.filter(creator=name).order_by('-id')[0:1]
#send_email_server.delay(subject='工单消息通知',content=data,to_name_list=leader_ename_mail_list)
return HttpResponseRedirect('/index/')
else:
pass
return render_to_response('add_server_b.html',{'name':name,'task_type':task_type,'approveuser':approveuser})

第三个困难，前端服务器申请工单，详情展示页面，前端无法判断要展示的服务器申请数据中有几台服务器，所以没办法在前端写死代码，需要后端来判断要服务器申请工单中服务器的数量，组成代码，传到前端

后端展示view：

if table == 'details_worklist':
pass
elif table == 'details_server':
all_data=Task.objects.filter(id=id).all()
for i in all_data:
number=eval(i.number)＃列表存入数据库后再读取出来，类型其实已经不是列表类型了，需要重新转化成列表类型
device_type=eval(i.device_type)
memory=eval(i.memory)
disk=eval(i.disk)
cpu=eval(i.cpu)
create_time=i.create_time.strftime("%Y-%m-%d %H:%I:%S")
html_list=[]
for i in range(len(cpu)):
prev='<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>' % (device_type[i],disk[i],memory[i],cpu[i],number[i],create_time)
html_list.append(prev)
html_list=mark_safe(''.join(html_list))
return render_to_response('details_server.html',{'result':all_data,'name':name,'html_list':html_list })
elif table == 'details_task':
pass

前端html：

<thead>
<tr>
<th>设备类型</th>
<th>硬盘</th>
<th>内存</th>
<th>cpu</th>
<th>数量</th>
<th>创建时间</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr">
{{ html_list }}
</tr>
</tbody>

展示：