运维咖啡吧

享受技术带来的乐趣,体验生活给予的感动

基于Sadmin新建APP

1.Start APP, Create a new app named coffee

python manage.py startapp coffee

2.Installed APP, Edit settings.py,insert coffee to INSTALLED_APPS

INSTALLED_APPS = [
    ...
    'sadmin.commons',
    'sadmin.accounts',
    'sadmin.project',
    'coffee',
]

3.Add Model, Add Production model to coffee/models.py file

from django.db import models

from sadmin.commons.backends.modles import UserBaseModel

class Production(UserBaseModel):
    name = models.CharField(max_length=32, unique=True, verbose_name='名称')
    code = models.CharField(max_length=16, unique=True, verbose_name='代码')

    def __str__(self):
        return self.name

    class Meta:
        permissions = (
            ("production_select", "产品查看权限"),
            ("production_change", "产品修改权限"),
        )

4.Add View, Add ProductionList and ProductionDetail class to coffee/views.py file

from sadmin.commons.options import ListCreateView, RetrieveUpdateDestroyView

class ProductionList(ListCreateView):
    model = Tag
    template = 'coffee/production.index.html'
    permission = {'get': 'coffee.production_select', 'post': 'coffee.production_change'}


class ProductionDetail(RetrieveUpdateDestroyView):
    model = Tag
    permission = {'get': 'coffee.production_select', 'put': 'coffee.production_change', 'delete': 'coffee.production_change'}

5.Add Template, edit coffee/templates/coffee/production.index.html file

{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" href="/static/plugins/DataTables/datatables.min.css">
{% endblock %}

{% block breadcrumb %}
{% if perms.coffee.production_change %}
<button class="btn btn-success" type="button" onclick="createForm()"><i class="fa fa-plus"></i> 新建</button>
{% endif %}
{% endblock %}

{% block content %}
<div class="card mb-4">
  <div class="card-body">
    <table class="table table-striped" id="id_table" style="width:100%">
      <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        {% if perms.coffee.production_change %}
        <th>操作</th>
        {% endif %}
      </tr>
      </thead>
    </table>
  </div>
</div>

<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalForm_title"></h5>
        <button class="btn-close" type="button" data-coreui-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="tab-content">
          <form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
            <input type="text" autocomplete="off" id="form_id" value="0" hidden>

            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">* 名称</label>
              <div class="col-9">
                <input type="text" autocomplete="off" class="form-control" id="form_name" name="name" required
                       placeholder="请输入名称,命名应见名知意">
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-coreui-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</div>
{% endblock %}


{% block js %}
<script type="text/javascript" src="/static/plugins/DataTables/datatables.min.js"></script>

<script>
  $('#page_header').text('Production管理');
  $('#page_header_descript').text('');

  // 加载表格
  var table = $('#id_table').DataTable({
    "ajax": {
      "url": window.location.pathname,
      "data": function (d) {
        // 去掉columns开头的参数
        for(var key in d){
          if (key.indexOf("columns")==0||key.indexOf("order")==0) {
            delete d[key];
          }
        }
      }
    },
    "columns": [
      {"data": "id"},
      {"data": "name"},
      {% if perms.coffee.production_change %}
      {
        "data": "id",
        "render": function (data, type, row) {
          return '<button class="btn btn-warning btn-sm" onclick="updateForm('+row.id+')"><i class="fa fa-pencil-square-o"></i> 编辑</button>&nbsp;' +
                 '<button class="btn btn-danger btn-sm" onclick="deleteForm(&quot;'+ window.location.pathname +'&quot;, '+row.id+')"><i class="fa fa-trash"></i> 删除</button>'
        }
      }
      {% endif %}
    ]
  });

  // 点击创建时的表单信息
  function createForm() {
    $('#modalForm_title').text('添加Production');
    $('#modalForm_Content').trigger("reset");

    $('#modalForm').modal('show');
  }

  // 点击编辑时的表单信息
  function updateForm(id) {
    $('#modalForm_title').text('修改Production');
    $('#modalForm_Content').trigger("reset");

    var data = {
      "format": "json",
    }

    $.get(window.location.pathname + id + "/", data, function(data) {
      if (data.state) {
        $.each(data.data, function (k, v) {
          $('#form_' + k).val(v);
        });

        $('#modalForm').modal('show');
      } else {
        toastr.error(data.message);
      }
    });
  }

  // 使用ajax submit提交表单数据
  $('#modalForm_Content').submit(function (event) {
    event.preventDefault();

    if (confirm("确认提交这些数据吗?")) {
      var formid = $('#form_id').val();
      var params = $('#modalForm_Content').serializeJson();

      if (formid == "0") {
        $.post(window.location.pathname, JSON.stringify(params), function(data, status){
          if (data.state) {
            table.draw(false);
            toastr.success(data.message);
            $('#modalForm').modal('hide');
          } else {
            toastr.error(data.message)
          }
        });
      } else {
        params.id = formid;
        $.put(window.location.pathname + formid + "/", JSON.stringify(params), function(data, status){
          if (data.state) {
            table.draw(false);
            toastr.success(data.message);
            $('#modalForm').modal('hide');
          } else {
            toastr.error(data.message)
          }
        });
      }
    }
  });
</script>
{% endblock %}

6.Add URL, Add production/ and production/<int:pk>/ URL to coffee/views.py file

from . import views
from django.urls import path

urlpatterns = [
    path('production/', views.ProductionInstanceList.as_view(), name='production-list-url'),
    path('production/<int:pk>/', views.ProductionInstanceDetail.as_view(), name='production-detail-url'),
]

Insert coffee path to webapp/urls.py file

from django.urls import path, include, re_path

urlpatterns = [
    ...
    path('coffee/', include('coffee.urls')),
]

7.Makemigrations & Migrate

python manage.py makemigrations
python manage.py migrate

8.Runserver