MrDoc/template/app_doc/manage_image_group.html

{% extends 'app_doc/manage_base.html' %}
{% load static %}
{% block title %}图片分组管理{% endblock %}
{% block content %}
    <div class="layui-row" style="margin-bottom: 10px;padding-left:15px;">
        <span class="layui-breadcrumb" lay-separator=">">
          <a href="{% url 'manage_image' %}">图片管理</a>
          <a><cite>图片分组管理</cite></a>
        </span>
    </div>
    <div class="layui-card-header" style="margin-bottom: 10px;">
      <div class="layui-row">
          <span style="font-size:18px;">图片分组管理
          </span>
      </div>
  </div>
    <div class="layui-row">
        <form action="{% url 'manage_doctemp' %}" method="get">
        <div class="layui-form-item">
            <!--<button class="layui-btn layui-btn-normal" type="button" onclick="createImgGroup()">新建分组</button>-->
        </div>
        </form>
    </div>
    <div class="layui-row">
        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
            <colgroup>
            <col width="200">
            <col width="200">
            <col>
      </colgroup>
      <thead>
        <tr>
          <th>分组名称</th>
          <th>图片数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% load project_filter %}
        {% for group in groups %}
        <tr>
          <td>{{ group.group_name }}</td>
          <td>{{ group.id | img_group_cnt }}</td>
          <td>
              <a href="javascript:void(0);"  onclick="modifyGroup('{{group.id}}')" class="layui-btn layui-btn-xs layui-btn-normal">
                <i class="layui-icon layui-icon-edit"></i>修改
            </a>
              <a href="javascript:void(0);" onclick="delGroup('{{group.id}}');" class="layui-btn layui-btn-xs layui-btn-warm">
                <i class="layui-icon layui-icon-delete"></i>删除
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
        </table>
    </div>
{% endblock %}
{% block custom_script %}
<script>
    delGroup = function(group_id){
        layer.open({
            type:1,
            title:'删除分组',
            area:'300px;',
            id:'delGroup',//配置ID
            content:'<div style="margin-left:10px;">警告：操作将删除此图片分组，分组下所属图片将移动到【未分组】！</div>',
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'types':2,
                    'group_id':group_id,
                }
                $.post("{% url 'manage_img_group' %}",data,function(r){
                    layer.closeAll('loading')
                    if(r.status){
                        //删除成功
                        window.location.reload();
                        //layer.close(index)
                    }else{
                        //删除失败，提示
                        console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        });
    };
    modifyGroup = function(group_id){
        layer.open({
            type:1,
            title:'修改分组',
            area:'300px;',
            id:'modifyGroup',//配置ID
            content:'<div style="margin:10px;"><input class="layui-input" placeholder="输入图片分组的新名称" id="new-group-name"></input></div>',
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'types':1,
                    'group_id':group_id,
                    'group_name':$("#new-group-name").val()
                }
                $.post("{% url 'manage_img_group' %}",data,function(r){
                    layer.closeAll('loading')
                    if(r.status){
                        //修改成功
                        window.location.reload();
                        //layer.close(index)
                    }else{
                        //修改失败，提示
                        // console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        });
    }
</script>
{% endblock %}