|
|
@@ -13,65 +13,72 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fertilizer-list">
|
|
|
- <div class="fertilizer-card" @click.stop="handleEdit(item)" v-for="(item, index) in priceList" :key="index">
|
|
|
- <div class="card-header">
|
|
|
- <div class="title">{{ item.name }}</div>
|
|
|
- <div class="action-btn">
|
|
|
- <el-icon @click.stop="handleEdit(item)" color="#2199F8" size="18"><Edit /></el-icon>
|
|
|
- <!-- <el-icon @click.stop="openDelete" color="#E04C4C" size="18"><Delete /></el-icon> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div class="row">
|
|
|
- <span class="label">药物品牌</span>
|
|
|
- <span class="value">{{ item.brand }}</span>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <span class="label">药费类型</span>
|
|
|
- <span class="value">{{ item.typeName }}</span>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <span class="label">施用方式</span>
|
|
|
- <span class="value">{{ item.useMode }}</span>
|
|
|
+ <list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <div class="fertilizer-card" @click.stop="handleEdit(item)" v-for="(item, index) in priceList" :key="index">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="title">{{ item.name }}</div>
|
|
|
+ <div class="action-btn">
|
|
|
+ <el-icon @click.stop="handleEdit(item)" color="#2199F8" size="18"><Edit /></el-icon>
|
|
|
+ <!-- <el-icon @click.stop="openDelete" color="#E04C4C" size="18"><Delete /></el-icon> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <transition name="collapse">
|
|
|
- <div class="extra-info" v-show="isExpanded(index)">
|
|
|
- <div class="row">
|
|
|
- <span class="label">计量单位</span>
|
|
|
- <span class="value">{{ item.unit }}</span>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <span class="label">单位兑水量</span>
|
|
|
- <span class="value">{{ item.unitUsage }}</span>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <span class="label">适用品类</span>
|
|
|
- <span class="value tag-group">
|
|
|
- <span class="tag-item">{{ item.unitWaterAmount }}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">药物品牌</span>
|
|
|
+ <span class="value">{{ item.brand }}</span>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- <div class="expand" @click.stop="toggleExpand(index)">
|
|
|
- <span>{{ isExpanded(index) ? '收起' : '展开更多' }}</span>
|
|
|
- <el-icon :class="{ rotate: isExpanded(index) }"><ArrowDown /></el-icon>
|
|
|
- </div>
|
|
|
- <div class="stats">
|
|
|
- <div class="col">
|
|
|
- <div class="num">{{ item.price }}<span class="unit"> 元/{{ item.unit }}</span></div>
|
|
|
- <div class="desc">成本</div>
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">药费类型</span>
|
|
|
+ <span class="value">{{ item.typeName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">施用方式</span>
|
|
|
+ <span class="value">{{ item.useMode }}</span>
|
|
|
+ </div>
|
|
|
+ <transition name="collapse">
|
|
|
+ <div class="extra-info" v-show="isExpanded(index)">
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">计量单位</span>
|
|
|
+ <span class="value">{{ item.unit }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">单位兑水量</span>
|
|
|
+ <span class="value">{{ item.unitUsage }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <span class="label">适用品类</span>
|
|
|
+ <span class="value tag-group">
|
|
|
+ <span class="tag-item">{{ item.unitWaterAmount }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
- <div class="col">
|
|
|
- <div class="num">{{ item.cost }}<span class="unit"> 元/{{ item.unit }}</span></div>
|
|
|
- <div class="desc">报价</div>
|
|
|
+ <div class="expand" @click.stop="toggleExpand(index)">
|
|
|
+ <span>{{ isExpanded(index) ? '收起' : '展开更多' }}</span>
|
|
|
+ <el-icon :class="{ rotate: isExpanded(index) }"><ArrowDown /></el-icon>
|
|
|
</div>
|
|
|
- <div class="col">
|
|
|
- <div class="num">{{ item.stock }}<span class="unit"> {{ item.unit }}</span></div>
|
|
|
- <div class="desc">库存</div>
|
|
|
+ <div class="stats">
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">{{ item.price }}<span class="unit"> 元/{{ item.unit }}</span></div>
|
|
|
+ <div class="desc">成本</div>
|
|
|
+ </div>
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">{{ item.cost }}<span class="unit"> 元/{{ item.unit }}</span></div>
|
|
|
+ <div class="desc">报价</div>
|
|
|
+ </div>
|
|
|
+ <div class="col">
|
|
|
+ <div class="num">{{ item.stock }}<span class="unit"> {{ item.unit }}</span></div>
|
|
|
+ <div class="desc">库存</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </list>
|
|
|
<div class="page-action">
|
|
|
<div class="btn-primary" @click="handleAdd">新增药肥报价</div>
|
|
|
</div>
|
|
|
@@ -80,10 +87,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from "vue";
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
import { Search } from 'vant';
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
+import { List } from 'vant';
|
|
|
|
|
|
const router = useRouter();
|
|
|
const searchVal = ref("");
|
|
|
@@ -102,6 +110,10 @@ const priceList = ref([
|
|
|
{ name: "20%氯虫苯甲酰胺悬浮剂", brand: "立占", price: "0.08", cost: '0.02', stock: "3125", unit: "克", unitUsage: "10-15毫升", typeName: "农药类/杀虫剂/胃毒性", useMode: "叶面施", unitWaterAmount: "水稻" },
|
|
|
]);
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ getFertilizerList();
|
|
|
+});
|
|
|
+
|
|
|
const handlePlanClick = (index) => {
|
|
|
activePlanIndex.value = index;
|
|
|
};
|
|
|
@@ -143,6 +155,35 @@ const handleAdd = () => {
|
|
|
query: { isAdd: true }
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+// 滚动加载
|
|
|
+const loading = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const currentPage = ref(1);
|
|
|
+const pageSize = ref(10);
|
|
|
+const getFertilizerList = (page = 1, isLoadMore = false) => {
|
|
|
+ loading.value = true;
|
|
|
+ VE_API.z_farm_work_pesticide_fertilizer.fertilizerList({
|
|
|
+ page: page,
|
|
|
+ limit: pageSize.value,
|
|
|
+ }).then(({ data }) => {
|
|
|
+ if (isLoadMore) {
|
|
|
+ priceList.value = [...priceList.value, ...data];
|
|
|
+ } else {
|
|
|
+ priceList.value = data;
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+const onLoad = () => {
|
|
|
+ if (finished.value) return;
|
|
|
+
|
|
|
+ currentPage.value += 1;
|
|
|
+ getFertilizerList(currentPage.value, true);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|