|
|
@@ -20,6 +20,25 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="所属部门" prop="deptId">
|
|
|
+ <el-cascader
|
|
|
+ v-model="selectedDept"
|
|
|
+ :options="deptOptions"
|
|
|
+ :props="{
|
|
|
+ value: 'id',
|
|
|
+ label: 'label',
|
|
|
+ children: 'children',
|
|
|
+ checkStrictly: true
|
|
|
+ }"
|
|
|
+ placeholder="请选择部门"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 220px"
|
|
|
+ @change="handleDeptChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
<el-form-item label="员工" prop="companyUserId">
|
|
|
<el-select
|
|
|
filterable
|
|
|
@@ -37,31 +56,50 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="订单来源" prop="source">
|
|
|
+ <el-select v-model="queryParams.source" placeholder="请选择是否支付" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in sourceOptions"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="dict.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
<el-form-item label="下单日期">
|
|
|
<el-date-picker
|
|
|
clearable
|
|
|
size="small"
|
|
|
- style="width: 205.4px"
|
|
|
v-model="dateRange"
|
|
|
type="daterange"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
+ popper-append-to-body
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商品名称" prop="packageName">
|
|
|
+ <el-input v-model="queryParams.packageName" placeholder="请输入商品名称" clearable
|
|
|
+ @keyup.enter.native="search"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<div class="data-box">
|
|
|
<div class="table-box">
|
|
|
<el-table :data="tableData" border max-height="500" style="width: 100%">
|
|
|
- <el-table-column prop="category" label="订单类型" width="180" />
|
|
|
- <el-table-column prop="orderCount" label="订单数" />
|
|
|
- <el-table-column prop="orderAmount" label="订单总金额(元)" />
|
|
|
- <el-table-column prop="depositAmount" label="定金金额(元)" />
|
|
|
- <el-table-column prop="codAmount" label="物流代收金额(元)" />
|
|
|
+ <el-table-column prop="category" label="订单类型" width="180"/>
|
|
|
+ <el-table-column prop="orderCount" label="订单数"/>
|
|
|
+ <el-table-column prop="orderAmount" label="订单总金额(元)"/>
|
|
|
+ <el-table-column prop="depositAmount" label="定金金额(元)"/>
|
|
|
+ <el-table-column prop="codAmount" label="物流代收金额(元)"/>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -70,9 +108,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getHisOrderCountStats } from "@/api/company/statistics";
|
|
|
-import { getUserList } from "@/api/company/companyUser"; // 使用 getUserList(companyId)
|
|
|
-import { getCompanyList } from "@/api/company/company";
|
|
|
+import {getUserList} from "@/api/company/companyUser";
|
|
|
+import {getHisOrderCountStats, treeselect} from "@/api/company/statistics";
|
|
|
+import {getCompanyList} from "@/api/company/company";
|
|
|
|
|
|
export default {
|
|
|
name: "HisOrderCountStats",
|
|
|
@@ -81,12 +119,17 @@ export default {
|
|
|
// 仅保留必要查询参数
|
|
|
queryParams: {
|
|
|
companyId: null,
|
|
|
- companyUserId: null
|
|
|
+ companyUserId: null,
|
|
|
+ packageName: null,
|
|
|
+ deptId: null
|
|
|
},
|
|
|
companys: [], // 公司列表
|
|
|
users: [], // 员工列表
|
|
|
dateRange: [], // 日期范围
|
|
|
- tableData: [] // 表格数据
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ selectedDept: [], // 当前选中的部门路径(数组)
|
|
|
+ deptOptions: [],
|
|
|
+ sourceOptions: [], // 订单来源小程序
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -106,6 +149,12 @@ export default {
|
|
|
getCompanyList().then(response => {
|
|
|
this.companys = response.data || [];
|
|
|
});
|
|
|
+
|
|
|
+ this.getDicts("sys_order_source").then(response => {
|
|
|
+ this.sourceOptions = response.data;
|
|
|
+ });
|
|
|
+ //加载部门树
|
|
|
+ this.loadDeptTree();
|
|
|
this.search();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -130,13 +179,47 @@ export default {
|
|
|
const params = {
|
|
|
companyId: this.queryParams.companyId,
|
|
|
companyUserId: this.queryParams.companyUserId,
|
|
|
+ deptId: this.queryParams.deptId,
|
|
|
+ source: this.queryParams.source,
|
|
|
+ packageName: this.queryParams.packageName,
|
|
|
startTime: this.dateRange?.[0] || undefined,
|
|
|
endTime: this.dateRange?.[1] ? this.dateRange[1] + " 23:59:59" : undefined
|
|
|
};
|
|
|
|
|
|
getHisOrderCountStats(params).then(response => {
|
|
|
- this.tableData = response.data || []; // 直接赋值数组
|
|
|
+ this.tableData = response.data || [];
|
|
|
});
|
|
|
+ },
|
|
|
+ // 加载部门树形数据
|
|
|
+ loadDeptTree() {
|
|
|
+ treeselect().then(response => {
|
|
|
+ this.deptOptions = response.data || [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDeptChange(value) {
|
|
|
+ // 只取即选中的 deptId)
|
|
|
+ const deptId = value.length > 0 ? value[value.length - 1] : null;
|
|
|
+ this.queryParams.deptId = deptId;
|
|
|
+ console.log('选中的部门ID:', deptId);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ // 重置 queryParams
|
|
|
+ this.queryParams = {
|
|
|
+ companyId: null,
|
|
|
+ companyUserId: null,
|
|
|
+ packageName: null,
|
|
|
+ deptId: null,
|
|
|
+ source: null
|
|
|
+ };
|
|
|
+ // 重置日期范围
|
|
|
+ this.dateRange = [];
|
|
|
+ // 重置级联选择器的显示值(否则 UI 还显示旧值)
|
|
|
+ this.selectedDept = [];
|
|
|
+ // 重置员工列表(可选)
|
|
|
+ this.users = [];
|
|
|
+
|
|
|
+ // 自动重新搜索(通常重置后要展示全部数据)
|
|
|
+ this.search();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -146,38 +229,30 @@ export default {
|
|
|
.app-container {
|
|
|
border: 1px solid #e6e6e6;
|
|
|
padding: 12px;
|
|
|
+}
|
|
|
|
|
|
- .app-content {
|
|
|
- background-color: white;
|
|
|
- .title {
|
|
|
- padding: 20px 30px 0px 30px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: black;
|
|
|
- }
|
|
|
- .search-form {
|
|
|
- margin: 20px 30px 0px 30px;
|
|
|
- }
|
|
|
- .data-box {
|
|
|
- padding: 30px;
|
|
|
- background-color: rgb(255, 255, 255);
|
|
|
- height: 100%;
|
|
|
+.app-content {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
|
|
|
- .table-box {
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.title {
|
|
|
+ padding: 20px 30px 0px 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
}
|
|
|
|
|
|
-.vue-treeselect {
|
|
|
- width: 217px;
|
|
|
- height: 36px;
|
|
|
+.search-form {
|
|
|
+ margin: 20px 30px 0px 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-box {
|
|
|
+ padding: 30px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
-<style>
|
|
|
-.vue-treeselect__control {
|
|
|
- display: block;
|
|
|
+.table-box {
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
</style>
|