通用标题开发-组件（有高级配置）

最新推荐文章于 2022-05-24 21:37:22 发布

dongsdh

最新推荐文章于 2022-05-24 21:37:22 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/dongsdh/article/details/104517202

版权

步骤

Ncheadline.js

import dome from '../templates/Ncheadline.ejs';
import { map } from '../../../decorator/controlmap';
import { ControlEditor } from '../../../editor/ControlEditor';

@map("通用标题头部", 'nc.teas.headline', 'Ncheadline')
export class Ncheadline extends dsf.Controls.Control {
   constructor(id, isPart) {
      super(id, isPart);
      this._desingerClass = ControlEditor;
      this.$test = [];
      this.sdata = {
         titleicon: '/dsfa/res/dsf_styles/themes/nc/newindex/kc.png', //标题图片
         titleText: '标题',
         titleTextcolor: '',
         isshowBar: true, //是否显示菜单

         isshowChooseBtn: true, //是否显示操作按钮
         Btntext: "按钮名称", //操作按钮文本
         Btnurl: '111.html', //操作按钮链接

         ismoreBtn: true, //是否显示更多按钮			
         moreBtnUrl: '', //更多按钮链接			
         moreBtnColor: '' //更多按钮颜色		
      }
   }

   initTemplate() {
      return dome(this);
   }

   createElement() {
      super.createElement();
   }
  
   renderContext(refresh) {
      super.renderContext();
      //		if (this._root._isDesign) {
      //			console.log(22);
      //      	this.renderdefaultPage(this.bannerUrl);
      //    	} else {
      //    	}
      this._handlers.jstitleicon.attr('src', this.sdata.titleicon);
      this._handlers.jstitletext.text(this.sdata.titleText);
      this._handlers.jstitletext.css('color', this.sdata.titleTextcolor);
      this.isshowBarfun();
      this.getDialogData();
      this.isshowChooseBtnfun();
      this._handlers.jschoosebtn.html(this.sdata.Btntext);
      this.isshowMoreBtnfun();
      this._handlers.jsmorebtn.css('color', this.sdata.moreBtnColor);
   }
   renderReady() { //组件加载完成后执行
      super.renderReady();
   }
   initEvent() { }
   
   
   //配置项----------------------------------------------------------
   //   是否显示菜单
   isshowBarfun() {
      let _this = this;
      _this.$jsbarbox = _this._handlers['jsbarbox'];
      if (this.sdata.isshowBar) {
         _this.$jsbarbox.removeClass("none");
      } else {
         _this.$jsbarbox.addClass("none");
      }
   }
   //是否显示操作按钮
   isshowChooseBtnfun() {
      let _this = this;
      _this.$jschoosebtn = _this._handlers['jschoosebtn'];
      if (this.sdata.isshowChooseBtn) {
         _this.$jschoosebtn.removeClass("none");
      } else {
         _this.$jschoosebtn.addClass("none");
      }
      _this.$jschoosebtn.click(function () {
         let ur = dsf.url.getWebPath(_this.sdata.Btnurl);
         dsf.openUrl(1, ur)
      })
   }
   //是否显示更多按钮
   isshowMoreBtnfun() {
      let _this = this;
      _this.$jsmorebtn = _this._handlers['jsmorebtn'];
      if (this.sdata.ismoreBtn) {
         _this.$jsmorebtn.removeClass("none");
      } else {
         _this.$jsmorebtn.addClass("none");
      }
      _this.$jsmorebtn.click(function () {
         let ur = dsf.url.getWebPath(_this.sdata.moreBtnUrl);
         dsf.openUrl(1, ur)
      })
   }
   getDialogData() {
   	  let _this = this;
   	  
      let data = this.$test
      console.log(data);
      console.log(data.length);
      if(data.length>0){
      	_this.sdata.isshowBar = true;
      	let shtml=''
      	for(var i=0,len=data.length;i<len;i++){
            if (i == 0) {
               _this.sdata.moreBtnUrl = data[i].name;
               shtml += '<li class="act" urls="' + data[i].name + '">' + data[i].code + '</li>'
            } else {
               shtml += '<li urls="' + data[i].name + '">' + data[i].code + '</li>'
            }
      	}
      	_this.$jsbarbox = _this._handlers['jsbarbox'];
	    _this.$jsbarbox.html(shtml);
	    _this.$jsbarbox.find('li').click(function () {
	        $(this).addClass('act').siblings().removeClass("act");
	        _this.sdata.moreBtnUrl = $(this).attr('urls');
	    })
      }else{
      	_this.sdata.isshowBar = false;
      }
      _this.isshowBarfun();
   }
   //配置项----------------------------------------------------------end
   
}

Ncheadline.ejs

<div class="">
	<div class="ds_nc_titlebox">
		<div class="hleft">
			<div class="titimgbox">
				<img handler="jstitleicon" src="/dsfa/res/dsf_styles/themes/nc/newindex/kc.png" alt="" />
			</div>
			<div class="tit-text" handler="jstitletext">课程</div>
			<ul class="barbox jsbarbox" handler="jsbarbox">
				<li class="act">推荐</li>
				<li>最新</li>
				<li>最热</li>
			</ul>
		</div>
		<div class="hright">
			<div class="choosebtn" handler="jschoosebtn"><%=sdata.Btntext%></div>
			<div class="morebtn" handler="jsmorebtn">更多</div>
		</div>
	</div>
	<div>主要内容</div>
</div>

nc.scss

//阿里学堂--通用标题头
.ds_nc_titlebox{
    .none{
        display: none !important;
    }
    height: 54px;
    position: relative;
    margin-top: 65px;
    width: $ds_module_index_width;
    margin-left: auto; 
    margin-right: auto; 
    box-sizing: border-box;
    .hleft{
        position: absolute;
        top: 0;
        left: 0;
        .titimgbox{
            display: inline-block;
            vertical-align: middle;
            width: 42px;
            height: 42px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tit-text{
            margin-left: 20px;
            display: inline-block;
            vertical-align: middle;
            font-size: 32px;
            color: #FF6A00;
        }
        .barbox{
            display: inline-block;
            vertical-align: bottom;
            margin-left: 20px;
            margin-bottom: -9px;
            li{
                display: inline-block;
                font-size: 24px;
                color: #666666;
                border-bottom: 2px solid transparent;
                margin-right: 30px;
                padding-bottom: 7px;
                cursor: pointer;
            }
            .act{
                color: #FF6A00;
                border-bottom-color: #FF6A00;
            }
        }
    }
    .hright{
        position: absolute;
        top: 0;
        right: 0;
        .choosebtn{
            display: inline-block;
            vertical-align: middle;
            background-image: linear-gradient(51deg, #FF870D 0%, #FF6700 100%);
            border-radius: 3px;
            color: #fff;
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            padding:  0 10px;
            cursor: pointer;
        }
        .morebtn{
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            color: #FF6A00;
            margin-left: 30px;
            cursor: pointer;
            line-height: 40px;
        }
    }
}

Ncheadline.json

[{
      "name": "基础属性",
      "attributes": [{
            "text": "组件标识",
            "bindControlAttr": "caption",
            "showType": "text"
         },
         {
            "text": "是否可见",
            "showType": "boolean",
            "bindControlAttr": "visible",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "是否失效",
            "showType": "boolean",
            "bindControlAttr": "disabled",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "标题图片",
            "bindControlAttr": "sdata.titleicon",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "标题文本",
            "bindControlAttr": "sdata.titleText",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "标题文本颜色",
            "bindControlAttr": "sdata.titleTextcolor",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "是否显示菜单(高级属性去配置)",
            "bindControlAttr": "sdata.isshowBar",
            "showType": "boolean",
            "changeExecFunction": "isshowBarfun"
         },
         {
            "text": "是否显示操作按钮",
            "hiddenKeyClass": "webRoot_name",
            "bindControlAttr": "sdata.isshowChooseBtn",
            "showType": "boolean",
            "changeExecFunction": "isshowChooseBtnfun"
         },
         {
            "text": "操作按钮文本",
            "class": "webRoot_name",
            "hidden": "!sdata.isshowChooseBtn",
            "bindControlAttr": "sdata.Btntext",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "操作按钮url",
            "class": "webRoot_name",
            "hidden": "!sdata.isshowChooseBtn",
            "bindControlAttr": "sdata.Btnurl",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
            "text": "是否显示更多",
            "hiddenKeyClass": "webRoot_name2",
            "bindControlAttr": "sdata.ismoreBtn",
            "showType": "boolean",
            "changeExecFunction": "isshowMoreBtnfun"
         },
         {
            "text": "更多按钮文本颜色",
            "class": "webRoot_name2",
            "hidden": "!sdata.ismoreBtn",
            "bindControlAttr": "sdata.moreBtnColor",
            "showType": "text",
            "changeExecFunction": "renderContext"
         },
         {
                "text": "背景设置",
                "bindControlAttr": "background",
                "showType": "backgroundEditor"
         }

      ]
   },
   {
      "name": "高级属性",
      "attributes": [{
         "text": "菜单名称与链接设置",
         "showType": "dialog",
         "bindControlAttr": "$test",
         "changeExecFunction": "getDialogData",
         "config": {
            "title": "菜单名称与链接设置",
            "url": "/dsfa/pd/views/Ncheadline.html",
            "width": "900px",
            "height": "600px",
            "buttonText": "设置"
         }
      }]
   }
]

Ncheadline.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="navTreeEditController">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树标识设置</title>
    <link rel="stylesheet" type="text/css" href="../../../res/libs/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../../res/dsf_styles/dsf_style.css" />
    <link rel="stylesheet" type="text/css" href="../../../res/dsf_styles/font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../res/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../res/components.css" />
    <style>
        .error {
            border: 1px solid red;
        }
        
        th {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container-fluid dialog_container" style="width:100%;position:fixed;height:68px;top:0px;background-color:#fff;z-index:10">
        <div class="row">
            <div class="col-xs-12">
                <a class="ds_button" style="float: right" ng-click="addNew()">新增</a>
            </div>
        </div>
    </div>

    <div class="container-fluid dialog_container;" style="margin-top:68px;">
        <div class="row">
            <div class="col-xs-12">
                <table id="table" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="50px">序号</th>
                            <th>菜单名称</th>
                            <th>点"更多"时菜单的链接</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="v in list track by $index">
                            <td style="width:100px;text-align:center;padding:0;line-height:50px" ng-bind='$index+1'></td>
                            <td>
                                <input name="code_{{$index}}" class="form-control" type="text" ng-model="v.code">
                            </td>
                            <td style="width:30%;text-align: left;vertical-align: middle">
                                <div ng-if="!v.isAttach">{{v.name}}</div>
                                <input ng-if="v.isAttach" class="form-control" ng-model="v.name" />
                            </td>
                            <!--<td style="width:30%;text-align: left;vertical-align: middle">
                                <input class="form-control" ng-model="v.dataField" />
                            </td>-->
                            <td style="width:100px;text-align:center;padding:0;line-height:50px">
                                <a ng-if="v.isAttach" ng-click="deleteItem($index)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <script src="../../../res/libs/jquery-1.12.4.min.js"></script>
    <script src="../../../res/libs/layui/layui.all.js"></script>
    <script src="../../../res/libs/lodash/lodash.min.js"></script>
    <script src="../../../app.js"></script>
    <script src="../../../res/dsf_res/dsf_config.js"></script>
    <script src="../../../res/dsf_res/dsf_common.js"></script>
    <script src="../res/ds_prop.js"></script>
    <script src="../res/libs/angular/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        var dialogArgs = {};
        app.controller('navTreeEditController', function($scope) {
            $scope.metadata = [];
            // $scope.codeType = [{
            //     text: "节点名称",
            //     value: "0"
            // }, {
            //     text: "附加属性标识",
            //     value: "6"
            // }]
            var codeTypeText = [];
            for (var i in $scope.codeType) {
                $scope.codeType[i].value = i;
                codeTypeText.push($scope.codeType[i].text);
            }

            $scope.addNew = function() {
                $scope.list.push({
                    "code": "",
                    "isAttach": true,
                    "alias":"",
                    "name": "",
                    "type": {"text":"文本","value":"string"},
                    "length": "100",
//                  "dataField":"",
                    "defaultValue": null,
                    "unit": null
                })
            }

            $scope.deleteItem = function(index) {
                $scope.list.splice(index, 1);
            }

            window.dialogInit = function(args) {
                $scope.list = $.extend(true, [], args.value);
                $scope.$apply();
            }

            window.getDialogResult = function() {
               return $scope.list;
                // var codeTypeObj = {};
                // for (var j = 0; j < $scope.codeType.length - 1; j++) {
                //     codeTypeObj[j] = $scope.codeType[j].text;
                // }
                // for (var i = 0; i < $scope.list.length; i++) {
                    // var r = $scope.list[i];

                    // if(r.codeType<$scope.codeType.length-1){
                    //     if(codeTypeObj[r.codeType]){
                    //         delete codeTypeObj[r.codeType];
                    //     }else{
                    //         return vaildateError("type",i,"只能选择一次"+codeTypeText[r.codeType]);
                    //     }
                    // }
                    // if (!vaildate(r, "code", i, "required", "请填写元数据代码")) {
                    //     return false;
                    // }
                    // if (!vaildate(r, "code", i, "metadatename", "元数据代码格式不正确")) {
                    //     return false;
                    // }
                // }
                // for (var k in codeTypeObj) {
                //     if (k != 1) {
                //         dsf.layer.message("请配置" + codeTypeObj[k], false);
                //         return false;
                //     }
                // }
               //  return $scope.list;
            }


        });
    </script>
</body>

</html>