Skip to content

M
mes-ui
Commit 728be2ca authored by 周远喜's avatar 周远喜
Browse files
Options

工艺规程主页面完成

parent 2da1ad55
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 76 deletions
assets/css/base.less
View file @ 728be2ca
......@@ -12,7 +12,38 @@ html body {
#__layout {
height: 100%
}
/*flex*/
.flex{
display: flex;
//采用flex布局
}
.fc-m{
justify-content: center;
}
.fc-e{
justify-content: flex-end;
}
.fc-b{
justify-content: space-between;
}
.fc-a{
justify-content: space-around;
}
.fd{
flex-direction: column;
}
.fg{
flex-grow: 1;
}
.fg2{
flex-grow: 2;
}
.fos{
order: -1;
}
.foe{
order: 99;
}
/*字体*/
.ib {
display: inline;
......@@ -51,7 +82,11 @@ html body {
color: #f23a3a;
cursor: pointer;
}
.stitle{
height: 40px;
background-color: #F5F6FA;
line-height: 40px;
}
//行高
.lh10 {
line-height: 10px
......@@ -76,7 +111,9 @@ html body {
.lh40 {
line-height: 40px
}
.lh50 {
line-height: 50px
}
/*边距*/
.m10 {
......@@ -1199,4 +1236,6 @@ html [type=button] {
.content {
padding-left: 5px;
}
\ No newline at end of file
.h100{
height: 100%;
}
\ No newline at end of file
components/page/productTree.vue
View file @ 728be2ca
<template>
<div class="flex ">
<h3>
<div class="flex fd tree-menu">
<h3 class="stitle pl10">
产品结构
<div class="fr">
<div class="fr mr10 mt10">
<ButtonGroup class="fr" size="small">
<Button
:icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
......@@ -10,11 +10,17 @@
title="展开/合并"
></Button>
<Button icon="md-refresh" title="刷新" @click="loadTree"></Button>
<Button icon="md-rewind" title="收起" @click="hide"></Button>
</ButtonGroup>
</div>
</h3>
<div>
<Tree :data="data" ref="tree" @on-select-change="change"></Tree>
<div class="search">
<Input search placeholder="关键字" v-model="keys" clearable/>
</div>
<div class="fg">
<div class="tree">
<Tree :data="data" ref="tree" @on-select-change="change"></Tree>
</div>
</div>
</div>
</template>
......@@ -24,16 +30,99 @@ export default {
name: "",
data() {
return {
keys: "",
expand: false,
list: [],
data: []
list: []
};
},
created() {
this.loadTree();
},
methods: {
change(v) {}
loadTree() {
this.$api.get(`${designUrl}/productlevel/getproducttreenew`).then(r => {
setTree(r.result);
function setTree(data) {
data.map(u => {
u.title = u.name;
u.value = u.id;
// u.expand = true;
// u.selected = false;
// u.checked = false;
if (u.children) {
setTree(u.children);
}
});
}
var data = r.result;
this.list = this.$u.clone(data);
});
},
toggle() {
this.expand = !this.expand;
},
change(v,b) {
let ids=[];
ids.push(b.value);
if(b.children){
addId(b.children);
function addId(data){
data.map(u=>{
ids.push(u.value)
if(u.children){
addId(u.children)
}
})
}
}
this.$emit("on-select",b.value,b,ids)
},
hide(){
this.$emit("on-hide")
}
},
computed: {
data() {
let items = this.$u.clone(this.list);
let expand = this.expand;
let result=[];
search(this.keys,items)
function search(keys,data){
data.map(u=>{
if(keys.length<3){
u.expand=expand;
result.push(u);
}else{
u.expand=expand;
if(u.title.indexOf(keys)>-1){
result.push(u);
}else if(u.children){
search(keys,u.children)
}
}
})
}
return result;
}
}
};
</script>
<style lang="less">
.tree-menu {
.search {
height: 50px;
padding: 5px 10px;
}
.fg {
flex: none;
// height:0;
overflow: auto;
padding-left: 10px;
}
.tree {
height: calc(100vh - 200px);
overflow: auto;
}
}
</style>
\ No newline at end of file
pages/technology/index.vue
View file @ 728be2ca
<style lang="less">
@import "./technolog.less";
.lay100 {
height: calc(100vh - 105px);
background-color: #F5F6FA;
.con{
padding: 5px 5px 0px 10px;
}
}
</style>
<template>
<div class="layout">
<Layout>
<Sider hide-trigger v-if="showMenu" class="menu_side">
<div class="side_tree" :style="{ height: treeHeight + 'px' }">
<h4 class="tree_tit pl5">
产品结构
<a class="menu_play fr" @click="hideMenu" title="收起">
<Icon type="ios-arrow-back" size="24" />
</a>
</h4>
<StoreHouseLeft class="tree_left" @storeIds="storeIds"></StoreHouseLeft>
<!-- :type="4" -->
</div>
</Sider>
<div v-if="!showMenu" class="show_menu">
<a class="menu_play fr" @click="showMenuFn" title="展开">
<Icon type="ios-arrow-forward" size="24" />
<!-- <Icon type="md-arrow-round-forward"/> -->
</a>
</div>
<Layout>
<Content :class="showMenu?'tech_body':'tech_body02'" :style="{ height: treeHeight + 'px' }">
<a class="detail_href" @click="detail">
<Icon type="ios-undo-outline" />详情页面
</a>
<DataGrid :columns="columns" ref="grid" :action="action">
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入工艺名称/工艺编号" v-width="200" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="add">新增</Button>
</template>
</DataGrid>
<Modal v-model="modal" :title="title" width="1200" footer-hide>
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
</Modal>
</Content>
</Layout>
</Layout>
</div>
<Layout class="lay100">
<Sider hide-trigger v-if="showMenu" class="menu_side" width="300">
<ProductTree @on-hide="onHide" @on-select="productSearch" />
</Sider>
<div v-if="!showMenu" class="show_menu">
<a class="menu_play fr" @click="showMenuFn" title="展开">
<Icon type="ios-arrow-forward" size="24" />
</a>
</div>
<Content class="con">
<!-- <a class="detail_href" @click="view">
<Icon type="ios-undo-outline" />详情页面
</a>-->
<Card class="h100">
<DataGrid :columns="columns" ref="grid" :action="action">
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入工艺名称/工艺编号" v-width="200" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="add">新增</Button>
</template>
</DataGrid>
</Card>
<Modal v-model="modal" :title="title" width="1200" footer-hide>
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
</Modal>
</Content>
</Layout>
</template>
<script>
import Api from "./api";
import Search from "./search";
import StoreHouseLeft from "@/components/modalTree/technologyTree.vue";
import ProductTree from "@/components/page/productTree.vue";
export default {
components: { StoreHouseLeft, Search },
components: { ProductTree, Search },
head: {
title: "工艺规程",
author: "henq",
......@@ -255,7 +250,7 @@ export default {
},
computed: {},
methods: {
hideMenu() {
onHide() {
// this.$Message.info("收起左侧树")
this.showMenu = false;
},
......@@ -264,7 +259,7 @@ export default {
this.showMenu = true;
},
// 详情页面
detail() {
view() {
this.$router.push("technology/details");
},
ok() {
......@@ -275,6 +270,10 @@ export default {
search() {
this.$refs.grid.reload(this.easySearch);
},
productSearch(id,item,ids){
let where={ productId: { op: "In", value: ids }}
this.$refs.grid.reload(where);
},
add() {
this.curId = 0;
this.title = "新增";
......@@ -287,12 +286,12 @@ export default {
this.detail = () => import("./add");
this.modal = true;
},
view(id) {
this.curId = id;
this.title = "详情";
this.detail = () => import("./detail");
this.modal = true;
},
// view(id) {
// this.curId = id;
// this.title = "详情";
// this.detail = () => import("./detail");
// this.modal = true;
// },
edit(id) {
this.curId = id;
this.title = "编辑";
......
pages/technology/technolog.less
View file @ 728be2ca
.menu_side{
width: 300px!important;
min-width: 300px!important;
max-width: 300px!important;
flex: 0 0 300px!important;
background: #fff;
margin: 5px 0 0 0;
border: 1px solid #dcdee2
}
.side_tree{
background: #ffffff;
......@@ -37,6 +34,7 @@
position: fixed;
top: 100px;
left: 0;
z-index: 9;
.menu_play{
width: 30px;
height: 30px;
......@@ -49,6 +47,10 @@
background: #ffffff;
box-shadow: #ccc 2px 2px 4px 1px;
}
.menu_play:hover{
background-color: #2d8cf0;
color: white;
}
}
.tech_body{
margin: 5px 5px 5px 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment