瀏覽代碼

扩展下拉菜单当前值变支持触发脚本,和弄菜单模板页面。

Ben 1 天之前
父節點
當前提交
ed7ddf3e43
共有 3 個文件被更改,包括 210 次插入8 次删除
  1. 112 0
      js/vue/initFormElem.js
  2. 24 0
      js/vue/ss-components.js
  3. 74 8
      page/sys/mainMenuDefEdit.ss.jsp

+ 112 - 0
js/vue/initFormElem.js

@@ -0,0 +1,112 @@
+//公共初始化页面vue表单元素组件js,放在所有vue表单元素之后引入 Ben(20251217)
+
+const data = {};
+if (window.SS.dom.formElemConfig) {
+    Object.entries(window.SS.dom.formElemConfig).forEach(([key, config]) => {
+        data[key] = config.val;
+        // 处理 objPicker
+        if (config.type === window.SS.dom.TYPE.OBJPICKER) {
+            data[key + "ObjPicker"] = true;
+            data[key + "Option"] = [];
+            data[key + "Url"] = config.url;
+        }
+
+        // 处理datepicker
+        if (config.type === window.SS.dom.TYPE.DATE) {
+
+            data[key + "Mode"] = config.mode
+            console.log(data[key + "Mode"]);
+        }
+        // 处理富文本编辑器
+        if (config.type === window.SS.dom.TYPE.RICHTEXT) {
+            data[key + "Url"] = config.val;
+            data[key + "editor"] = config.val;
+        }
+        // 处理onoff
+        if (config.type === window.SS.dom.TYPE.ONOFFBTN) {
+            data[key] = config.val.split('|');
+        }
+        if (config.type === window.SS.dom.TYPE.IMG) {
+            data[key + "showUrl"] = config.showUrl;
+            data[key + "uploadUrl"] = config.uploadUrl;
+        }
+    });
+
+}
+// console.log("data",data);
+SS.ready(function () {
+
+    if(ss.dom.formVmConfig)//加判断条件,页面有校验配置时,才运行下面的 Ben(20251206)
+        for (let i = 0; i < ss.dom.formVmConfig.length; i++) {
+            const item = ss.dom.formVmConfig[i];
+            // 处理每个元素
+            let rule = item.rule;
+            let field = item.field;
+            let param = item.param;
+            window.ssVm.add(rule, field, param);
+        }
+
+
+    // 在这里直接初始化,不需要等待 load 事件
+    window.SS.dom.initializeFormApp({
+        el: "#app",
+        data(){
+            return data;
+        },
+        mounted() {
+            const self = this;
+            // 在这里可以使用 Vue 实例
+            Object.entries(this.$data).forEach(([key, value]) => {
+                // 处理 objPicker
+                if (key.includes('ObjPicker')) {
+                }
+                // 处理 CCPSINGLE
+                if (key.includes('CCPSINGLE')) {
+                    const originalKey = key.replace('CCPSINGLE', '');
+                    const self = this;
+                    // 只有第一个字段需要自动加载
+                    if (this[originalKey + "InitLoad"]) {
+                        ccpsingleFirstLoad(this[originalKey + "Url"], key).then(result =>{
+                            this[originalKey+'Option'] = result;
+                        })
+                    }
+                    // 绑定 change 事件
+                    this[originalKey + 'Change'] = async function(value) {
+                        const objP = self[originalKey + "objP"] || [];
+                        const currentIndex = objP.indexOf(originalKey);
+                        const children = currentIndex < 0 || currentIndex >= objP.length - 1 ? [] : objP.slice(currentIndex + 1);
+                        await doCascade({
+                            children,
+                            value,
+                            vm: self,
+                            loadData: (value) => getCcpsingleValue(children,value),
+                        });
+                    };
+                }
+                // 如果是 CCPSINGLE 类型
+                if (key.includes('CCPMUTIPLE')) {
+                    const originalKey = key.replace('CCPMUTIPLE', '');
+                    const self = this;
+                    // 只有第一个字段需要自动加载
+                    if (this[originalKey + "InitLoad"]) {
+                        ccpsingleFirstLoad(this[originalKey + "Url"], key).then(result =>{
+                            this[originalKey+'Option'] = result;
+                        })
+                    }
+                    // 绑定 change 事件
+                    this[originalKey + 'Change'] = async function(value) {
+                        const objP = self[originalKey + "objP"] || [];
+                        const currentIndex = objP.indexOf(originalKey);
+                        const children = currentIndex < 0 || currentIndex >= objP.length - 1 ? [] : objP.slice(currentIndex + 1);
+                        await doCascade({
+                            children,
+                            value,
+                            vm: self,
+                            loadData: (value) => getCcpsingleValue(children,value),
+                        });
+                    };
+                }
+            });
+        }
+    })
+});

+ 24 - 0
js/vue/ss-components.js

@@ -740,6 +740,10 @@ import { EVEN_VAR } from "./EventBus.js";
     name: "SsObjp",
     inheritAttrs: false,
     props: {
+      onchg: { //在此属性传入onchange的window全局回调函数,函数唯一参数是当前选中值 Ben(20251217)
+        type: String,
+        required: false,
+      },
       filter: {
         type: String,
         required: false,
@@ -918,6 +922,7 @@ import { EVEN_VAR } from "./EventBus.js";
       // Vue.onMounted(updateSelectItem);
 
       const doSelectItem = (item) => {
+
         emit("update:modelValue", item.value);
         selectItem.value = item;
         inputText.value = item.label;
@@ -937,8 +942,27 @@ import { EVEN_VAR } from "./EventBus.js";
             }
           }
         });
+
+        callGlobalOnchg(item.value); // 值变化时尝试调用全局onchange回调函数 Ben(20251217)
       };
 
+      // 用于调用全局onchange回调函数 Ben(20251217)
+      const callGlobalOnchg = (value) => {
+        // 检查 onchg 属性是否提供了有效的函数名
+        if (props.onchg && typeof props.onchg === 'string') {
+          // 检查 window 对象上是否存在该函数
+          if (typeof window !== 'undefined' && window[props.onchg] && typeof window[props.onchg] === 'function') {
+            try {
+              window[props.onchg](value) // 调用全局函数,并传入当前选中值
+            } catch (error) {
+              console.error(`调用全局函数 ${props.onchg} 时出错:`, error)
+            }
+          } else {
+            console.warn(`全局函数 ${props.onchg} 未定义或不是一个函数。`)
+          }
+        }
+      }
+
       //可录入的objPicker,更新下拉菜单选项
       async function updateOptionBYInputText(inpTxt) {
         try {

+ 74 - 8
page/sys/mainMenuDefEdit.ss.jsp

@@ -9,8 +9,15 @@
 		display: none;
 	}
 </style>
+
+	<ss:skin file='main.css'/>
+
 </head>
 <body>
+
+<div id="app" class="form-container">
+	<div class="content-box fit-height-content"><%-- vue样式要套上这两套DIV Ben(20251217) --%>
+
 <form name="ddpOptionForm" action="<serv.ss dest='menuDefOptList'/>" method="post"> <!-- "cdOptionForm"。Lin -->
 	<input type="hidden" name="cdOptionHtml" value="" id="cdOptionHtml" />
 <!-- <@input type='submit' id="cx" value="查询" class="content-invertButton" /> -->
@@ -31,9 +38,15 @@
 			<input type='button' id="savemb" value="保存当前模板" class="content-button" />
 			<input type='button' id="delmb" value="删除该模板" class="content-button" />
 			<input type='button' id="addmb" value="另存为新模板" class="content-button" />
-			<input name="grcdmbid" id="grcdmbid" type="hidden" class="sel" onchange="selectMB(this.value)"/>
+<%-- 新UI改写法 Ben(20251217)			<input name="grcdmbid" id="grcdmbid" type="hidden" class="sel" onchange="selectMB(this.value)"/>
 			<input name="grcdmbName" placeholder="模板" type="text" style="width: 130px;" />
-			<objp.ss name="grcdmb" cb="grcdmb" inp="true"/> <%-- 原 codebook="grcdmb_all",去掉 根模板 了。Lin --%>
+			--%>
+			<table class="form"><%-- 这table是为了套上小许样式临时加上 Ben(20251217) --%>
+				<tr><td>
+			<objp.ss name="grcdmbid" cb="grcdmb" inp="true" onChg="selectMB" /> <%-- 原 codebook="grcdmb_all",去掉 根模板 了。Lin --%>
+				</td></tr></table>
+			</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
+
 		</div>
 	</div>
 	<div id="container" class="dragList-div">
@@ -57,15 +70,19 @@
 <!-- <div class='bottom-div'>
 <@input type="button" name="button" onclick="wd.display.closeDialog();" value="取消" class="bottom-button" />
 </div> -->
+	</div>
+</div>
 </body>
 
 <%-- 去掉,母体也没找到。Lin
 <script type="text/javascript" src="ajaxFunc.js"></script>
 --%>
 <script type="text/javascript">
+	<%-- 改为直接在ss.标签上写onchg
 	wd.edit.objectPicker.getInstance("grcdmb").onchange=function(){
 		selectMB($("#grcdmbid").val());
 	}
+	--%>
 
 	//从请求中获得
 	var oridata = '${mbdata}';
@@ -207,6 +224,8 @@
 	/**
 	 * 创建一个新的快捷组,也就是顶上一排那种有第二层的东西
 	 */
+/* 改,改用 wd.display.confirm({ -- 新UI,增加 个人菜单.业务名 -- 实现 新UI 的图标体系。Lin
+ * 把 addGroup() 分开为 addGroup() + addGroupCallback( -- 抄自 "另存为新模板" 按钮
 	function addGroup(){
 		//全都是快捷组这东西惹的祸   因为它既是shortcutMenuInfo中menuRoot的成员,也是shortcutMenuInfo的成员
 		//var groupSel = document.getElementById('cdwz');
@@ -218,12 +237,13 @@
 			return false;
 		}
 		var hasGroupName = false;
-		/*for(var i=0;i<groupSel.options.length;i++){
-		 if(newname==groupSel.options[i].text){
-		 hasGroupName = true;
-		 break;
-		 }
-		 }*/
+/// *	for(var i=0;i<groupSel.options.length;i++){
+ //	 if(newname==groupSel.options[i].text){
+ //	 hasGroupName = true;
+ //	 break;
+ //	 }
+ //	 }
+/// *
 		$.each(groupDivs, function(i){
 			var name = $(groupDivs[i]).attr('name');
 			if(newname == name){
@@ -248,6 +268,50 @@
 		shortcutGroup.push(groupId);
 		DM.addItem(groupId,'<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + groupId + '" memberid="' + groupId + '" name="'+ newname +'" groupId="menuRoot" url="null" ><span >'+ newname +'</span></div>',null,true);
 	}
+*/
+///// Start 改用 wd.display.confirm({ -- 新UI,增加 个人菜单.业务名 -- 实现 新UI 的图标体系。Lin
+	function addGroup() {
+		wd.display.confirm({ title: "增加菜单组", url: "<serv.ss dest='menuGrpAdd'/>", width: 300, height: 240, callback: addcallback });
+	}
+
+	var addGroupCallback = (function (t) {
+		var THIS = t;
+		return function (data) {
+			if (data.newMc == null || data.newMc == "") {
+				alert('名称不能为空!!\n');
+				return false;
+			}
+			var hasGroupName = false;
+			$.each(groupDivs, function(i){
+				var name = $(groupDivs[i]).attr('name');
+				if(newname == name){
+					hasGroupName = true;
+					return true;
+				}
+			});
+			if(hasGroupName){
+				alert('菜单名称'+newname+'已存在');
+				return false;
+			}
+			//用当前系统的毫秒值作为groupId
+			var groupId = new Date().getTime()+'';
+			//console.info("测试组id: "+groupId);
+			//shortcutMenuInfo中新建一个键值对,键为groupId
+			shortcutMenuInfo[groupId] = {
+				'groupId':groupId,
+				'name':newname,//输入的名字
+				'bizName': bizName,	// 增加,增加 个人菜单.业务名。Lin
+				'members':{} //成员为空
+			}
+
+			shortcutGroup.push(groupId);
+			DM.addItem(groupId,'<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'+
+					'" ssObjId="'+ groupId +'" memberid="'+ groupId +'" name="'+ newname +'" bizName="'+ bizName +'" groupId="menuRoot" url="null">'+
+					'<span >'+ newname +'</span></div>',null,true);
+		}
+	})(this);
+///// End 改用 wd.display.confirm({ -- 新UI,增加 个人菜单.业务名 -- 实现 新UI 的图标体系。Lin
+
 
 	/**
 	 * 保存准备方法,将新增的数据封装好
@@ -277,6 +341,7 @@
 				var members = {};
 				menuRootMember['groupId'] = $(groupDivs[i]).attr('memberid');
 				menuRootMember['name'] = $(groupDivs[i]).attr('name');
+				menuRootMember['bizName'] = $(groupDivs[i]).attr('bizName');	// 增加,增加 个人菜单.业务名。Lin
 				if($(groupDivs[i]).find('div div[ssObjId]').size() != 0){
 					//下级div的再下级
 					var childDivs = $(groupDivs[i]).find('div div[ssObjId]');
@@ -500,4 +565,5 @@ $('#savemb').click(function(){
 
 </script>
 <drag.ss name="ddp" grp="true" func="editGroup,editOrder"/> <%-- name="cd"。再改为统一的名字 -- 同一页面,不会有多个拖放选择。Lin --%>
+<script type="module" src="/js/vue/initFormElem.js"></script><%-- 新UI vue组件初始化 Ben(20251217) --%>
 </html>