281 lines
7.9 KiB
Vue
281 lines
7.9 KiB
Vue
<template>
|
|
<div class="purchaser-index-warp">
|
|
<common current-name="purchaser">
|
|
<template #main>
|
|
<div v-if="showDetail">
|
|
<el-row class="purchaser-top">
|
|
<el-col :span="12">
|
|
<div class="purchaser-top-title">行情动态</div>
|
|
<div class="purchaser-charts">
|
|
<marketCharts :height="'180'"></marketCharts>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="purchaser-top-title">近7天热门产品</div>
|
|
<div class="purchaser-charts">
|
|
<hotGoodsWordClould></hotGoodsWordClould>
|
|
</div>
|
|
<div>
|
|
<el-button type="success" @click.stop="handleClick">一键发布采购信息</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<filtertop :list="treeList"></filtertop>
|
|
</div>
|
|
<div v-else>
|
|
<good-source :id="detailId" @update-status="handleUpdate"></good-source>
|
|
</div>
|
|
<div class="hot-list-warp">
|
|
<el-row :gutter="10">
|
|
<el-col :span="8" align="left">
|
|
<el-cascader :options="typeTree" :props="treeOption" clearable :placeholder="'请选择地区'" />
|
|
</el-col>
|
|
<el-col :span="16" align="left">
|
|
<el-radio-group v-model="filter.time">
|
|
<el-radio v-for="(n, index) in dateList" :key="index" :value="n.value">{{ n.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-table :data="tableData" style="width: 100%" height="320" @row-click="rowClick">
|
|
<el-table-column prop="title" label="采购品种" />
|
|
<el-table-column prop="region" label="收货地" />
|
|
<el-table-column prop="buyer" label="采购方" />
|
|
<el-table-column prop="buyNum" label="采购量(kg)" />
|
|
<el-table-column prop="buyer" label="采购时间" />
|
|
<el-table-column fixed="right" label="操作">
|
|
<template #default>
|
|
<el-button link type="primary" size="small"> 去报价 </el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
</common>
|
|
|
|
<purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
|
|
</div>
|
|
</template>
|
|
<script setup name="ecommerce">
|
|
import common from './components/common.vue';
|
|
import filtertop from './components/filtertop.vue';
|
|
import hotGoodsWordClould from './components/hotGoodsWordClould.vue';
|
|
import marketCharts from './components/marketCharts.vue';
|
|
import purchaserPopup from './components/purchaserPopup.vue';
|
|
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|
import { getRegion } from '@/apis/index';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { transaction } from '@/apis/agricultural.js';
|
|
import GoodSource from '@/views/ecommerce/components/goodSource.vue';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
let treeList = reactive([
|
|
{
|
|
id: '03',
|
|
name: '水果',
|
|
children: [
|
|
{
|
|
parentId: '03',
|
|
id: '0301',
|
|
name: '甘蔗',
|
|
children: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: '02',
|
|
name: '中药材',
|
|
children: [
|
|
{
|
|
parentId: '02',
|
|
id: '0201',
|
|
name: '石斛',
|
|
children: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: '01',
|
|
name: '蔬菜',
|
|
children: [
|
|
{
|
|
parentId: '01',
|
|
id: '0101',
|
|
name: '豆菜类',
|
|
children: [],
|
|
},
|
|
{
|
|
parentId: '01',
|
|
id: '0102',
|
|
name: '根茎菜类',
|
|
children: [],
|
|
},
|
|
{
|
|
parentId: '01',
|
|
id: '0103',
|
|
name: '叶菜类',
|
|
children: [],
|
|
},
|
|
{
|
|
parentId: '01',
|
|
id: '0104',
|
|
name: '茄果菜类',
|
|
children: [],
|
|
},
|
|
{
|
|
parentId: '01',
|
|
id: '0105',
|
|
name: '葱姜蒜类',
|
|
children: [],
|
|
},
|
|
{
|
|
parentId: '01',
|
|
id: '0106',
|
|
name: '食用菌',
|
|
children: [],
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
const showDetail = ref(true);
|
|
let popupQuote = ref(null);
|
|
const detailId = ref(0);
|
|
|
|
const typeTree = ref([]);
|
|
const treeOption = ref({
|
|
children: 'areaChildVOS',
|
|
label: 'areaName',
|
|
});
|
|
|
|
const getTree = () => {
|
|
console.info('getTree');
|
|
getRegion().then((res) => {
|
|
if (res.code === 200) {
|
|
const { code, data } = res;
|
|
typeTree.value = data;
|
|
console.info('区域信息', typeTree.value);
|
|
}
|
|
});
|
|
};
|
|
|
|
const getTreeList = () => {
|
|
transaction().then((res) => {
|
|
if (res.code === 200) {
|
|
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
|
|
treeList.splice(0, treeList.length, ...a);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleClick = () => {
|
|
popupQuote.value && popupQuote.value.doShow();
|
|
};
|
|
const dateList = reactive([
|
|
{ label: '近7天发布', value: 7 },
|
|
{ label: '近30天发布', value: 30 },
|
|
]);
|
|
let filter = ref({
|
|
region: '',
|
|
time: 7,
|
|
});
|
|
|
|
let tableData = reactive([
|
|
{ id: '01', title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 870, time: '2025-04-02 12:25:36' },
|
|
{ id: '02', title: '大米', region: '孟定镇', buyer: '天辰大米', buyNum: 1000, time: '2025-04-01 12:25:36' },
|
|
{ id: '03', title: '黄瓜', region: '孟勇镇', buyer: '盛源农业', buyNum: 2000, time: '2025-04-02 13:25:36' },
|
|
{ id: '04', title: '苹果', region: '勐简乡', buyer: '桂香浓云加工', buyNum: 1800, time: '2025-04-02 12:25:36' },
|
|
{ id: '05', title: '小葱', region: '四排山乡', buyer: '横鲜农工', buyNum: 380, time: '2025-03-31 12:25:36' },
|
|
{ id: '06', title: '豇豆', region: '大兴乡', buyer: '绿康农产', buyNum: 1570, time: '2025-04-02 12:25:36' },
|
|
{ id: '07', title: '大蒜', region: '贺派乡', buyer: '丰瑞农产加工', buyNum: 875, time: '2025-04-02 12:25:36' },
|
|
{ id: '08', title: '毛荔枝', region: '勐撒镇', buyer: '绿康农业', buyNum: 1570, time: '2025-04-02 12:25:36' },
|
|
{ id: '09', title: '毛荔枝', region: '大兴乡', buyer: '丰瑞农产加工', buyNum: 875, time: '2025-04-02 12:25:36' },
|
|
]);
|
|
|
|
const rowClick = (data) => {
|
|
// router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
|
|
detailId.value = data.id;
|
|
showDetail.value = false;
|
|
};
|
|
|
|
const handleUpdate = (data) => {
|
|
// console.log(data);
|
|
showDetail.value = !showDetail.value;
|
|
};
|
|
|
|
onMounted(() => {
|
|
console.info('onMounted');
|
|
getTree();
|
|
getTreeList();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/* 确保 ElementUI 弹出层有更高的 z-index */
|
|
.el-dialog {
|
|
z-index: 2000 !important;
|
|
}
|
|
|
|
/* 降低 ECharts tooltip 的 z-index */
|
|
div[class^='zr-element'],
|
|
.echarts-tooltip {
|
|
z-index: 1000 !important;
|
|
}
|
|
.purchaser-index-warp {
|
|
width: 100%;
|
|
.purchaser-top {
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
padding: 10px;
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
background: $color-fff;
|
|
.purchaser-top-title {
|
|
width: 100%;
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
.purchaser-charts {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.hot-list-warp {
|
|
margin: 16px 0;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
background: $color-fff;
|
|
::v-deep() {
|
|
thead {
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
}
|
|
thead th {
|
|
padding: 16px 0;
|
|
border: none !important;
|
|
color: $color-999 !important;
|
|
background: $color-main-table-header;
|
|
}
|
|
thead th:first-child {
|
|
border-top-left-radius: 16px;
|
|
border-bottom-left-radius: 16px;
|
|
}
|
|
thead th:last-child {
|
|
border-top-right-radius: 16px;
|
|
border-bottom-right-radius: 16px;
|
|
}
|
|
table {
|
|
margin-top: 16px !important;
|
|
}
|
|
tbody td {
|
|
border: none !important;
|
|
}
|
|
.el-table__inner-wrapper::before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|