運維工單--服務器申請工單

    

    服務器申請工單，遇到三個困難點

    第一個是前端頁面的新建工單，服務器申請，不必定只申請一臺，有多是兩臺，三臺，每臺服務器的配置要求也有多是不同的，因此須要動態的添加服務器工單，如圖，我實現的是點擊按鈕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>

展現：