|
|
@@ -1,109 +1,90 @@
|
|
|
<template>
|
|
|
- <basic-container>
|
|
|
- <avue-crud
|
|
|
- :option="option"
|
|
|
- :table-loading="loading"
|
|
|
- :data="data"
|
|
|
- :page.sync="page"
|
|
|
- ref="crud"
|
|
|
- v-model="form"
|
|
|
- :permission="permissionList"
|
|
|
- @search-change="searchChange"
|
|
|
- @search-reset="searchReset"
|
|
|
- @current-change="currentChange"
|
|
|
- @size-change="sizeChange"
|
|
|
- @refresh-change="refreshChange"
|
|
|
- @on-load="onLoad"
|
|
|
- @row-click="handleRowClick">
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
|
|
|
+ :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
|
|
|
+ @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
|
|
|
+ @row-click="handleRowClick">
|
|
|
|
|
|
- <!-- 自定义审核状态显示 -->
|
|
|
- <template slot-scope="{row}" slot="auditStatus">
|
|
|
- <el-tag
|
|
|
- :type="getAuditStatusType(row.auditStatus)"
|
|
|
- size="small">
|
|
|
- {{ getAuditStatusText(row.auditStatus) }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
+ <!-- 自定义审核状态显示 -->
|
|
|
+ <template slot-scope="{row}" slot="auditStatus">
|
|
|
+ <el-tag :type="getAuditStatusType(row.auditStatus)" size="small">
|
|
|
+ {{ getAuditStatusText(row.auditStatus) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- 自定义品牌显示 -->
|
|
|
- <template slot-scope="{row}" slot="brand">
|
|
|
- <el-tag size="small">{{ row.brandName }}</el-tag>
|
|
|
- </template>
|
|
|
+ <!-- 自定义品牌显示 -->
|
|
|
+ <template slot-scope="{row}" slot="brand">
|
|
|
+ <el-tag size="small">{{ row.brandName }}</el-tag>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- 自定义物料价格显示 -->
|
|
|
- <template slot-scope="{row}" slot="materialPrice">
|
|
|
- <span class="price-text">¥{{ formatPrice(row.materialPrice) }}</span>
|
|
|
- </template>
|
|
|
- </avue-crud>
|
|
|
+ <!-- 自定义物料价格显示 -->
|
|
|
+ <template slot-scope="{row}" slot="materialPrice">
|
|
|
+ <span class="price-text">¥{{ formatPrice(row.materialPrice) }}</span>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
|
|
|
- <!-- 详情查看对话框 -->
|
|
|
- <el-dialog
|
|
|
- title="预测提报详情"
|
|
|
- :visible.sync="detailVisible"
|
|
|
- width="80%"
|
|
|
- append-to-body
|
|
|
- :close-on-click-modal="false">
|
|
|
- <div class="forecast-detail" v-if="currentDetail">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label>年月：</label>
|
|
|
- <span>{{ currentDetail.yearMonth }}</span>
|
|
|
+ <!-- 详情查看对话框 -->
|
|
|
+ <el-dialog title="预测提报详情" :visible.sync="detailVisible" width="80%" append-to-body
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div class="forecast-detail" v-if="currentDetail">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>年月：</label>
|
|
|
+ <span>{{ currentDetail.yearMonth }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>品牌：</label>
|
|
|
+ <span>{{ currentDetail.brandName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>规格：</label>
|
|
|
+ <span>{{ currentDetail.specification }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>花纹：</label>
|
|
|
+ <span>{{ currentDetail.pattern }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>物料编号：</label>
|
|
|
+ <span>{{ currentDetail.materialCode }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>物料描述：</label>
|
|
|
+ <span>{{ currentDetail.materialDescription }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>物料价格：</label>
|
|
|
+ <span class="price-text">¥{{ formatPrice(currentDetail.materialPrice) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>月初需求量：</label>
|
|
|
+ <span>{{ formatQuantity(currentDetail.earlyMonthDemand) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>月中需求量：</label>
|
|
|
+ <span>{{ formatQuantity(currentDetail.midMonthDemand) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <label>月末需求量：</label>
|
|
|
+ <span>{{ formatQuantity(currentDetail.endMonthDemand) }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="detail-item full-width">
|
|
|
+ <label>审核状态：</label>
|
|
|
+ <el-tag :type="getAuditStatusType(currentDetail.auditStatus)" size="medium">
|
|
|
+ {{ getAuditStatusText(currentDetail.auditStatus) }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>品牌：</label>
|
|
|
- <span>{{ currentDetail.brandName }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>规格：</label>
|
|
|
- <span>{{ currentDetail.specification }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>花纹：</label>
|
|
|
- <span>{{ currentDetail.pattern }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>物料编号：</label>
|
|
|
- <span>{{ currentDetail.materialCode }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="detail-item">
|
|
|
- <label>物料描述：</label>
|
|
|
- <span>{{ currentDetail.materialDescription }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>物料价格：</label>
|
|
|
- <span class="price-text">¥{{ formatPrice(currentDetail.materialPrice) }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>月初需求量：</label>
|
|
|
- <span>{{ formatQuantity(currentDetail.earlyMonthDemand) }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>月中需求量：</label>
|
|
|
- <span>{{ formatQuantity(currentDetail.midMonthDemand) }}</span>
|
|
|
- </div>
|
|
|
- <div class="detail-item">
|
|
|
- <label>月末需求量：</label>
|
|
|
- <span>{{ formatQuantity(currentDetail.endMonthDemand) }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div class="detail-item full-width">
|
|
|
- <label>审核状态：</label>
|
|
|
- <el-tag
|
|
|
- :type="getAuditStatusType(currentDetail.auditStatus)"
|
|
|
- size="medium">
|
|
|
- {{ getAuditStatusText(currentDetail.auditStatus) }}
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="detailVisible = false">关 闭</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </basic-container>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="detailVisible = false">关 闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </basic-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -116,396 +97,396 @@ import { mapGetters } from 'vuex';
|
|
|
* 支持按年月、品牌进行筛选
|
|
|
*/
|
|
|
export default {
|
|
|
- name: 'ForecastIndex',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {},
|
|
|
- query: {},
|
|
|
- loading: true,
|
|
|
- detailVisible: false,
|
|
|
- currentDetail: null,
|
|
|
- page: {
|
|
|
- pageSize: 10,
|
|
|
- currentPage: 1,
|
|
|
- total: 0
|
|
|
- },
|
|
|
- brandOptions: [],
|
|
|
- option: {
|
|
|
- height: 'auto',
|
|
|
- calcHeight: 30,
|
|
|
- tip: false,
|
|
|
- searchShow: true,
|
|
|
- searchMenuSpan: 6,
|
|
|
- border: true,
|
|
|
- index: true,
|
|
|
- menu:false,
|
|
|
- viewBtn: false,
|
|
|
- selection: false,
|
|
|
- addBtn: false,
|
|
|
- editBtn: false,
|
|
|
- delBtn: false,
|
|
|
- excelBtn: false,
|
|
|
- columnBtn: false,
|
|
|
- refreshBtn: true,
|
|
|
- dialogClickModal: false,
|
|
|
- column: [
|
|
|
- {
|
|
|
- label: '年月',
|
|
|
- prop: 'yearMonth',
|
|
|
- type: 'month',
|
|
|
- format: 'yyyyMM',
|
|
|
- valueFormat: 'yyyyMM',
|
|
|
- search: true,
|
|
|
- searchSpan: 6,
|
|
|
- width: 120,
|
|
|
- // sortable: true,
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- message: '请选择年月',
|
|
|
- trigger: 'change'
|
|
|
- }]
|
|
|
- },
|
|
|
- {
|
|
|
- label: '品牌',
|
|
|
- prop: 'brandId',
|
|
|
- type: 'select',
|
|
|
- dicData: [],
|
|
|
- props: {
|
|
|
- label: 'brandName',
|
|
|
- value: 'id'
|
|
|
+ name: 'ForecastIndex',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ query: {},
|
|
|
+ loading: true,
|
|
|
+ detailVisible: false,
|
|
|
+ currentDetail: null,
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
},
|
|
|
- slot: true,
|
|
|
- search: true,
|
|
|
- searchSpan: 6,
|
|
|
- width: 120,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: '规格',
|
|
|
- prop: 'specification',
|
|
|
- search: false,
|
|
|
- width: 150,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: '花纹',
|
|
|
- prop: 'pattern',
|
|
|
- search: false,
|
|
|
- width: 120,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: '物料描述',
|
|
|
- prop: 'materialDescription',
|
|
|
- search: false,
|
|
|
- // width: 200,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: '物料价格',
|
|
|
- prop: 'materialPrice',
|
|
|
- type: 'number',
|
|
|
- slot: true,
|
|
|
- search: false,
|
|
|
- width: 120,
|
|
|
- align: 'right'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '月末需求量',
|
|
|
- prop: 'endMonthDemand',
|
|
|
- type: 'number',
|
|
|
- search: false,
|
|
|
- width: 120,
|
|
|
- align: 'right'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '月中需求量',
|
|
|
- prop: 'midMonthDemand',
|
|
|
- type: 'number',
|
|
|
- search: false,
|
|
|
- width: 120,
|
|
|
- align: 'right'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '月初需求量',
|
|
|
- prop: 'earlyMonthDemand',
|
|
|
- type: 'number',
|
|
|
- search: false,
|
|
|
- width: 120,
|
|
|
- align: 'right'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '物料编号',
|
|
|
- prop: 'materialCode',
|
|
|
- search: false,
|
|
|
- width: 150,
|
|
|
- overHidden: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: '审核状态',
|
|
|
- prop: 'auditStatus',
|
|
|
- type: 'select',
|
|
|
- dicData: [
|
|
|
- { label: '待审核', value: 'pending' },
|
|
|
- { label: '审核中', value: 'reviewing' },
|
|
|
- { label: '已通过', value: 'approved' },
|
|
|
- { label: '已拒绝', value: 'rejected' }
|
|
|
- ],
|
|
|
- slot: true,
|
|
|
- search: false,
|
|
|
- width: 120
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- data: []
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['permission']),
|
|
|
- /**
|
|
|
- * 权限配置
|
|
|
- * 预测提报页面只提供查看功能，不提供增删改操作
|
|
|
- */
|
|
|
- permissionList() {
|
|
|
- return {
|
|
|
- addBtn: this.vaildData(this.permission.forecast_add, false),
|
|
|
- viewBtn: this.vaildData(this.permission.forecast_view, false),
|
|
|
- delBtn: this.vaildData(this.permission.forecast_delete, false),
|
|
|
- editBtn: this.vaildData(this.permission.forecast_edit, false)
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.loadBrandOptions();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 加载品牌选项数据
|
|
|
- * 异步获取品牌列表并更新到对应的列配置中
|
|
|
- */
|
|
|
- async loadBrandOptions() {
|
|
|
- try {
|
|
|
- const res = await getBrandList();
|
|
|
- this.brandOptions = res.data.data || [];
|
|
|
- const brandColumn = this.option.column.find(col => col.prop === 'brandId');
|
|
|
- if (brandColumn) {
|
|
|
- brandColumn.dicData = this.brandOptions;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('加载品牌选项失败:', error);
|
|
|
- // 提供默认的品牌选项
|
|
|
- this.brandOptions = [
|
|
|
- { id: 1, brandName: '品牌A' },
|
|
|
- { id: 2, brandName: '品牌B' },
|
|
|
- { id: 3, brandName: '品牌C' }
|
|
|
- ];
|
|
|
- const brandColumn = this.option.column.find(col => col.prop === 'brandId');
|
|
|
- if (brandColumn) {
|
|
|
- brandColumn.dicData = this.brandOptions;
|
|
|
+ brandOptions: [],
|
|
|
+ option: {
|
|
|
+ height: 'auto',
|
|
|
+ calcHeight: 30,
|
|
|
+ tip: false,
|
|
|
+ searchShow: true,
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ menu: false,
|
|
|
+ viewBtn: false,
|
|
|
+ selection: false,
|
|
|
+ addBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ excelBtn: false,
|
|
|
+ columnBtn: false,
|
|
|
+ refreshBtn: true,
|
|
|
+ dialogClickModal: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '年月',
|
|
|
+ prop: 'yearMonth',
|
|
|
+ type: 'month',
|
|
|
+ format: 'yyyyMM',
|
|
|
+ valueFormat: 'yyyyMM',
|
|
|
+ search: true,
|
|
|
+ searchSpan: 6,
|
|
|
+ width: 120,
|
|
|
+ // sortable: true,
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择年月',
|
|
|
+ trigger: 'change'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '品牌',
|
|
|
+ prop: 'brandId',
|
|
|
+ type: 'select',
|
|
|
+ dicData: [],
|
|
|
+ props: {
|
|
|
+ label: 'brandName',
|
|
|
+ value: 'id'
|
|
|
+ },
|
|
|
+ slot: true,
|
|
|
+ search: true,
|
|
|
+ searchSpan: 6,
|
|
|
+ width: 120,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '规格',
|
|
|
+ prop: 'specification',
|
|
|
+ search: false,
|
|
|
+ width: 150,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '花纹',
|
|
|
+ prop: 'pattern',
|
|
|
+ search: false,
|
|
|
+ width: 120,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '物料描述',
|
|
|
+ prop: 'materialDescription',
|
|
|
+ search: false,
|
|
|
+ // width: 200,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '物料价格',
|
|
|
+ prop: 'materialPrice',
|
|
|
+ type: 'number',
|
|
|
+ slot: true,
|
|
|
+ search: false,
|
|
|
+ width: 120,
|
|
|
+ align: 'right'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '月末需求量',
|
|
|
+ prop: 'endMonthDemand',
|
|
|
+ type: 'number',
|
|
|
+ search: false,
|
|
|
+ width: 120,
|
|
|
+ align: 'right'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '月中需求量',
|
|
|
+ prop: 'midMonthDemand',
|
|
|
+ type: 'number',
|
|
|
+ search: false,
|
|
|
+ width: 120,
|
|
|
+ align: 'right'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '月初需求量',
|
|
|
+ prop: 'earlyMonthDemand',
|
|
|
+ type: 'number',
|
|
|
+ search: false,
|
|
|
+ width: 120,
|
|
|
+ align: 'right'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '物料编号',
|
|
|
+ prop: 'materialCode',
|
|
|
+ search: false,
|
|
|
+ width: 150,
|
|
|
+ overHidden: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '审核状态',
|
|
|
+ prop: 'auditStatus',
|
|
|
+ type: 'select',
|
|
|
+ dicData: [
|
|
|
+ { label: '待审核', value: 'pending' },
|
|
|
+ { label: '审核中', value: 'reviewing' },
|
|
|
+ { label: '已通过', value: 'approved' },
|
|
|
+ { label: '已拒绝', value: 'rejected' }
|
|
|
+ ],
|
|
|
+ slot: true,
|
|
|
+ search: false,
|
|
|
+ width: 120
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['permission']),
|
|
|
+ /**
|
|
|
+ * 权限配置
|
|
|
+ * 预测提报页面只提供查看功能，不提供增删改操作
|
|
|
+ */
|
|
|
+ permissionList() {
|
|
|
+ return {
|
|
|
+ addBtn: this.vaildData(this.permission.forecast_add, false),
|
|
|
+ viewBtn: this.vaildData(this.permission.forecast_view, false),
|
|
|
+ delBtn: this.vaildData(this.permission.forecast_delete, false),
|
|
|
+ editBtn: this.vaildData(this.permission.forecast_edit, false)
|
|
|
+ };
|
|
|
}
|
|
|
- }
|
|
|
},
|
|
|
-
|
|
|
- /**
|
|
|
- * 处理行点击事件
|
|
|
- * @param {Object} row 行数据
|
|
|
- * @param {Object} event 事件对象
|
|
|
- * @param {Object} column 列配置
|
|
|
- */
|
|
|
- async handleRowClick(row, event, column) {
|
|
|
- if (column && column.property === 'auditStatus') {
|
|
|
- return; // 点击状态列不触发详情查看
|
|
|
- }
|
|
|
- await this.viewDetail(row);
|
|
|
+ created() {
|
|
|
+ this.loadBrandOptions();
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 加载品牌选项数据
|
|
|
+ * 异步获取品牌列表并更新到对应的列配置中
|
|
|
+ */
|
|
|
+ async loadBrandOptions() {
|
|
|
+ try {
|
|
|
+ const res = await getBrandList();
|
|
|
+ this.brandOptions = res.data.data || [];
|
|
|
+ const brandColumn = this.option.column.find(col => col.prop === 'brandId');
|
|
|
+ if (brandColumn) {
|
|
|
+ brandColumn.dicData = this.brandOptions;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载品牌选项失败:', error);
|
|
|
+ // 提供默认的品牌选项
|
|
|
+ this.brandOptions = [
|
|
|
+ { id: 1, brandName: '品牌A' },
|
|
|
+ { id: 2, brandName: '品牌B' },
|
|
|
+ { id: 3, brandName: '品牌C' }
|
|
|
+ ];
|
|
|
+ const brandColumn = this.option.column.find(col => col.prop === 'brandId');
|
|
|
+ if (brandColumn) {
|
|
|
+ brandColumn.dicData = this.brandOptions;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 查看详情
|
|
|
- * @param {Object} row 行数据
|
|
|
- */
|
|
|
- async viewDetail(row) {
|
|
|
- try {
|
|
|
- const res = await getForecastDetail(row.id);
|
|
|
- this.currentDetail = res.data.data;
|
|
|
- this.detailVisible = true;
|
|
|
- } catch (error) {
|
|
|
- console.error('获取详情失败:', error);
|
|
|
- this.$message.error('获取详情失败，请稍后重试');
|
|
|
- }
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 处理行点击事件
|
|
|
+ * @param {Object} row 行数据
|
|
|
+ * @param {Object} event 事件对象
|
|
|
+ * @param {Object} column 列配置
|
|
|
+ */
|
|
|
+ async handleRowClick(row, event, column) {
|
|
|
+ if (column && column.property === 'auditStatus') {
|
|
|
+ return; // 点击状态列不触发详情查看
|
|
|
+ }
|
|
|
+ await this.viewDetail(row);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 搜索重置
|
|
|
- */
|
|
|
- searchReset() {
|
|
|
- this.query = {};
|
|
|
- this.onLoad(this.page);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 查看详情
|
|
|
+ * @param {Object} row 行数据
|
|
|
+ */
|
|
|
+ async viewDetail(row) {
|
|
|
+ try {
|
|
|
+ const res = await getForecastDetail(row.id);
|
|
|
+ this.currentDetail = res.data.data;
|
|
|
+ this.detailVisible = true;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取详情失败:', error);
|
|
|
+ this.$message.error('获取详情失败，请稍后重试');
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 搜索条件变化
|
|
|
- * @param {Object} params 搜索参数
|
|
|
- * @param {Function} done 完成回调
|
|
|
- */
|
|
|
- searchChange(params, done) {
|
|
|
- this.query = params;
|
|
|
- this.page.currentPage = 1;
|
|
|
- this.onLoad(this.page, params);
|
|
|
- done();
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 搜索重置
|
|
|
+ */
|
|
|
+ searchReset() {
|
|
|
+ this.query = {};
|
|
|
+ this.onLoad(this.page);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 页码变化
|
|
|
- * @param {number} currentPage 当前页码
|
|
|
- */
|
|
|
- currentChange(currentPage) {
|
|
|
- this.page.currentPage = currentPage;
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 搜索条件变化
|
|
|
+ * @param {Object} params 搜索参数
|
|
|
+ * @param {Function} done 完成回调
|
|
|
+ */
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.query = params;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.onLoad(this.page, params);
|
|
|
+ done();
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 页大小变化
|
|
|
- * @param {number} pageSize 页大小
|
|
|
- */
|
|
|
- sizeChange(pageSize) {
|
|
|
- this.page.pageSize = pageSize;
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 页码变化
|
|
|
+ * @param {number} currentPage 当前页码
|
|
|
+ */
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 刷新数据
|
|
|
- */
|
|
|
- refreshChange() {
|
|
|
- this.onLoad(this.page, this.query);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 页大小变化
|
|
|
+ * @param {number} pageSize 页大小
|
|
|
+ */
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 加载数据
|
|
|
- * @param {Object} page 分页参数
|
|
|
- * @param {Object} params 查询参数
|
|
|
- */
|
|
|
- async onLoad(page, params = {}) {
|
|
|
- this.loading = true;
|
|
|
- try {
|
|
|
- const res = await getForecastList(page.currentPage, page.pageSize, {
|
|
|
- ...params,
|
|
|
- ...this.query
|
|
|
- });
|
|
|
- const data = res.data.data;
|
|
|
- this.page.total = data.total;
|
|
|
- this.data = data.records;
|
|
|
- } catch (error) {
|
|
|
- console.error('加载数据失败:', error);
|
|
|
- this.$message.error('加载数据失败，请稍后重试');
|
|
|
- this.data = [];
|
|
|
- this.page.total = 0;
|
|
|
- } finally {
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 刷新数据
|
|
|
+ */
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoad(this.page, this.query);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取审核状态对应的标签类型
|
|
|
- * @param {string} status 审核状态
|
|
|
- * @returns {string} 标签类型
|
|
|
- */
|
|
|
- getAuditStatusType(status) {
|
|
|
- const statusMap = {
|
|
|
- pending: 'warning',
|
|
|
- reviewing: 'primary',
|
|
|
- approved: 'success',
|
|
|
- rejected: 'danger'
|
|
|
- };
|
|
|
- return statusMap[status] || 'info';
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 加载数据
|
|
|
+ * @param {Object} page 分页参数
|
|
|
+ * @param {Object} params 查询参数
|
|
|
+ */
|
|
|
+ async onLoad(page, params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await getForecastList(page.currentPage, page.pageSize, {
|
|
|
+ ...params,
|
|
|
+ ...this.query
|
|
|
+ });
|
|
|
+ const data = res.data.data;
|
|
|
+ this.page.total = data.total;
|
|
|
+ this.data = data.records;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载数据失败:', error);
|
|
|
+ this.$message.error('加载数据失败，请稍后重试');
|
|
|
+ this.data = [];
|
|
|
+ this.page.total = 0;
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取审核状态显示文本
|
|
|
- * @param {string} status 审核状态
|
|
|
- * @returns {string} 显示文本
|
|
|
- */
|
|
|
- getAuditStatusText(status) {
|
|
|
- const statusMap = {
|
|
|
- pending: '待审核',
|
|
|
- reviewing: '审核中',
|
|
|
- approved: '已通过',
|
|
|
- rejected: '已拒绝'
|
|
|
- };
|
|
|
- return statusMap[status] || '未知状态';
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 获取审核状态对应的标签类型
|
|
|
+ * @param {string} status 审核状态
|
|
|
+ * @returns {string} 标签类型
|
|
|
+ */
|
|
|
+ getAuditStatusType(status) {
|
|
|
+ const statusMap = {
|
|
|
+ pending: 'warning',
|
|
|
+ reviewing: 'primary',
|
|
|
+ approved: 'success',
|
|
|
+ rejected: 'danger'
|
|
|
+ };
|
|
|
+ return statusMap[status] || 'info';
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 格式化价格显示
|
|
|
- * @param {number} price 价格
|
|
|
- * @returns {string} 格式化后的价格
|
|
|
- */
|
|
|
- formatPrice(price) {
|
|
|
- if (price == null || price === '') return '0.00';
|
|
|
- return Number(price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 获取审核状态显示文本
|
|
|
+ * @param {string} status 审核状态
|
|
|
+ * @returns {string} 显示文本
|
|
|
+ */
|
|
|
+ getAuditStatusText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ pending: '待审核',
|
|
|
+ reviewing: '审核中',
|
|
|
+ approved: '已通过',
|
|
|
+ rejected: '已拒绝'
|
|
|
+ };
|
|
|
+ return statusMap[status] || '未知状态';
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 格式化价格显示
|
|
|
+ * @param {number} price 价格
|
|
|
+ * @returns {string} 格式化后的价格
|
|
|
+ */
|
|
|
+ formatPrice(price) {
|
|
|
+ if (price == null || price === '') return '0.00';
|
|
|
+ return Number(price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 格式化数量显示
|
|
|
- * @param {number} quantity 数量
|
|
|
- * @returns {string} 格式化后的数量
|
|
|
- */
|
|
|
- formatQuantity(quantity) {
|
|
|
- if (quantity == null || quantity === '') return '0';
|
|
|
- return Number(quantity).toLocaleString();
|
|
|
+ /**
|
|
|
+ * 格式化数量显示
|
|
|
+ * @param {number} quantity 数量
|
|
|
+ * @returns {string} 格式化后的数量
|
|
|
+ */
|
|
|
+ formatQuantity(quantity) {
|
|
|
+ if (quantity == null || quantity === '') return '0';
|
|
|
+ return Number(quantity).toLocaleString();
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.forecast-detail {
|
|
|
- padding: 20px;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
|
|
|
.detail-item {
|
|
|
- margin-bottom: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.detail-item.full-width {
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- padding-top: 20px;
|
|
|
- border-top: 1px solid #e4e7ed;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-top: 20px;
|
|
|
+ border-top: 1px solid #e4e7ed;
|
|
|
}
|
|
|
|
|
|
.detail-item label {
|
|
|
- font-weight: bold;
|
|
|
- color: #606266;
|
|
|
- min-width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #606266;
|
|
|
+ min-width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.detail-item span {
|
|
|
- color: #303133;
|
|
|
- flex: 1;
|
|
|
+ color: #303133;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
.price-text {
|
|
|
- color: #e6a23c;
|
|
|
- font-weight: bold;
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.dialog-footer {
|
|
|
- text-align: center;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 表格行悬停效果 */
|
|
|
::v-deep .el-table__row:hover {
|
|
|
- cursor: pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
/* 搜索表单样式优化 */
|
|
|
::v-deep .avue-crud__search .el-form-item {
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
/* 状态标签样式 */
|
|
|
::v-deep .el-tag {
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
</style>
|
yz