怎么用python+Element實現模板Temp操作

本篇內容介紹了“怎么用python+Element實現模板Temp操作”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.前端HTML和CSS

<div id="app">
    <div class="col-md-10 col-md-offset-1">
        <div class="container-fluid mb0 " >
            <div class="row">
                <div class="col-md-4">
                    <form class="form-horizontal">
                        <div class="form-group clearfix ">
                            <label class="col-sm-4 control-label bk-lh40 pt0">選擇業務：</label>
                            <div class="col-sm-8">
                                <el-select v-model="searchBiz" placeholder="請選擇業務名稱" >
                                <el-option v-for="item in bkBizData" :label="item.bk_biz_name" :value="item.bk_biz_id"></el-option>
                              </el-select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form class="form-horizontal">
                        <div class="form-group clearfix ">
                            <label class="col-sm-4 control-label bk-lh40 pt0">模板名稱：</label>
                            <div class="col-sm-8">
                                <el-input v-model="searchTempName" placeholder="請輸入模板名稱" ></el-input>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form class="form-horizontal">
                        <div class="form-group clearfix ">
                            <div class="col-sm-8">
                                <el-button type="primary" @click="getSearch">搜索</el-button>
                                <el-button type="warning" @click="exportTemp">導出</el-button>
                                <el-button type="success" @click="addDialog = true">添加模板</el-button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <el-table :data="tempData" border >
            <el-table-column prop="bk_biz_id" label="業務ID"></el-table-column>
            <el-table-column prop="bk_biz_name" label="業務名稱"></el-table-column>
            <el-table-column prop="temp_name" label="模板名稱"></el-table-column>
            <el-table-column prop="script" label="模板腳本"></el-table-column>
            <el-table-column prop="threshold" label="閥值"></el-table-column>
            <el-table-column prop="create_time" label="添加時間"></el-table-column>
            <el-table-column prop="note" label="備注"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="editTempMethod(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="deleteTempMethod(scope.row)">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增的對話框 -->
        <el-dialog title="新增巡檢模板" :visible.sync="addDialog" width="40%">
            <el-form ref='addForm' :model='addForm' label-width="80px">
                <el-form-item label="選擇業務" prop="bk_biz_name">
                    <el-select v-model="addForm.add_bk_biz" placeholder="請輸入業務名稱" class="modal1" >
                        <el-option v-for="item in bkBizData" :value="item.bk_biz_id +':'+item.bk_biz_name" :label="item.bk_biz_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模板名稱" prop="temp_name">
                    <el-input v-model="addForm.add_temp_name" placeholder="請輸入模板名稱" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="巡檢腳本" prop="script">
                    <el-input v-model="addForm.add_temp_script" type="textarea" placeholder="請輸入巡檢腳本" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="模板閥值" prop="value">
                    <el-input v-model="addForm.add_temp_value" placeholder="請輸入模板閥值" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="模板備注" prop="note">
                    <el-input v-model="addForm.add_temp_note" type="textarea" placeholder="請輸入備注" class="modal1"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addDialogOk">立即創建</el-button>
                    <el-button @click="addDialog = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改巡檢模板" :visible.sync="editDialog" width="40%">
            <el-form ref='editForm' :model='editForm' label-width="80px">
                <el-form-item label="選擇業務" prop="bk_biz_name">
                    <el-select v-model="editForm.edit_bk_biz" placeholder="請輸入業務名稱" class="modal1" >
                        <el-option v-for="item in bkBizData" :value="item.bk_biz_id +':'+item.bk_biz_name" :label="item.bk_biz_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模板名稱" prop="temp_name">
                    <el-input v-model="editForm.edit_temp_name" placeholder="請輸入模板名稱" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="巡檢腳本" prop="script">
                    <el-input v-model="editForm.edit_temp_script" type="textarea" placeholder="請輸入巡檢腳本" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="模板閥值" prop="value">
                    <el-input v-model="editForm.edit_temp_value" placeholder="請輸入模板閥值" class="modal1"></el-input>
                </el-form-item>
                <el-form-item label="模板備注" prop="note">
                    <el-input v-model="editForm.edit_temp_note" type="textarea" placeholder="請輸入備注" class="modal1"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editDialogOk">立即創建</el-button>
                    <el-button @click="editDialog = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>

2.前端JS

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            bkBizData: [],
            tempData: [],
            searchBiz:'',
            searchTempName:'',
            editDialog:false,
            addDialog:false,
            addForm: {
                add_bk_biz: '',
                add_temp_name: '',
                add_temp_script: '',
                add_temp_value: '',
                add_temp_note: ''
            },
            editForm: {
                pk:'',
                edit_bk_biz: '',
                edit_temp_name: '',
                edit_temp_script: '',
                edit_temp_value: '',
                edit_temp_note: ''
            }
        },
        mounted() {
            // 頁面加載就獲取所有模板
            this.init()
        },
        methods: {
            init() {
                axios.get(site_url + "get_biz_list/").then(res => {
                    if (res.data.result){
                        this.bkBizData = res.data.data;
                    }else{
                        this.$message.error('獲取業務失敗');
                    }
                },'json');
                axios.get(site_url + "temp_view/").then(res => {
                    if (res.data.result){
                        this.tempData = res.data.data;
                    }else{
                        this.$message.error('獲取模板失敗');
                    }
                },'json');
            },
            getSearch() {
                axios.get(site_url + "temp_view/?search_biz_id=" + this.searchBiz + "&query_str=" + this.searchTempName).then(res => {
                    if (res.data.result){
                        this.tempData = res.data.data;
                    }else{
                        this.$message.error('獲取模板失敗');
                    }
                },'json');
            },
            addDialogOk() {
                axios.post(site_url + "temp_view/", this.addForm).then(res => {
                    if (res.data.result) {
                        this.$message.success('添加模板成功');
                        this.addDialog = false;
                        this.init();
                        this.addForm = {
                            add_bk_biz: '',
                            add_temp_name: '',
                            add_temp_script: '',
                            add_temp_value: '',
                            add_temp_note: ''
                        }
                    } else {
                        this.$message.error('添加模板失敗');
                    }
                }, 'json');
            },
            editTempMethod(row) {
                this.editForm.edit_bk_biz = row.bk_biz_name;
                this.editForm.edit_temp_name = row.temp_name;
                this.editForm.edit_temp_script = row.script;
                this.editForm.edit_temp_value = row.threshold;
                this.editForm.edit_temp_note = row.note;
                this.editForm.pk = row.pk;
                this.editDialog = true;
            },
            deleteTempMethod(row) {
                this.$confirm('正在刪除模板, 是否繼續?', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/temp_view/',{data:{id:row.pk}}).then(res => {
                        if (res.data.result) {
                            this.$message.success('刪除模板成功');
                            this.init();
                        } else {
                            this.$message.error('刪除模板失敗');
                        }
                    }, 'json');
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消刪除'
                  });
                });
            },
            editDialogOk() {
                axios.put(site_url + "temp_view/", this.editForm).then(res => {
                    if (res.data.result) {
                        this.$message.success('更新模板成功');
                        this.editDialog = false;
                        this.init();
                    } else {
                        this.$message.error('更新模板失敗');
                    }
                }, 'json');
            },
            exportTemp() {
                location.href = site_url + 'export_temp/'
            }
        }
    })
</script>

3.Django代碼

urls.py文件內容

from django.conf.urls import patterns

from home_application.temp import views as temp_view

urlpatterns = patterns(
    'home_application.views',
    (r'^temp/$', 'temp'),
    (r'^temp_view/$', temp_view.TemplateView.as_view()),
    (r'^get_biz_list/$', 'get_biz_list'),
    (r'^export_temp/$', temp_view.export_temp),
    ...
)

temp\views.py文件內容

import json

import xlwt
from django.views.generic import View
from django.views.decorators.csrf import csrf_exempt
from django.utils.decorators import method_decorator
from django.http import JsonResponse, HttpResponse
from django.db.models import Q

from home_application.models import Template

class CsrfExemptView(View):
    @method_decorator(csrf_exempt)
    def dispatch(self, request, *args, **kwargs):
        return super(CsrfExemptView, self).dispatch(request, *args, **kwargs)

class TemplateView(CsrfExemptView):
    def get(self, request, *args, **kwargs):
        search_biz_id = request.GET.get("search_biz_id")
        query_str = request.GET.get("query_str")
        try:
            temp_query = Template.objects.all()
        except Exception:
            return JsonResponse({"result": False})
        if search_biz_id:
            temp_query = temp_query.filter(bk_biz_id=search_biz_id)
        if query_str:
            temp_query = temp_query.filter(
                Q(temp_name__icontains=query_str) | Q(script__contains=query_str) | Q(note__contains=query_str)
            )
        res_data = [i.to_dict() for i in temp_query]
        return JsonResponse({"result": True, "data": res_data})

    def post(self, request, *args, **kwargs):
        data = json.loads(request.body)
        temp_obj = {
            "bk_biz_id": data.get("add_bk_biz").split(":")[0],
            "bk_biz_name": data.get("add_bk_biz").split(":")[1],
            "temp_name": data.get("add_temp_name"),
            "note": data.get("add_temp_note"),
            "threshold": data.get("add_temp_value"),
            "script": data.get("add_temp_script"),
        }
        try:
            Template.objects.create(**temp_obj)
            return JsonResponse({"result": True})
        except Exception:
            return JsonResponse({"result": False})

    def put(self, request, *args, **kwargs):
        data = json.loads(request.body)
        pk = data.get("pk")
        bk_biz_id = data.get("edit_bk_biz").split(":")[0]
        bk_biz_name = data.get("edit_bk_biz").split(":")[1]
        temp_name = data.get("edit_temp_name")
        script = data.get("edit_temp_script")
        threshold = data.get("edit_temp_value")
        note = data.get("edit_temp_note")
        temp_obj = {
            "bk_biz_id": bk_biz_id,
            "bk_biz_name": bk_biz_name,
            "temp_name": temp_name,
            "script": script,
            "threshold": threshold,
            "note": note,
        }
        try:
            Template.objects.filter(pk=pk).update(**temp_obj)
            return JsonResponse({"result": True})
        except Exception as e:
            print(e)
            return JsonResponse({"result": False})

    def delete(self, request, *args, **kwargs):
        data = json.loads(request.body)
        pk = data.get("id")
        try:
            Template.objects.filter(pk=pk).delete()
            return JsonResponse({"result": True})
        except Exception:
            return JsonResponse({"result": False})

def generate_temp():
    f = xlwt.Workbook()
    # 添加一個Sheet，名字為 sheet_name 所傳的參數
    sheet1 = f.add_sheet("Sheet1", cell_overwrite_ok=True)
    title = [u"模板ID", u"業務ID", u"業務名稱", u"模板名稱", u"巡檢腳本", u"閥值", u"備注", u"創建時間"]
    # 寫文件頭
    for i in range(0, len(title)):
        # i 表示第一行的第 i 列
        sheet1.write(0, i, title[i])

    temp_query = Template.objects.all()
    temp_list = [i.to_dict() for i in temp_query]

    # 從第二行開始寫入數據
    for i in range(0, len(temp_list)):
        # 向每一行的第1列寫入數據
        sheet1.write(i + 1, 0, temp_list[i].get("pk"))
        sheet1.write(i + 1, 1, temp_list[i].get("bk_biz_id"))
        # 向每一行的第2列寫入數據
        sheet1.write(i + 1, 2, temp_list[i].get("bk_biz_name"))
        sheet1.write(i + 1, 3, temp_list[i].get("temp_name"))
        sheet1.write(i + 1, 4, temp_list[i].get("script"))
        sheet1.write(i + 1, 5, temp_list[i].get("threshold"))
        sheet1.write(i + 1, 6, temp_list[i].get("note"))
        sheet1.write(i + 1, 7, temp_list[i].get("create_time"))
    f.save('模板.xls')

def export_temp(request):
    generate_temp()
    file = open('模板.xls', 'rb')
    response = HttpResponse(file)
    response['Content-Type'] = 'application/octet-stream'
    response['Content-Disposition'] = 'attachment;filename="模板.xls"'
    return response

models.py文件內容

from django.db import models

from home_application.utils.parse_time import parse_datetime_to_timestr

class Template(models.Model):
    bk_biz_id = models.CharField(u"業務ID", max_length=8, blank=True, null=True)
    bk_biz_name = models.CharField(u"業務名稱", max_length=32, blank=True, null=True)
    temp_name = models.CharField(u"模板名稱", max_length=32, blank=True, null=True)
    script = models.TextField(u"巡檢腳本", max_length=2048, blank=True, null=True)
    threshold = models.CharField(u"閥值", max_length=32, blank=True, null=True)
    note = models.CharField(u"備注", max_length=256, blank=True, null=True)
    create_time = models.DateTimeField(u"創建時間", auto_now_add=True)

    def to_dict(self):
        return {
            "pk": self.pk,
            "bk_biz_id": self.bk_biz_id,
            "bk_biz_name": self.bk_biz_name,
            "temp_name": self.temp_name,
            "script": self.script,
            "threshold": self.threshold,
            "note": self.note,
            "create_time": parse_datetime_to_timestr(self.create_time),
        }

實現效果

“怎么用python+Element實現模板Temp操作”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！