widget.js 4.98 KB
(function () {
    Vue.prototype.$echarts = echarts;
    Vue.prototype.$layui = layui;

    let vm = new Vue({
        el: '#app',
        data() {
            return {
                zbjsmx: ['全部', '基础指标', '推荐指标'],
                table: null,
                layer: null,
                laytpl: null
            }
        },
        mounted() {
            this.$layui.use(['table', 'layer', 'laytpl','form'], () => {
                this.table = this.$layui.table;
                this.layer = this.$layui.layer;
                this.laytpl = this.$layui.laytpl;
                this.form = this.$layui.form;
                this.initTable();
            })
        },
        methods: {
            initTable() {
                this.table.render({
                    elem: '#mxlbTable',
                    data: [
                        { "id": '1', "xh": '1', "sfmc": '直方图统计', "sfbsf": '等级医院交通', "sffz": '空间分析', "sfms": '描述内容',"cjsj":'2020-03-12 15:09:12',"cz":'操作' },
                        { "id": '2', "xh": '2', "sfmc": '直方图统计', "sfbsf": '等级医院交通', "sffz": '空间分析', "sfms": '描述内容',"cjsj":'2020-03-12 15:09:12',"cz":'操作' },
                        { "id": '3', "xh": '3', "sfmc": '直方图统计', "sfbsf": '等级医院交通', "sffz": '空间分析', "sfms": '描述内容',"cjsj":'2020-03-12 15:09:12',"cz":'操作' },
                        { "id": '4', "xh": '4', "sfmc": '直方图统计', "sfbsf": '等级医院交通', "sffz": '空间分析', "sfms": '描述内容',"cjsj":'2020-03-12 15:09:12',"cz":'操作' },
                        { "id": '5', "xh": '5', "sfmc": '直方图统计', "sfbsf": '等级医院交通', "sffz": '空间分析', "sfms": '描述内容',"cjsj":'2020-03-12 15:09:12',"cz":'操作' }
                    ],
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
                    cols: [[
                        {
                            field: 'xh',
                            width: "10%",
                            title: '序号'
                        },
                        {
                            field: 'sfmc',
                            width: "15%",
                            title: '算法名称'
                        },
                        {
                            field: 'sfbsf',
                            width: "15%",
                            title: '算法标识符'
                        },
                        {
                            field: 'sffz',
                            width: "15%",
                            title: '算法分组',
                        },
                        {
                            field: 'sfms',
                            title: '算法描述',
                            width: "15%"
                        },
                        {
                            field: 'cjsj',
                            title: '创建时间',
                            width: "15%"
                        },
                        {
                            field: 'cz',
                            title: '操作',
                            width: "15%",
                            templet: '#titleTpl'
                        },
                    ]],
                    done: (res, curr, count) => {
                        this.table.on('tool(test)', function (obj) {
                            var data = obj.data; //获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                            var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                           if (layEvent === 'edit') { //编辑

                                //同步更新缓存对应的值
                                obj.update({
                                    username: '123'
                                    , title: 'xxx'
                                });
                            } else if (layEvent === 'del') { //删除
                                layer.confirm('真的删除行么', function (index) {
                                    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                                    layer.close(index);
                                    //向服务端发送删除指令
                                });
                            }
                        });
                    },
                });
            },
            regModel() {
                layui.layer.open({
                    type: 1,
                    title: "算法注册",
                    area: ['474px', '501px'],
                    content: layui.laytpl($("#iFrame_addModel").html()).render(function () {
                        $('#iFrame_addMod').html()
                    }),
                    btn: ['确定', '取消']
                });
            }
        }
    });
})()