indexDetails.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  1. <style scoped lang="scss">
  2. ::v-deep a {
  3. color: #409eff;
  4. display: block;
  5. }
  6. </style>
  7. <template>
  8. <div class="app-container">
  9. <div></div>
  10. <el-form
  11. :model="queryParams"
  12. ref="queryForm"
  13. size="small"
  14. :inline="true"
  15. v-show="showSearch"
  16. label-width="100px"
  17. >
  18. <el-form-item label="达人名称" prop="promoterName">
  19. {{ $route.query ? $route.query.name : "-" }}
  20. </el-form-item>
  21. <el-form-item label="达人Id" prop="promoterId">
  22. {{ $route.query ? $route.query.id : "-" }}
  23. </el-form-item>
  24. <br />
  25. <el-form-item label="商品名称" prop="itemTitle">
  26. <el-input
  27. v-model="queryParams.itemTitle"
  28. placeholder="请输入商品名称"
  29. clearable
  30. style="width: 240px"
  31. @keyup.enter.native="handleQuery"
  32. />
  33. </el-form-item>
  34. <el-form-item label="商品Id" prop="itemId">
  35. <el-input
  36. v-model.number="queryParams.itemId"
  37. placeholder="请输入商品Id"
  38. clearable
  39. style="width: 240px"
  40. @keyup.enter.native="handleQuery"
  41. />
  42. </el-form-item>
  43. <el-form-item>
  44. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  45. >搜索</el-button
  46. >
  47. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  48. <el-button
  49. type="warning"
  50. plain
  51. icon="el-icon-download"
  52. size="mini"
  53. @click="handleExport"
  54. :loading="downLoadLoading"
  55. >导出</el-button
  56. >
  57. <el-button size="mini" @click="toSamplingList">领样状态</el-button>
  58. </el-form-item>
  59. </el-form>
  60. <el-table
  61. v-loading="loading"
  62. :data="typeList"
  63. @selection-change="handleSelectionChange"
  64. ref="multipleTable"
  65. >
  66. <!-- <el-table-column type="selection" width="55" align="center" /> -->
  67. <el-table-column label="商品图片" align="center" prop="imageUrl">
  68. <template slot-scope="scope">
  69. <img :src="scope.row.imageUrl" alt="" style="width: 100px; height: auto" />
  70. </template>
  71. </el-table-column>
  72. <el-table-column label="商品名称" align="center" prop="itemTitle">
  73. <template slot-scope="scope">
  74. <a @click="toIndexDetail(scope.row)">
  75. {{ scope.row.itemTitle }}
  76. </a>
  77. </template>
  78. </el-table-column>
  79. <el-table-column label="商品Id" align="center" prop="itemId" />
  80. <el-table-column label="商品单价" align="center" prop="reservePrice">
  81. <template slot-scope="scope"> {{ scope.row.reservePrice / 100 }}元 </template>
  82. </el-table-column>
  83. <el-table-column label="订单数" align="center" prop="orderNum"> </el-table-column>
  84. <el-table-column label="有效订单数" align="center" prop="validOrderNUm" />
  85. <el-table-column label="有效率" align="center" prop="validRadio" width="100">
  86. <template slot-scope="scope">
  87. {{ scope.row.validRadio ? (scope.row.validRadio * 100).toFixed(2) + "%" : "-" }}
  88. </template>
  89. </el-table-column>
  90. <el-table-column label="发货数" align="center" prop="deliveryNum" width="100">
  91. </el-table-column>
  92. <el-table-column label="发货率" align="center" prop="deliveryRadio" width="100">
  93. <template slot-scope="scope">
  94. {{
  95. scope.row.deliveryRadio
  96. ? (scope.row.deliveryRadio * 100).toFixed(2) + "%"
  97. : "-"
  98. }}
  99. </template>
  100. </el-table-column>
  101. <el-table-column label="未发货数" align="center" prop="notDeliveryNum" width="100">
  102. </el-table-column>
  103. <el-table-column label="付款金额" align="center" prop="payAmount">
  104. <template slot-scope="scope">
  105. {{ allMoney(scope.row.payAmount / 100) }}
  106. </template>
  107. </el-table-column>
  108. <el-table-column label="服务费率" align="center" prop="regimentalPromotionRate">
  109. <template slot-scope="scope">
  110. {{ scope.row.regimentalPromotionRate / 10 + "%" }}
  111. </template>
  112. </el-table-column>
  113. <el-table-column label="领样状态" align="center" prop="status" width="150">
  114. <template slot-scope="scope">
  115. <div v-if="scope.row.status">
  116. {{ scope.row.status | statusName }}
  117. </div>
  118. <div v-else>-</div>
  119. </template>
  120. </el-table-column>
  121. <el-table-column label="商品状态" align="center" prop="activityItemStatus" width="150"/>
  122. <el-table-column label="操作" align="center" prop="action" width="150">
  123. <template slot-scope="scope">
  124. <el-button
  125. size="mini"
  126. type="text"
  127. @click="checkStatus(scope.row)"
  128. :disabled="!!scope.row.status"
  129. >领样申请</el-button
  130. >
  131. </template>
  132. </el-table-column>
  133. </el-table>
  134. <pagination
  135. v-show="total > 0"
  136. :total="total"
  137. :page.sync="queryParams.pageNum"
  138. :limit.sync="queryParams.pageSize"
  139. @pagination="getOrderDetail"
  140. />
  141. <div class="echart">
  142. <div class="echartBody">
  143. <h3 style="font-weight: bold">订单统计</h3>
  144. <el-date-picker
  145. v-model="uploadDate"
  146. style="width: 240px"
  147. value-format="yyyy-MM-dd"
  148. format="yyyy-MM-dd"
  149. type="daterange"
  150. range-separator="-"
  151. start-placeholder="开始日期"
  152. end-placeholder="结束日期"
  153. :picker-options="pickerOptions"
  154. @change="getAllEchartsData"
  155. ></el-date-picker>
  156. <div id="echart" ref="echart" style="height: 500px; width: 100%"></div>
  157. </div>
  158. </div>
  159. </div>
  160. </template>
  161. <script>
  162. import {
  163. listType,
  164. getType,
  165. delType,
  166. addType,
  167. updateType,
  168. refreshCache,
  169. } from "@/api/system/dict/type";
  170. import {
  171. getOrderList,
  172. getOrderDetail,
  173. getOrderStatistics,
  174. downFilePost,
  175. samplesCheck,
  176. } from "@/api/supplyChain/supplyChain";
  177. var echarts = require("echarts");
  178. export default {
  179. name: "sale",
  180. dicts: ["sys_normal_disable"],
  181. data() {
  182. return {
  183. downLoadLoading: false,
  184. dialogTableVisible: false,
  185. logPage: {
  186. pageNum: 1,
  187. pageSize: 10,
  188. },
  189. logData: [],
  190. logTotal: 0,
  191. logLoading: false,
  192. // 遮罩层
  193. loading: true,
  194. // 选中数组
  195. ids: [],
  196. // 非单个禁用
  197. single: true,
  198. // 非多个禁用
  199. multiple: true,
  200. // 显示搜索条件
  201. showSearch: true,
  202. // 总条数
  203. total: 0,
  204. // 字典表格数据
  205. typeList: [],
  206. // 弹出层标题
  207. title: "",
  208. // 是否显示弹出层
  209. open: false,
  210. // 分配销售
  211. openAllocation: false,
  212. // 选择的销售id
  213. saleId: undefined,
  214. // 获取用户id
  215. userId: undefined,
  216. // 销售列表
  217. saleList: [],
  218. // 分配销售确定loading
  219. confirmLoadingSale: false,
  220. // 日期范围
  221. dateRange: [],
  222. // 查询参数
  223. queryParams: {
  224. pageNum: 1,
  225. pageSize: 10,
  226. itemId: undefined,
  227. itemTitle: undefined,
  228. orderStartDate: undefined,
  229. orderEndDate: undefined,
  230. },
  231. uploadDate: [new Date(), new Date()],
  232. //查询参数所用下拉数据
  233. queryParamsList: {},
  234. pickerOptions: {
  235. shortcuts: [
  236. {
  237. text: "今天",
  238. onClick(picker) {
  239. const end = new Date();
  240. const start = new Date();
  241. picker.$emit("pick", [start, end]);
  242. },
  243. },
  244. {
  245. text: "昨天",
  246. onClick(picker) {
  247. const end = new Date();
  248. const start = new Date();
  249. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  250. end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
  251. picker.$emit("pick", [start, end]);
  252. },
  253. },
  254. {
  255. text: "最近三天",
  256. onClick(picker) {
  257. const end = new Date();
  258. const start = new Date();
  259. start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
  260. picker.$emit("pick", [start, end]);
  261. },
  262. },
  263. {
  264. text: "最近一周",
  265. onClick(picker) {
  266. const end = new Date();
  267. const start = new Date();
  268. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  269. picker.$emit("pick", [start, end]);
  270. },
  271. },
  272. {
  273. text: "最近一个月",
  274. onClick(picker) {
  275. const end = new Date();
  276. const start = new Date();
  277. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  278. picker.$emit("pick", [start, end]);
  279. },
  280. },
  281. {
  282. text: "最近三个月",
  283. onClick(picker) {
  284. const end = new Date();
  285. const start = new Date();
  286. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  287. picker.$emit("pick", [start, end]);
  288. },
  289. },
  290. ],
  291. },
  292. };
  293. },
  294. filters: {
  295. statusName(status) {
  296. let name = {
  297. 1: "待审核",
  298. 2: "领样申请审核拒绝",
  299. 3: "待录入订单号",
  300. 4: "已发货",
  301. 5: "已签收待上传作业",
  302. 6: "待招商审核",
  303. 7: "审核通过",
  304. };
  305. return name[status];
  306. },
  307. },
  308. created() {
  309. let start = new Date();
  310. let end = new Date();
  311. let y = end.getFullYear();
  312. let MM = end.getMonth() + 1;
  313. MM = MM < 10 ? "0" + MM : MM;
  314. let dd = end.getDate();
  315. dd = dd < 10 ? "0" + dd : dd;
  316. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  317. let sy = start.getFullYear();
  318. let sMM = start.getMonth() + 1;
  319. sMM = sMM < 10 ? "0" + sMM : sMM;
  320. let sdd = start.getDate();
  321. sdd = sdd < 10 ? "0" + sdd : sdd;
  322. this.uploadDate = [`${sy}-${sMM}-${sdd}`, `${y}-${MM}-${dd}`];
  323. if (
  324. this.$route &&
  325. this.$route.query.id &&
  326. this.$route.query.orderStartDate &&
  327. this.$route.query.orderEndDate
  328. ) {
  329. this.getOrderDetail();
  330. this.getOrderStatistics();
  331. }
  332. },
  333. mounted() {
  334. this.$nextTick(() => {
  335. // this.getList();
  336. // this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'))
  337. });
  338. },
  339. methods: {
  340. checkStatus(item) {
  341. samplesCheck({
  342. promoterId: this.$route.query.id,
  343. itemId: item.itemId,
  344. userId: this.$store.getters.userId,
  345. }).then((res) => {
  346. this.$router.replace({
  347. path: "/goodsManagement/set",
  348. query: {
  349. promoterIds: JSON.stringify([+res.id]),
  350. itemIds: JSON.stringify([+item.itemId]),
  351. },
  352. });
  353. });
  354. },
  355. toSamplingList() {
  356. this.$router.replace({
  357. path: "/goodsManagement/samplingList",
  358. query: {
  359. promoterId: this.$route.query.id,
  360. },
  361. });
  362. },
  363. /** 导出按钮操作 */
  364. handleExport() {
  365. this.downLoadLoading = true;
  366. downFilePost("/isv/supply_chain/exportPromoter", {
  367. ...this.queryParams,
  368. orderStartDate: this.$route.query.orderStartDate,
  369. orderEndDate: this.$route.query.orderEndDate,
  370. promoterId: this.$route.query.id,
  371. }).then((res) => {
  372. let blob = new Blob([res], {
  373. type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  374. });
  375. let downloadElement = document.createElement("a");
  376. let href = window.URL.createObjectURL(blob); //创建下载的链接
  377. downloadElement.href = href;
  378. downloadElement.download = `达人_${this.$route.query.name}${this.$route.query.orderStartDate}-${this.$route.query.orderEndDate}带货详情.xlsx`; //下载后文件名
  379. document.body.appendChild(downloadElement);
  380. downloadElement.click(); //点击下载
  381. document.body.removeChild(downloadElement); //下载完成移除元素
  382. window.URL.revokeObjectURL(href); //释放掉blob对象
  383. this.downLoadLoading = false;
  384. });
  385. },
  386. toDetail(id) {},
  387. toIndexDetail(item) {
  388. this.$router.replace({
  389. path: "/supplyChain/goodsDetails",
  390. query: {
  391. id: item.itemId,
  392. name: item.itemTitle,
  393. orderStartDate: this.$route.query.orderStartDate,
  394. orderEndDate: this.$route.query.orderEndDate,
  395. },
  396. });
  397. },
  398. getOrderDetail() {
  399. this.loading = true;
  400. getOrderDetail({
  401. ...this.queryParams,
  402. orderStartDate: this.$route.query.orderStartDate,
  403. orderEndDate: this.$route.query.orderEndDate,
  404. promoterId: this.$route.query.id,
  405. }).then((response) => {
  406. this.typeList = response.rows;
  407. this.total = response.total;
  408. this.loading = false;
  409. });
  410. },
  411. getAllEchartsData(e) {
  412. console.log(e);
  413. if (e.length == 2) {
  414. this.getOrderStatistics();
  415. }
  416. },
  417. getOrderStatistics() {
  418. getOrderStatistics({
  419. promoterId: this.$route.query.id,
  420. orderStartDate: this.uploadDate[0],
  421. orderEndDate: this.uploadDate[1],
  422. }).then((response) => {
  423. this.initEchart("echart", this.handlerEchartOption(response.data));
  424. });
  425. },
  426. /** 获取echart的值 */
  427. initEchart(idName, optionName) {
  428. let that = this;
  429. const chart = this.$refs[idName];
  430. if (chart) {
  431. const myChart = echarts.init(document.getElementById(idName));
  432. myChart.setOption(optionName);
  433. window.addEventListener("resize", function () {
  434. that.clientWidth = document.documentElement.clientWidth - 224;
  435. myChart.resize();
  436. });
  437. }
  438. },
  439. /** echarts数据展示 订单统计*/
  440. handlerEchartOption(data, typeShow) {
  441. let option = {
  442. noDataLoadingOption: {
  443. text: "暂无数据",
  444. effect: "bubble",
  445. effectOption: {
  446. effect: {
  447. n: 0,
  448. },
  449. },
  450. },
  451. tooltip: {
  452. trigger: "axis",
  453. // formatter: function(params) {
  454. // if(typeShow == 'play_duration_3s'){
  455. // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
  456. // }else{
  457. // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
  458. // }
  459. // },
  460. },
  461. grid: {
  462. left: "3%",
  463. right: "4%",
  464. bottom: "3%",
  465. containLabel: true,
  466. },
  467. legend: {
  468. icon: "circle",
  469. top: "5%",
  470. right: "5%",
  471. itemWidth: 6,
  472. itemGap: 20,
  473. textStyle: {
  474. color: "#556677",
  475. },
  476. },
  477. xAxis: {
  478. type: "category",
  479. data: data.map((item) => {
  480. return item.date;
  481. }),
  482. boundaryGap: false,
  483. // 坐标轴线
  484. axisLine: {
  485. show: false,
  486. lineStyle: {
  487. color: "#999",
  488. },
  489. },
  490. // 分割线
  491. splitLine: {
  492. show: true,
  493. lineStyle: {
  494. type: "dashed",
  495. color: "#e5e5e5",
  496. },
  497. },
  498. },
  499. yAxis: {
  500. type: "value",
  501. axisLine: {
  502. show: false,
  503. lineStyle: {
  504. color: "#999",
  505. },
  506. },
  507. splitLine: {
  508. lineStyle: {
  509. type: "dashed",
  510. color: "#e5e5e5",
  511. },
  512. },
  513. },
  514. series: [
  515. {
  516. smooth: true,
  517. name: "订单统计",
  518. type: "line",
  519. stack: "总量",
  520. data: data.map((item) => {
  521. return item.orderNum;
  522. }),
  523. symbol: "circle",
  524. symbolSize: 6,
  525. lineStyle: {
  526. normal: {
  527. width: 2,
  528. },
  529. },
  530. itemStyle: {
  531. borderColor: "#ffffff",
  532. borderWidth: 0,
  533. },
  534. },
  535. ],
  536. };
  537. return option;
  538. },
  539. /** 查询字典类型列表 */
  540. getList() {
  541. this.loading = true;
  542. getOrderList(
  543. this.addDateRange(
  544. this.queryParams,
  545. this.uploadDate,
  546. "orderStartDate",
  547. "orderEndDate"
  548. )
  549. ).then((response) => {
  550. this.typeList = response.rows;
  551. this.total = response.total;
  552. this.loading = false;
  553. });
  554. },
  555. // 取消按钮
  556. cancel() {
  557. this.open = false;
  558. this.confirmLoading = false;
  559. this.reset();
  560. },
  561. // 表单重置
  562. reset() {
  563. this.form = {};
  564. this.dateFile = null;
  565. this.resetForm("form");
  566. },
  567. /** 搜索按钮操作 */
  568. handleQuery() {
  569. this.queryParams.pageNum = 1;
  570. this.getOrderDetail();
  571. },
  572. /** 重置按钮操作 */
  573. resetQuery() {
  574. this.dateRange = [];
  575. // let date = new Date();
  576. // let y = date.getFullYear();
  577. // let MM = date.getMonth() + 1;
  578. // MM = MM < 10 ? "0" + MM : MM;
  579. // let dd = date.getDate();
  580. // dd = dd < 10 ? "0" + dd : dd;
  581. // this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  582. this.resetForm("queryForm");
  583. this.queryParams.pageNum = 1;
  584. this.handleQuery();
  585. },
  586. // 多选框选中数据
  587. handleSelectionChange(selection) {
  588. this.ids = selection.map((item) => item.id);
  589. },
  590. },
  591. };
  592. </script>