|
@@ -56,6 +56,11 @@
|
|
|
|
|
|
<el-dialog v-if="openAddDialog" v-model="openAddDialog" title="报价评估" width="90%" append-to-body>
|
|
|
<byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom">
|
|
|
+ <template #chart>
|
|
|
+ <div style="width:100%;padding-left:25px">
|
|
|
+ <div ref="chartDom" style="height:300px"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template #commodity>
|
|
|
<div style="width: 100%;padding-left:25px">
|
|
|
<el-table :data="formData.data.quotationProductList" style="width: 100%;" default-expand-all>
|
|
@@ -169,6 +174,8 @@
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
import { ref } from "vue";
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const sourceList = ref({
|
|
|
data: [],
|
|
@@ -351,10 +358,24 @@ const formOption = reactive({
|
|
|
disabled: false,
|
|
|
});
|
|
|
const isShowBackRemark = ref(false);
|
|
|
+let myChart = null;
|
|
|
+const chartDom = ref(null);
|
|
|
+const chartData = ref([]);
|
|
|
+const isShowChart = ref(false);
|
|
|
const formConfig = computed(() => {
|
|
|
return [
|
|
|
{
|
|
|
type: "title1",
|
|
|
+ title: "报价趋势",
|
|
|
+ isShow: isShowChart.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "chart",
|
|
|
+ isShow: isShowChart.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "title1",
|
|
|
title: "退回原因",
|
|
|
isShow: isShowBackRemark.value,
|
|
|
},
|
|
@@ -394,6 +415,90 @@ const rules = ref({
|
|
|
price: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
|
|
});
|
|
|
const isDetail = ref(false);
|
|
|
+const chartOption = reactive({
|
|
|
+ data: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // data: ["价格"],
|
|
|
+ // },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "6%",
|
|
|
+ top: "10%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: "axis",
|
|
|
+ // 格式化函数
|
|
|
+ // valueFormatter: (val) => {
|
|
|
+ // return val + "aaa";
|
|
|
+ // },
|
|
|
+ formatter: (params, ticket, callback) => {
|
|
|
+ return `
|
|
|
+ ${params[0].seriesName}:${params[0].value}
|
|
|
+ <br/>
|
|
|
+ 报价单号:${chartData.value[params[0].dataIndex].code}
|
|
|
+ `;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // toolbox: {
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: {},
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "报价金额",
|
|
|
+ type: "line",
|
|
|
+ symbolSize: 10,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+});
|
|
|
+const getFileData = () => {
|
|
|
+ let ids = [];
|
|
|
+ formData.data.quotationProductList.map((x) => {
|
|
|
+ // ids.push(x.productId);
|
|
|
+ x.quotationProductBomList.map((y) => {
|
|
|
+ ids.push(y.materialId);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ ids = Array.from(new Set(ids));
|
|
|
+ proxy
|
|
|
+ .post("/fileInfo/getList", {
|
|
|
+ businessIdList: ids,
|
|
|
+ })
|
|
|
+ .then((fileObj) => {
|
|
|
+ formData.data.quotationProductList.map((x) => {
|
|
|
+ // x.fileList = fileObj[x.productId] || [];
|
|
|
+ // if (x.fileList && x.fileList.length > 0) {
|
|
|
+ // x.fileUrl = x.fileList[0].fileUrl;
|
|
|
+ // }
|
|
|
+ x.quotationProductBomList.map((y) => {
|
|
|
+ y.fileList = fileObj[y.materialId] || [];
|
|
|
+ if (y.fileList && y.fileList.length > 0) {
|
|
|
+ y.fileUrl = y.fileList[0].fileUrl;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
const getDtl = (row, flag = false) => {
|
|
|
formOption.disabled = flag;
|
|
|
isDetail.value = flag;
|
|
@@ -416,32 +521,44 @@ const getDtl = (row, flag = false) => {
|
|
|
// 价格计算
|
|
|
changeQuantity();
|
|
|
// 文件数据回显
|
|
|
- let ids = [];
|
|
|
- formData.data.quotationProductList.map((x) => {
|
|
|
- ids.push(x.productId);
|
|
|
- x.quotationProductBomList.map((y) => {
|
|
|
- ids.push(y.materialId);
|
|
|
- });
|
|
|
+ getFileData();
|
|
|
+ let productIds = formData.data.quotationProductList.map((x) => x.productId);
|
|
|
+ proxy.getFileData({
|
|
|
+ businessIdList: productIds,
|
|
|
+ data: formData.data.quotationProductList,
|
|
|
+ att: "productId",
|
|
|
+ businessType: "0",
|
|
|
+ fileAtt: "productFile",
|
|
|
+ filePathAtt: "fileUrl",
|
|
|
});
|
|
|
- ids = Array.from(new Set(ids));
|
|
|
- proxy
|
|
|
- .post("/fileInfo/getList", {
|
|
|
- businessIdList: ids,
|
|
|
- })
|
|
|
- .then((fileObj) => {
|
|
|
- formData.data.quotationProductList.map((x) => {
|
|
|
- x.fileList = fileObj[x.productId] || [];
|
|
|
- if (x.fileList && x.fileList.length > 0) {
|
|
|
- x.fileUrl = x.fileList[0].fileUrl;
|
|
|
+ //折线图
|
|
|
+ if (res.quotationTrendList && res.quotationTrendList.length >= 2) {
|
|
|
+ isShowChart.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ myChart = echarts.init(chartDom.value);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ chartData.value = res.quotationTrendList;
|
|
|
+ chartOption.data.xAxis.data = chartData.value.map((item) => {
|
|
|
+ return item.createTime.slice(0, 10);
|
|
|
+ });
|
|
|
+ chartOption.data.series[0].data = chartData.value.map((item, index) => {
|
|
|
+ if (item.code == row.code) {
|
|
|
+ return {
|
|
|
+ value: item.amount || 0,
|
|
|
+ itemStyle: { color: "red" },
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return item.amount || 0;
|
|
|
}
|
|
|
- x.quotationProductBomList.map((y) => {
|
|
|
- y.fileList = fileObj[y.materialId] || [];
|
|
|
- if (y.fileList && y.fileList.length > 0) {
|
|
|
- y.fileUrl = y.fileList[0].fileUrl;
|
|
|
- }
|
|
|
- });
|
|
|
});
|
|
|
+ myChart.setOption(chartOption.data);
|
|
|
+ myChart.resize();
|
|
|
});
|
|
|
+ } else {
|
|
|
+ isShowChart.value = false;
|
|
|
+ }
|
|
|
});
|
|
|
};
|
|
|
|