python flask实战订餐系统微信小程序-41分类列表的删除和恢复功能

wechat 虚幻 489℃ 0评论

v分类列表的删除和恢复功能

展现分类

python后端cat列表的读取和排序

@route_food.route( "/cat" )
def cat():
    resp_data = {}
    req = request.values

    query = FoodCat.query

    list = query.order_by(FoodCat.weight.desc(), FoodCat.id.desc()).all()
    resp_data['list'] = list
    resp_data['status_mapping'] = app.config['STATUS_MAPPING']
    resp_data['current'] = 'cat'

    return ops_render( "food/cat.html" , resp_data)

cat.html动态读取数据

<tbody>
{% if list %}
    {% for item in  list %}
<tr>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.status}}</td>
    <td>{{item.weight}}</td>
    <td>
        <a class="m-l" href="{{ buildUrl('/food/cat-set') }}">
            <i class="fa fa-edit fa-lg"></i>
        </a>

        <a class="m-l remove" href="javascript:void(0);" data="8">
            <i class="fa fa-trash fa-lg"></i>
        </a>
    </td>
</tr>
    {% endfor %}
{% else  %}
    <tr><td colspan="5">暂无数据</td></tr>
{% endif  %}
</tbody>

运行可以看到争取的将分类读取出来

20210822195254 - python flask实战订餐系统微信小程序-41分类列表的删除和恢复功能

分类列表编辑功能实现

cat.html添加状态的判断(参考member/index.html

{% if item.status==1 %}
<a class="m-l" href="{{ buildUrl('/food/cat-set') }}?id={{item.id}}">
    <i class="fa fa-edit fa-lg"></i>
</a>

<a class="m-l remove" href="javascript:void(0);" data = "{{item.id}}">
    <i class="fa fa-trash fa-lg"></i>
</a>
{%else%}
<a class="m-l recover" href="javascript:void(0);" data = "{{item.id}}">
    <i class="fa fa-rotate-left fa-lg"></i>
</a>
{%endif%}

添加虚拟字段使得状态展示成中文

FoodCat.py添加虚拟字段

    @property
    def status_desc(self):
        return app.config['STATUS_MAPPING'][str(self.status)]

cat.html改为

<tr>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.status_desc}}</td>
    <td>{{item.weight}}</td>

运行可以看到成功显示中文:

20210822200322 - python flask实战订餐系统微信小程序-41分类列表的删除和恢复功能

切换状态下拉框进行数据提交

基于account/index.js复制 创建food/cat.js

;
var food_cat_ops = {
    init:function () {
        this.eventBind();
    },
    eventBind:function () {
        $(".wrap_search select[name=status]").change(function () {

            $(".wrap_search").submit()
        });

        var that = this;
        $(".remove").click(function () {
            that.ops("remove", $(this).attr("data"))
        });

        $(".recover").click(function () {
            that.ops("recover", $(this).attr("data"))
        });
    },
    ops:function (act, id) {
        var callback = {
            'ok':function () {
                $.ajax({
                url:common_ops.buildUrl("/food/cat-ops"),
                type:"POST",
                data:{
                    act:act,
                    id,id
                },
                dataType:'json',
                success:function (res) {
                    var callback = null;
                    if(res.code == 200){
                        callback = function () {
                            window.location.href = window.location.href;
                        }
                    }
                    common_ops.alert(res.msg, callback);
                }
            });

            },
            'cancel':null
        };

        common_ops.confirm((act=="remove"?"确定删除?":"确定恢复?"),callback);

    }
};

$(document).ready(function () {
    food_cat_ops.init()
})

cat.html引入cat.js

{%block js %}
<script src="{{ buildStaticUrl('/js/food/cat.js') }}"></script>
{% endblock %}

Food.py添加状态判断 根据状态展现对应的数据

@route_food.route( "/cat" )
def cat():
    resp_data = {}
    req = request.values

    query = FoodCat.query

    if 'status' in req and int(req['status'])>-1:
        query = query.filter(FoodCat.status == int(req['status']))

    list = query.order_by(FoodCat.weight.desc(), FoodCat.id.desc()).all()
    resp_data['list'] = list
    resp_data['search_con'] = req

状态切换后需要保留切换的状态:

可以参考member/index.html

<option value="-1">请选择状态</option>
{% for tem_key in status_mapping %}
    <option value="{{tem_key}}" {% if tem_key == search_con['status'] %} selected {% endif %}>{{status_mapping[tem_key]}}</option>
{% endfor %}

运行就可以看到分类状态保存下来了

20210822202115 - python flask实战订餐系统微信小程序-41分类列表的删除和恢复功能

分类列表的删除和恢复功能

Food.py后台添加一个ops方法:(参考 account/Account.py的ops方法)

@route_food.route( "/cat-ops" , methods = ["POST"])
def catOps():
    resp = {'code': 200, 'msg': '删除或者恢复成功', 'data': {}}
    req = request.values
    id = req['id'] if 'id' in req else 0
    act = req['act'] if 'act' in req else ""

    if not id:
        resp['code'] = -1
        resp['msg'] = "请选择要操作的账号"
        return jsonify(resp)

    if not act in ["remove", "recover"]:
        resp['code'] = -1
        resp['msg'] = "操作有误,请重试"
        return jsonify(resp)

    food_cat_info = FoodCat.query.filter_by(id = id).first()
    if not food_cat_info:
        resp['code'] = -1
        resp['msg'] = "分类不存在"
        return jsonify(resp)

    if act == "remove":
        food_cat_info.status = 0
    elif act == "recover":
        food_cat_info.status = 1

    food_cat_info.update_time = getCurrentDate()
    db.session.add(food_cat_info)
    db.session.commit()

    return jsonify(resp)

转载请注明:虚坏叔叔 » python flask实战订餐系统微信小程序-41分类列表的删除和恢复功能

喜欢 (11)

您必须 登录 才能发表评论!