1、新增数据自定义格式化解析逻辑

2、新增业务预览-详情

root/metadata/dataList.html

@@ -77,15 +77,17 @@
                     <th v-for="field in cfg.shows"
                         v-text="field.label || getFieldLabel(field.col)"
                         :class="{'sort':field.order>0, 'sort-up':field.col==order.col && order.desc==1, 'sort-down':field.col==order.col && order.desc!=1}"
-                        @click="sortEvent(field.col)"
+                        @click="sortEvent(field.col)"></th>
-                    >
+                    <th>操作</th>
-
-                    </th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr v-for="row in list.rows">
-                    <td v-for="field in cfg.shows" v-title="dealField(row, field.col)" v-text="dealField(row, field.col)"></td>
+                    <!--
+                    <td v-for="field in cfg.shows" v-title="dealFieldFmt(row, field.col)" v-text="dealFieldFmt(row, field.col)"></td>
+                    -->
+                    <td v-for="fieldFmt in cfg.shows" v-title="dealFieldFmt(row, fieldFmt)" v-html="dealFieldFmt(row, fieldFmt)"></td>
+                    <td> <a href="javascript:;" @click="detailData=row; detail()">详情</a></td>
                 </tr>
                 </tbody>
             </table>
@@ -117,27 +119,89 @@
         </div>
     </div>
 
+    <!-- detail -->
+    <div class="modal fade" id="detail">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
+                    <h4 class="modal-title" v-text="cfg.title + ' - [详情]'"> </h4>
+                </div>
+                <div class="modal-body">
+                    <table class="table table-bordered table-hover">
+                        <tr v-for="i in parseInt(cfg.details.length/2)">
+
+                            <th v-text="cfg.details[(i-1)*2]['label']"></th>
+                            <td v-html="dealFieldFmt(detailData, cfg.details[(i-1)*2])">
+
+                            </td>
+
+                            <th v-text="cfg.details[(i-1)*2+1]['label']"></th>
+                            <td v-html="dealFieldFmt(detailData, cfg.details[(i-1)*2+1])">
+
+                            </td>
+
+                        </tr>
+
+
+                        <tr v-for="i in (cfg.details.length%2)">
+                            <th v-text="cfg.details[cfg.details.length -1]['label']"></th>
+                            <td v-html="dealFieldFmt(detailData, cfg.details[cfg.details.length -1])">
+
+                            </td>
+                            <th>
+
+                            </th>
+                            <td></td>
+                        </tr>
+
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                </div>
+            </div>
+        </div>
+    </div>
 
 </row>
 
 <script>
+
+    // 一些提前定义好的  格式化函数（实际系统中，可按照此规测定义更多）
+    eval('function abx(bean, x) {\n' +
+        '        return x + " - by fun:abx";\n' +
+        '    }')
+    function abc (bean, v) {
+        return `<a class="btn btn-primary" href="javascript:console.log('${v} 我是一个自定义<btn>事件');">${v} (自定义按钮)</a>`
+    }
+    function funDept (bean, v) {
+        return `<a href="javascript:console.log('${v} 我是一个自定义<a>标准事件');">${v} (点我)</a>`
+    }
+    function sexFun(bean, v) {
+        return {1:"男",2:"女"}[v] || "未知性别"
+    }
+
     let {getServiceList, getCfg, getDataList, exportData} = meta;
     var vm = new Vue({
         el:".data-list",
         data: {
-            cfg:{
+            cfg: {
-                items:[],
+                title: "",
+                items: [],
                 shows: [],
-                filters: []
+                filters: [],
+                details: [],
             },
-            services:[],
+            services: [],
-            service:"",
+            service: "",
 
             addFilter: "recompany",
             para: {},
-            list: {rows:[], total:0},
+            list: {rows: [], total: 0},
             limit: {pn: 1, ps: 10, total: 0},
-            order:{col:"id", desc:1}
+            order: {col: "id", desc: 1},
+            detailData: {}
         },
         watch: {
             addFilter(v) {
@@ -185,6 +249,34 @@
             loadCfg() {
                 getCfg({name: this.service}).then(res => this.cfg = res);
             },
+            dealFieldFmt(bean, colFmt) { //处理字典数据 及 自定义函数处理数据
+
+                if (colFmt["fmt"]) {
+                    let fmt = colFmt["fmt"]
+                    let cate = ""
+                    if (fmt.indexOf("|") > 0) {
+                        cate = fmt.split("|")[0]
+                        fmt = fmt.split("|")[1]
+                    }
+
+                    if (cate == "Dict") {
+                        //console.log(`Dict:${fmt}-${bean[colFmt["col"]]}`)
+                    }
+                    else {
+                        //console.log(`func:${fmt}-${bean[colFmt["col"]]}`)
+
+                        let evl = `${fmt}(${JSON.stringify(bean)},'${bean[colFmt["col"]]}')`
+                        //console.log("evl", evl)
+                        return (new Function("","return "+ evl))()
+                    }
+
+                    return bean[colFmt["col"]];
+
+                } else {
+                    //console.log(`k-v:${colFmt["col"]}-${bean[colFmt["col"]]}`)
+                    return bean[colFmt["col"]]
+                }
+            },
             dealField(bean, field) {
                 let str = "";
                 if (!bean || !field) {
@@ -281,6 +373,9 @@
 
                 return fbean
             },
+            detail() {
+                $('#detail').modal({moveable: true});
+            },
             showInfo() {
                 $('#f-info').modal({moveable: true})
             }

root/res/css/red-kit.css

@@ -177,7 +177,7 @@ th{
 }
 
 /* 为可拖动的条目应用可移动光标类型 */
-tr {cursor: move}
+.icon.icon-move {cursor: move}
 
 /* 为正在被拖动的条目应用半透明外观 */
 tr.dragging {