lisang
/
imes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加桌面自定义快捷菜单

This commit is contained in:
zmrid 2023-02-13 17:03:25 +08:00
parent f63cdbd7df
commit 1957c4ca66
7 changed files with 866 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
iMES.Vue3/src/extension/custom/custom/Base_DesktopMenu.js Normal file
View File

@ -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;

43
iMES.Vue3/src/extension/custom/custom/custom_extend/Base_DesktopMenuModelBody.vue Normal file
View File

@ -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>

56
iMES.Vue3/src/extension/custom/custom/custom_extend/Base_MaterialDetailModelBody.vue
View File

@ -1,59 +1,22 @@
<template>
<MesBox
v-model="model"
:lazy="true"
title="选择数据"
:height="700"
:width="1500"
:padding="15"
>
<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
>
<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>
<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
>
<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>
@ -136,4 +99,3 @@ import { thisTypeAnnotation } from "@babel/types";
},
};
</script>

4
iMES.Vue3/src/router/viewGird.js
View File

@ -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

150
iMES.Vue3/src/views/Home.vue
View File

@ -1,25 +1,29 @@
<template>
<div class="home-contianer">
<div>
<div class="order-title">
<h2>快捷菜单</h2>
</div>
<div data-v-542f4644 class="ivu-row" style="padding: 15px; background: white">
<div v-for="item in topMenu" :key="item.MenuName" class="ivu-col ivu-col-span-6"
style="padding-left: 8px; padding-right: 8px" @click="openUrl(item)">
<div data-v-542f4644 class="ivu-card" :style="{ background: item.Color }">
<div class="icon-left">
<i class="el-icon-wallet" />
</div>
<div class="ivu-card-body">
<div class="demo-color-desc">{{ item.MenuName }}</div>
</div>
</div>
</div>
</div>
<div class="order-title">
<h2>数量统计</h2>
</div>
<div
data-v-542f4644
class="ivu-row"
style="padding: 15px; background: white"
>
<div
v-for="item in topColor"
:key="item.ItemName"
class="ivu-col ivu-col-span-6"
style="padding-left: 8px; padding-right: 8px"
>
<div
data-v-542f4644
class="ivu-card"
:style="{ background: item.Background }"
>
<div data-v-542f4644 class="ivu-row" style="padding: 15px; background: white">
<div v-for="item in topNumber" :key="item.ItemName" class="ivu-col ivu-col-span-6"
style="padding-left: 8px; padding-right: 8px">
<div data-v-542f4644 class="ivu-card" :style="{ background: item.Background }">
<div class="icon-left">
<i class="el-icon-wallet" />
</div>
@ -34,11 +38,7 @@
<h2>工序信息</h2>
</div>
<div class="order-range">
<div
class="order-item"
v-for="(item, index) in totalRange"
:key="index"
>
<div class="order-item" v-for="(item, index) in totalRange" :key="index">
<div class="total">
<div class="number">
{{item.ProcessName}}
@ -78,18 +78,9 @@
</div> -->
<div class="h-top-center" style="width: 23%">
<div class="n-item">
<div
@click="openRouterUrl(item)"
class="item"
:class="'item' + (index + 1)"
v-for="(item, index) in center"
:key="index"
>
<i
style="font-size: 30px; padding-bottom: 10px"
:class="item.icon"
:size="20"
></i>
<div @click="openRouterUrl(item)" class="item" :class="'item' + (index + 1)" v-for="(item, index) in center"
:key="index">
<i style="font-size: 30px; padding-bottom: 10px" :class="item.icon" :size="20"></i>
<br />
{{ item.title }}
</div>
@ -98,29 +89,17 @@
<!--联系信息-->
<div class="h-top-center" style="width: 55%;">
<div class="n-item">
<div
class="item"
:class="'item1'"
style="height: 100%;"
>
<div class="item" :class="'item1'" style="height: 100%;">
联系作者
<br />
<img style="width: 200px; height: 199px;margin-top: 20px;" src="@/assets/imgs/wechat.jpg">
</div>
<div
class="item"
:class="'item2'"
style="height: 100%;"
>
<div class="item" :class="'item2'" style="height: 100%;">
交流讨论群
<br />
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/qq.png">
</div>
<div
class="item"
:class="'item3'"
style="height: 100%;"
>
<div class="item" :class="'item3'" style="height: 100%;">
微信小程序
<br />
<img style="width: 200px; height: 238px;margin-top: 5px;" src="@/assets/imgs/miniapp.png">
@ -159,7 +138,8 @@ export default {
return {
beginDate: "",
endDate: "",
topColor: [],
topMenu: [], //快捷菜单
topNumber: [], //数量统计
totalRange: [],
titleLeft: "",
dateNow: "",
@ -240,6 +220,13 @@ export default {
};
},
methods: {
openUrl(item) {
this.$tabs.open({
text: item.MenuName,
path: item.MenuUrl,
query: {}
});
},
getDate() {
var date = new Date();
var year = date.getFullYear();
@ -258,7 +245,7 @@ export default {
this.dateNow = this.beginDate;
},
getTopNumber() {
this.topColor = [{"ItemName":"装配工单","Background":"#f2b458","ItemCode":"AssembleWorkOrder","Qty":"2856"},{"ItemName":"生产计划","Background":"rgb(45, 183, 245)","ItemCode":"ProductPlan","Qty":"108223"},{"ItemName":"销售订单","Background":"rgb(25, 190, 107)","ItemCode":"SalesOrder","Qty":"1239203"},{"ItemName":"不良品总数","Background":"rgb(237, 64, 20)","ItemCode":"DefectItem","Qty":"181"},{"ItemName":"良品率","Background":"rgb(84, 110, 122)","ItemCode":"YieldRate","Qty":"100%"},{"ItemName":"销售订单占比","Background":"rgb(45, 183, 245)","ItemCode":"SalesRate","Qty":"40%"}];
this.topNumber = [{ "ItemName": "装配工单", "Background": "#f2b458", "ItemCode": "AssembleWorkOrder", "Qty": "2856" }, { "ItemName": "生产计划", "Background": "rgb(45, 183, 245)", "ItemCode": "ProductPlan", "Qty": "108223" }, { "ItemName": "销售订单", "Background": "rgb(25, 190, 107)", "ItemCode": "SalesOrder", "Qty": "1239203" }, { "ItemName": "不良品总数", "Background": "rgb(237, 64, 20)", "ItemCode": "DefectItem", "Qty": "181" }, { "ItemName": "良品率", "Background": "rgb(84, 110, 122)", "ItemCode": "YieldRate", "Qty": "100%" }, { "ItemName": "销售订单占比", "Background": "rgb(45, 183, 245)", "ItemCode": "SalesRate", "Qty": "40%" }];
},
getVersionInfo() {
let urlWo = 'api/Sys_VersionInfo/getVersionInfo';
@ -267,6 +254,14 @@ export default {
this.list = result;
});
},
getDesktopMenu() {
let urlWo = 'api/Base_DesktopMenu/getDesktopMenu';
//给工序名称重新绑定数据源
this.http.get(urlWo, {}, true).then((result) => {
this.topMenu = result;
console.log("9999",result);
});
},
getTopProcessNumber() {
this.totalRange = [{ "ProcessName": "成品入库", "PlanQty": "1904", "GoodQty": "1190", "NoGoodQty": "27" }, { "ProcessName": "打磨", "PlanQty": "1460", "GoodQty": "233", "NoGoodQty": "4" }, { "ProcessName": "焊接", "PlanQty": "647", "GoodQty": "880", "NoGoodQty": "19" }, { "ProcessName": "激光切割", "PlanQty": "1200", "GoodQty": "1199", "NoGoodQty": "1" }, { "ProcessName": "破洞", "PlanQty": "2225", "GoodQty": "945", "NoGoodQty": "15" }, { "ProcessName": "清洗消毒", "PlanQty": "1706", "GoodQty": "1475", "NoGoodQty": "0" }, { "ProcessName": "涮涂料", "PlanQty": "1410", "GoodQty": "510", "NoGoodQty": "12" }];
@ -281,6 +276,7 @@ export default {
},
created() {
this.getDate();
this.getDesktopMenu();
this.getTopNumber();
this.getTopProcessNumber();
this.getVersionInfo();
@ -342,27 +338,33 @@ var $chart, $chart2, $chart3;
.h-top {
display: flex;
.h-top-left {
height: 100%;
width: 300px;
background: white;
}
height: 300px;
}
.h-top>div {
border: 1px solid #e8e7e7;
border-radius: 5px;
// margin: 6px;
}
.h-top-center {
height: 100%;
background: white;
margin: 0 6px;
display: flex;
flex-direction: column;
.item1 .num {
padding-top: 28px;
}
.item2 .num {
padding-bottom: 20px;
}
@ -372,6 +374,7 @@ var $chart, $chart2, $chart3;
height: 100%;
text-align: center;
cursor: pointer;
// display: flex;
.item {
border-right: 1px solid #e5e5e5;
@ -382,33 +385,40 @@ var $chart, $chart2, $chart3;
padding: 47px 0;
font-size: 13px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item:last-child {
border-right: 0;
}
.item3,
.item6 {
border-right: 0;
}
.num {
word-break: break-all;
color: #282727;
font-size: 30px;
transition: transform 0.8s;
}
.num:hover {
color: #55ce80;
transform: scale(1.2);
}
.text {
font-size: 13px;
color: #777;
}
}
}
.h-top-right {
// flex: 1;
@ -416,6 +426,7 @@ var $chart, $chart2, $chart3;
height: 100%;
background: white;
}
.h3 {
padding: 7px 15px;
font-weight: 500;
@ -423,41 +434,51 @@ var $chart, $chart2, $chart3;
border-bottom: 1px dotted #d4d4d4;
}
}
.task-table {
table {
width: 100%;
.thead {
font-weight: bold;
}
tr {
cursor: pointer;
td {
border-bottom: 1px solid #f3f3f3;
padding: 9px 8px;
font-size: 12px;
}
}
tr:hover {
background: #eee;
}
}
}
.h-chart {
height: 340px;
margin: 6px 0px;
display: flex;
.h-left-grid {
width: 16%;
height: 100%;
background: white;
display: inline-block;
.name {
margin-left: 40px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item {
padding: 30px 30px;
float: left;
@ -465,9 +486,11 @@ var $chart, $chart2, $chart3;
height: 33.33333%;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
i {
font-size: 30px;
}
.desc {
font-size: 12px;
color: #2b2525;
@ -478,6 +501,7 @@ var $chart, $chart2, $chart3;
}
}
}
#h-chart2 {
border-radius: 3px;
background: white;
@ -487,6 +511,7 @@ var $chart, $chart2, $chart3;
flex: 1;
margin: 0 7px;
}
#h-chart3 {
border-radius: 3px;
padding: 10px 10px 0 10px;
@ -503,16 +528,19 @@ var $chart, $chart2, $chart3;
/* padding-left: 80px; */
font-size: 16px;
}
.demo-color-name {
color: #fff;
font-size: 14px;
}
.demo-color-desc {
color: white;
/* opacity: 0.7; */
font-size: 20px;
margin-top: 2px;
}
.ivu-card {
box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
display: flex;
@ -520,12 +548,15 @@ var $chart, $chart2, $chart3;
padding-top: 10px;
border-radius: 5px;
}
.ivu-card .icon-left {
width: 85px;
}
.ivu-card .ivu-card-body {
flex: 1;
}
.ivu-card .icon-left {
text-align: center;
border-right: 1px solid;
@ -535,6 +566,7 @@ var $chart, $chart2, $chart3;
font-size: 50px;
color: white;
}
.ivu-row {
border-bottom: 2px dotted #eee;
padding: 15px;
@ -556,17 +588,21 @@ var $chart, $chart2, $chart3;
display: flex;
padding: 15px;
background: white;
.date-text {
line-height: 36px;
padding: 0 15px;
}
.date {
margin-right: 20px;
}
.btn {
margin-left: 10px;
}
}
.order-title {
h2 {
padding: 7px 15px;
@ -603,13 +639,16 @@ var $chart, $chart2, $chart3;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.order-range .number {
transition: transform 0.8s;
}
.order-range .number:hover {
cursor: pointer;
transform: scale(1.2);
}
.order-range .name {
font-size: 20px;
padding: 10px;
@ -632,32 +671,37 @@ var $chart, $chart2, $chart3;
display: flex;
padding: 20px 0px;
.item {
flex: 1;
text-align: center;
border-right: 1px solid #e5e5e5;
}
.item > 　div:first-child {
.item>div:first-child {
word-break: break-all;
color: #282727;
font-size: 30px;
// padding-bottom: 12px;
}
.item > 　div:last-child {
.item>div:last-child {
font-size: 13px;
color: #777;
}
.item:last-child {
border-right: none;
}
.number {
cursor: pointer;
transition: transform 0.8s;
}
.number:hover {
transform: scale(1.2);
color: #03c10b !important;
}
}
</style>

4
iMES.Vue3/src/views/Login.vue
View File

@ -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

70
iMES.Vue3/src/views/custom/custom/Base_DesktopMenu.vue Normal file
View File

@ -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>