vxe-range-picker

.env.development

@@ -4,7 +4,8 @@ NODE_ENV = development
 # 接口地址
 VUE_APP_ICONIFY_BASEURL = https://api.iconify.design
 VUE_APP_ZEROAPI_BASEURL = http://www.qdeasydo.com
-VUE_APP_MES_BASEURL = http://192.168.101.93:10160
+VUE_APP_MES_BASEURL = http://192.168.101.135:10160
+# VUE_APP_MES_BASEURL = http://192.168.101.93:10160
 
 # 本地端口
 VUE_APP_PORT = 4400

src/utils/shortcuts.js

@@ -1,13 +0,0 @@
-import moment from "moment"
-
-export function rangeShortcuts(format = "YYYY-MM-DD HH:mm:ss") {
-    return [
-        { text: "今天", value: () => [moment().startOf("day").format(format), moment().format(format)] },
-        { text: "本月", value: () => [moment().startOf("month").format(format), moment().format(format)] },
-        { text: "本季度", value: () => [moment().startOf("quarter").format(format), moment().format(format)] },
-        { text: "今年", value: () => [moment().startOf("year").format(format), moment().format(format)] },
-    ]
-    // { text: "近7天", value: () => [moment().subtract(1, "week").format(format), moment().format(format)] },
-    // { text: "近1月", value: () => [moment().subtract(1, "month").format(format), moment().format(format)] },
-    // { text: "近1年", value: () => [moment().subtract(1, "year").format(format), moment().format(format)] },
-}

src/views/sales/performance/components/bar.vue

@@ -41,6 +41,6 @@ const option = reactive({
     }]
 });
 
-const getEcharts = () => API.sales.performance.echart({ type: "day", beginDate: moment().startOf("month").format("YYYY-MM-DD"), endDate: moment().format("YYYY-MM-DD") }).then(res => option.series[0].data = Array.from({ length: 7 }, (_, i) => XEUtils.get(XEUtils.find(res.actualList, item => item.date == moment().subtract(i, "day").format("YYYY-MM-DD")), "price", 0)).reverse()).catch(() => option.series[0].data = new Array(7).fill(0));
+const getEcharts = () => API.sales.performance.echart({ type: "date", beginDate: moment().startOf("month").format("YYYY-MM-DD"), endDate: moment().format("YYYY-MM-DD") }).then(res => option.series[0].data = Array.from({ length: 7 }, (_, i) => XEUtils.get(XEUtils.find(res.actualList, item => item.date == moment().subtract(i, "day").format("YYYY-MM-DD")), "price", 0)).reverse()).catch(() => option.series[0].data = new Array(7).fill(0));
 getEcharts();
 </script>

src/views/sales/performance/components/line.vue

@@ -4,10 +4,7 @@
             <el-radio-button v-for="(item, key) in radioDic" :key="key" :label="key">{{ item.label }}</el-radio-button>
         </el-radio-group>
         
-        <vxe-date-range-picker v-if="query.type == 'year'" style="width: 150px;" v-model="query.year" type="year" transfer @change="pickerChange"></vxe-date-range-picker>
-        <vxe-date-range-picker v-if="query.type == 'quarter'" style="width: 200px;" v-model="query.quarter" type="quarter" label-format="yyyy-Qq" transfer @change="pickerChange"></vxe-date-range-picker>
-        <vxe-date-range-picker v-if="query.type == 'month'" style="width: 190px;" v-model="query.month" type="month" transfer @change="pickerChange"></vxe-date-range-picker>
-        <vxe-date-range-picker v-if="query.type == 'day'" style="width: 240px;" v-model="query.day" transfer @change="pickerChange"></vxe-date-range-picker>
+        <vxe-date-range-picker :style="radioDic[query.type].style" v-model="currentDateValue" :type="query.type" :label-format="query.type == 'quarter' && 'yyyy-Qq'" transfer @change="pickerChange"></vxe-date-range-picker>
     </el-header>
 
     <div class="echart-panel">
@@ -29,13 +26,22 @@ const query = reactive({
     year: [moment().subtract(5, "year").startOf("year").format("YYYY-MM-DD"), moment().endOf("year").format("YYYY-MM-DD")],
     quarter: [moment().startOf("year").format("YYYY-MM-DD"), moment().endOf("year").format("YYYY-MM-DD")],
     month: [moment().startOf("year").format("YYYY-MM-DD"), moment().endOf("year").format("YYYY-MM-DD")],
-    day: [moment().startOf("month").format("YYYY-MM-DD"), moment().endOf("month").format("YYYY-MM-DD")]
+    date: [moment().startOf("month").format("YYYY-MM-DD"), moment().endOf("month").format("YYYY-MM-DD")]
+});
+
+const currentDateValue = computed({
+    get() {
+        return query[query.type];
+    },
+    set(val) {
+        query[query.type] = val;
+    }
 });
 
 const pickerChange = ({ value }) => XEUtils.every(value, item => item) && getEcharts();
 
 const option = reactive({
-    color: computed(() => query.type == "day" ? ["#36CE9E"] : []),
+    color: computed(() => query.type == "date" ? ["#36CE9E"] : []),
     title: { text: "计划/实际销售额趋势", textStyle: { fontSize: 16 }, top: 15 },
     legend: { left: "center", top: 55 },
     grid: { top: 120 },
@@ -47,7 +53,7 @@ const option = reactive({
     xAxis: {
         type: "category",
         data: [],
-        axisLabel: { formatter: value => query.type == "day" ? moment(value).format("MM-DD") : value },
+        axisLabel: { formatter: value => query.type == "date" ? moment(value).format("MM-DD") : value },
         axisPointer: { label: { backgroundColor: "#d3d2d3" } }
     },
     yAxis: {
@@ -75,6 +81,7 @@ getEcharts();
 .el-header {height: fit-content;padding: 0;border: none;}
 .el-header :deep(.el-radio-group) {flex-wrap: nowrap;}
 .el-header :deep(.vxe-date-range-picker) {flex-direction: row-reverse;}
+.el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--suffix {border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);}
 .el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--inner {text-align: center;}
 .el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--control-icon {padding-left: .5em;padding-right: 0;}
 

src/views/sales/performance/main.js

@@ -4,6 +4,7 @@ import XEUtils from "xe-utils";
 export const radioDic = {
     year: {
         label: "年度",
+        style: { width: "150px" },
         generateXAxis: (begin, end) => {
             const list = [];
             for (let year = moment(begin).year(); year <= moment(end).year(); year++) {
@@ -14,6 +15,7 @@ export const radioDic = {
     },
     quarter: {
         label: "季度",
+        style: { width: "200px" },
         generateXAxis: (begin, end) => {
             const list = [];
             let current = moment(begin);
@@ -26,6 +28,7 @@ export const radioDic = {
     },
     month: {
         label: "月度",
+        style: { width: "190px" },
         generateXAxis: (begin, end) => {
             const list = [];
             let current = moment(begin);
@@ -36,8 +39,9 @@ export const radioDic = {
             return list;
         }
     },
-    day: {
+    date: {
         label: "天数",
+        style: { width: "240px" },
         generateXAxis: (begin, end) => {
             const list = [];
             let current = moment(begin);
@@ -71,7 +75,7 @@ export const lineSeries = (type, xAxisData, { planList, actualList }) => {
     const actualSerie = {
         type: "line",
         name: "实际销售额",
-        data: XEUtils.map(xAxisData, date => XEUtils.get(XEUtils.find(actualList, item => item[type == "day" ? "date" : "date2"] == date), "price", 0)),
+        data: XEUtils.map(xAxisData, date => XEUtils.get(XEUtils.find(actualList, item => item[type == "date" ? "date" : "date2"] == date), "price", 0)),
         areaStyle: {
             origin: "start",
             color: {
@@ -86,6 +90,6 @@ export const lineSeries = (type, xAxisData, { planList, actualList }) => {
         animationDurationUpdate: 2500
     }
 
-    if (type == "day") return [actualSerie]
+    if (type == "date") return [actualSerie]
     return [planSerie, actualSerie]
 }

src/views/sales/plan/index.vue

@@ -47,7 +47,7 @@ const selectConfig = reactive({
 });
 
 const daterangeConfig = reactive({
-    resetValue: () => [moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
+    resetValue: () => [],
     props: {
         type: "daterange",
         startPlaceholder: "开始日期",
@@ -57,9 +57,7 @@ const daterangeConfig = reactive({
 });
 
 const formConfig = reactive({
-    data: {
-        beginDate: [moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
-    },
+    data: {},
     items: [
         mapFormItemTenant({ events: { change: data => XEUtils.merge(formConfig.data, data) } }),
         mapFormItemInput("nameLike", "计划名称"),
@@ -84,7 +82,7 @@ const options = reactive({
     columns: [
         { type: "seq", fixed: "left", width: 80 },
         { visible: computed(() => store.state.tenant.tenantId === "0"), type: "html", field: "tenantName", title: "所属租户", fixed: "left", minWidth: 200, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(store.state.tenant.tenants, item => item.id == row.tenantId), "name") },
-        { type: "html", field: "name", title: "计划名称", fixed: "left", minWidth: 160, treeNode: true, headerAlign: "center", align: "left", sortable: true },
+        { type: "html", field: "name", title: "计划名称", fixed: "left", minWidth: 200, treeNode: true, headerAlign: "center", align: "left", sortable: true },
         { type: "html", field: "code", title: "计划编号", fixed: "left", minWidth: 150, sortable: true },
         { type: "html", field: "type", title: "计划类型", minWidth: 120, sortable: true, formatter: ({ cellValue }) => XEUtils.get(salesDic.planType, cellValue, cellValue) },
         { field: "status", title: "计划状态", minWidth: 120, editRender: { name: "$cell-tag", options: salesDic.planStatus, formatter: row => formatStatus(row) } },