goodsDetails.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  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="itemTitle">
  19. {{ $route.query ? $route.query.name : "-" }}
  20. </el-form-item>
  21. <el-form-item label="商品Id" prop="itemId">
  22. {{ $route.query ? $route.query.id : "-" }}
  23. </el-form-item>
  24. <br/>
  25. <el-form-item label="达人名称" prop="promoterNickName">
  26. <el-input
  27. v-model="queryParams.promoterNickName"
  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="promoterId">
  35. <el-input
  36. v-model.number="queryParams.promoterId"
  37. placeholder="请输入达人Id"
  38. clearable
  39. style="width: 240px"
  40. @keyup.enter.native="handleQuery"
  41. />
  42. </el-form-item>
  43. <el-form-item label="人员名称" prop="userId">
  44. <el-select
  45. filterable
  46. v-model="queryParams.userId"
  47. placeholder="人员名称"
  48. clearable
  49. style="width: 240px"
  50. >
  51. <el-option
  52. v-for="item in queryParamsList.personList"
  53. :key="item.userId"
  54. :label="item.nickMame"
  55. :value="item.userId"
  56. >
  57. <div style="display: flex">
  58. <span
  59. style="
  60. width: 10px;
  61. height: 10px;
  62. border-radius: 50%;
  63. background-color: green;
  64. position: relative;
  65. top: 12px;
  66. margin-right: 5px;
  67. "
  68. :style="
  69. item.status == '0'
  70. ? 'backgroundColor:green'
  71. : 'backgroundColor:red'
  72. "
  73. >{{ item.value }}</span
  74. ><span>{{ item.nickMame }}</span>
  75. </div>
  76. </el-option>
  77. </el-select>
  78. </el-form-item>
  79. <el-form-item>
  80. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  81. >搜索
  82. </el-button
  83. >
  84. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  85. <el-button
  86. type="warning"
  87. plain
  88. icon="el-icon-download"
  89. size="mini"
  90. @click="handleExport"
  91. :loading="downLoadLoading"
  92. >导出
  93. </el-button
  94. >
  95. </el-form-item>
  96. </el-form>
  97. <el-table
  98. v-loading="loading"
  99. :data="typeList"
  100. @selection-change="handleSelectionChange"
  101. ref="multipleTable"
  102. >
  103. <!-- <el-table-column type="selection" width="55" align="center" /> -->
  104. <el-table-column label="达人名称" align="center" prop="promoterNickName">
  105. <template slot-scope="scope">
  106. <a @click="toIndexDetail(scope.row)">
  107. {{ scope.row.promoterNickName }}
  108. </a>
  109. </template>
  110. </el-table-column>
  111. <el-table-column label="达人Id" align="center" prop="promoterId"/>
  112. <el-table-column label="绑定人" align="center" prop="userName"/>
  113. <el-table-column label="订单数" align="center" prop="orderNum"></el-table-column>
  114. <el-table-column label="有效订单数" align="center" prop="validOrderNUm"/>
  115. <el-table-column label="有效率" align="center" prop="validRadio">
  116. <template slot-scope="scope">
  117. {{ scope.row.validRadio ? (scope.row.validRadio * 100).toFixed(2) + "%" : "-" }}
  118. </template>
  119. </el-table-column>
  120. <el-table-column label="发货数" align="center" prop="deliveryNum">
  121. </el-table-column>
  122. <el-table-column
  123. label="发货率"
  124. align="center"
  125. prop="shippingGreen"
  126. >
  127. <template slot-scope="scope">
  128. {{
  129. scope.row.shippingGreen
  130. ? (scope.row.shippingGreen * 100).toFixed(2) + "%"
  131. : "-"
  132. }}
  133. </template>
  134. </el-table-column>
  135. <el-table-column label="有效发货数" align="center" prop="effDeliveryNum">
  136. </el-table-column>
  137. <el-table-column label="有效发货率" align="center" prop="deliveryRadio">
  138. <template slot-scope="scope">
  139. {{
  140. scope.row.deliveryRadio
  141. ? (scope.row.deliveryRadio * 100).toFixed(2) + "%"
  142. : "-"
  143. }}
  144. </template>
  145. </el-table-column>
  146. <el-table-column label="未发货数" align="center" prop="notDeliveryNum">
  147. </el-table-column>
  148. <el-table-column label="付款金额" align="center" prop="payAmount">
  149. <template slot-scope="scope">
  150. {{ allMoney(scope.row.payAmount / 100) }}
  151. </template>
  152. </el-table-column>
  153. <el-table-column label="服务费率" align="center" prop="regimentalPromotionRate">
  154. <template slot-scope="scope">
  155. {{ scope.row.regimentalPromotionRate / 10 + "%" }}
  156. </template>
  157. </el-table-column>
  158. </el-table>
  159. <pagination
  160. v-show="total > 0"
  161. :total="total"
  162. :page.sync="queryParams.pageNum"
  163. :limit.sync="queryParams.pageSize"
  164. @pagination="getItemDetail"
  165. />
  166. </div>
  167. </template>
  168. <script>
  169. import {
  170. listType,
  171. getType,
  172. delType,
  173. addType,
  174. updateType,
  175. refreshCache,
  176. } from "@/api/system/dict/type";
  177. import {getOrderList, getItemDetail, downFilePost, getSupplyChainUserList} from "@/api/supplyChain/supplyChain";
  178. var echarts = require("echarts");
  179. export default {
  180. name: "sale",
  181. dicts: ["sys_normal_disable"],
  182. data() {
  183. return {
  184. downLoadLoading: false,
  185. dialogTableVisible: false,
  186. logPage: {
  187. pageNum: 1,
  188. pageSize: 10,
  189. },
  190. logData: [],
  191. logTotal: 0,
  192. logLoading: false,
  193. // 遮罩层
  194. loading: true,
  195. // 选中数组
  196. ids: [],
  197. // 非单个禁用
  198. single: true,
  199. // 非多个禁用
  200. multiple: true,
  201. // 显示搜索条件
  202. showSearch: true,
  203. // 总条数
  204. total: 0,
  205. // 字典表格数据
  206. typeList: [],
  207. // 弹出层标题
  208. title: "",
  209. // 是否显示弹出层
  210. open: false,
  211. // 分配销售
  212. openAllocation: false,
  213. // 选择的销售id
  214. saleId: undefined,
  215. // 获取用户id
  216. userId: undefined,
  217. // 销售列表
  218. saleList: [],
  219. // 分配销售确定loading
  220. confirmLoadingSale: false,
  221. // 日期范围
  222. dateRange: [],
  223. // 查询参数
  224. queryParams: {
  225. pageNum: 1,
  226. pageSize: 10,
  227. promoterId: undefined,
  228. promoterNickName: undefined,
  229. orderStartDate: undefined,
  230. orderEndDate: undefined,
  231. },
  232. uploadDate: [new Date(), new Date()],
  233. //查询参数所用下拉数据
  234. queryParamsList: {
  235. personList: [],
  236. },
  237. };
  238. },
  239. created() {
  240. if (
  241. this.$route &&
  242. this.$route.query.id &&
  243. this.$route.query.orderStartDate &&
  244. this.$route.query.orderEndDate
  245. ) {
  246. this.getItemDetail();
  247. }
  248. },
  249. mounted() {
  250. this.$nextTick(() => {
  251. this.getPersonList();
  252. });
  253. },
  254. methods: {
  255. /** 导出按钮操作 */
  256. handleExport() {
  257. this.downLoadLoading = true;
  258. downFilePost("/isv/supply_chain/exportItemDetail", {
  259. ...this.queryParams,
  260. orderStartDate: this.$route.query.orderStartDate,
  261. orderEndDate: this.$route.query.orderEndDate,
  262. itemId: this.$route.query.id,
  263. }).then((res) => {
  264. let blob = new Blob([res], {
  265. type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  266. });
  267. let downloadElement = document.createElement("a");
  268. let href = window.URL.createObjectURL(blob); //创建下载的链接
  269. downloadElement.href = href;
  270. downloadElement.download = `商品_${this.$route.query.name}${this.$route.query.orderStartDate}-${this.$route.query.orderEndDate}详情.xlsx`; //下载后文件名
  271. document.body.appendChild(downloadElement);
  272. downloadElement.click(); //点击下载
  273. document.body.removeChild(downloadElement); //下载完成移除元素
  274. window.URL.revokeObjectURL(href); //释放掉blob对象
  275. this.downLoadLoading = false;
  276. });
  277. },
  278. getPersonList() {
  279. getSupplyChainUserList().then((response) => {
  280. this.queryParamsList.personList = response.rows;
  281. });
  282. },
  283. toDetail(id) {
  284. },
  285. toIndexDetail(item) {
  286. this.$router.replace({
  287. path: "/supplyChain/kuaishou/indexDetails",
  288. query: {
  289. id: item.promoterId,
  290. name: item.promoterNickName,
  291. orderStartDate: this.$route.query.orderStartDate,
  292. orderEndDate: this.$route.query.orderEndDate,
  293. },
  294. });
  295. },
  296. getItemDetail() {
  297. this.loading = true;
  298. getItemDetail({
  299. ...this.queryParams,
  300. orderStartDate: this.$route.query.orderStartDate,
  301. orderEndDate: this.$route.query.orderEndDate,
  302. itemId: this.$route.query.id,
  303. }).then((response) => {
  304. this.typeList = response.rows;
  305. this.total = response.total;
  306. this.loading = false;
  307. });
  308. },
  309. /** 查询字典类型列表 */
  310. getList() {
  311. this.loading = true;
  312. getOrderList(
  313. this.addDateRange(
  314. this.queryParams,
  315. this.uploadDate,
  316. "orderStartDate",
  317. "orderEndDate"
  318. )
  319. ).then((response) => {
  320. this.typeList = response.rows;
  321. this.total = response.total;
  322. this.loading = false;
  323. });
  324. },
  325. // 取消按钮
  326. cancel() {
  327. this.open = false;
  328. this.confirmLoading = false;
  329. this.reset();
  330. },
  331. // 表单重置
  332. reset() {
  333. this.form = {};
  334. this.dateFile = null;
  335. this.resetForm("form");
  336. },
  337. /** 搜索按钮操作 */
  338. handleQuery() {
  339. this.queryParams.pageNum = 1;
  340. this.getItemDetail();
  341. },
  342. /** 重置按钮操作 */
  343. resetQuery() {
  344. this.dateRange = [];
  345. // let date = new Date();
  346. // let y = date.getFullYear();
  347. // let MM = date.getMonth() + 1;
  348. // MM = MM < 10 ? "0" + MM : MM;
  349. // let dd = date.getDate();
  350. // dd = dd < 10 ? "0" + dd : dd;
  351. // this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  352. this.resetForm("queryForm");
  353. this.queryParams.pageNum = 1;
  354. this.handleQuery();
  355. },
  356. // 多选框选中数据
  357. handleSelectionChange(selection) {
  358. this.ids = selection.map((item) => item.id);
  359. },
  360. },
  361. };
  362. </script>