<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="订单编号" prop="name">
<el-select
v-model="queryParams.SearchType1"
clearable
style="width: 100px"
>
<el-option
v-for="dict in SearchType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input
style="width: 200px"
v-model="queryParams.orderNo"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="提单号" prop="tidanNo">
<el-select
v-model="queryParams.SearchType2"
clearable
style="width: 100px"
>
<el-option
v-for="dict in SearchType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input
style="width: 200px"
v-model="queryParams.tidanNo"
placeholder="请输入提单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发货人编号">
<el-select
v-model="queryParams.SearchType3"
clearable
style="width: 100px"
>
<el-option
v-for="dict in SearchType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input
style="width: 200px"
v-model="queryParams.fhNumber"
placeholder="请输入发货人编号"
clearable
/>
</el-form-item>
<el-form-item label="收货人编号" prop="shNumber">
<el-select
v-model="queryParams.SearchType4"
clearable
style="width: 100px"
>
<el-option
v-for="dict in SearchType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input
style="width: 200px"
v-model="queryParams.shNumber"
placeholder="请输入收货人编号"
clearable
/>
</el-form-item>
<el-form-item label="唛头" prop="remark">
<el-select
v-model="queryParams.SearchType5"
clearable
style="width: 100px"
>
<el-option
v-for="dict in SearchType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input
v-model="queryParams.marks"
placeholder="请输入唛头"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="客户经理" prop="salesmanId">
<user-selector
manage
v-model="queryParams.salesmanId"
clearable
@change="handleQuery"
:prepend="{ id: 0, nickname: $t('未分配客户经理') }"
/>
</el-form-item>
<el-form-item label="部门" prop="remark">
<treeselect
v-model="queryParams.deptid"
:options="deptOptions"
:show-count="true"
:placeholder="$t('请选择部门')"
:normalizer="normalizer"
/>
</el-form-item>
<el-form-item :label="$t('订单状态')" prop="status">
<dict-selector
:type="DICT_TYPE.ORDER_STATUS"
v-model="queryParams.status"
@keyup.enter.native="handleQuery"
clearable
/>
</el-form-item>
<el-form-item :label="$t('运输方式')" prop="transportId">
<dict-selector
:type="DICT_TYPE.ECW_TRANSPORT_TYPE"
v-model.number="queryParams.transportId"
clearable
@change="handleQuery"
/>
</el-form-item>
<el-form-item :label="$t('始发仓')" prop="startWarehouseId">
<el-select
v-model="queryParams.startWarehouseId"
:placeholder="$t('请选择始发仓')"
clearable
@change="handleQuery"
>
<el-option
v-for="item in exportWarehouseList"
:label="$l(item, 'title')"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的国" prop="muDiGuo">
<el-select
clearable
v-model="queryParams.muDiGuo"
:placeholder="$t('请选择国家')"
>
<el-option
v-for="dict in countryList"
:key="dict.id"
:label="isChinese ? dict.nameZh : dict.nameEn"
:value="parseInt(dict.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="目的城市" prop="muDiShi">
<el-input
v-model="queryParams.muDiShi"
placeholder="选择目的城市"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="$t('目的仓')" prop="destWarehouseId">
<el-select
v-model="queryParams.destWarehouseId"
:placeholder="$t('请选择目的仓')"
clearable
@change="handleQuery"
>
<el-option
v-for="item in importWarehouseList"
:label="$l(item, 'title')"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('是否控货')" prop="isCargoControl">
<el-select v-model="queryParams.isCargoControl" clearable>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="重泡类型" prop="remark">
<el-select v-model="queryParams.zpType" clearable>
<el-option label="重货" value="2"></el-option>
<el-option label="泡货" value="3"></el-option>
<el-option label="普货" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="付款方" prop="remark">
<el-select v-model="queryParams.drawee" clearable>
<el-option label="发货方" value="1"></el-option>
<el-option label="收货方" value="2"></el-option>
<el-option label="自定义" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="渠道" prop="remark">
<el-select v-model="queryParams.shippingChannelId" clearable>
<el-option
v-for="item in channelList"
:key="item.id"
:label="$l(item, 'name')"
:value="item.channelId"
/>
</el-select>
</el-form-item>
<el-form-item label="资源类型" prop="ResourceType">
<el-select v-model="queryParams.ResourceType" clearable>
<el-option label="开发客户" value="1"></el-option>
<el-option label="公司客户" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="业绩类型" prop="YeJiType">
<el-select v-model="queryParams.YeJiType" clearable>
<el-option label="新客户" value="1"></el-option>
<el-option label="老客户" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据筛选" prop="remark">
<el-select
v-model="queryParams.dataSearch1"
clearable
style="width: 150px"
>
<el-option label="入仓箱数" value="1"></el-option>
<el-option label="入仓体积" value="2"></el-option>
<el-option label="入仓重量" value="3"></el-option>
<el-option label="重/泡标准" value="3"></el-option>
<el-option label="提货率" value="4"></el-option>
</el-select>
<el-select
v-model="queryParams.dataSearch2"
clearable
style="width: 150px"
>
<el-option label="大于等于" value="1"></el-option>
<el-option label="等于" value="2"></el-option>
<el-option label="小于等于" value="3"></el-option>
</el-select>
<el-input
style="width: 100px"
v-model="queryParams.dataSearch3"
placeholder="请输入数值"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间筛选" prop="dateSearch">
<el-select v-model="queryParams.dateSearch1" clearable>
<el-option label="订单创建时间" value="1"></el-option>
<el-option label="业绩创建时间" value="2"></el-option>
<el-option label="首次入仓时间" value="3"></el-option>
</el-select>
<el-date-picker
v-model="queryParams.sdate1"
type="date"
value-format="yyyy-MM-dd"
clearable
placeholder="请输入起始日期"
/>
<el-date-picker
v-model="queryParams.edate1"
type="date"
value-format="yyyy-MM-dd"
clearable
placeholder="请输截止日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
:loading="exportLoading"
v-show="objEcwReportPermission.exportdataq == 1"
>导出</el-button
>
</el-form-item>
</el-form>
<el-row>
<el-col :span="24" class="card-box">
<el-card>
<div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td><div class="cell"></div></td>
<td>
<div class="cell">
总箱数：{{ StatisticalSummary.sumBox }}
</div>
</td>
<td>
<div class="cell">
总方数：{{ StatisticalSummary.sumM3 }}
</div>
</td>
<td>
<div class="cell">
总重量：{{ StatisticalSummary.sumKG }}
</div>
</td>
<td>
<div class="cell">总V值：{{ StatisticalSummary.sumV }}</div>
</td>
</tr>
<tr>
<td><div class="cell">新客户</div></td>
<td>
<div class="cell">
总箱数：{{ StatisticalSummary.sumBoxNew }}
</div>
</td>
<td>
<div class="cell">
总方数：{{ StatisticalSummary.sumM3New }}
</div>
</td>
<td>
<div class="cell">
总重量：{{ StatisticalSummary.sumKGNew }}
</div>
</td>
<td>
<div class="cell">
总V值：{{ StatisticalSummary.sumVNew }}
</div>
</td>
</tr>
<tr>
<td><div class="cell">旧客户</div></td>
<td>
<div class="cell">
总箱数：{{ StatisticalSummary.sumBoxOld }}
</div>
</td>
<td>
<div class="cell">
总方数：{{ StatisticalSummary.sumM3Old }}
</div>
</td>
<td>
<div class="cell">
总重量：{{ StatisticalSummary.sumKGOld }}
</div>
</td>
<td>
<div class="cell">
总V值：{{ StatisticalSummary.sumVOld }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</el-card>
</el-col>
</el-row>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="排名" align="center" prop="px" />
<el-table-column label="订单编号" align="center" prop="orderNo">
<template slot-scope="scope">
<router-link
:to="{
path: '/order/detail',
query: { orderId: scope.row.orderId },
}"
class="link-type"
>
<span>{{ scope.row.orderNo }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="提单号" align="center" prop="tidanNo">
<template slot-scope="scope">
<router-link
:to="{
path: '/order/detail',
query: { orderId: scope.row.orderId },
}"
class="link-type"
>
<span>{{ scope.row.tidanNo }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="发货人编号" align="center" prop="fhNumber">
<template slot-scope="{ row }">
<el-link
type="primary"
@click.native="$router.push('/customer/query/' + row.cfCustomerId)"
>{{ row.fhNumber }}</el-link
>
</template>
</el-table-column>
<el-table-column label="收货人编号" align="center" prop="shNumber">
<template slot-scope="{ row }">
<el-link
type="primary"
@click.native="$router.push('/customer/query/' + row.shCustomerId)"
>{{ row.shNumber }}</el-link
>
</template>
</el-table-column>
<el-table-column label="客户经理" align="center" prop="salesmanidName">
</el-table-column>
<el-table-column label="订单状态" align="center" prop="statusName" />
<el-table-column label="运输方式" align="center" prop="transportIdName" />
<el-table-column
label="始发仓"
align="center"
prop="startwarehousename"
/>
<el-table-column label="目的国" align="center" prop="muDiGuo" />
<el-table-column label="目的城市" align="center" prop="muDiShi" />
<el-table-column label="目的仓" align="center" prop="dstwarehousename" />
<el-table-column label="渠道" align="center" prop="channelidName" />
<el-table-column label="创建时间" align="center" prop="createtime" />
<el-table-column
label="业绩创建时间"
align="center"
prop="businesstime"
/>
<el-table-column
label="资源类型"
align="center"
prop="showResourceType"
/>
<el-table-column label="业绩类型" align="center" prop="showYeJiType" />
<el-table-column label="唛头" align="center" prop="marks" />
<el-table-column label="入仓箱数" align="center" prop="sumquantity" />
<el-table-column label="体积" align="center" prop="sumvolume" />
<el-table-column label="重量" align="center" prop="sumweight" />
<el-table-column label="是否控货" align="center" prop="iscargocontrol" />
<el-table-column label="重货/泡货" align="center" prop="ordertypeShow" />
<el-table-column label="重货/泡货标准" align="center" prop="zpUnitShow" />
<el-table-column label="付款方" align="center" prop="draweeName" />
<el-table-column label="首次入仓时间" align="center" prop="firstInTime" />
<el-table-column label="提货率" align="center" prop="showThl">
</el-table-column>
<el-table-column label="入仓记录" align="center" prop="orderId">
<template slot-scope="{ row }">
<el-link type="primary" @click.native="showWarehouseLogs(row, 1)">
入仓记录
</el-link>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<warehouse-detail
:order="order"
:orderItemId="showWarehouseInItemId"
:type="type"
@openPackHistory="openPackHistory"
v-if="showWarehouseInItemId"
@close="showWarehouseInItemId = null"
/>
</div>
</template>
<script>
import UserSelector from "@/components/UserSelector";
import { getCountryListAll } from "@/api/ecw/country";
import Treeselect from "@riophae/vue-treeselect";
import "@/assets/styles/vue-treeselect.css";
import { getWarehouseList } from "@/api/ecw/warehouse";
import {
getListPage,
exportExcel,
getStatisticalSummary,
} from "@/api/report/salesanalysis";
import { getCurUserPermission } from "@/api/report/EcwReportPermission";
import { getAllChannelList, getChannelList } from "@/api/ecw/channel";
import { listSimpleDepts } from "@/api/system/dept";
import { getOrder } from "@/api/ecw/order";
//入仓记录页面
import WarehouseDetail from "@/views/report/WarehouseInDetail/index.vue";
//2024-05-01合并
export default {
name: "ReportSales_analysisIndex",
components: {
UserSelector,
Treeselect,
WarehouseDetail,
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 测试列表
list: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
showDetail: false,
deptOptions: undefined,
dateRangeCreateTime: [],
SearchType: [
{ value: "in", label: "包含" },
{ value: "notin", label: "不包含" },
{ value: "eq", label: "等于" },
{ value: "noeq", label: "不等于" },
],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
SearchType3: "eq",
fhNumber: undefined, //发货客户编号
SearchType4: "eq",
shNumber: undefined, //收货客户编号
startWarehouseId: undefined, //始发仓
muDiGuo: undefined, //目的国
muDiShi: undefined, //目的城市
dstwarehousename: undefined, //目的仓
transportId: undefined, //运输方式
SearchType1: "eq", //订单编号查询类型
orderNo: undefined, //订单编号
SearchType2: "eq", //提单号的查询类别
tidanNo: undefined, //提单号
SearchType5: "in",
marks: undefined, //唛头
status: undefined, //订单状态
salesmanId: undefined, //客户经理
isCargoControl: undefined, //是否控货
deptid: undefined, //部门
drawee: undefined, //付款方
zpType: undefined, //货物类型，1普货，2重货，3泡货
YeJiType: undefined, //业绩类型 新客户，老客户
dateSearch1: undefined, //时间筛选类型
sdate1: undefined, //开始时间
edate2: undefined, //结束时间
dataSearch1: undefined, //数据类型筛选
dataSearch2: undefined, //比较符号设置
dataSearch3: undefined, //数据值
},
channelList: [],
countryList: [],
// 表单参数
form: {},
// 表单校验
rules: {},
warehouseList: [],
//报表权限信息
objEcwReportPermission: {},
DeptEx: { id: undefined, name: undefined, parentId: undefined },
showWarehouseInItemId: undefined,
order: null,
type: 1,
StatisticalSummary: {
sumBox: 0,
sumM3: 0,
sumKG: 0,
sumV: 0,
sumBoxNew: 0,
sumM3New: 0,
sumKGNew: 0,
sumVNew: 0,
sumBoxOld: 0,
sumM3Old: 0,
sumKGOld: 0,
sumVOld: 0,
},
};
},
created() {
//获取国家列表
getCountryListAll().then((r) => {
this.countryList = r.data;
});
getAllChannelList().then((res) => (this.channelList = res.data));
getWarehouseList().then((res) => (this.warehouseList = res.data));
this.loading = false;
//获取当前用户报表权限
getCurUserPermission().then((response) => {
//复制对象
Object.assign(this.objEcwReportPermission, response.data);
if (this.objEcwReportPermission.permissionFw == 1) {
//只能看自己的，不能选择部门和客户经理
// this.showCustomsManage = false;
// this.showDept = false;
}
this.getTreeselect();
this.getList();
});
},
computed: {
exportWarehouseList() {
//始发仓列表
return this.warehouseList.filter(
(item) => item.tradeType == 2 || item.tradeType == 3
);
},
importWarehouseList() {
//目的仓列表
return this.warehouseList.filter(
(item) => item.tradeType == 1 || item.tradeType == 3
);
},
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
// 处理查询参数
let params = { ...this.queryParams };
// 执行查询
getListPage(params).then((response) => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
//获取统计数据
getStatisticalSummary(params).then((response) => {
this.StatisticalSummary = response.data;
});
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
name: undefined,
empGender: undefined,
age: undefined,
email: undefined,
};
this.resetForm("form");
},
isChinese() {
//基础函数，判断系统显示语言是中文还是英文
return this.$i18n.locale === "zh_CN";
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.queryParams };
params.pageNo = undefined;
params.pageSize = undefined;
// 执行导出
this.$modal
.confirm("是否确认导出所有数据?")
.then(() => {
this.exportLoading = true;
return exportExcel(params);
})
.then((response) => {
//this.$download.excel(response, "销售分析数据报表.xls");
this.exportLoading = false;
this.$message.success(
this.$t("已加入导出队列，请稍后在下载日志中下载")
);
})
.catch(() => {});
},
// 显示入仓记录
showWarehouseLogs(row, type) {
getOrder(row.orderId).then((response) => {
this.order = response.data;//组件中只用到了此参数
this.type = 2;
this.showWarehouseInItemId = 1;
});
},
openPackHistory(id) {
//查询打包历史
//this.shopPackId = id
},
/** 查询部门下拉树结构 + 岗位下拉 */
getTreeselect() {
if (this.objEcwReportPermission.permissionFw == 3) {
listSimpleDepts().then((response) => {
// 处理 deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, "id"));
});
} else if (this.objEcwReportPermission.permissionFw == 2) {
this.DeptEx.id = this.objEcwReportPermission.deptId;
getDeptChild(this.DeptEx).then((response) => {
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, "id"));
});
}
},
normalizer(node) {
//格式化部门的下拉框
return {
id: node.id,
label: node.name,
children: node.children,
};
},
},
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 32px 32px 0;
margin-bottom: 32px;
margin-left: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
/* .my-process-designer {
height: calc(100vh - 200px);
} */
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>