|
@@ -0,0 +1,287 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="page">
|
|
|
|
|
+ <!-- 查询条件:站点 -> 分类 -> 省份 -> 城市 级联;物料/规格/含税按需求不提供筛选 -->
|
|
|
|
|
+ <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
|
|
|
|
|
+ <el-form-item label="站点" prop="siteCode">
|
|
|
|
|
+ <el-select v-model="searchForm.siteCode" placeholder="全部" clearable style="width: 150px" @change="handleSiteChange">
|
|
|
|
|
+ <el-option v-for="item in options.sites" :key="item.siteCode" :label="item.siteName" :value="item.siteCode"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="分类" prop="category">
|
|
|
|
|
+ <el-select v-model="searchForm.category" placeholder="全部" clearable style="width: 140px" @change="handleCategoryChange">
|
|
|
|
|
+ <el-option v-for="item in options.categories" :key="item" :label="item" :value="item"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="省份" prop="province">
|
|
|
|
|
+ <el-select v-model="searchForm.province" placeholder="全部" clearable style="width: 120px" @change="handleProvinceChange">
|
|
|
|
|
+ <el-option v-for="item in options.provinces" :key="item" :label="item" :value="item"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <!-- 城市按所选省份级联;站点没有城市信息时该下拉为空 -->
|
|
|
|
|
+ <el-form-item label="城市" prop="city">
|
|
|
|
|
+ <el-select v-model="searchForm.city" placeholder="全部" clearable style="width: 120px">
|
|
|
|
|
+ <el-option v-for="item in options.cities" :key="item" :label="item" :value="item"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <!-- 数据日期区间:数组由 httpRequest 序列化成 priceDates[0]/priceDates[1] -->
|
|
|
|
|
+ <el-form-item label="数据日期" prop="priceDates">
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ v-model="searchForm.priceDates"
|
|
|
|
|
+ type="daterange"
|
|
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
|
|
+ range-separator="至"
|
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
|
+ style="width: 250px">
|
|
|
|
|
+ </el-date-picker>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
|
|
|
|
|
+ <el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="jp-table">
|
|
|
|
|
+ <!-- custom:列设置;refresh:右上角刷新按钮 -->
|
|
|
|
|
+ <vxe-toolbar :refresh="{query: refreshList}" custom>
|
|
|
|
|
+ <template #buttons>
|
|
|
|
|
+ <!-- 立即采集只对管理员角色显示(后端 @PreAuthorize 是最终防线) -->
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ v-if="hasPermission('program:materialPrice:sync')"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ icon="el-icon-refresh"
|
|
|
|
|
+ :loading="syncing"
|
|
|
|
|
+ @click="syncNow()">立即采集</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </vxe-toolbar>
|
|
|
|
|
+ <div class="jp-table-body">
|
|
|
|
|
+ <vxe-table
|
|
|
|
|
+ border="inner"
|
|
|
|
|
+ auto-resize
|
|
|
|
|
+ resizable
|
|
|
|
|
+ height="auto"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ ref="materialPriceTable"
|
|
|
|
|
+ show-header-overflow
|
|
|
|
|
+ show-overflow
|
|
|
|
|
+ highlight-hover-row
|
|
|
|
|
+ :menu-config="{}"
|
|
|
|
|
+ :data="dataList">
|
|
|
|
|
+ <vxe-column type="seq" width="60" title="序号"></vxe-column>
|
|
|
|
|
+ <vxe-column title="站点" field="siteName" width="130" align="left"></vxe-column>
|
|
|
|
|
+ <vxe-column title="分类" field="category" width="100" align="left"></vxe-column>
|
|
|
|
|
+ <!-- 省份所有站点都有;城市只有部分站点提供,缺失显示「—」 -->
|
|
|
|
|
+ <vxe-column title="省份" field="province" width="100" align="left"></vxe-column>
|
|
|
|
|
+ <vxe-column title="城市" width="100" align="left">
|
|
|
|
|
+ <template #default="scope">{{ scope.row.city || '—' }}</template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <vxe-column title="物料" field="materialName" min-width="150" align="left"></vxe-column>
|
|
|
|
|
+ <vxe-column title="规格" width="110" align="left">
|
|
|
|
|
+ <template #default="scope">{{ scope.row.spec || '—' }}</template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <!-- 三类价格按站点不同:废废网只有价格,中果/回收商网只有最低/最高价,缺失显示「—」 -->
|
|
|
|
|
+ <vxe-column title="价格" width="100" align="right">
|
|
|
|
|
+ <template #default="scope">{{ formatPrice(scope.row.price) }}</template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <vxe-column title="最低价" width="100" align="right">
|
|
|
|
|
+ <template #default="scope">{{ formatPrice(scope.row.priceLow) }}</template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <vxe-column title="最高价" width="100" align="right">
|
|
|
|
|
+ <template #default="scope">{{ formatPrice(scope.row.priceHigh) }}</template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <vxe-column title="单位" field="priceUnit" width="80" align="center"></vxe-column>
|
|
|
|
|
+ <!-- 含税三态:1 含税 / 0 不含税 / null 未声明 -->
|
|
|
|
|
+ <vxe-column title="含税" width="90" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-tag v-if="scope.row.taxIncluded === 1" size="small" type="success">含税</el-tag>
|
|
|
|
|
+ <el-tag v-else-if="scope.row.taxIncluded === 0" size="small" type="warning">不含税</el-tag>
|
|
|
|
|
+ <el-tag v-else size="small" type="info">未声明</el-tag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <!-- 备注、采集时间仅后端返回,页面不再展示 -->
|
|
|
|
|
+ <vxe-column title="数据日期" field="priceDate" width="110" align="center"></vxe-column>
|
|
|
|
|
+ <vxe-column title="来源" width="70" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-link v-if="scope.row.sourceUrl" type="primary" :href="scope.row.sourceUrl" target="_blank">链接</el-link>
|
|
|
|
|
+ <span v-else>—</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ <vxe-column title="操作" width="90" fixed="right" align="center">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <el-button text type="primary" @click="showTrend(scope.row)">价格走势</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </vxe-column>
|
|
|
|
|
+ </vxe-table>
|
|
|
|
|
+ <vxe-pager
|
|
|
|
|
+ background
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ :current-page="tablePage.currentPage"
|
|
|
|
|
+ :page-size="tablePage.pageSize"
|
|
|
|
|
+ :total="tablePage.total"
|
|
|
|
|
+ :page-sizes="[10, 20, 100, 1000]"
|
|
|
|
|
+ :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
|
|
|
|
|
+ @page-change="currentChangeHandle">
|
|
|
|
|
+ </vxe-pager>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <MaterialPriceTrendDialog ref="trendDialog"></MaterialPriceTrendDialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ import MaterialPriceService from '@/api/program/MaterialPriceService'
|
|
|
|
|
+ import MaterialPriceTrendDialog from './MaterialPriceTrendDialog'
|
|
|
|
|
+
|
|
|
|
|
+ export default {
|
|
|
|
|
+ data () {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // 查询条件;priceDates 为空数组时后端不会按日期过滤
|
|
|
|
|
+ searchForm: {
|
|
|
|
|
+ siteCode: '',
|
|
|
|
|
+ category: '',
|
|
|
|
|
+ province: '',
|
|
|
|
|
+ city: '',
|
|
|
|
|
+ priceDates: []
|
|
|
|
|
+ },
|
|
|
|
|
+ // 下拉选项,全部由后端 /options 返回
|
|
|
|
|
+ options: {
|
|
|
|
|
+ sites: [],
|
|
|
|
|
+ categories: [],
|
|
|
|
|
+ provinces: [],
|
|
|
|
|
+ cities: []
|
|
|
|
|
+ },
|
|
|
|
|
+ dataList: [],
|
|
|
|
|
+ tablePage: {
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ currentPage: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ orders: []
|
|
|
|
|
+ },
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ // 采集按钮的 loading,避免重复点击
|
|
|
|
|
+ syncing: false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ materialPriceService: null,
|
|
|
|
|
+ created () {
|
|
|
|
|
+ this.materialPriceService = new MaterialPriceService()
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ },
|
|
|
|
|
+ components: {
|
|
|
|
|
+ MaterialPriceTrendDialog
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted () {
|
|
|
|
|
+ this.refreshList()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 项目启用了 keep-alive,从其它页面切回来时刷新一次
|
|
|
|
|
+ activated () {
|
|
|
|
|
+ this.refreshList()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 拉取下拉选项:传 siteCode/category/province 做级联收窄
|
|
|
|
|
+ loadOptions () {
|
|
|
|
|
+ this.materialPriceService.options({
|
|
|
|
|
+ siteCode: this.searchForm.siteCode,
|
|
|
|
|
+ category: this.searchForm.category,
|
|
|
|
|
+ province: this.searchForm.province
|
|
|
|
|
+ }).then((data) => {
|
|
|
|
|
+ this.options = {
|
|
|
|
|
+ sites: (data && data.sites) || [],
|
|
|
|
|
+ categories: (data && data.categories) || [],
|
|
|
|
|
+ provinces: (data && data.provinces) || [],
|
|
|
|
|
+ cities: (data && data.cities) || []
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 换站点后分类、省份、城市都失效,清空后重新拉选项
|
|
|
|
|
+ handleSiteChange () {
|
|
|
|
|
+ this.searchForm.category = ''
|
|
|
|
|
+ this.searchForm.province = ''
|
|
|
|
|
+ this.searchForm.city = ''
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 换分类后省份、城市随之收窄
|
|
|
|
|
+ handleCategoryChange () {
|
|
|
|
|
+ this.searchForm.province = ''
|
|
|
|
|
+ this.searchForm.city = ''
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 换省份后城市列表变化,先清空已选城市
|
|
|
|
|
+ handleProvinceChange () {
|
|
|
|
|
+ this.searchForm.city = ''
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 分页查询;空值条件直接剔除,避免后端收到空串
|
|
|
|
|
+ refreshList () {
|
|
|
|
|
+ this.loading = true
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ current: this.tablePage.currentPage,
|
|
|
|
|
+ size: this.tablePage.pageSize,
|
|
|
|
|
+ orders: this.tablePage.orders,
|
|
|
|
|
+ ...this.searchForm
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!params.priceDates || params.priceDates.length === 0) {
|
|
|
|
|
+ delete params.priceDates
|
|
|
|
|
+ }
|
|
|
|
|
+ this.materialPriceService.list(params).then((data) => {
|
|
|
|
|
+ this.dataList = data.records || []
|
|
|
|
|
+ this.tablePage.total = data.total || 0
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // vxe-pager 翻页/改每页条数
|
|
|
|
|
+ currentChangeHandle ({ currentPage, pageSize }) {
|
|
|
|
|
+ this.tablePage.currentPage = currentPage
|
|
|
|
|
+ this.tablePage.pageSize = pageSize
|
|
|
|
|
+ this.refreshList()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 重置全部条件并回到第一页
|
|
|
|
|
+ resetSearch () {
|
|
|
|
|
+ this.$refs.searchForm.resetFields()
|
|
|
|
|
+ this.searchForm.priceDates = []
|
|
|
|
|
+ this.tablePage.currentPage = 1
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ this.refreshList()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 手动采集:确认后调用后端,部分站点失败仍算成功但会提示
|
|
|
|
|
+ syncNow () {
|
|
|
|
|
+ this.$confirm('将立即从三个网站抓取最新材料价格,可能耗时 1 分钟左右,是否继续?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ this.syncing = true
|
|
|
|
|
+ this.materialPriceService.sync().then((res) => {
|
|
|
|
|
+ this.syncing = false
|
|
|
|
|
+ if (res && res.code === 200) {
|
|
|
|
|
+ const suffix = res.partial ? '(部分站点抓取失败)' : ''
|
|
|
|
|
+ this.$message.success(`采集完成,入库 ${res.saved || 0} 条${suffix}`)
|
|
|
|
|
+ this.tablePage.currentPage = 1
|
|
|
|
|
+ this.loadOptions()
|
|
|
|
|
+ this.refreshList()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error((res && res.msg) || '采集失败')
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.syncing = false
|
|
|
|
|
+ })
|
|
|
|
|
+ }).catch(() => {})
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开走势弹窗,条件由当前行带入
|
|
|
|
|
+ showTrend (row) {
|
|
|
|
|
+ this.$refs.trendDialog.init(row)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 价格为空显示「—」,有值统一保留两位小数
|
|
|
|
|
+ formatPrice (value) {
|
|
|
|
|
+ if (value === null || value === undefined || value === '') {
|
|
|
|
|
+ return '—'
|
|
|
|
|
+ }
|
|
|
|
|
+ const num = Number(value)
|
|
|
|
|
+ return isNaN(num) ? value : num.toFixed(2)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|