基于simpleui 修改动态增减快捷操作

作者:mihon.zhong 347 浏览 1 评论 发布时间:2020-09-21 16:21:57

场景:simpleui可以开启快捷操作,但是默认开启所有的表,如果表太多就很难受了。为了能动态添加和删除快捷操作,所有修改快捷操作的方式。

步骤:

1.settings文件开启快捷操作

SIMPLEUI_HOME_QUICK = True

2.修改html文件,可以选择继承的方式,我直接在simpleui源码上改的。

  • file_patch: simpleui/templates/admin/home.html
  • 增加触发快编辑捷操作的item
<el-card class="box-card">
    <div slot="header" class="clearfix">
        <i class="fas fa-link"></i>
        <span v-text="getLanuage('Quick navigation')"></span>
    </div>
    <div class="clearfix">
        {% if "SIMPLEUI_HOME_QUICK"|get_config != False %}
        <div class="quick-wrap">
            <a href="javascript:;">
                <span class="icon far fa-plus-square" @click="quickSelect"></span>
                <span class="card-name">添加快捷操作</span>
            </a>
        </div>
        <div v-for="(c,j) in quickList" :key="c.name" class="quick-wrap">
            <a href="javascript:;" @click="openTab(c,(j+1)+'')">
                <span class="icon" :class="c.icon"></span>
                <span class="card-name" v-text="c.name"></span>
            </a>
        </div>
        {% endif %}
    </div>
</el-card>
  • 增加element el-dialog 和 el-transfer
<el-dialog
    title="添加快捷操作"
    :visible.sync="quickSelectDialogVisible">
    <span>
        <el-transfer
                filterable
                v-model="right"
                :data="left"
                :titles="['可添加', '已添加']">
        </el-transfer>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="quickSelectDialogVisible = false"> </el-button>
        <el-button type="primary" @click="quickSelectSubmit"> </el-button>
    </span>
    <script>
        console.log("el-dialog")
    </script>
</el-dialog>

修改js

  • file_path: simpleui/static/admin/simpleui-x/js/index.js
  • 在vue data 中增加变量
quickSelectDialogVisible: false,
quickInit: false,
quickList: [],
right: [],
left: [],
  • 在created 中增加数据初始化
this.quickList = JSON.parse(getCookie("quickList"))
this.right = JSON.parse(getCookie("right"));
  • 在method 中增加数据初始化和提交
quickSelect: function() {
    // 只初始化一次
    if (!this.quickInit){
        this.models.forEach((item) =>{
            this.left.push({key: item.eid, label: item.name});
        });
    }
    this.quickInit = true;
    this.quickSelectDialogVisible = true;
}
,
quickSelectSubmit: function() {
    this.quickList = [];
    this.right.forEach((index) => {
        this.models.forEach((item) => {
            if (item["eid"] == index) {
                this.quickList.push(item);
            }
        });
    });
    // 将submit的内容村如cookie中,在重新登入之后获取cookie的值
    setCookie("quickList", JSON.stringify(this.quickList));
    setCookie("right", JSON.stringify(this.right));
    this.quickSelectDialogVisible = false;
}

attention

cookie存的值是有限的,如果存入的内容超过cookie值,后面增加的快捷操作可能就会不显示。所以可以进行限制。

Loading...
评论列表 1条评论
社区小助手
2020-09-22 17:40:14

厉害啊