Vue开发学习笔记:使用KendoUIMenu实现动态菜单(调用WebService)

1.C#WebService中的代码

public string CallService(string serviceName, string parameters)
{
	JavaScriptSerializer jss = new JavaScriptSerializer();//用于序列化和反序列化
	System.Collections.ArrayList dic = new System.Collections.ArrayList();

	//数据表集合
	System.Collections.Generic.Dictionary<string, object> dicTables = new System.Collections.Generic.Dictionary<string, object>();
	//数据表行集合
	System.Collections.ArrayList dicTableRows = null;

	PXPublic.MyDataSet inDs = new PXPublic.MyDataSet();
	PXPublic.MyDataSet outDs = PXPublic.DBManager.CallService(serviceName, inDs);//连接数据库执行SQL并返回结果集

	//将返回结果集(DataTable)转为数组
	if (outDs.Tables[0].Rows.Count > 0)
	{
		for (int i = 0; i < outDs.Tables.Count; i++)
		{
			dicTableRows = new System.Collections.ArrayList();
			for(int j = 0; j <outDs.Tables[i].Rows.Count; j++)
			{
				System.Collections.Generic.Dictionary<string, object> drow = new System.Collections.Generic.Dictionary<string, object>();
				foreach (DataColumn dc in outDs.Tables[i].Columns)
				{
					//填充数据行信息
					drow.Add(dc.ColumnName, outDs.Tables[i].Rows[j][dc.ColumnName]);
				}
				//将数据行集中在ArrayList对象中
				dicTableRows.Add(drow);
			}
			//将集中之后的数据行信息添加到字典中
			dicTables.Add("Table"+(i+1).ToString(),dicTableRows);
		}

		dic.Add(dicTables);
	}

	//将对象转为JSON字符串
	string json_table = jss.Serialize(dic);
	//返回之前使用以下两句代码,可以去除转为json格式后值多出来的xml标签
	//同时如果不使用下面两句代码,Vue项目在请求时无法走成功回调函数而是进失败回调函数
	Context.Response.Write(json_table);//写入输出流
	Context.Response.End();//将所有的输出流发送到客户端
	return json_table;
}

2.在Vue中自定义组件(使用KendoUIMenu当做基础组件)

 

<template>
  <div>
    <kendo-panelbar id="kendo-panelbar" :data-source="pxMenuItems">
    </kendo-panelbar>
  </div>
</template>

<script>
import {
  Menu,
  MenuItem,
  ContextMenu,
  PanelBar,
  TabStrip,
  Splitter,
} from "@progress/kendo-layout-vue-wrapper";
import { ref, toRaw } from "vue";
import $ from "jquery"; //项目开发时手工添加

var datas = [];
var datas_TEMP = "";
var menus = []; //菜单集合
var module_menu_sons = []; //模块菜单子项集合

export default {
  components: {
    "kendo-panelbar": PanelBar,
  },

  data: function () {
    return {
      // pxMenuItems: "[{MODULE_ID:'1',MODULE_CNAME:'测试1'},{MODULE_ID:'2',MODULE_CNAME:'测试2'}]", //主菜单项目
      pxMenuItems: [],
    };
  },
  created: function (param) {
    var self = this;
    $.ajax({
      type: "post",
      // url: "http://localhost/PaladinXuWebService/PXWebService.asmx/ExcuteSelect",//正式链接
      url: "http://localhost:2681//PXWebService.asmx/CallService", //测试链接
      data: { serviceName: "FormMain_inq", parameters: "" },//传入参数
      dataType: "json",//数据类型
      success: function (response) {//成功回调
        console.log("执行created方法中的ajax请求成功");
        datas = response;
        datas.forEach((item) => {
          var table1 = item.Table1;
          var table2 = item.Table2;

          //调用菜单创建函数
          self.createMenu(item.Table2, ""); //使用this.createMenu会提示当前createMenu不是一个函数
         
          //将菜单函数执行完之后的菜单集合信息赋值给pxMenuItems
          self.pxMenuItems=menus; //不能直接使用this.pxMenuItems不然赋值没有效果
        });
      },
      error: function (ex) {//失败回调
        console.log("执行created方法中的ajax请求失败");
      },
    });
  },
  methods: {
    //创建菜单函数
    createMenu: function (Table, MODULE_ID) {
      var MODULE_ID = "";
      var MODULE_ID_pre = "";
      var MODULE_CNAME_pre = "";
      Table.forEach((row) => {
        // if(MODULE_ID==="")//判断当前传入的ID是否为空
        // {
        var MODULE_SON_TYPE = row.MODULE_ID_S.substring(0, 1);
        var MODULE_ID = row.MODULE_ID;

        //如果当前模块ID不等于上一次循环的模块ID且上一次模块ID不为空,则新增模块菜单信息
        if (MODULE_ID !== MODULE_ID_pre && MODULE_ID_pre !== "") {
          //满足条件则将菜单信息存入(text与items是KendoUIMenu组件使用data-source使用的固定参数)
          menus.push({ text: MODULE_CNAME_pre, items: module_menu_sons });
          module_menu_sons=[];//重置模块菜单子项集合
        }

        if (MODULE_SON_TYPE === "F") {
          //如果MODULE_ID是以F开头则证明的画面ID直接添加到当前模块的子菜单下面
          module_menu_sons.push({ text: row.MODULE_DESCRIPTION_S });
        } else if (MODULE_SON_TYPE === "M") {
          //如果MODULE_ID是以M开头则证明是模块ID,需要重新调用方法本身递归查询当前模块是否存在子项
          module_menu_sons = [];
          this.createMenu(Table, row.MODULE_ID_S);
          this.menus.push({ text: row.MODULE_CNAME, items: module_menu_sons });
        }

        //变量赋值,用于判断下一次循环的MODULE_ID和MODULE_CNAME是否跟本次循环的一致
        MODULE_ID_pre = MODULE_ID;
        MODULE_CNAME_pre=row.MODULE_CNAME;

      });
    },
  },
};
</script>

<style>
</style>

3.效果