增加桌面自定义快捷菜单

2023-02-13 17:03:25 +08:00 · 2023-02-13 17:03:25 +08:00 · 1957c4ca66
parent f63cdbd7df
commit 1957c4ca66
7 changed files with 866 additions and 631 deletions
--- a/iMES.Vue3/src/extension/custom/custom/Base_DesktopMenu.js
+++ b/iMES.Vue3/src/extension/custom/custom/Base_DesktopMenu.js
@ -0,0 +1,112 @@
+/*****************************************************************************************
+**  Author:COCO 2022
+*****************************************************************************************/
+//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
+import Base_DesktopMenuModelBody from './custom_extend/Base_DesktopMenuModelBody'
+let extension = {
+  components: {
+    //查询界面扩展组件
+    gridHeader: '',
+    gridBody: '',
+    gridFooter: '',
+    //新建、编辑弹出框扩展组件
+    modelHeader: '',
+    modelBody: Base_DesktopMenuModelBody,
+    modelFooter: ''
+  },
+  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
+  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
+  methods: {
+    getFormOption(field) {
+      let option;
+      this.editFormOptions.forEach(x => {
+        x.forEach(item => {
+          if (item.field == field) {
+            option = item;
+          }
+        })
+      })
+      return option;
+    },
+    //下面这些方法可以保留也可以删除
+    onInit() {  //框架初始化配置前，
+      //示例：在按钮的最前面添加一个按钮
+      //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
+      //     name: '按钮', //按钮名称
+      //     icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon，vue3版本见element ui文档icon(注意不是element puls文档)
+      //     type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
+      //     onClick: function () {
+      //       this.$Message.success('点击了按钮');
+      //     }
+      //   });
+
+      //示例：设置修改新建、编辑弹出框字段标签的长度
+      // this.boxOptions.labelWidth = 150;
+      //显示序号(默认隐藏)
+      this.columnIndex = true;
+      this.boxOptions.height = 450;
+      var menuId = this.getFormOption('MenuId');
+      menuId.onChange = (val, item) => {
+        this.http.get('api/menu/getTreeItemById?menuId=' + val, {}, true).then((result) => {
+          console.log("8888", result);
+          this.editFormFields["MenuName"] = result.MenuName;
+          this.editFormFields["MenuUrl"] = result.Url;
+        });
+      };
+      //选择背景颜色
+      this.editFormOptions.forEach(x => {
+        x.forEach(item => {
+          if (item.field == 'Color') {
+            //给编辑表单设置[选择数据]操作,extra具体配置见mesform组件api
+            item.extra = {
+              icon: "el-icon-zoom-out",
+              text: "选择",
+              style: "color:blue;font-size: 14px;cursor: pointer;",
+              click: item => {
+                this.$refs.modelBody.open();
+              }
+            }
+          }
+        })
+      })
+    },
+    getRow(color) {
+      this.editFormFields["Color"] = color;
+    },
+    onInited() {
+      //框架初始化配置后
+      //如果要配置明细表,在此方法操作
+      //this.detailOptions.columns.forEach(column=>{ });
+    },
+    searchBefore(param) {
+      //界面查询前,可以给param.wheres添加查询参数
+      //返回false，则不会执行查询
+      return true;
+    },
+    searchAfter(result) {
+      //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
+      return true;
+    },
+    addBefore(formData) {
+      //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
+      return true;
+    },
+    updateBefore(formData) {
+      //编辑保存前formData为对象，包括明细表、删除行的Id
+      return true;
+    },
+    rowClick({ row, column, event }) {
+      //查询界面点击行事件
+      // this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
+    },
+    modelOpenAfter(row) {
+      //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
+      //(1)判断是编辑还是新建操作： this.currentAction=='Add';
+      //(2)给弹出框设置默认值
+      //(3)this.editFormFields.字段='xxx';
+      //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
+      //看不懂就把输出看：console.log(this.editFormOptions)
+    }
+  }
+};
+export default extension;
--- a/iMES.Vue3/src/extension/custom/custom/custom_extend/Base_DesktopMenuModelBody.vue
+++ b/iMES.Vue3/src/extension/custom/custom/custom_extend/Base_DesktopMenuModelBody.vue
@ -0,0 +1,43 @@
+<template>
+  <MesBox v-model="model" :lazy="true" title="选择颜色" :height="250" :width="250" :padding="15">
+    <div class="block">
+      <span class="demonstration">有默认值</span>
+      <el-color-picker v-model="color"></el-color-picker>
+    </div>
+    <!-- 设置弹出框的操作按钮 -->
+    <template #footer>
+      <div>
+        <el-button size="mini" type="primary" @click="addRow()"><i class="el-icon-plus" />添加选择的数据</el-button>
+        <el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
+      </div>
+    </template>
+  </MesBox>
+</template>
+<script>
+  import MesBox from "@/components/basic/MesBox.vue";
+  import { thisTypeAnnotation } from "@babel/types";
+  export default {
+    components: {
+      MesBox: MesBox
+    },
+    data() {
+      return {
+        color: '#409EFF',
+        model: false
+      };
+    },
+    methods: {
+      open() {
+        this.model = true;
+      },
+      addRow() {
+        //回写数据到表单
+        this.$emit("parentCall", ($parent) => {
+          $parent.getRow(this.color);
+        });
+        //关闭当前窗口
+        this.model = false;
+      }
+    },
+  };
+</script>
--- a/iMES.Vue3/src/extension/custom/custom/custom_extend/Base_MaterialDetailModelBody.vue
+++ b/iMES.Vue3/src/extension/custom/custom/custom_extend/Base_MaterialDetailModelBody.vue
@ -1,92 +1,55 @@
 <template>
-    <MesBox
-      v-model="model"
-      :lazy="true"
-      title="选择数据"
-      :height="700"
-      :width="1500"
-      :padding="15"
-    >
-      <!-- 设置查询条件 -->
-      <div style="padding-bottom: 10px">
-        <span style="margin-right: 20px">产品编码</span>
-        <el-input
-        
-          placeholder="请输入产品编码"
-          style="width: 200px"
-          v-model="productCode"
-        />
-        <el-button
-          type="primary"
-          style="margin-left:10px"
-          size="medium"
-          icon="el-icon-zoom-out"
-          @click="search"
-          >搜索</el-button
-        >
+  <MesBox v-model="model" :lazy="true" title="选择数据" :height="700" :width="1500" :padding="15">
+    <!-- 设置查询条件 -->
+    <div style="padding-bottom: 10px">
+      <span style="margin-right: 20px">产品编码</span>
+      <el-input placeholder="请输入产品编码" style="width: 200px" v-model="productCode" />
+      <el-button type="primary" style="margin-left:10px" size="medium" icon="el-icon-zoom-out" @click="search">搜索
+      </el-button>
+    </div>
+
+    <!-- mes-table配置的这些属性见MesTable组件api文件 -->
+    <mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
+      :max-height="700" :url="url" :index="true" :single="true" :defaultLoadPage="defaultLoadPage"
+      @loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
+    <!-- 设置弹出框的操作按钮 -->
+    <template #footer>
+      <div>
+        <el-button size="mini" type="primary" @click="addRow()"> <i class="el-icon-plus" />添加选择的数据</el-button>
+        <el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
      </div>
-  
-      <!-- mes-table配置的这些属性见MesTable组件api文件 -->
-      <mes-table
-        ref="mytable"
-        :loadKey="true"
-        :columns="columns"
-        :pagination="pagination"
-        :pagination-hide="false"
-        :max-height="700"
-        :url="url"
-        :index="true"
-        :single="true"
-        :defaultLoadPage="defaultLoadPage"
-        @loadBefore="loadTableBefore"
-        @loadAfter="loadTableAfter"
-      ></mes-table>
-      <!-- 设置弹出框的操作按钮 -->
-      <template #footer>
-        <div>
-          <el-button
-            size="mini"
-            type="primary"
-            icon="el-icon-plus"
-            @click="addRow()"
-            >添加选择的数据</el-button
-          >
-          <el-button size="mini" icon="el-icon-close" @click="model = false"
-            >关闭</el-button
-          >
-        </div>
-      </template>
-    </MesBox>
-  </template>
-  <script>
+    </template>
+  </MesBox>
+</template>
+<script>
  import MesBox from "@/components/basic/MesBox.vue";
  import MesTable from "@/components/basic/MesTable.vue";
-import { thisTypeAnnotation } from "@babel/types";
+  import { thisTypeAnnotation } from "@babel/types";
  export default {
    components: {
-        MesBox: MesBox,
-        MesTable: MesTable,
+      MesBox: MesBox,
+      MesTable: MesTable,
    },
    data() {
      return {
        model: false,
        defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
        productCode: "", //查询条件字段
-        modelType:"",
+        modelType: "",
        url: "api/Base_Product/getSelectorDemo",//加载数据的接口
        columns: [
-        {field:'Product_Id',title:'产品定义主键ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
-                       {field:'ProductCode',title:'产品编号',type:'string',sort:true,width:250,align:'left',sort:true},
-                       {field:'ProductName',title:'产品名称',type:'string',link:true,sort:true,width:180,require:true,align:'left'},
-                       {field:'Unit_Id',title:'库存单位',type:'int',bind:{ key:'unitList',data:[]},width:110,require:true,align:'left'},
-                       {field:'ProductStandard',title:'产品规格',type:'string',width:180,align:'left'},
-                       {field:'ProductAttribute',title:'产品属性',type:'string',bind:{ key:'productAttr',data:[]},width:180,require:true,align:'left'},
-                       {field:'Process_Id',title:'工艺路线',type:'int',bind:{ key:'processLineList',data:[]},width:110,align:'left'},
-                       {field:'MaxInventory',title:'最大库存',type:'int',sort:true,width:110,align:'left'},
-                       {field:'MinInventory',title:'最小库存',type:'int',sort:true,width:110,align:'left'},
-                       {field:'SafeInventory',title:'安全库存',type:'int',sort:true,width:110,align:'left'},
-                       {field:'InventoryQty',title:'库存数量',type:'int',sort:true,width:110,align:'left'},
-                       {field:'FinishedProduct',title:'成品图',type:'img',width:180,align:'left'}
+          { field: 'Product_Id', title: '产品定义主键ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
+          { field: 'ProductCode', title: '产品编号', type: 'string', sort: true, width: 250, align: 'left', sort: true },
+          { field: 'ProductName', title: '产品名称', type: 'string', link: true, sort: true, width: 180, require: true, align: 'left' },
+          { field: 'Unit_Id', title: '库存单位', type: 'int', bind: { key: 'unitList', data: [] }, width: 110, require: true, align: 'left' },
+          { field: 'ProductStandard', title: '产品规格', type: 'string', width: 180, align: 'left' },
+          { field: 'ProductAttribute', title: '产品属性', type: 'string', bind: { key: 'productAttr', data: [] }, width: 180, require: true, align: 'left' },
+          { field: 'Process_Id', title: '工艺路线', type: 'int', bind: { key: 'processLineList', data: [] }, width: 110, align: 'left' },
+          { field: 'MaxInventory', title: '最大库存', type: 'int', sort: true, width: 110, align: 'left' },
+          { field: 'MinInventory', title: '最小库存', type: 'int', sort: true, width: 110, align: 'left' },
+          { field: 'SafeInventory', title: '安全库存', type: 'int', sort: true, width: 110, align: 'left' },
+          { field: 'InventoryQty', title: '库存数量', type: 'int', sort: true, width: 110, align: 'left' },
+          { field: 'FinishedProduct', title: '成品图', type: 'img', width: 180, align: 'left' }
        ],
        pagination: {}, //分页配置，见mestable组件api
      };
@ -104,10 +67,10 @@ import { thisTypeAnnotation } from "@babel/types";
        //点击搜索
        this.$refs.mytable.load();
      },
-      getFieldDicValue(fieldName,fieldValue){
+      getFieldDicValue(fieldName, fieldValue) {
        this.columns.forEach(item => {
          if (item.field == fieldName) {
-            var result =  item.bind.data.find(val => val.key == fieldValue)
+            var result = item.bind.data.find(val => val.key == fieldValue)
            return result;
          }
        })
@ -119,13 +82,13 @@ import { thisTypeAnnotation } from "@babel/types";
        }
        //回写数据到表单
        this.$emit("parentCall", ($parent) => {
-          $parent.getRow(rows,this.modelType);
+          $parent.getRow(rows, this.modelType);
        });
        //关闭当前窗口
        this.model = false;
      },
      //这里是从api查询后返回数据的方法
-      loadTableAfter(row) {},
+      loadTableAfter(row) { },
      loadTableBefore(params) {
        //查询前，设置查询条件
        if (this.productCode) {
@ -135,5 +98,4 @@ import { thisTypeAnnotation } from "@babel/types";
      },
    },
  };
-  </script>
-  
+</script>
--- a/iMES.Vue3/src/router/viewGird.js
+++ b/iMES.Vue3/src/router/viewGird.js
@ -314,6 +314,10 @@ let viewgird = [
        path: '/Quality_OutCheck',
        name: 'Quality_OutCheck',
        component: () => import('@/views/quality/quality/Quality_OutCheck.vue')
+    }    ,{
+        path: '/Base_DesktopMenu',
+        name: 'Base_DesktopMenu',
+        component: () => import('@/views/custom/custom/Base_DesktopMenu.vue')
    }]

 export default viewgird
--- a/iMES.Vue3/src/views/Home.vue
+++ b/iMES.Vue3/src/views/Home.vue
--- a/iMES.Vue3/src/views/Login.vue
+++ b/iMES.Vue3/src/views/Login.vue
@ -22,8 +22,8 @@
          <p>手机APP移动端管理，无需电脑</p>
          <p>演示账号：admin 密码:123456</p>
          <div style="margin-top: 30px" class="link">
-            <a href="http://www.625sc.com/" target="_blank">
-              <span>官网</span></a
+            <a href="https://www.625sc.com/imes/313.html" target="_blank">
+              <span>亮点介绍</span></a
            >
            <a href="https://www.625sc.com/imes/" target="_blank">
              <span>项目介绍</span></a
--- a/iMES.Vue3/src/views/custom/custom/Base_DesktopMenu.vue
+++ b/iMES.Vue3/src/views/custom/custom/Base_DesktopMenu.vue
@ -0,0 +1,70 @@
+<!--
+*Author：COCO
+ *代码由框架生成,任何更改都可能导致被代码生成器覆盖
+ *业务请在@/extension/custom/custom/Base_DesktopMenu.js此处编写
+ -->
+<template>
+    <view-grid ref="grid"
+               :columns="columns"
+               :detail="detail"
+               :editFormFields="editFormFields"
+               :editFormOptions="editFormOptions"
+               :searchFormFields="searchFormFields"
+               :searchFormOptions="searchFormOptions"
+               :table="table"
+               :extend="extend">
+    </view-grid>
+</template>
+<script>
+    import extend from "@/extension/custom/custom/Base_DesktopMenu.js";
+    import { ref, defineComponent } from "vue";
+    export default defineComponent({
+        setup() {
+            const table = ref({
+                key: 'DesktopMenu_Id',
+                footer: "Foots",
+                cnName: '主页菜单配置',
+                name: 'custom/Base_DesktopMenu',
+                url: "/Base_DesktopMenu/",
+                sortName: "DesktopMenu_Id"
+            });
+            const editFormFields = ref({"MenuId":"","MenuUrl":"","MenuName":"","Color":"","Enable":""});
+            const editFormOptions = ref([[{"dataKey":"MenuList","data":[],"title":"菜单","required":true,"field":"MenuId","type":"select"}],
+                              [{"title":"路由地址","required":true,"field":"MenuUrl","disabled":true}],
+                              [{"title":"菜单名称","required":true,"field":"MenuName","disabled":true}],
+                              [{"title":"背景颜色","required":true,"field":"Color","disabled":true}],
+                              [{"dataKey":"cq","data":[],"title":"是否启用","required":true,"field":"Enable","type":"switch"}]]);
+            const searchFormFields = ref({"MenuName":""});
+            const searchFormOptions = ref([[{"title":"菜单名称","field":"MenuName","type":"like"}]]);
+            const columns = ref([{field:'DesktopMenu_Id',title:'主页菜单表主键ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
+                       {field:'MenuId',title:'菜单',type:'int',bind:{ key:'MenuList',data:[]},width:80,require:true,align:'left',sort:true},
+                       {field:'MenuName',title:'菜单名称',type:'string',sort:true,width:180,hidden:true,readonly:true,require:true,align:'left'},
+                       {field:'MenuUrl',title:'路由地址',type:'string',link:true,width:120,readonly:true,require:true,align:'left'},
+                       {field:'Color',title:'背景颜色',type:'string',width:120,readonly:true,require:true,align:'left'},
+                       {field:'Enable',title:'是否启用',type:'byte',bind:{ key:'cq',data:[]},width:110,require:true,align:'left'},
+                       {field:'CreateDate',title:'创建时间',type:'datetime',sort:true,width:110,align:'left',sort:true},
+                       {field:'CreateID',title:'创建人编号',type:'int',width:80,hidden:true,align:'left'},
+                       {field:'Creator',title:'创建人',type:'string',width:130,align:'left'},
+                       {field:'Modifier',title:'修改人',type:'string',width:130,align:'left'},
+                       {field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left',sort:true},
+                       {field:'ModifyID',title:'修改人编号',type:'int',width:80,hidden:true,align:'left'}]);
+            const detail = ref({
+                cnName: "#detailCnName",
+                table: "#detailTable",
+                columns: [],
+                sortName: "",
+                key: ""
+            });
+            return {
+                table,
+                extend,
+                editFormFields,
+                editFormOptions,
+                searchFormFields,
+                searchFormOptions,
+                columns,
+                detail,
+            };
+        },
+    });
+</script>