chore(wms/order): 删除订单模块冗余的页面和组件文件
This commit is contained in:
@@ -1,231 +0,0 @@
|
||||
<template>
|
||||
<div class="current-situation-area">
|
||||
<el-row :gutter="20" v-if="mode === 'normal'">
|
||||
<!-- 订单所需的产品统计 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="situation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>订单所需的产品统计</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="orderProductStatistics" size="small" height="320"
|
||||
v-loading="!orderProductStatistics.length">
|
||||
<el-table-column prop="productName" label="产品名称" width="120" />
|
||||
<el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
|
||||
<el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
|
||||
<el-table-column prop="stockGap" label="库存缺口" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span :class="getStockGapClass(scope.row.stockGap)">
|
||||
{{ scope.row.stockGap }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
|
||||
</KLPTable>
|
||||
<div v-if="!orderProductStatistics.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 根据参数计算的原料需求 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="situation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>参数原料需求</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="productMaterialRequirements" size="small" height="320"
|
||||
v-loading="!productMaterialRequirements.length">
|
||||
<el-table-column prop="productName" label="产品" width="100" />
|
||||
<el-table-column prop="materialName" label="原料" width="100" />
|
||||
<el-table-column prop="requiredQuantity" label="需求数量" width="80" />
|
||||
<el-table-column prop="currentStockQuantity" label="库存" width="60" />
|
||||
<el-table-column prop="inTransitQuantity" label="在途" width="60" />
|
||||
<el-table-column prop="stockGap" label="缺口" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span :class="getStockGapClass(scope.row.stockGap)">
|
||||
{{ scope.row.stockGap }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
<div v-if="!productMaterialRequirements.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 原料库存和需求情况 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="situation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>原料库存情况</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
|
||||
<el-table-column prop="materialName" label="原料名称" width="120" />
|
||||
<el-table-column prop="currentStockQuantity" label="库存" width="60" />
|
||||
<el-table-column prop="inTransitQuantity" label="在途" width="60" />
|
||||
<el-table-column prop="totalRequiredQuantity" label="需求" width="60" />
|
||||
<el-table-column prop="stockGap" label="缺口" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span :class="getStockGapClass(scope.row.stockGap)">
|
||||
{{ scope.row.stockGap }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="stockStatus" label="状态" width="60">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getStockStatusType(scope.row.stockStatus)" size="mini">
|
||||
{{ scope.row.stockStatus }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
<div v-if="!rawMaterialInventory.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="current-situation-area-mini" v-else>
|
||||
<el-card shadow="hover" class="situation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>订单所需的产品统计</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
|
||||
<el-table-column prop="productName" label="产品名称" />
|
||||
<el-table-column prop="orderDemandQuantity" label="需求数量" />
|
||||
<el-table-column prop="currentStockQuantity" label="库存数量" />
|
||||
<el-table-column prop="stockGap" label="库存缺口">
|
||||
<template slot-scope="scope">
|
||||
<span :class="getStockGapClass(scope.row.stockGap)">
|
||||
{{ scope.row.stockGap }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="relatedOrderCount" label="相关订单" />
|
||||
</KLPTable>
|
||||
<div v-if="!orderProductStatistics.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CurrentSituationArea',
|
||||
props: {
|
||||
currentSituationArea: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderProductStatistics() {
|
||||
return this.currentSituationArea.orderProductStatistics || []
|
||||
},
|
||||
productMaterialRequirements() {
|
||||
return this.currentSituationArea.productMaterialRequirements || []
|
||||
},
|
||||
rawMaterialInventory() {
|
||||
return this.currentSituationArea.rawMaterialInventory || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStockGapClass(stockGap) {
|
||||
if (stockGap > 0) {
|
||||
return 'text-danger'
|
||||
} else if (stockGap === 0) {
|
||||
return 'text-success'
|
||||
} else {
|
||||
return 'text-warning'
|
||||
}
|
||||
},
|
||||
getStockStatusType(status) {
|
||||
switch (status) {
|
||||
case '充足':
|
||||
return 'success'
|
||||
case '不足':
|
||||
return 'warning'
|
||||
case '紧急':
|
||||
return 'danger'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.current-situation-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.situation-card {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #67c23a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #e6a23c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.empty-data i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-data p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div class="customer-cluster">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">客户群体聚类分析</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'CustomerCluster',
|
||||
props: {
|
||||
customerCluster: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartInstance: null,
|
||||
chartOptions: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
return `客户名称: ${params.data[2]}<br />购买频次: ${params.data[0]}<br />客单价: ${params.data[1]}`
|
||||
}
|
||||
},
|
||||
xAxis: { name: '购买频次' },
|
||||
yAxis: { name: '客单价' },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 10,
|
||||
type: 'scatter',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
customerCluster: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
const chartDom = this.$refs.chart
|
||||
if (!chartDom) return
|
||||
this.chartInstance = echarts.init(chartDom)
|
||||
this.updateChart()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
updateChart () {
|
||||
if (!this.chartInstance) return
|
||||
// 格式化数据
|
||||
const chartData = this.customerCluster.map(item => [item.purchaseFreq, item.avgOrderAmount, item.customerName])
|
||||
this.chartOptions.series[0].data = chartData
|
||||
this.chartInstance.setOption(this.chartOptions)
|
||||
},
|
||||
handleResize () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-cluster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'CustomerRegion',
|
||||
props: {
|
||||
customerData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
customerData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.$refs.chart) return
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
const option = {
|
||||
title: {
|
||||
text: '客户区域分布',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
data: this.customerData.map(item => item.region)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '客户数量',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.customerData.map(item => ({
|
||||
name: item.region,
|
||||
value: item.customerCount
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'MaterialAnalysis',
|
||||
props: {
|
||||
materialData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
categories: [],
|
||||
usageFrequency: [],
|
||||
stockQuantity: [],
|
||||
purchaseCycle: []
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
materialData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.$refs.chart) return
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
const option = {
|
||||
title: {
|
||||
text: '物料使用分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['使用频率', '库存量', '采购周期'],
|
||||
top: 30
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.materialData.categories
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量/频率',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '采购周期(天)',
|
||||
position: 'right'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '使用频率',
|
||||
type: 'bar',
|
||||
data: this.materialData.usageFrequency
|
||||
},
|
||||
{
|
||||
name: '库存量',
|
||||
type: 'bar',
|
||||
data: this.materialData.stockQuantity
|
||||
},
|
||||
{
|
||||
name: '采购周期',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: this.materialData.purchaseCycle
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
/* background-color: #ffffff; */
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
/* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); */
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div class="completion-chart">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">订单完成率</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'OrderCompletion',
|
||||
props: {
|
||||
completionRate: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notRate:0,
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
completionRate: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
const chartDom = this.$refs.chart
|
||||
if (!chartDom) return
|
||||
this.chartInstance = echarts.init(chartDom)
|
||||
this.updateChart()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
updateChart () {
|
||||
if (!this.chartInstance) return
|
||||
this.notRate = 100 - this.completionRate
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c}%'
|
||||
},
|
||||
legend: {
|
||||
top: '8%',
|
||||
left: 'center',
|
||||
data: ['完成率', '未完成']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '订单完成率',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
center: ['50%', '55%'],
|
||||
data: [
|
||||
{value: this.completionRate, name: '已完成'},
|
||||
{value: this.notRate, name: '未完成'}
|
||||
],
|
||||
label: {
|
||||
formatter: '{b}: {c}%',
|
||||
fontSize: 14,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option)
|
||||
},
|
||||
handleResize () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.completion-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover" class="order-material-analysis">
|
||||
<div slot="header" class="card-header">订单物料分析</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'OrderMaterialAnalysis',
|
||||
props: {
|
||||
materialInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
categories: [],
|
||||
usageFrequency: [],
|
||||
stockQuantity: [],
|
||||
bundleRate: [],
|
||||
purchaseCycle: [],
|
||||
yAxisUsageMax: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
materialInfo: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart)
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
this.chartInstance = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.chartInstance) {
|
||||
this.chartInstance = echarts.init(this.$refs.chart)
|
||||
}
|
||||
this.updateChart()
|
||||
window.addEventListener('resize', this.resizeChart)
|
||||
},
|
||||
updateChart() {
|
||||
if (!this.chartInstance) return
|
||||
const info = this.materialInfo
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['使用频次', '库存量', '捆绑率', '采购周期'],
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: info.categories,
|
||||
axisTick: { alignWithLabel: true }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
min: 0,
|
||||
max: info.yAxisUsageMax,
|
||||
interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#3a85ff' } },
|
||||
axisLabel: { formatter: '{value}' }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '百分比',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
position: 'right',
|
||||
axisLine: { lineStyle: { color: '#ffb300' } },
|
||||
axisLabel: { formatter: '{value}%'}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: info.usageFrequency,
|
||||
itemStyle: { color: '#3a85ff' }
|
||||
},
|
||||
{
|
||||
name: '库存量',
|
||||
type: 'bar',
|
||||
data: info.stockQuantity,
|
||||
itemStyle: { color: '#52c41a' }
|
||||
},
|
||||
{
|
||||
name: '捆绑率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: info.bundleRate,
|
||||
lineStyle: { color: '#ffc107', width: 2 },
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
},
|
||||
{
|
||||
name: '采购周期',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: info.purchaseCycle,
|
||||
lineStyle: { color: '#ff5722', width: 2 },
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option, { notMerge: true })
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-material-analysis {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
min-height: 280px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="order-summary">
|
||||
<div class="summary-container">
|
||||
<!-- 总订单数 -->
|
||||
<div class="summary-box total-orders">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">总订单数</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.totalOrderCount.toLocaleString() }}</strong>
|
||||
<span class="growth">
|
||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
{{ dataInfo.totalOrderCountGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg blue">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#2f86f6">
|
||||
<path d="M7 18c-1.1 0-2-.9-2-2s.9-2 2-2h10v-4H7V7H5v3c0 1.1.9 2 2 2v6z"></path>
|
||||
<circle cx="18" cy="18" r="2"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月完成订单 -->
|
||||
<div class="summary-box completed-orders">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">本月完成订单</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.monthFinishedOrderCount.toLocaleString() }}</strong>
|
||||
<span class="growth">
|
||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
{{ dataInfo.monthFinishedOrderCountGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg green">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#38c172">
|
||||
<polyline points="20 6 9 17 4 12" stroke="#38c172" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单完成度 -->
|
||||
<div class="summary-box completion-rate">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">订单完成度</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.finishedRate.toFixed(1) }}%</strong>
|
||||
<span class="growth">
|
||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
{{ dataInfo.finishedRateGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg yellow">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#f6bb42">
|
||||
<path d="M4 12h16M4 12a8 8 0 0116 0M12 4v8l4 4" stroke="#f6bb42" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'OrderSummary',
|
||||
props: {
|
||||
dataInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
totalOrderCount: 0,
|
||||
monthFinishedOrderCount: 0,
|
||||
finishedRate: 0,
|
||||
totalOrderCountGrowthRate: 0,
|
||||
monthFinishedOrderCountGrowthRate: 0,
|
||||
finishedRateGrowthRate: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-summary {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 15px; /* 卡片之间间距 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-box {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 30px;
|
||||
border-radius: 16px;
|
||||
/* box-shadow: 0 6px 20px rgba(31, 47, 70, 0.08); */
|
||||
cursor: default;
|
||||
/* background: #fff; */
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
min-width: 0; /* 防止子元素过大撑破flex */
|
||||
}
|
||||
|
||||
.summary-box:hover {
|
||||
box-shadow: 0 10px 32px rgba(31, 47, 70, 0.14);
|
||||
}
|
||||
|
||||
.content-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 14px;
|
||||
color: #5a5a5a;
|
||||
margin-bottom: 6px;
|
||||
user-select: text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
user-select: text;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.summary-value strong {
|
||||
margin-right: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.growth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #38c172;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
margin-right: 4px;
|
||||
stroke: #38c172;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.icon-bg {
|
||||
flex-shrink: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
/* background-color: rgba(0, 0, 0, 0.05); */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
|
||||
}
|
||||
|
||||
.total-orders {
|
||||
background: linear-gradient(135deg, #d5e7ff 0%, #ffffff 100%);
|
||||
color: #0d3b73;
|
||||
}
|
||||
|
||||
.total-orders .icon-bg {
|
||||
background-color: rgba(47, 134, 246, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
|
||||
}
|
||||
|
||||
.completed-orders {
|
||||
background: linear-gradient(135deg, #e7f5e8 0%, #ffffff 100%);
|
||||
color: #1f6d28;
|
||||
}
|
||||
|
||||
.completed-orders .icon-bg {
|
||||
background-color: rgba(56, 193, 114, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(56, 193, 114, 0.25);
|
||||
}
|
||||
|
||||
.completion-rate {
|
||||
background: linear-gradient(135deg, #fff6e1 0%, #ffffff 100%);
|
||||
color: #7a5a00;
|
||||
}
|
||||
|
||||
.completion-rate .icon-bg {
|
||||
background-color: rgba(246, 187, 66, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(246, 187, 66, 0.25);
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="innerValue"
|
||||
placeholder="请选择或搜索制造规范"
|
||||
clearable
|
||||
filterable
|
||||
remote
|
||||
:remote-method="handleRemoteSearch"
|
||||
:loading="loading"
|
||||
@change="handleSelectChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- 下拉选项：循环制造规范列表 -->
|
||||
<el-option
|
||||
v-for="item in mSpecList"
|
||||
:key="item.specId"
|
||||
:label="item.specName"
|
||||
:value="item.specId"
|
||||
/>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<el-option
|
||||
v-if="mSpecList.length === 0 && !loading"
|
||||
value=""
|
||||
disabled
|
||||
>
|
||||
暂无匹配制造规范
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||||
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
|
||||
|
||||
export default {
|
||||
name: 'MSpecSelect',
|
||||
// 1. 接收外部传入的v-model值（必加，双向绑定的入口）
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, undefined], // 支持字符串/数字ID（兼容不同后端返回类型）
|
||||
default: undefined // 初始值默认undefined（未选择状态）
|
||||
},
|
||||
// 可选：允许外部自定义搜索参数的字段名（增强组件复用性）
|
||||
searchKey: {
|
||||
type: String,
|
||||
default: 'specName' // 默认为“规范名称”搜索（对应接口的mSpecName参数）
|
||||
},
|
||||
// 可选：每页加载数量（外部可配置）
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mSpecList: [], // 制造规范列表数据
|
||||
loading: false, // 远程请求加载状态
|
||||
queryParams: {
|
||||
// 搜索参数：默认用specName（可通过searchKey自定义）
|
||||
specName: undefined,
|
||||
pageNum: 1, // 分页：当前页码
|
||||
pageSize: this.pageSize // 分页：每页条数（关联props的pageSize）
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 2. 核心：内部值与外部value的双向同步桥梁
|
||||
innerValue: {
|
||||
get() {
|
||||
// 外部传入的value -> 内部el-select的v-model值（初始回显）
|
||||
return this.value
|
||||
},
|
||||
set(newVal) {
|
||||
// 内部el-select值变化时 -> 触发input事件，同步给外部v-model
|
||||
this.$emit('input', newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 3. 监听外部value变化（如父组件直接修改v-model值），同步更新内部选择状态
|
||||
value(newVal) {
|
||||
// 仅当外部值与内部值不一致时更新（避免死循环）
|
||||
if (newVal !== this.innerValue) {
|
||||
this.innerValue = newVal
|
||||
}
|
||||
},
|
||||
// 监听searchKey变化（外部修改搜索字段时，重置搜索参数）
|
||||
searchKey(newKey) {
|
||||
// 清空原搜索字段的值（避免残留旧字段的搜索条件）
|
||||
this.queryParams[this.searchKey] = undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化：加载默认制造规范列表
|
||||
this.getList()
|
||||
// 初始化防抖函数（300ms延迟，可根据需求调整）
|
||||
this.debouncedSearch = debounce(this.getList, 300)
|
||||
},
|
||||
methods: {
|
||||
// 4. 远程搜索逻辑（输入时触发）
|
||||
handleRemoteSearch(query) {
|
||||
// 根据searchKey设置搜索参数（如：specName=query）
|
||||
this.queryParams[this.searchKey] = query.trim() // 去除首尾空格，避免无效搜索
|
||||
this.queryParams.pageNum = 1 // 重置页码为1（新搜索从第一页开始）
|
||||
this.debouncedSearch() // 防抖后执行搜索
|
||||
},
|
||||
|
||||
// 5. 获取制造规范列表（远程接口请求）
|
||||
getList() {
|
||||
this.loading = true // 开始加载：显示加载动画
|
||||
listManufacturingSpec(this.queryParams)
|
||||
.then(res => {
|
||||
// 接口成功：赋值列表数据（兼容res.rows或res.data.rows，避免接口返回格式差异）
|
||||
this.mSpecList = res.rows || res.data?.rows || []
|
||||
})
|
||||
.catch(() => {
|
||||
// 接口失败：清空列表，避免旧数据残留
|
||||
this.mSpecList = []
|
||||
this.$message.error('获取制造规范列表失败，请重试') // 错误提示（优化用户体验）
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false // 结束加载：隐藏加载动画
|
||||
})
|
||||
},
|
||||
|
||||
// 6. 选择变化时触发（返回完整订单项，方便父组件使用）
|
||||
handleSelectChange(mSpecId) {
|
||||
// 根据选中的ID，找到对应的完整制造规范对象
|
||||
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
|
||||
// 触发change事件：返回完整项（父组件可通过@change接收）
|
||||
this.$emit('change', selectedItem)
|
||||
// 可选：触发input事件后，额外触发change事件（符合常规组件使用习惯）
|
||||
this.$emit('update:value', selectedItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,345 +0,0 @@
|
||||
<template>
|
||||
<div class="performance-area">
|
||||
<el-row :gutter="20" v-if="mode === 'normal'">
|
||||
<!-- 产品销售情况 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="performance-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>产品销售情况</span>
|
||||
</div>
|
||||
<div class="chart-container" ref="productSalesChart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 销售人员业绩 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="performance-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>销售人员业绩</span>
|
||||
</div>
|
||||
<div class="chart-container" ref="salesPersonChart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 总订单数量统计 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="performance-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>总订单数量统计</span>
|
||||
</div>
|
||||
<div class="stats-container">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.totalOrderCount || 0 }}</div>
|
||||
<div class="stat-label">总订单数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.completedOrderCount || 0 }}</div>
|
||||
<div class="stat-label">已完成</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.inProgressOrderCount || 0 }}</div>
|
||||
<div class="stat-label">进行中</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.pendingOrderCount || 0 }}</div>
|
||||
<div class="stat-label">待处理</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.monthlyNewOrderCount || 0 }}</div>
|
||||
<div class="stat-label">本月新增</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ ((orderCountStatistics.completionRate || 0) * 100).toFixed(1) }}%</div>
|
||||
<div class="stat-label">完成率</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="performance-area-mini" v-else>
|
||||
<!-- <el-tabs tab-position="left"> -->
|
||||
<!-- <el-tab-pane label="产品销售情况" name="productSales">
|
||||
<div class="chart-container" ref="productSalesChart" style="width: 100%;"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="销售人员业绩" name="salesPerson">
|
||||
<div class="chart-container" ref="salesPersonChart" style="width: 100%;"></div>
|
||||
</el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="总订单数量统计" name="orderCount"> -->
|
||||
<div class="stats-container">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.totalOrderCount || 0 }}</div>
|
||||
<div class="stat-label">总订单数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.completedOrderCount || 0 }}</div>
|
||||
<div class="stat-label">已完成</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.inProgressOrderCount || 0 }}</div>
|
||||
<div class="stat-label">进行中</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.pendingOrderCount || 0 }}</div>
|
||||
<div class="stat-label">待处理</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ orderCountStatistics.monthlyNewOrderCount || 0 }}</div>
|
||||
<div class="stat-label">本月新增</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ ((orderCountStatistics.completionRate || 0) * 100).toFixed(1) }}%</div>
|
||||
<div class="stat-label">完成率</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-tab-pane> -->
|
||||
<!-- </el-tabs> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'PerformanceArea',
|
||||
props: {
|
||||
performanceArea: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productSalesChart: null,
|
||||
salesPersonChart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
productSalesPerformance() {
|
||||
return this.performanceArea.productSalesPerformance || []
|
||||
},
|
||||
salesPersonPerformance() {
|
||||
return this.performanceArea.salesPersonPerformance || []
|
||||
},
|
||||
orderCountStatistics() {
|
||||
return this.performanceArea.orderCountStatistics || {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
performanceArea: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
this.renderCharts()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderCharts()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.productSalesChart) {
|
||||
this.productSalesChart.dispose()
|
||||
}
|
||||
if (this.salesPersonChart) {
|
||||
this.salesPersonChart.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
renderCharts() {
|
||||
this.renderProductSalesChart()
|
||||
this.renderSalesPersonChart()
|
||||
},
|
||||
renderProductSalesChart() {
|
||||
const chartDom = this.$refs.productSalesChart
|
||||
if (!chartDom) return
|
||||
|
||||
if (!this.productSalesChart) {
|
||||
this.productSalesChart = echarts.init(chartDom)
|
||||
}
|
||||
|
||||
if (!this.productSalesPerformance.length) {
|
||||
// 显示空数据状态
|
||||
this.productSalesChart.setOption({
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.productSalesPerformance.map(item => item.productName),
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售数量',
|
||||
type: 'bar',
|
||||
data: this.productSalesPerformance.map(item => item.salesQuantity),
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.productSalesChart.setOption(option)
|
||||
},
|
||||
renderSalesPersonChart() {
|
||||
const chartDom = this.$refs.salesPersonChart
|
||||
if (!chartDom) return
|
||||
|
||||
if (!this.salesPersonChart) {
|
||||
this.salesPersonChart = echarts.init(chartDom)
|
||||
}
|
||||
|
||||
if (!this.salesPersonPerformance.length) {
|
||||
// 显示空数据状态
|
||||
this.salesPersonChart.setOption({
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售业绩',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.salesPersonPerformance.map(item => ({
|
||||
name: item.salesPersonName,
|
||||
value: item.salesAmount
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.salesPersonChart.setOption(option)
|
||||
},
|
||||
handleResize() {
|
||||
if (this.productSalesChart) {
|
||||
this.productSalesChart.resize()
|
||||
}
|
||||
if (this.salesPersonChart) {
|
||||
this.salesPersonChart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.performance-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 320px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #687b98;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<div class="product-sales-chart">
|
||||
<el-card shadow="hover">
|
||||
<div v-if="!productSales || productSales.length === 0" class="no-data-placeholder">
|
||||
暂无产品销量数据
|
||||
</div>
|
||||
<div v-show="productSales && productSales.length > 0" ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'ProductSales',
|
||||
props: {
|
||||
productSales: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
productSales: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
// Use nextTick to ensure the DOM is updated before rendering the chart
|
||||
this.$nextTick(() => {
|
||||
this.renderChart(newVal)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// The watcher handles the initial render.
|
||||
// Add resize listener.
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// Dispose chart instance and remove listener
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
this.chartInstance = null
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
renderChart(data) {
|
||||
const chartDom = this.$refs.chart
|
||||
if (!chartDom) return
|
||||
|
||||
// Initialize chart instance if it doesn't exist
|
||||
if (!this.chartInstance) {
|
||||
this.chartInstance = echarts.init(chartDom)
|
||||
}
|
||||
|
||||
// Resize the chart to fit the container, especially after v-show makes it visible
|
||||
this.chartInstance.resize()
|
||||
|
||||
const productNames = data.map(item => item.productName)
|
||||
const salesData = data.map(item => item.totalSales)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '产品销量排行',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: '{b}: {c}件'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: productNames,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: salesData,
|
||||
barWidth: '60%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option, true) // Use true to clear previous canvas
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-sales-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.no-data-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div class="recommendation-area">
|
||||
<el-row :gutter="20" v-if="mode === 'normal'">
|
||||
<!-- 订单维度推荐 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="recommendation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>订单维度推荐</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="orderRecommendations" size="small" height="320" v-loading="!orderRecommendations.length">
|
||||
<el-table-column prop="orderCode" label="订单编号" width="120" />
|
||||
<el-table-column prop="customerName" label="客户名称" width="100" />
|
||||
<el-table-column prop="orderStatus" label="订单状态" width="80" />
|
||||
<el-table-column prop="priority" label="优先级" width="60">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getPriorityType(scope.row.priority)" size="mini">
|
||||
{{ scope.row.priority }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="suggestedAction" label="建议操作" width="100" />
|
||||
<el-table-column prop="estimatedCompletionTime" label="预计完成时间" width="120" />
|
||||
</KLPTable>
|
||||
<div v-if="!orderRecommendations.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无推荐数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 原料维度推荐 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="recommendation-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>原料维度推荐</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
|
||||
<el-table-column prop="materialName" label="原料名称" width="120" />
|
||||
<el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
|
||||
<el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="urgencyLevel" label="紧急程度" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
|
||||
{{ scope.row.urgencyLevel }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="suggestedAction" label="建议操作" width="100" />
|
||||
<el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
|
||||
</KLPTable>
|
||||
<div v-if="!materialRecommendations.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无推荐数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="recommendation-area-mini" v-else>
|
||||
<el-card shadow="hover" class="recommendation-card">
|
||||
<div class="table-container">
|
||||
<KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
|
||||
<el-table-column prop="materialName" label="原料名称" width="120" />
|
||||
<el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
|
||||
<el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="urgencyLevel" label="紧急程度" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
|
||||
{{ scope.row.urgencyLevel }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="suggestedAction" label="建议操作" width="100" />
|
||||
<el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
|
||||
</KLPTable>
|
||||
<div v-if="!materialRecommendations.length" class="empty-data">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<p>暂无推荐数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RecommendationArea',
|
||||
props: {
|
||||
recommendationArea: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderRecommendations() {
|
||||
return this.recommendationArea.orderRecommendations || []
|
||||
},
|
||||
materialRecommendations() {
|
||||
return this.recommendationArea.materialRecommendations || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPriorityType(priority) {
|
||||
switch (priority) {
|
||||
case '高':
|
||||
return 'danger'
|
||||
case '中':
|
||||
return 'warning'
|
||||
case '低':
|
||||
return 'success'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
},
|
||||
getUrgencyType(urgency) {
|
||||
switch (urgency) {
|
||||
case '紧急':
|
||||
return 'danger'
|
||||
case '一般':
|
||||
return 'warning'
|
||||
case '低':
|
||||
return 'success'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.recommendation-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recommendation-card {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 320px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.empty-data i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-data p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,417 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-input
|
||||
v-model="queryParams.level"
|
||||
placeholder="请输入客户等级"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="queryParams.source" placeholder="请选择客户来源" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_from"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
|
||||
<el-table-column label="客户名称" align="center" prop="name" />
|
||||
<el-table-column label="手机" align="center" prop="mobile" />
|
||||
<el-table-column label="电话" align="center" prop="telephone" />
|
||||
<el-table-column label="QQ" align="center" prop="qq" />
|
||||
<el-table-column label="微信" align="center" prop="wechat" />
|
||||
<el-table-column label="邮箱" align="center" prop="email" />
|
||||
<el-table-column label="地区编号" align="center" prop="areaId" />
|
||||
<el-table-column label="详细地址" align="center" prop="detailAddress" />
|
||||
<el-table-column label="客户等级" align="center" prop="level" />
|
||||
<el-table-column label="客户来源" align="center" prop="source">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_from" :value="scope.row.source"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</KLPTable>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 客户对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地区编号" prop="areaId">
|
||||
<el-input v-model="form.areaId" placeholder="请输入地区编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-input v-model="form.level" placeholder="请输入客户等级" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="form.source" placeholder="请选择客户来源">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_from"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
|
||||
import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
dicts: ['customer_from'],
|
||||
components: {
|
||||
KLPTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customColumns: [
|
||||
{
|
||||
label: '客户名称',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '手机',
|
||||
prop: 'mobile'
|
||||
},
|
||||
{
|
||||
label: '电话',
|
||||
prop: 'telephone'
|
||||
},
|
||||
{
|
||||
label: 'QQ',
|
||||
prop: 'qq'
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
prop: 'wechat'
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email'
|
||||
},
|
||||
{
|
||||
label: '地区编号',
|
||||
prop: 'areaId'
|
||||
},
|
||||
{
|
||||
label: '详细地址',
|
||||
prop: 'detailAddress',
|
||||
eclipse: true
|
||||
},
|
||||
{
|
||||
label: '客户等级',
|
||||
prop: 'level'
|
||||
},
|
||||
{
|
||||
label: '客户来源',
|
||||
prop: 'source'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
render: (h, row) => {
|
||||
const actions = [];
|
||||
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
|
||||
actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
|
||||
return actions;
|
||||
}
|
||||
}
|
||||
],
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 客户表格数据
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
name: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 客户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listCustomer(this.queryParams).then(response => {
|
||||
this.customerList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
customerId: undefined,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.customerId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 客户";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const customerId = row.customerId || this.ids
|
||||
getCustomer(customerId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 客户";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.customerId != null) {
|
||||
updateCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const customerIds = row.customerId || this.ids;
|
||||
this.$modal.confirm('是否确认删除CRM 客户编号为"' + customerIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delCustomer(customerIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/customer/export', {
|
||||
...this.queryParams
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="order-analysis-dashboard"
|
||||
v-loading="loading"
|
||||
>
|
||||
<!-- 顶部操作栏：刷新和定时刷新设置按钮 -->
|
||||
<el-row :gutter="20" class="top-row" style="margin-bottom: 0;">
|
||||
<el-col :span="24" style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px;">
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
|
||||
<el-button icon="el-icon-setting" style="margin-left: 10px;" @click="drawerVisible = true">定时刷新设置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 业绩区 -->
|
||||
<el-row :gutter="20" class="section-row">
|
||||
<el-col :span="24">
|
||||
<div class="section-title">
|
||||
<h2>业绩区</h2>
|
||||
<p>产品销售情况、销售人员业绩、总订单数量</p>
|
||||
</div>
|
||||
<PerformanceArea :performance-area="dashboardData.performanceArea" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 当前情况区 -->
|
||||
<el-row :gutter="20" class="section-row">
|
||||
<el-col :span="24">
|
||||
<div class="section-title">
|
||||
<h2>情况区</h2>
|
||||
<p>订单所需的产品统计、根据参数计算的原料需求、原料库存和需求情况</p>
|
||||
</div>
|
||||
<CurrentSituationArea :current-situation-area="dashboardData.currentSituationArea" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 推荐区 -->
|
||||
<el-row :gutter="20" class="section-row">
|
||||
<el-col :span="24">
|
||||
<div class="section-title">
|
||||
<h2>推荐区</h2>
|
||||
<p>订单维度推荐、原料维度推荐</p>
|
||||
</div>
|
||||
<RecommendationArea :recommendation-area="dashboardData.recommendationArea" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 定时刷新设置抽屉 -->
|
||||
<el-drawer
|
||||
title="定时刷新设置"
|
||||
:visible.sync="drawerVisible"
|
||||
direction="rtl"
|
||||
size="350px"
|
||||
>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="启用定时刷新">
|
||||
<el-switch v-model="autoRefresh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="刷新间隔(秒)">
|
||||
<el-input-number :controls=false controls-position="right" v-model="refreshInterval" :min="5" :max="3600" :step="1" :disabled="!autoRefresh" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveRefreshSetting">保存</el-button>
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerformanceArea from './components/PerformanceArea.vue'
|
||||
import CurrentSituationArea from './components/CurrentSituationArea.vue'
|
||||
import RecommendationArea from './components/RecommendationArea.vue'
|
||||
import { getDashboardData } from '@/api/wms/order'
|
||||
|
||||
export default {
|
||||
name: 'OrderAnalysisDashboard',
|
||||
components: {
|
||||
PerformanceArea,
|
||||
CurrentSituationArea,
|
||||
RecommendationArea,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 新的数据结构
|
||||
dashboardData: {
|
||||
performanceArea: {},
|
||||
currentSituationArea: {},
|
||||
recommendationArea: {}
|
||||
},
|
||||
// 新增定时刷新相关数据
|
||||
drawerVisible: false,
|
||||
autoRefresh: false,
|
||||
refreshInterval: 30, // 默认30秒
|
||||
refreshTimer: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchAllData()
|
||||
this.loadRefreshSetting()
|
||||
this.startAutoRefresh()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearAutoRefresh()
|
||||
},
|
||||
methods: {
|
||||
async fetchAllData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getDashboardData()
|
||||
const data = res
|
||||
|
||||
// 更新新的数据结构
|
||||
this.dashboardData = {
|
||||
performanceArea: data.performanceArea || {},
|
||||
currentSituationArea: data.currentSituationArea || {},
|
||||
recommendationArea: data.recommendationArea || {}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取数据看板数据失败:', error)
|
||||
this.$message.error('获取数据失败，请稍后重试')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleRefresh() {
|
||||
this.fetchAllData()
|
||||
},
|
||||
// 定时刷新相关
|
||||
startAutoRefresh() {
|
||||
this.clearAutoRefresh()
|
||||
if (this.autoRefresh) {
|
||||
this.refreshTimer = setInterval(() => {
|
||||
this.fetchAllData()
|
||||
}, this.refreshInterval * 1000)
|
||||
}
|
||||
},
|
||||
clearAutoRefresh() {
|
||||
if (this.refreshTimer) {
|
||||
clearInterval(this.refreshTimer)
|
||||
this.refreshTimer = null
|
||||
}
|
||||
},
|
||||
saveRefreshSetting() {
|
||||
// 可持久化到localStorage
|
||||
localStorage.setItem('orderDashboardAutoRefresh', JSON.stringify({
|
||||
autoRefresh: this.autoRefresh,
|
||||
refreshInterval: this.refreshInterval
|
||||
}))
|
||||
this.drawerVisible = false
|
||||
this.startAutoRefresh()
|
||||
},
|
||||
loadRefreshSetting() {
|
||||
const setting = localStorage.getItem('orderDashboardAutoRefresh')
|
||||
if (setting) {
|
||||
const { autoRefresh, refreshInterval } = JSON.parse(setting)
|
||||
this.autoRefresh = autoRefresh
|
||||
this.refreshInterval = refreshInterval
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
autoRefresh(val) {
|
||||
if (!val) {
|
||||
this.clearAutoRefresh()
|
||||
}
|
||||
},
|
||||
refreshInterval(val) {
|
||||
if (this.autoRefresh) {
|
||||
this.startAutoRefresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-analysis-dashboard {
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.top-row,
|
||||
.chart-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-row > .el-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<OrderPage :isPre="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderPage from './panels/orderPage.vue';
|
||||
|
||||
export default {
|
||||
name: 'Order',
|
||||
components: {
|
||||
OrderPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,396 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 订单信息展示区域 -->
|
||||
<!-- <el-descriptions title="订单信息" class="margin-top mb8" :column="4" size="medium" border v-if="orderInfo">
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
订单编号
|
||||
</template>
|
||||
{{ orderInfo.orderCode }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
订单状态
|
||||
</template>
|
||||
<dict-tag :options="dict.type.order_status" :value="orderInfo.orderStatus" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5" v-if="editable">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="!canEdit"
|
||||
@click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="editable">
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single || !canEdit"
|
||||
@click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="editable">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || !canEdit"
|
||||
@click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="editable">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
|
||||
<!-- 含税部分 -->
|
||||
<el-col :span="8">
|
||||
<span>含税金额：</span>
|
||||
<span style="margin-right: 10px;">{{ orderInfo.taxAmount }}</span>
|
||||
<span style="margin-right: 10px;">-</span>
|
||||
<span style="margin-right: 10px;">{{ actualAmount }}</span>
|
||||
<span style="margin-right: 10px;">=</span>
|
||||
<span style="color: red; margin-right: 10px;">{{ amountDifference }}</span>
|
||||
</el-col>
|
||||
|
||||
<!-- 无税部分 -->
|
||||
<el-col :span="8">
|
||||
<span>无税金额：</span>
|
||||
<span style="margin-right: 10px;">{{ orderInfo.noTaxAmount }}</span>
|
||||
<span style="margin-right: 10px;">-</span>
|
||||
<span style="margin-right: 10px;">{{ noTaxAmount }}</span>
|
||||
<span style="margin-right: 10px;">=</span>
|
||||
<span style="color: red; margin-right: 10px;">{{ noTaxAmountDifference }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<KLPTable v-loading="loading" :data="orderDetailList">
|
||||
<el-table-column label="产品" align="center">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo :product-id="scope.row.productId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品数量" align="center" prop="quantity" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="含税单价" align="center" prop="taxPrice" />
|
||||
<el-table-column label="无税单价" align="center" prop="noTaxPrice" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="!canEdit"
|
||||
@click="handleUpdate(scope.row)">修改</el-button>
|
||||
<!-- <el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button> -->
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="!canEdit"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
|
||||
<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" /> -->
|
||||
|
||||
<!-- 添加或修改订单明细对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<!-- <el-form-item label="订单ID" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单ID" :disabled="true" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<ProductSelect :can-add="true" v-model="form.productId" placeholder="请选择产品" @change="onProductChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入产品数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="单位" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="含税单价" prop="taxPrice">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.taxPrice" placeholder="请输入含税单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无税单价" prop="noTaxPrice">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价"
|
||||
:min="0" :max="form.taxPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
|
||||
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit" />
|
||||
<div v-else-if="canEdit">
|
||||
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
|
||||
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
|
||||
<template #empty>
|
||||
<el-button @click="handleAddSpec" style="width: 100%;">新增产品规范</el-button>
|
||||
</template>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-else>
|
||||
暂无产品规范
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
|
||||
import { listProductSpecGroup } from "@/api/work/productSpecGroup";
|
||||
import { getOrder } from "@/api/wms/order";
|
||||
import ProductSelect from '@/components/KLPService/ProductSelect';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import { ProductInfo } from '@/components/KLPService';
|
||||
import ProductSpec from './spec.vue';
|
||||
import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
|
||||
|
||||
export default {
|
||||
name: "OrderDetailPanel",
|
||||
dicts: ['order_status'],
|
||||
props: {
|
||||
orderId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
ProductSpec,
|
||||
KLPTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buttonLoading: false,
|
||||
loading: true,
|
||||
ids: [],
|
||||
single: true,
|
||||
multiple: true,
|
||||
total: 0,
|
||||
orderDetailList: [],
|
||||
orderInfo: null, // 订单信息
|
||||
title: "",
|
||||
open: false,
|
||||
// 订单状态枚举
|
||||
EOrderStatus,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
orderId: this.orderId,
|
||||
productId: undefined,
|
||||
quantity: undefined,
|
||||
unit: undefined,
|
||||
},
|
||||
form: {
|
||||
orderId: this.orderId
|
||||
},
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "产品ID不能为空", trigger: "blur" }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: "产品数量不能为空", trigger: "blur" },
|
||||
{ pattern: /^[1-9]\d*$/, message: "产品数量必须为正整数", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
specDialogVisible: false,
|
||||
productSpecList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否可以编辑（订单状态为新建时才能编辑）
|
||||
canEdit() {
|
||||
return this.orderInfo && this.orderInfo.orderStatus === EOrderStatus.NEW;
|
||||
},
|
||||
actualAmount() {
|
||||
return this.orderDetailList?.reduce((total, item) => {
|
||||
return total + (item.taxPrice || 0) * (item.quantity || 0);
|
||||
}, 0) || 0;
|
||||
},
|
||||
amountDifference() {
|
||||
return ((this.orderInfo?.taxAmount || 0) - this.actualAmount);
|
||||
},
|
||||
noTaxAmount() {
|
||||
return this.orderDetailList?.reduce((total, item) => {
|
||||
return total + (item.noTaxPrice || 0) * (item.quantity || 0);
|
||||
}, 0) || 0;
|
||||
},
|
||||
noTaxAmountDifference() {
|
||||
return ((this.orderInfo?.noTaxAmount || 0) - this.noTaxAmount);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
orderId(newVal) {
|
||||
this.queryParams.orderId = newVal;
|
||||
this.form.orderId = newVal;
|
||||
this.getOrderInfo();
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrderInfo();
|
||||
listProductSpecGroup().then(response => {
|
||||
this.productSpecList = response.rows;
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取订单信息
|
||||
getOrderInfo() {
|
||||
if (this.orderId) {
|
||||
getOrder(this.orderId).then(response => {
|
||||
this.orderInfo = response.data;
|
||||
}).catch(() => {
|
||||
this.orderInfo = null;
|
||||
});
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOrderDetail(this.queryParams).then(response => {
|
||||
this.orderDetailList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
detailId: undefined,
|
||||
orderId: this.orderId,
|
||||
productId: undefined,
|
||||
quantity: undefined,
|
||||
taxPrice: undefined,
|
||||
noTaxPrice: undefined,
|
||||
unit: undefined,
|
||||
remark: undefined,
|
||||
delFlag: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
};
|
||||
this.resetForm && this.resetForm("form");
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
handleAdd() {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许新增明细");
|
||||
return;
|
||||
}
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加订单明细";
|
||||
},
|
||||
handleUpdate(row) {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许修改明细");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const detailId = row.detailId || this.ids
|
||||
getOrderDetail(detailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改订单明细";
|
||||
});
|
||||
},
|
||||
onProductChange(product) {
|
||||
if (product) {
|
||||
this.form.unit = product.unit;
|
||||
} else {
|
||||
this.form.unit = undefined;
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.detailId != null) {
|
||||
updateOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDelete(row) {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许删除明细");
|
||||
return;
|
||||
}
|
||||
const detailIds = row.detailId || this.ids;
|
||||
this.$modal && this.$modal.confirm('是否确认删除订单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delOrderDetail(detailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal && this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.download && this.download('wms/orderDetail/export', {
|
||||
...this.queryParams
|
||||
}, `orderDetail_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
handleSpec(row) {
|
||||
this.specDialogVisible = true;
|
||||
this.form = row;
|
||||
},
|
||||
handleChangeSpec(groupId) {
|
||||
// 确认更换
|
||||
this.$modal && this.$modal.confirm('是否确认更换产品规范？').then(() => {
|
||||
this.form.groupId = groupId;
|
||||
updateOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleAddSpec() {
|
||||
this.$router.push({
|
||||
path: '/production/pspec',
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-button--text {
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,573 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 左右布局容器 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧：使用klp-list组件（占6列） -->
|
||||
<el-col :span="6" style="display: table-cell;">
|
||||
<!-- 搜索表单 - 精简搜索项 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
|
||||
class="mb-4">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @change="handleQuery" />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
class="w-full">新增订单</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- klp-list组件 -->
|
||||
<klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleRowClick"
|
||||
info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
|
||||
<!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
|
||||
<template slot="info4" slot-scope="{ item }">
|
||||
<span class="info-value info-value--primary">
|
||||
{{ item.taxAmount }}元（含税）
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- info1 插槽：同理修改插槽语法 -->
|
||||
<template slot="info1" slot-scope="{ item }">
|
||||
<span class="info-value info-value--primary">
|
||||
{{ item.salesManager }}【{{ item.orderCode }}】
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
|
||||
<template slot="info2" slot-scope="{ item }">
|
||||
<dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
|
||||
</template>
|
||||
|
||||
<!-- actions 插槽：操作区 -->
|
||||
<template slot="actions" slot-scope="{ item }">
|
||||
<el-button
|
||||
size="mini"
|
||||
plain
|
||||
title="预订单确认"
|
||||
type="success"
|
||||
icon="el-icon-check"
|
||||
v-if="isPre"
|
||||
@click.stop="handleStartProduction(item)"
|
||||
/>
|
||||
<el-button
|
||||
size="mini"
|
||||
plain
|
||||
type="primary"
|
||||
icon="el-icon-s-operation"
|
||||
title="进入排产中心"
|
||||
@click.stop="goApsSchedule(item)"
|
||||
>
|
||||
排产
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
style="color: red"
|
||||
icon="el-icon-delete"
|
||||
@click.stop="handleDelete(item)"
|
||||
/>
|
||||
</template>
|
||||
</klp-list>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：详情区（占18列） -->
|
||||
<el-col :span="18">
|
||||
<div>
|
||||
<!-- 未选中行时显示提示 -->
|
||||
<div v-if="!selectedOrderId" class="empty-tip">
|
||||
<el-empty description="请从左侧选择一个订单查看详情" />
|
||||
</div>
|
||||
|
||||
<!-- 选中行时显示Tab详情 -->
|
||||
<div v-else>
|
||||
<!-- 订单详情操作区 -->
|
||||
<div class="order-detail-header">
|
||||
<div class="order-detail-title">
|
||||
当前订单：{{ form.orderCode || form.orderId }}
|
||||
</div>
|
||||
<div class="order-detail-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-magic-stick"
|
||||
:disabled="!form.orderId"
|
||||
@click="goApsOneKeySchedule"
|
||||
>
|
||||
排产
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab容器 -->
|
||||
<el-tabs v-loading="loading" v-model="activeTab" type="border-card" class="mt-2">
|
||||
<!-- 订单信息Tab -->
|
||||
<el-tab-pane label="订单信息" name="orderInfo">
|
||||
<el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
|
||||
<el-form-item label="订单ID" prop="orderId">
|
||||
<el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
|
||||
<el-button style="padding: -1;" slot="append" size="mini" type="text" icon="el-icon-document-copy"
|
||||
@click.stop="copyOrderId(form.orderId)"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="客户名称" prop="customerId">
|
||||
<customer-select style="width: 60%;" v-model="form.customerId" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="含税金额" prop="taxAmount">
|
||||
<el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00"
|
||||
precision="2" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||||
<el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00"
|
||||
precision="2" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单状态" prop="orderStatus" v-if="!isPre">
|
||||
<el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange"
|
||||
size="mini">
|
||||
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label"
|
||||
:value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 更新按钮 -->
|
||||
<el-form-item class="text-right">
|
||||
<el-button type="primary" size="mini" :loading="buttonLoading"
|
||||
@click="submitDetailForm">更新订单信息</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 订单详情Tab -->
|
||||
<el-tab-pane label="订单详情" name="orderDetail">
|
||||
<div class="mt-4">
|
||||
<OrderDetailPanel :orderId="selectedOrderId" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 新增订单弹窗 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="addForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customerId">
|
||||
<customer-select v-model="form.customerId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="含税金额" prop="taxAmount">
|
||||
<el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额"
|
||||
precision="2" :min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||||
<el-input-number :controls="false" v-model="form.noTaxAmount" placeholder="请输入无税金额" precision="2"
|
||||
:min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
|
||||
import OrderDetailPanel from './detail.vue';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
|
||||
import klpList from "@/components/KLPUI/KLPList/index.vue";
|
||||
|
||||
export default {
|
||||
name: "Order",
|
||||
components: { OrderDetailPanel, CustomerSelect, klpList },
|
||||
dicts: ['order_status'],
|
||||
props: {
|
||||
isPre: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderQueryStatus() {
|
||||
return this.isPre ? 0 : -1;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 订单状态枚举
|
||||
EOrderStatus,
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 列表加载遮罩
|
||||
loading: true,
|
||||
// 选中的订单ID集合
|
||||
selectedIds: {},
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 订单列表数据
|
||||
orderList: [],
|
||||
// 新增弹窗标题
|
||||
title: "",
|
||||
// 新增弹窗显示状态
|
||||
open: false,
|
||||
// 当前选中的订单ID（控制右侧详情显示）
|
||||
selectedOrderId: null,
|
||||
// 右侧激活的Tab
|
||||
activeTab: "orderDetail",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: undefined,
|
||||
remark: undefined,
|
||||
delFlag: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
},
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
orderCode: [
|
||||
{ required: true, message: "请输入订单编号", trigger: "blur" }
|
||||
],
|
||||
customerId: [
|
||||
{ required: true, message: "请选择客户名称", trigger: "change" }
|
||||
],
|
||||
salesManager: [
|
||||
{ required: true, message: "请输入销售经理", trigger: "blur" }
|
||||
],
|
||||
taxAmount: [
|
||||
{ required: true, message: "请输入含税金额", trigger: "blur" }
|
||||
],
|
||||
noTaxAmount: [
|
||||
{ required: true, message: "请输入无税金额", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询订单列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listByStatus(this.queryParams).then(response => {
|
||||
this.orderList = response.rows;
|
||||
this.total = response.total;
|
||||
|
||||
// 重置选中状态
|
||||
this.selectedIds = {};
|
||||
|
||||
// 如果之前选中的订单不在列表中了，清空选中状态
|
||||
if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 点击列表项加载详情 */
|
||||
handleRowClick(item) {
|
||||
this.selectedOrderId = item.orderId;
|
||||
this.loadOrderDetail(item.orderId);
|
||||
},
|
||||
|
||||
/** 加载订单详情 */
|
||||
loadOrderDetail(orderId) {
|
||||
this.buttonLoading = true;
|
||||
getOrder(orderId).then(response => {
|
||||
this.form = { ...response.data };
|
||||
this.form.taxAmount = this.form.taxAmount || 0;
|
||||
this.form.noTaxAmount = this.form.noTaxAmount || 0;
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("加载订单详情失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 订单状态变更 */
|
||||
handleOrderStatusChange() {
|
||||
updateOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("修改失败");
|
||||
this.loadOrderDetail(this.selectedOrderId); // 失败后重新加载原数据
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消新增 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.resetForm("addForm");
|
||||
this.form = {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: this.orderQueryStatus,
|
||||
remark: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
};
|
||||
},
|
||||
|
||||
/** 搜索 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 重置搜索 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 重置表单 */
|
||||
resetForm(formRef) {
|
||||
if (this.$refs[formRef]) {
|
||||
this.$refs[formRef].resetFields();
|
||||
}
|
||||
},
|
||||
|
||||
/** 复制订单ID */
|
||||
copyOrderId(orderId) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(orderId).then(() => {
|
||||
this.$modal.msgSuccess("复制成功");
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("复制失败，请手动复制");
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError("浏览器不支持复制功能");
|
||||
}
|
||||
},
|
||||
|
||||
/** 新增订单 */
|
||||
handleAdd() {
|
||||
this.resetForm("addForm");
|
||||
this.form = {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: this.orderQueryStatus,
|
||||
remark: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
};
|
||||
this.open = true;
|
||||
this.title = "添加订单";
|
||||
},
|
||||
|
||||
/** 提交新增表单 */
|
||||
submitAddForm() {
|
||||
this.$refs["addForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
addOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("新增失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交详情更新表单 */
|
||||
submitDetailForm() {
|
||||
this.$refs["detailForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
updateOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("更新成功");
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("更新失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除订单 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm(`是否确认删除订单"${row.orderCode}"？`).then(() => {
|
||||
this.loading = true;
|
||||
return delOrder([row.orderId]);
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
// 如果删除的是当前选中的订单，清空详情
|
||||
if (this.selectedOrderId === row.orderId) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("删除失败");
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 预订单确认 */
|
||||
handleStartProduction(row) {
|
||||
this.$modal.confirm(`是否确认将订单"${row.orderCode}"转为正式订单？`).then(() => {
|
||||
return updateOrder({
|
||||
orderId: row.orderId,
|
||||
orderStatus: 1
|
||||
});
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("已转化为正式订单");
|
||||
if (this.selectedOrderId === row.orderId) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("转化失败");
|
||||
});
|
||||
},
|
||||
|
||||
/** 跳转到 APS 排产中心，携带当前订单标识 */
|
||||
goApsSchedule(row) {
|
||||
if (!row || !row.orderId) {
|
||||
this.$modal.msgWarning("当前订单数据异常，无法进入排产");
|
||||
return;
|
||||
}
|
||||
this.$router
|
||||
.push({
|
||||
path: "/aps/index",
|
||||
query: { orderId: row.orderId, orderCode: row.orderCode }
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
/** 从订单详情一键排产并查看结果 */
|
||||
goApsOneKeySchedule() {
|
||||
if (!this.form || !this.form.orderId) {
|
||||
this.$modal.msgWarning("请先选择需要排产的订单");
|
||||
return;
|
||||
}
|
||||
this.$router
|
||||
.push({
|
||||
path: "/aps/index",
|
||||
query: { orderId: this.form.orderId, orderCode: this.form.orderCode, autoOneKey: "1" }
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器样式 */
|
||||
.page-container {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 空提示样式 */
|
||||
.empty-tip {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 表单样式调整 */
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.order-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.order-detail-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append,
|
||||
::v-deep .el-input-group__prepend {
|
||||
width: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0 10px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,287 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8" v-if="!readonly">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<KLPTable v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键" align="center" prop="specId" v-if="false"/>
|
||||
<el-table-column label="所属产品规范组ID" align="center" prop="groupId" />
|
||||
<el-table-column label="规范名称" align="center" prop="specKey" />
|
||||
<el-table-column label="规范值" align="center" prop="specValue" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" v-if="!readonly" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改产品规范（键值对模式）对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<!-- <el-form-item label="所属产品规范组ID" prop="groupId">
|
||||
<el-input v-model="form.groupId" placeholder="请输入所属产品规范组ID" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="规范键" prop="specKey">
|
||||
<el-input v-model="form.specKey" placeholder="请输入规范键" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规范值" prop="specValue">
|
||||
<el-input v-model="form.specValue" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProductSpec, getProductSpec, delProductSpec, addProductSpec, updateProductSpec } from "@/api/work/productSpec";
|
||||
|
||||
export default {
|
||||
name: "ProductSpec",
|
||||
props: {
|
||||
groupId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 产品规范（键值对模式）表格数据
|
||||
productSpecList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groupId: undefined,
|
||||
specKey: undefined,
|
||||
specValue: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
groupId: [
|
||||
{ required: true, message: "所属产品规范组ID不能为空", trigger: "blur" }
|
||||
],
|
||||
specKey: [
|
||||
{ required: true, message: "规范键不能为空", trigger: "blur" }
|
||||
],
|
||||
specValue: [
|
||||
{ required: true, message: "规范值不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
groupId: {
|
||||
handler(newVal) {
|
||||
// if (newVal) {
|
||||
this.queryParams.groupId = newVal;
|
||||
this.getList();
|
||||
// }
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 查询产品规范（键值对模式）列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listProductSpec(this.queryParams).then(response => {
|
||||
this.productSpecList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
specId: undefined,
|
||||
groupId: this.groupId,
|
||||
specKey: undefined,
|
||||
specValue: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.specId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加产品规范（键值对模式）";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const specId = row.specId || this.ids
|
||||
getProductSpec(specId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改产品规范（键值对模式）";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.specId != null) {
|
||||
updateProductSpec(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addProductSpec(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const specIds = row.specId || this.ids;
|
||||
this.$modal.confirm('是否确认删除产品规范（键值对模式）编号为"' + specIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delProductSpec(specIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('klp/productSpec/export', {
|
||||
...this.queryParams
|
||||
}, `productSpec_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<OrderPage :isPre="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderPage from './panels/orderPage.vue';
|
||||
|
||||
export default {
|
||||
name: 'OrderPre',
|
||||
components: {
|
||||
OrderPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,361 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="handleClose"
|
||||
>关闭</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<KLPTable v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编码" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
|
||||
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||
<el-table-column label="字典排序" align="center" prop="dictSort" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="字典类型">
|
||||
<el-input v-model="form.dictType" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据标签" prop="dictLabel">
|
||||
<el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据键值" prop="dictValue">
|
||||
<el-input v-model="form.dictValue" placeholder="请输入数据键值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="样式属性" prop="cssClass">
|
||||
<el-input v-model="form.cssClass" placeholder="请输入样式属性" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示排序" prop="dictSort">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.dictSort" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="回显样式" prop="listClass">
|
||||
<el-select v-model="form.listClass">
|
||||
<el-option
|
||||
v-for="item in listClassOptions"
|
||||
:key="item.value"
|
||||
:label="item.label + '(' + item.value + ')'"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
|
||||
import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
|
||||
|
||||
export default {
|
||||
name: "Data",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 字典表格数据
|
||||
dataList: [],
|
||||
// 默认字典类型
|
||||
defaultDictType: "",
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 数据标签回显样式
|
||||
listClassOptions: [
|
||||
{
|
||||
value: "default",
|
||||
label: "默认"
|
||||
},
|
||||
{
|
||||
value: "primary",
|
||||
label: "主要"
|
||||
},
|
||||
{
|
||||
value: "success",
|
||||
label: "成功"
|
||||
},
|
||||
{
|
||||
value: "info",
|
||||
label: "信息"
|
||||
},
|
||||
{
|
||||
value: "warning",
|
||||
label: "警告"
|
||||
},
|
||||
{
|
||||
value: "danger",
|
||||
label: "危险"
|
||||
}
|
||||
],
|
||||
// 类型数据字典
|
||||
typeOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
dictLabel: [
|
||||
{ required: true, message: "数据标签不能为空", trigger: "blur" }
|
||||
],
|
||||
dictValue: [
|
||||
{ required: true, message: "数据键值不能为空", trigger: "blur" }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const dictId = '1946131507932160002';
|
||||
this.getType(dictId);
|
||||
this.getTypeList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询字典类型详细 */
|
||||
getType(dictId) {
|
||||
getType(dictId).then(response => {
|
||||
this.queryParams.dictType = response.data.dictType;
|
||||
this.defaultDictType = response.data.dictType;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 查询字典类型列表 */
|
||||
getTypeList() {
|
||||
getDictOptionselect().then(response => {
|
||||
this.typeOptions = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询字典数据列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listData(this.queryParams).then(response => {
|
||||
this.dataList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
dictCode: undefined,
|
||||
dictLabel: undefined,
|
||||
dictValue: undefined,
|
||||
cssClass: undefined,
|
||||
listClass: 'default',
|
||||
dictSort: 0,
|
||||
status: "0",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 返回按钮操作 */
|
||||
handleClose() {
|
||||
const obj = { path: "/system/dict" };
|
||||
this.$tab.closeOpenPage(obj);
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.dictType = this.defaultDictType;
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加字典数据";
|
||||
this.form.dictType = this.queryParams.dictType;
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.dictCode)
|
||||
this.single = selection.length!=1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const dictCode = row.dictCode || this.ids
|
||||
getData(dictCode).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改字典数据";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.dictCode != undefined) {
|
||||
updateData(this.form).then(response => {
|
||||
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addData(this.form).then(response => {
|
||||
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const dictCodes = row.dictCode || this.ids;
|
||||
this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
|
||||
return delData(dictCodes);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/dict/data/export', {
|
||||
...this.queryParams
|
||||
}, `data_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user