123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544 |
- <style scoped lang="scss">
- ::v-deep a {
- color: #409eff;
- display: block;
- }
- p {
- text-align: left;
- margin: 0;
- }
- </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="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 label="选择日期">
- <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="结束日期"
- ></el-date-picker>
- </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-form-item>
- </el-form>
- <el-table
- v-loading="loading"
- :data="typeList"
- @selection-change="handleSelectionChange"
- @sort-change="sortChange"
- ref="multipleTable"
- :span-method="arraySpanMethod"
- border
- >
- <!-- :summary-method="getSummaries" -->
- <!-- show-summary -->
- <el-table-column label="达人名称" align="center" prop="itemTitle" width="300">
- <template slot-scope="scope">
- <div style="display: flex; width: 100%" v-if="scope.row.promoterName != '总计'">
- <div style="width: 40%">
- <img
- :src="scope.row.promoterUrl"
- alt=""
- style="width: 70px; height: auto"
- />
- </div>
- <div style="width: 60%">
- <a
- style="
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 100%;
- text-align: left;
- "
- :title="scope.row.promoterName"
- >
- {{ scope.row.promoterName }}
- </a>
- <p>达人Id: {{ scope.row.promoterId }}</p>
- </div>
- </div>
- <div v-else style="font-size: 20px">
- {{ scope.row.promoterName }}
- </div>
- </template>
- </el-table-column>
- <el-table-column label="达人标签" align="center" prop="itemTitle" width="220">
- <template slot-scope="scope">
- <div v-if="scope.row.promoterName != '总计'">
- <el-tag size="mini" v-for="tag in scope.row.tags">{{tag.tag}} {{tag.proportion}}</el-tag>
- </div>
- <div v-else>
- -
- </div>
- </template>
- </el-table-column>
- <el-table-column label="领样数" align="center" prop="sampleCount" sortable="custom">
- </el-table-column>
- <el-table-column label="订单数" align="center" prop="orderNum" sortable="custom">
- </el-table-column>
- <el-table-column
- label="有效订单数"
- align="center"
- prop="validOrderNum"
- sortable="custom"
- >
- </el-table-column>
- <el-table-column
- label="有效订单率"
- align="center"
- prop="validOrderRate"
- sortable="custom"
- >
- <template slot-scope="scope">
- {{ scope.row.validOrderRate }}
- </template>
- </el-table-column>
- <el-table-column
- label="订单金额"
- align="center"
- prop="orderAmount"
- sortable="custom"
- >
- <template slot-scope="scope">
- {{ scope.row.orderAmount }}
- </template>
- </el-table-column>
- <el-table-column
- label="预估服务费收入"
- align="center"
- prop="regimentalPromotionAmount"
- sortable="custom"
- >
- <template slot-scope="scope">
- {{
- scope.row.regimentalPromotionAmount
- }}
- </template>
- </el-table-column>
- <el-table-column
- label="结算服务费收入"
- align="center"
- prop="totalRegimentalSettleAmount"
- sortable="custom"
- >
- <template slot-scope="scope">
- {{
- scope.row.totalRegimentalSettleAmount
- }}
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total > 0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getUserItemDetail"
- />
- </div>
- </template>
- <script>
- import {
- listType,
- getType,
- delType,
- addType,
- updateType,
- refreshCache,
- } from "@/api/system/dict/type";
- import {
- getBdDetailListV2,
- getOrderList,
- getItemDetail,
- downFilePost,
- getUserItemDetail,
- getBdTotalV2,
- } from "@/api/supplyChain/supplyChain";
- var echarts = require("echarts");
- export default {
- name: "ClaimOk",
- 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: {},
- prop: "orderNum",
- sort: "desc",
- itemSummary: [],
- loadingTotal: false,
- };
- },
- created() {
- if (
- this.$route &&
- this.$route.query.id &&
- this.$route.query.orderStartDate &&
- this.$route.query.orderEndDate
- ) {
- this.uploadDate = [
- this.$route.query.orderStartDate,
- this.$route.query.orderEndDate,
- ];
- this.getUserItemTotal();
- this.getUserItemDetail();
- } else {
- 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.getUserItemTotal();
- this.getUserItemDetail();
- }
- },
- mounted() {
- this.$nextTick(() => {
- });
- },
- methods: {
- /** 导出按钮操作 */
- handleExport() {
- this.downLoadLoading = true;
- downFilePost(
- "/isv/supply_chain/exportBdDetailV2",
- this.addDateRange(
- {
- ...this.queryParams,
- collectSampleId: !!this.$route.query.id
- ? this.$route.query.id
- : this.$store.getters.remark == "管理员"
- ? null
- : this.$store.getters.userId,
- },
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).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.uploadDate[0]}-${this.uploadDate[1]}.xlsx`; //下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); //点击下载
- document.body.removeChild(downloadElement); //下载完成移除元素
- window.URL.revokeObjectURL(href); //释放掉blob对象
- this.downLoadLoading = false;
- });
- },
- arraySpanMethod({row, column, rowIndex, columnIndex}) {
- if (rowIndex === 0) {
- if (columnIndex === 0) {
- return [1, 1];
- }
- }
- },
- getUserItemTotal() {
- this.loadingTotal = true;
- getBdTotalV2(
- this.addDateRange(
- {
- collectSampleId: !!this.$route.query.id
- ? this.$route.query.id
- : this.$store.getters.remark == "管理员"
- ? null
- : this.$store.getters.userId,
- },
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((res) => {
- this.loadingTotal = false;
- this.itemSummary = res.rows.map((item) => {
- return {
- ...item,
- promoterName: "总计",
- };
- });
- });
- },
- sortChange(col, prop, order) {
- this.prop = col.prop;
- this.sort = !!col.order ? (col.order == "descending" ? "desc" : "asc") : "desc";
- this.handleQuery();
- },
- toDetail(id) {
- },
- toIndexDetail(item) {
- this.$router.replace({
- path: "/supplyChain/kuaishou/indexDetails",
- query: {
- id: item.promoterId,
- name: item.promoterNickName,
- orderStartDate: this.$route.query.orderStartDate,
- orderEndDate: this.$route.query.orderEndDate,
- },
- });
- },
- getUserItemDetail() {
- this.loading = true;
- getBdDetailListV2(
- this.addDateRange(
- {
- ...this.queryParams,
- fieId: this.prop,
- sort: this.sort,
- collectSampleId: !!this.$route.query.id
- ? this.$route.query.id
- : this.$store.getters.remark == "管理员"
- ? null
- : this.$store.getters.userId,
- },
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((response) => {
- this.typeList = this.itemSummary.concat(response.rows);
- this.total = response.total;
- this.loading = false;
- });
- },
- getSummaries(param) {
- console.log(param);
- const {columns, data} = param;
- const sums = [];
- columns.forEach((column, index) => {
- if (index === 0) {
- sums[index] = "总计";
- return;
- } else if (index == 1) {
- sums[index] = "N/A";
- return;
- } else if (index == 9) {
- sums[index] = "-";
- return;
- } else if (index == 2) {
- sums[index] = "-";
- return;
- }
- for (const key in this.itemSummary[0]) {
- if (key == column.property) {
- if (key == "validRadio" || key == "deliveryRadio") {
- sums[index] = this.itemSummary[0][key]
- ? (this.itemSummary[0][key] * 100).toFixed(2) + "%"
- : "-";
- } else if (
- key == "payAmount" ||
- key == "regimentalPromotionAmount" ||
- key == "totalRegimentalSettleAmount"
- ) {
- sums[index] = this.itemSummary[0][key]
- ? this.itemSummary[0][key] / 100
- : "-";
- } else {
- sums[index] = this.itemSummary[0][key];
- }
- }
- }
- // const values = data.map((item) => Number(item[column.property]));
- // console.log(values)
- // if (!values.every((value) => isNaN(value))) {
- // sums[index] = values.reduce((prev, curr) => {
- // const value = Number(curr);
- // if (!isNaN(value)) {
- // return prev + curr;
- // } else {
- // return prev;
- // }
- // }, 0);
- // // sums[index] += " 元";
- // } else {
- // sums[index] = "N/A";
- // }
- });
- return sums;
- },
- /** 查询字典类型列表 */
- 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.getUserItemTotal();
- this.getUserItemDetail();
- },
- /** 重置按钮操作 */
- 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;
- if (
- this.$route &&
- this.$route.query.id &&
- this.$route.query.orderStartDate &&
- this.$route.query.orderEndDate
- ) {
- this.uploadDate = [
- this.$route.query.orderStartDate,
- this.$route.query.orderEndDate,
- ];
- this.getUserItemDetail();
- } else {
- 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.getUserItemDetail();
- }
- this.resetForm("queryForm");
- this.queryParams.pageNum = 1;
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map((item) => item.id);
- },
- },
- };
- </script>
|