123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605 |
- <style scoped lang="scss">
- ::v-deep a {
- color: #409eff;
- display: block;
- }
- </style>
- <template>
- <div class="app-container">
- <div></div>
- <el-form
- :model="queryParams"
- ref="queryForm"
- size="small"
- :inline="true"
- v-show="showSearch"
- label-width="100px"
- >
- <el-form-item label="达人名称" prop="promoterName">
- {{ $route.query ? $route.query.name : "-" }}
- </el-form-item>
- <el-form-item label="达人Id" prop="promoterId">
- {{ $route.query ? $route.query.id : "-" }}
- </el-form-item>
- <br />
- <el-form-item label="商品名称" prop="itemTitle">
- <el-input
- v-model="queryParams.itemTitle"
- placeholder="请输入商品名称"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="商品Id" prop="itemId">
- <el-input
- v-model.number="queryParams.itemId"
- placeholder="请输入商品Id"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </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-button
- type="warning"
- plain
- icon="el-icon-download"
- size="mini"
- @click="handleExport"
- :loading="downLoadLoading"
- >导出</el-button
- >
- <el-button size="mini" @click="toSamplingList">领样状态</el-button>
- </el-form-item>
- </el-form>
- <el-table
- v-loading="loading"
- :data="typeList"
- @selection-change="handleSelectionChange"
- ref="multipleTable"
- >
- <!-- <el-table-column type="selection" width="55" align="center" /> -->
- <el-table-column label="商品图片" align="center" prop="imageUrl">
- <template slot-scope="scope">
- <img :src="scope.row.imageUrl" alt="" style="width: 100px; height: auto" />
- </template>
- </el-table-column>
- <el-table-column label="商品名称" align="center" prop="itemTitle">
- <template slot-scope="scope">
- <a @click="toIndexDetail(scope.row)">
- {{ scope.row.itemTitle }}
- </a>
- </template>
- </el-table-column>
- <el-table-column label="商品Id" align="center" prop="itemId" />
- <el-table-column label="商品单价" align="center" prop="reservePrice">
- <template slot-scope="scope"> {{ scope.row.reservePrice / 100 }}元 </template>
- </el-table-column>
- <el-table-column label="订单数" align="center" prop="orderNum"> </el-table-column>
- <el-table-column label="有效订单数" align="center" prop="validOrderNUm" />
- <el-table-column label="有效率" align="center" prop="validRadio" width="100">
- <template slot-scope="scope">
- {{ scope.row.validRadio ? (scope.row.validRadio * 100).toFixed(2) + "%" : "-" }}
- </template>
- </el-table-column>
- <el-table-column label="发货数" align="center" prop="deliveryNum" width="100">
- </el-table-column>
- <el-table-column label="发货率" align="center" prop="deliveryRadio" width="100">
- <template slot-scope="scope">
- {{
- scope.row.deliveryRadio
- ? (scope.row.deliveryRadio * 100).toFixed(2) + "%"
- : "-"
- }}
- </template>
- </el-table-column>
- <el-table-column label="未发货数" align="center" prop="notDeliveryNum" width="100">
- </el-table-column>
- <el-table-column label="付款金额" align="center" prop="payAmount">
- <template slot-scope="scope">
- {{ allMoney(scope.row.payAmount / 100) }}
- </template>
- </el-table-column>
- <el-table-column label="服务费率" align="center" prop="regimentalPromotionRate">
- <template slot-scope="scope">
- {{ scope.row.regimentalPromotionRate / 10 + "%" }}
- </template>
- </el-table-column>
- <el-table-column label="领样状态" align="center" prop="status" width="150">
- <template slot-scope="scope">
- <div v-if="scope.row.status">
- {{ scope.row.status | statusName }}
- </div>
- <div v-else>-</div>
- </template>
- </el-table-column>
- <el-table-column label="商品状态" align="center" prop="activityItemStatus" width="150"/>
- <el-table-column label="操作" align="center" prop="action" width="150">
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- @click="checkStatus(scope.row)"
- :disabled="!!scope.row.status"
- >领样申请</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total > 0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getOrderDetail"
- />
- <div class="echart">
- <div class="echartBody">
- <h3 style="font-weight: bold">订单统计</h3>
- <el-date-picker
- v-model="uploadDate"
- style="width: 240px"
- value-format="yyyy-MM-dd"
- format="yyyy-MM-dd"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :picker-options="pickerOptions"
- @change="getAllEchartsData"
- ></el-date-picker>
- <div id="echart" ref="echart" style="height: 500px; width: 100%"></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {
- listType,
- getType,
- delType,
- addType,
- updateType,
- refreshCache,
- } from "@/api/system/dict/type";
- import {
- getOrderList,
- getOrderDetail,
- getOrderStatistics,
- downFilePost,
- samplesCheck,
- } from "@/api/supplyChain/supplyChain";
- var echarts = require("echarts");
- export default {
- name: "sale",
- dicts: ["sys_normal_disable"],
- data() {
- return {
- downLoadLoading: false,
- dialogTableVisible: false,
- logPage: {
- pageNum: 1,
- pageSize: 10,
- },
- logData: [],
- logTotal: 0,
- logLoading: false,
- // 遮罩层
- loading: true,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 字典表格数据
- typeList: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 分配销售
- openAllocation: false,
- // 选择的销售id
- saleId: undefined,
- // 获取用户id
- userId: undefined,
- // 销售列表
- saleList: [],
- // 分配销售确定loading
- confirmLoadingSale: false,
- // 日期范围
- dateRange: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- itemId: undefined,
- itemTitle: undefined,
- orderStartDate: undefined,
- orderEndDate: undefined,
- },
- uploadDate: [new Date(), new Date()],
- //查询参数所用下拉数据
- queryParamsList: {},
- pickerOptions: {
- shortcuts: [
- {
- text: "今天",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "昨天",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
- end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "最近三天",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "最近一周",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "最近一个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "最近三个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
- picker.$emit("pick", [start, end]);
- },
- },
- ],
- },
- };
- },
- filters: {
- statusName(status) {
- let name = {
- 1: "待审核",
- 2: "领样申请审核拒绝",
- 3: "待录入订单号",
- 4: "已发货",
- 5: "已签收待上传作业",
- 6: "待招商审核",
- 7: "审核通过",
- };
- return name[status];
- },
- },
- created() {
- let start = new Date();
- let end = new Date();
- let y = end.getFullYear();
- let MM = end.getMonth() + 1;
- MM = MM < 10 ? "0" + MM : MM;
- let dd = end.getDate();
- dd = dd < 10 ? "0" + dd : dd;
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- let sy = start.getFullYear();
- let sMM = start.getMonth() + 1;
- sMM = sMM < 10 ? "0" + sMM : sMM;
- let sdd = start.getDate();
- sdd = sdd < 10 ? "0" + sdd : sdd;
- this.uploadDate = [`${sy}-${sMM}-${sdd}`, `${y}-${MM}-${dd}`];
- if (
- this.$route &&
- this.$route.query.id &&
- this.$route.query.orderStartDate &&
- this.$route.query.orderEndDate
- ) {
- this.getOrderDetail();
- this.getOrderStatistics();
- }
- },
- mounted() {
- this.$nextTick(() => {
- // this.getList();
- // this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'))
- });
- },
- methods: {
- checkStatus(item) {
- samplesCheck({
- promoterId: this.$route.query.id,
- itemId: item.itemId,
- userId: this.$store.getters.userId,
- }).then((res) => {
- this.$router.replace({
- path: "/goodsManagement/set",
- query: {
- promoterIds: JSON.stringify([+res.id]),
- itemIds: JSON.stringify([+item.itemId]),
- },
- });
- });
- },
- toSamplingList() {
- this.$router.replace({
- path: "/goodsManagement/samplingList",
- query: {
- promoterId: this.$route.query.id,
- },
- });
- },
- /** 导出按钮操作 */
- handleExport() {
- this.downLoadLoading = true;
- downFilePost("/isv/supply_chain/exportPromoter", {
- ...this.queryParams,
- orderStartDate: this.$route.query.orderStartDate,
- orderEndDate: this.$route.query.orderEndDate,
- promoterId: this.$route.query.id,
- }).then((res) => {
- let blob = new Blob([res], {
- type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
- });
- let downloadElement = document.createElement("a");
- let href = window.URL.createObjectURL(blob); //创建下载的链接
- downloadElement.href = href;
- downloadElement.download = `达人_${this.$route.query.name}${this.$route.query.orderStartDate}-${this.$route.query.orderEndDate}带货详情.xlsx`; //下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); //点击下载
- document.body.removeChild(downloadElement); //下载完成移除元素
- window.URL.revokeObjectURL(href); //释放掉blob对象
- this.downLoadLoading = false;
- });
- },
- toDetail(id) {},
- toIndexDetail(item) {
- this.$router.replace({
- path: "/supplyChain/goodsDetails",
- query: {
- id: item.itemId,
- name: item.itemTitle,
- orderStartDate: this.$route.query.orderStartDate,
- orderEndDate: this.$route.query.orderEndDate,
- },
- });
- },
- getOrderDetail() {
- this.loading = true;
- getOrderDetail({
- ...this.queryParams,
- orderStartDate: this.$route.query.orderStartDate,
- orderEndDate: this.$route.query.orderEndDate,
- promoterId: this.$route.query.id,
- }).then((response) => {
- this.typeList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
- },
- getAllEchartsData(e) {
- console.log(e);
- if (e.length == 2) {
- this.getOrderStatistics();
- }
- },
- getOrderStatistics() {
- getOrderStatistics({
- promoterId: this.$route.query.id,
- orderStartDate: this.uploadDate[0],
- orderEndDate: this.uploadDate[1],
- }).then((response) => {
- this.initEchart("echart", this.handlerEchartOption(response.data));
- });
- },
- /** 获取echart的值 */
- initEchart(idName, optionName) {
- let that = this;
- const chart = this.$refs[idName];
- if (chart) {
- const myChart = echarts.init(document.getElementById(idName));
- myChart.setOption(optionName);
- window.addEventListener("resize", function () {
- that.clientWidth = document.documentElement.clientWidth - 224;
- myChart.resize();
- });
- }
- },
- /** echarts数据展示 订单统计*/
- handlerEchartOption(data, typeShow) {
- let option = {
- noDataLoadingOption: {
- text: "暂无数据",
- effect: "bubble",
- effectOption: {
- effect: {
- n: 0,
- },
- },
- },
- tooltip: {
- trigger: "axis",
- // formatter: function(params) {
- // if(typeShow == 'play_duration_3s'){
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
- // }else{
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
- // }
- // },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- legend: {
- icon: "circle",
- top: "5%",
- right: "5%",
- itemWidth: 6,
- itemGap: 20,
- textStyle: {
- color: "#556677",
- },
- },
- xAxis: {
- type: "category",
- data: data.map((item) => {
- return item.date;
- }),
- boundaryGap: false,
- // 坐标轴线
- axisLine: {
- show: false,
- lineStyle: {
- color: "#999",
- },
- },
- // 分割线
- splitLine: {
- show: true,
- lineStyle: {
- type: "dashed",
- color: "#e5e5e5",
- },
- },
- },
- yAxis: {
- type: "value",
- axisLine: {
- show: false,
- lineStyle: {
- color: "#999",
- },
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#e5e5e5",
- },
- },
- },
- series: [
- {
- smooth: true,
- name: "订单统计",
- type: "line",
- stack: "总量",
- data: data.map((item) => {
- return item.orderNum;
- }),
- symbol: "circle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- width: 2,
- },
- },
- itemStyle: {
- borderColor: "#ffffff",
- borderWidth: 0,
- },
- },
- ],
- };
- return option;
- },
- /** 查询字典类型列表 */
- getList() {
- this.loading = true;
- getOrderList(
- this.addDateRange(
- this.queryParams,
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((response) => {
- this.typeList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.confirmLoading = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {};
- this.dateFile = null;
- this.resetForm("form");
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getOrderDetail();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.dateRange = [];
- // let date = new Date();
- // let y = date.getFullYear();
- // let MM = date.getMonth() + 1;
- // MM = MM < 10 ? "0" + MM : MM;
- // let dd = date.getDate();
- // dd = dd < 10 ? "0" + dd : dd;
- // this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
- this.resetForm("queryForm");
- this.queryParams.pageNum = 1;
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map((item) => item.id);
- },
- },
- };
- </script>
|