zhgdyun/src/views/projectFront/warehouseManagement/basicInformation/InventorySituation.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>