农资管理

tangzy

2022-05-30 cd70224e0a8d45c76bfc93ae18ac04765a92c3c1

 src/views/land/cs.vue

@@ -1,5 +1,52 @@
<template>
  <div class="wraaper-box">
    <div class="search">
      <div style="float: left">
        <div style="float: left">
          <el-select
            v-model="formInline.stype"
            placeholder="全部分类"
            size="small"
            @change="stypeChange"
          >
            <el-option label="全部分类" value=""></el-option>
            <el-option label="大田" value="0"></el-option>
            <el-option label="大棚" value="1"></el-option>
            <el-option label="果园" value="2"></el-option>
            <el-option label="鱼塘" value="3"></el-option>
            <el-option label="山地" value="4"></el-option>
            <el-option label="养殖区" value="4"></el-option>
          </el-select>
        </div>
<!--        <div style="float: left; margin-left: 15px">-->
<!--          <el-select-->
<!--            v-model="formInline.state"-->
<!--            size="small"-->
<!--            placeholder="有库存"-->
<!--            @change="stateChange"-->
<!--          >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="有库存" value="0"></el-option>-->
<!--            <el-option label="无库存" value="1"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->
        <div style="float: left; margin-left: 15px">
          <el-input
            v-model="formInline.keyword"
            size="small"
            placeholder="请输入名称"
            @input="keywordChange"
            clearable
          ></el-input>
        </div>
      </div>
      <div>
        <el-button size="small"
        ><span style="color: #5abf78" @click="out(row)">进入地图模式</span></el-button
        >
        <el-button type="success" size="small" @click="land" style="margin-right: 50px;width: 80px;">圈地</el-button>
      </div>
    </div>
    <div class="landhome">
      <div class="land" v-for="(item, index) in farmPlanList" :key="index"  @click="landInfo(item)">
        <div class="land-img" >
@@ -14,21 +61,48 @@
        </div>
      </div>
    </div>
    <div class="el-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :hide-on-single-page="value"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <landAdd v-if="landVisible" ref="land"></landAdd>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {getList} from "@/api/land/land";
import landAdd from "./landAdd";
export default {
  components: {
    landAdd,
  },
  name: "wel",
  data() {
    return {
      formInline: {
        stype: "0",
        state: "0",
        keyword: "",
      },
      query: {},
      farmingCount:0,
      landVisible: false,
      farmPlanList: [],
      page: {
        pageSize: 4,
        currentPage: 1,
        total: 0,
      },
      option: {
        labelWidth: 80,
        span:6,
@@ -49,6 +123,38 @@
    this.onLoad();
  },
  methods: {
    //圈地
    land() {
      this.landVisible = true;
      this.$nextTick(() => {
        this.$refs.land.init();
      });
    },
    //农资类型select 改变事件
    stypeChange(value) {
      this.query["landType"] = value;
      this.onLoad(this.page, this.query);
    },
    //库存 select 改变事件
    stateChange(value) {
      this.query["state"] = value;
      this.onLoad(this.page, this.query);
    },
    //keywordChange 输入事件
    keywordChange(value) {
      this.query["landName"] = value;
      this.onLoad(this.page, this.query);
    },
    //分页
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.onLoad(this.page);
    },
    //改变页码
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.onLoad(this.page);
    },
    landInfo(item){
      this.$router.push({
        path: `/LandDetail`,
@@ -68,6 +174,15 @@
<style lang="scss" scope>
.el-font-size {
  font-size: 14px;
}

.search {
  padding-top: 40px;
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.wraaper-box {
@@ -100,7 +215,6 @@
      height: 280px;
      margin: 0 auto;
      text-align: center;
      background: green;

      .landimg {
        width: 100%;
@@ -149,6 +263,18 @@


  }

  .search {
    padding-top: 40px;
    width: 98%;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: -25px;
  }
  .el-page {
    background-color: black;
    text-align: center;
  }
}
</style>