bytedanceGoods.vue 14 KB

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