channelDetailsV2.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. <style scoped lang="scss">
  2. ::v-deep a {
  3. color: #409eff;
  4. display: block;
  5. }
  6. p {
  7. text-align: left;
  8. margin: 0;
  9. }
  10. </style>
  11. <template>
  12. <div class="app-container">
  13. <div></div>
  14. <el-form
  15. :model="queryParams"
  16. ref="queryForm"
  17. size="small"
  18. :inline="true"
  19. v-show="showSearch"
  20. label-width="100px"
  21. >
  22. <!-- <el-form-item label="商品名称" prop="itemTitle">
  23. <el-input
  24. v-model="queryParams.itemTitle"
  25. placeholder="请输入商品名称"
  26. clearable
  27. style="width: 240px"
  28. @keyup.enter.native="handleQuery"
  29. />
  30. </el-form-item>
  31. <el-form-item label="商品Id" prop="itemId">
  32. <el-input
  33. v-model.number="queryParams.itemId"
  34. placeholder="请输入商品Id"
  35. clearable
  36. style="width: 240px"
  37. @keyup.enter.native="handleQuery"
  38. />
  39. </el-form-item> -->
  40. <el-form-item label="选择日期">
  41. <el-date-picker
  42. v-model="uploadDate"
  43. style="width: 240px"
  44. value-format="yyyy-MM-dd"
  45. format="yyyy-MM-dd"
  46. type="daterange"
  47. range-separator="-"
  48. start-placeholder="开始日期"
  49. end-placeholder="结束日期"
  50. ></el-date-picker>
  51. </el-form-item>
  52. <el-form-item>
  53. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  54. >搜索
  55. </el-button
  56. >
  57. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  58. <el-button
  59. type="warning"
  60. plain
  61. icon="el-icon-download"
  62. size="mini"
  63. @click="handleExport"
  64. :loading="downLoadLoading"
  65. >导出
  66. </el-button
  67. >
  68. </el-form-item>
  69. </el-form>
  70. <el-table
  71. v-loading="loading"
  72. :data="typeList"
  73. @selection-change="handleSelectionChange"
  74. @sort-change="sortChange"
  75. ref="multipleTable"
  76. :span-method="arraySpanMethod"
  77. border
  78. >
  79. <!-- :summary-method="getSummaries" -->
  80. <!-- show-summary -->
  81. <el-table-column label="达人名称" align="center" prop="itemTitle" width="300">
  82. <template slot-scope="scope">
  83. <div style="display: flex; width: 100%" v-if="scope.row.promoterName != '总计'">
  84. <div style="width: 40%">
  85. <img
  86. :src="scope.row.promoterUrl"
  87. alt=""
  88. style="width: 70px; height: auto"
  89. />
  90. </div>
  91. <div style="width: 60%">
  92. <a
  93. style="
  94. text-overflow: ellipsis;
  95. white-space: nowrap;
  96. overflow: hidden;
  97. width: 100%;
  98. text-align: left;
  99. "
  100. :title="scope.row.promoterName"
  101. >
  102. {{ scope.row.promoterName }}
  103. </a>
  104. <p>达人Id: {{ scope.row.promoterId }}</p>
  105. </div>
  106. </div>
  107. <div v-else style="font-size: 20px">
  108. {{ scope.row.promoterName }}
  109. </div>
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="达人标签" align="center" prop="itemTitle" width="220">
  113. <template slot-scope="scope">
  114. <div v-if="scope.row.promoterName != '总计'">
  115. <el-tag size="mini" v-for="tag in scope.row.tags">{{tag.tag}} {{tag.proportion}}</el-tag>
  116. </div>
  117. <div v-else>
  118. -
  119. </div>
  120. </template>
  121. </el-table-column>
  122. <el-table-column label="领样数" align="center" prop="sampleCount" sortable="custom">
  123. </el-table-column>
  124. <el-table-column label="订单数" align="center" prop="orderNum" sortable="custom">
  125. </el-table-column>
  126. <el-table-column
  127. label="有效订单数"
  128. align="center"
  129. prop="validOrderNum"
  130. sortable="custom"
  131. >
  132. </el-table-column>
  133. <el-table-column
  134. label="有效订单率"
  135. align="center"
  136. prop="validOrderRate"
  137. sortable="custom"
  138. >
  139. <template slot-scope="scope">
  140. {{ scope.row.validOrderRate }}
  141. </template>
  142. </el-table-column>
  143. <el-table-column
  144. label="订单金额"
  145. align="center"
  146. prop="orderAmount"
  147. sortable="custom"
  148. >
  149. <template slot-scope="scope">
  150. {{ scope.row.orderAmount }}
  151. </template>
  152. </el-table-column>
  153. <el-table-column
  154. label="预估服务费收入"
  155. align="center"
  156. prop="regimentalPromotionAmount"
  157. sortable="custom"
  158. >
  159. <template slot-scope="scope">
  160. {{
  161. scope.row.regimentalPromotionAmount
  162. }}
  163. </template>
  164. </el-table-column>
  165. <el-table-column
  166. label="结算服务费收入"
  167. align="center"
  168. prop="totalRegimentalSettleAmount"
  169. sortable="custom"
  170. >
  171. <template slot-scope="scope">
  172. {{
  173. scope.row.totalRegimentalSettleAmount
  174. }}
  175. </template>
  176. </el-table-column>
  177. </el-table>
  178. <pagination
  179. v-show="total > 0"
  180. :total="total"
  181. :page.sync="queryParams.pageNum"
  182. :limit.sync="queryParams.pageSize"
  183. @pagination="getUserItemDetail"
  184. />
  185. </div>
  186. </template>
  187. <script>
  188. import {
  189. listType,
  190. getType,
  191. delType,
  192. addType,
  193. updateType,
  194. refreshCache,
  195. } from "@/api/system/dict/type";
  196. import {
  197. getBdDetailListV2,
  198. getOrderList,
  199. getItemDetail,
  200. downFilePost,
  201. getUserItemDetail,
  202. getBdTotalV2,
  203. } from "@/api/supplyChain/supplyChain";
  204. var echarts = require("echarts");
  205. export default {
  206. name: "ClaimOk",
  207. dicts: ["sys_normal_disable"],
  208. data() {
  209. return {
  210. downLoadLoading: false,
  211. dialogTableVisible: false,
  212. logPage: {
  213. pageNum: 1,
  214. pageSize: 10,
  215. },
  216. logData: [],
  217. logTotal: 0,
  218. logLoading: false,
  219. // 遮罩层
  220. loading: true,
  221. // 选中数组
  222. ids: [],
  223. // 非单个禁用
  224. single: true,
  225. // 非多个禁用
  226. multiple: true,
  227. // 显示搜索条件
  228. showSearch: true,
  229. // 总条数
  230. total: 0,
  231. // 字典表格数据
  232. typeList: [],
  233. // 弹出层标题
  234. title: "",
  235. // 是否显示弹出层
  236. open: false,
  237. // 分配销售
  238. openAllocation: false,
  239. // 选择的销售id
  240. saleId: undefined,
  241. // 获取用户id
  242. userId: undefined,
  243. // 销售列表
  244. saleList: [],
  245. // 分配销售确定loading
  246. confirmLoadingSale: false,
  247. // 日期范围
  248. dateRange: [],
  249. // 查询参数
  250. queryParams: {
  251. pageNum: 1,
  252. pageSize: 10,
  253. itemId: undefined,
  254. itemTitle: undefined,
  255. orderStartDate: undefined,
  256. orderEndDate: undefined,
  257. },
  258. uploadDate: [new Date(), new Date()],
  259. //查询参数所用下拉数据
  260. queryParamsList: {},
  261. prop: "orderNum",
  262. sort: "desc",
  263. itemSummary: [],
  264. loadingTotal: false,
  265. };
  266. },
  267. created() {
  268. if (
  269. this.$route &&
  270. this.$route.query.id &&
  271. this.$route.query.orderStartDate &&
  272. this.$route.query.orderEndDate
  273. ) {
  274. this.uploadDate = [
  275. this.$route.query.orderStartDate,
  276. this.$route.query.orderEndDate,
  277. ];
  278. this.getUserItemTotal();
  279. this.getUserItemDetail();
  280. } else {
  281. let date = new Date();
  282. let y = date.getFullYear();
  283. let MM = date.getMonth() + 1;
  284. MM = MM < 10 ? "0" + MM : MM;
  285. let dd = date.getDate();
  286. dd = dd < 10 ? "0" + dd : dd;
  287. this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  288. this.getUserItemTotal();
  289. this.getUserItemDetail();
  290. }
  291. },
  292. mounted() {
  293. this.$nextTick(() => {
  294. });
  295. },
  296. methods: {
  297. /** 导出按钮操作 */
  298. handleExport() {
  299. this.downLoadLoading = true;
  300. downFilePost(
  301. "/isv/supply_chain/exportBdDetailV2",
  302. this.addDateRange(
  303. {
  304. ...this.queryParams,
  305. collectSampleId: !!this.$route.query.id
  306. ? this.$route.query.id
  307. : this.$store.getters.remark == "管理员"
  308. ? null
  309. : this.$store.getters.userId,
  310. },
  311. this.uploadDate,
  312. "orderStartDate",
  313. "orderEndDate"
  314. )
  315. ).then((res) => {
  316. let blob = new Blob([res], {
  317. type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  318. });
  319. let downloadElement = document.createElement("a");
  320. let href = window.URL.createObjectURL(blob); //创建下载的链接
  321. downloadElement.href = href;
  322. downloadElement.download = `渠道详情_${this.uploadDate[0]}-${this.uploadDate[1]}.xlsx`; //下载后文件名
  323. document.body.appendChild(downloadElement);
  324. downloadElement.click(); //点击下载
  325. document.body.removeChild(downloadElement); //下载完成移除元素
  326. window.URL.revokeObjectURL(href); //释放掉blob对象
  327. this.downLoadLoading = false;
  328. });
  329. },
  330. arraySpanMethod({row, column, rowIndex, columnIndex}) {
  331. if (rowIndex === 0) {
  332. if (columnIndex === 0) {
  333. return [1, 1];
  334. }
  335. }
  336. },
  337. getUserItemTotal() {
  338. this.loadingTotal = true;
  339. getBdTotalV2(
  340. this.addDateRange(
  341. {
  342. collectSampleId: !!this.$route.query.id
  343. ? this.$route.query.id
  344. : this.$store.getters.remark == "管理员"
  345. ? null
  346. : this.$store.getters.userId,
  347. },
  348. this.uploadDate,
  349. "orderStartDate",
  350. "orderEndDate"
  351. )
  352. ).then((res) => {
  353. this.loadingTotal = false;
  354. this.itemSummary = res.rows.map((item) => {
  355. return {
  356. ...item,
  357. promoterName: "总计",
  358. };
  359. });
  360. });
  361. },
  362. sortChange(col, prop, order) {
  363. this.prop = col.prop;
  364. this.sort = !!col.order ? (col.order == "descending" ? "desc" : "asc") : "desc";
  365. this.handleQuery();
  366. },
  367. toDetail(id) {
  368. },
  369. toIndexDetail(item) {
  370. this.$router.replace({
  371. path: "/supplyChain/kuaishou/indexDetails",
  372. query: {
  373. id: item.promoterId,
  374. name: item.promoterNickName,
  375. orderStartDate: this.$route.query.orderStartDate,
  376. orderEndDate: this.$route.query.orderEndDate,
  377. },
  378. });
  379. },
  380. getUserItemDetail() {
  381. this.loading = true;
  382. getBdDetailListV2(
  383. this.addDateRange(
  384. {
  385. ...this.queryParams,
  386. fieId: this.prop,
  387. sort: this.sort,
  388. collectSampleId: !!this.$route.query.id
  389. ? this.$route.query.id
  390. : this.$store.getters.remark == "管理员"
  391. ? null
  392. : this.$store.getters.userId,
  393. },
  394. this.uploadDate,
  395. "orderStartDate",
  396. "orderEndDate"
  397. )
  398. ).then((response) => {
  399. this.typeList = this.itemSummary.concat(response.rows);
  400. this.total = response.total;
  401. this.loading = false;
  402. });
  403. },
  404. getSummaries(param) {
  405. console.log(param);
  406. const {columns, data} = param;
  407. const sums = [];
  408. columns.forEach((column, index) => {
  409. if (index === 0) {
  410. sums[index] = "总计";
  411. return;
  412. } else if (index == 1) {
  413. sums[index] = "N/A";
  414. return;
  415. } else if (index == 9) {
  416. sums[index] = "-";
  417. return;
  418. } else if (index == 2) {
  419. sums[index] = "-";
  420. return;
  421. }
  422. for (const key in this.itemSummary[0]) {
  423. if (key == column.property) {
  424. if (key == "validRadio" || key == "deliveryRadio") {
  425. sums[index] = this.itemSummary[0][key]
  426. ? (this.itemSummary[0][key] * 100).toFixed(2) + "%"
  427. : "-";
  428. } else if (
  429. key == "payAmount" ||
  430. key == "regimentalPromotionAmount" ||
  431. key == "totalRegimentalSettleAmount"
  432. ) {
  433. sums[index] = this.itemSummary[0][key]
  434. ? this.itemSummary[0][key] / 100
  435. : "-";
  436. } else {
  437. sums[index] = this.itemSummary[0][key];
  438. }
  439. }
  440. }
  441. // const values = data.map((item) => Number(item[column.property]));
  442. // console.log(values)
  443. // if (!values.every((value) => isNaN(value))) {
  444. // sums[index] = values.reduce((prev, curr) => {
  445. // const value = Number(curr);
  446. // if (!isNaN(value)) {
  447. // return prev + curr;
  448. // } else {
  449. // return prev;
  450. // }
  451. // }, 0);
  452. // // sums[index] += " 元";
  453. // } else {
  454. // sums[index] = "N/A";
  455. // }
  456. });
  457. return sums;
  458. },
  459. /** 查询字典类型列表 */
  460. getList() {
  461. this.loading = true;
  462. getOrderList(
  463. this.addDateRange(
  464. this.queryParams,
  465. this.uploadDate,
  466. "orderStartDate",
  467. "orderEndDate"
  468. )
  469. ).then((response) => {
  470. this.typeList = response.rows;
  471. this.total = response.total;
  472. this.loading = false;
  473. });
  474. },
  475. // 取消按钮
  476. cancel() {
  477. this.open = false;
  478. this.confirmLoading = false;
  479. this.reset();
  480. },
  481. // 表单重置
  482. reset() {
  483. this.form = {};
  484. this.dateFile = null;
  485. this.resetForm("form");
  486. },
  487. /** 搜索按钮操作 */
  488. handleQuery() {
  489. this.queryParams.pageNum = 1;
  490. this.getUserItemTotal();
  491. this.getUserItemDetail();
  492. },
  493. /** 重置按钮操作 */
  494. resetQuery() {
  495. this.dateRange = [];
  496. // let date = new Date();
  497. // let y = date.getFullYear();
  498. // let MM = date.getMonth() + 1;
  499. // MM = MM < 10 ? "0" + MM : MM;
  500. // let dd = date.getDate();
  501. // dd = dd < 10 ? "0" + dd : dd;
  502. if (
  503. this.$route &&
  504. this.$route.query.id &&
  505. this.$route.query.orderStartDate &&
  506. this.$route.query.orderEndDate
  507. ) {
  508. this.uploadDate = [
  509. this.$route.query.orderStartDate,
  510. this.$route.query.orderEndDate,
  511. ];
  512. this.getUserItemDetail();
  513. } else {
  514. let date = new Date();
  515. let y = date.getFullYear();
  516. let MM = date.getMonth() + 1;
  517. MM = MM < 10 ? "0" + MM : MM;
  518. let dd = date.getDate();
  519. dd = dd < 10 ? "0" + dd : dd;
  520. this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  521. this.getUserItemDetail();
  522. }
  523. this.resetForm("queryForm");
  524. this.queryParams.pageNum = 1;
  525. this.handleQuery();
  526. },
  527. // 多选框选中数据
  528. handleSelectionChange(selection) {
  529. this.ids = selection.map((item) => item.id);
  530. },
  531. },
  532. };
  533. </script>