From cd70224e0a8d45c76bfc93ae18ac04765a92c3c1 Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Mon, 30 May 2022 14:49:27 +0800
Subject: [PATCH] 农资管理

---
 src/views/land/cs.vue |  130 ++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 128 insertions(+), 2 deletions(-)

diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index b3340ee..d653524 100644
--- a/src/views/land/cs.vue
+++ b/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>

--
Gitblit v1.9.3