312 lines
7.7 KiB
Vue
312 lines
7.7 KiB
Vue
<template>
|
|
<div class="fullHeight">
|
|
<div class="block fullHeight">
|
|
<div class="system-left">
|
|
<div class="pageTitle">库存情况</div>
|
|
<div class="titleSearch">
|
|
<el-input placeholder="请输入仓库名称" v-model="title"></el-input>
|
|
</div>
|
|
<vue-scroll class="treeList">
|
|
<div style="padding-top: 10px">
|
|
<div class="menuDiv" v-for="item in 20">一号仓库</div>
|
|
<!-- <li
|
|
class="title"
|
|
style="text-align: center; line-height: 140px"
|
|
v-show="dataList.length == 0"
|
|
>
|
|
暂无数据
|
|
</li> -->
|
|
</div>
|
|
</vue-scroll>
|
|
<el-button type="primary" size="medium" class="btnStyle" @click="add"
|
|
><i class="el-icon-plus"></i> 新建仓库</el-button
|
|
>
|
|
</div>
|
|
<div class="system-right">
|
|
<div class="pageTitle">
|
|
<!-- 材料列表 -->
|
|
库存情况
|
|
</div>
|
|
<div class="rightForm">
|
|
<el-form
|
|
:inline="true"
|
|
ref="searchForm"
|
|
:model="searchForm"
|
|
size="medium"
|
|
>
|
|
<el-form-item label="材料类型">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="品名">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="规格" prop="materialName">
|
|
<el-input v-model="value" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="截止日期">
|
|
<el-date-picker v-model="date" type="date" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="助查码" prop="materialName">
|
|
<el-input v-model="value5" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="货号" prop="materialName">
|
|
<el-input v-model="value6" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="rightButtom">
|
|
<el-button type="primary" plain style="height: 35px; line-height: 10px"
|
|
>查询</el-button
|
|
>
|
|
<el-button type="info" plain style="height: 35px; line-height: 10px"
|
|
>重置</el-button
|
|
>
|
|
</div>
|
|
<div class="table_box" style="margin: 13px">
|
|
<el-table height="552px" :data="threeData" class="tables">
|
|
<el-table-column prop="materialName" label="货号" align="center">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="materialCode"
|
|
label="品名"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="computeUnit"
|
|
label="规格型号"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="materialSpecifications1"
|
|
label="单位"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="materialSpecifications2"
|
|
label="数量"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="materialSpecifications3"
|
|
label="库存下限"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="materialSpecifications4"
|
|
label="库存上限"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="materialSpecifications5"
|
|
label="仓库"
|
|
align="center"
|
|
></el-table-column>
|
|
|
|
<!-- 操作 -->
|
|
<el-table-column
|
|
:label="$t('message.energyManage.material.operation')"
|
|
align="center"
|
|
width="300"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
@click="edit1(scope.row, 3)"
|
|
type="text"
|
|
size="small"
|
|
icon="el-icon-tickets"
|
|
>
|
|
<span style="font-size: 14px">查看详情</span>
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
|
|
return {
|
|
title: '',//左侧搜索
|
|
date: '',
|
|
value5: '',
|
|
value6: '',
|
|
threeData: [
|
|
{
|
|
materialName: 5656565,
|
|
materialCode: '钢筋',
|
|
computeUnit: 'tttttttt',
|
|
materialSpecifications1: 't(m³)',
|
|
materialSpecifications2: 52,
|
|
materialSpecifications3: 5656,
|
|
materialSpecifications4: 45545,
|
|
materialSpecifications5: 4654545,
|
|
}
|
|
],
|
|
options: [
|
|
{
|
|
value: 0,
|
|
label: '甲供料-设备'
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '甲供料-混凝土'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '甲供料-钢筋'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
},
|
|
//列表加载
|
|
methods: {
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.el-button--small,
|
|
.el-button--small.is-round {
|
|
padding: 6px 9px;
|
|
}
|
|
|
|
.block {
|
|
overflow: hidden;
|
|
height: calc(100% + 0px);
|
|
background-color: #f3f5fd;
|
|
|
|
.system-right {
|
|
float: right;
|
|
// margin-right: 1.5%;
|
|
margin-left: 20px;
|
|
width: calc(100% - 270px - 20px - 30px);
|
|
// min-height: 620px;
|
|
height: calc(100% - 40px);
|
|
// border: 1px solid #e9e9e9;
|
|
background-color: white;
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
|
|
.system-left {
|
|
float: left;
|
|
width: 240px;
|
|
padding: 20px 15px;
|
|
height: calc(100% - 40px);
|
|
background-color: white;
|
|
// background-color: rgba(216, 216, 216, 0.2);
|
|
|
|
.treeList {
|
|
width: 100%;
|
|
padding: 0px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 85% !important;
|
|
}
|
|
|
|
li:hover,
|
|
.active {
|
|
// background: linear-gradient(270deg, white, #b7d8ff 100%);
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|
color: @--color-primary;
|
|
}
|
|
|
|
#child {
|
|
li {
|
|
font-size: 15px;
|
|
padding-left: 39px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menuDiv {
|
|
cursor: pointer;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
padding: 5px 0px;
|
|
}
|
|
|
|
.btnStyle {
|
|
padding: 8px 17px;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
margin: 20px 60px;
|
|
}
|
|
|
|
.menuDiv:hover {
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|
color: @--color-primary;
|
|
}
|
|
.rightForm {
|
|
width: 70%;
|
|
margin: 0px 70px;
|
|
|
|
}
|
|
.rightButtom {
|
|
position: absolute;
|
|
right: 27%;
|
|
top: 12%;
|
|
}
|
|
.notSelectMaterialListBox {
|
|
float: right;
|
|
width: calc(100% - 330px - 20px);
|
|
margin-left: 20px;
|
|
}
|
|
::v-deep .el-input__inner{
|
|
height: 35px;
|
|
border-radius: 5px;
|
|
}
|
|
.formTwoInput {
|
|
/deep/.el-form-item__content {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.el-icon-question {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/deep/.input-with-select {
|
|
.el-input-group__append {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.el-select {
|
|
width: 130px !important;
|
|
|
|
.el-input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|