implement_total_list.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. <template>
  2. <div class="app-container">
  3. <div v-show="!isShowDisplaceDetail">
  4. <!-- 筛选条件 -->
  5. <div class="screen-container">
  6. <Collapse :is-collapse="isCollapse" :screen-form="screenForm">
  7. <template #right_btn>
  8. <el-button size="mini" @click="resetScreenForm">清空</el-button>
  9. <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
  10. </template>
  11. <template #search>
  12. <el-form ref="screenForm" :model="screenForm" label-width="100px" size="mini" label-position="left">
  13. <el-row :gutter="20">
  14. <!-- <el-col :xs="24" :sm="24" :lg="24">
  15. <el-form-item prop="status" label-width="0">
  16. <el-radio-group v-model="screenForm.status" @change="getList()">
  17. <el-radio-button v-for="(item, index) in statusList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
  18. </el-radio-group>
  19. </el-form-item>
  20. </el-col> -->
  21. <el-col :xs="24" :sm="12" :lg="6">
  22. <el-form-item label="产品编码" prop="goodsCode">
  23. <el-input v-model="screenForm.goodsCode" placeholder="请输入产品编码"></el-input>
  24. </el-form-item>
  25. </el-col>
  26. <el-col :xs="24" :sm="12" :lg="6">
  27. <el-form-item label="销售订单" prop="saleNum">
  28. <el-input v-model="screenForm.saleNum" placeholder="请输入销售订单"></el-input>
  29. </el-form-item>
  30. </el-col>
  31. <el-col :xs="24" :sm="12" :lg="6">
  32. <el-form-item label="经销商" prop="dealer">
  33. <el-input v-model="screenForm.dealer" placeholder="请输入经销商"></el-input>
  34. </el-form-item>
  35. </el-col>
  36. <el-col :xs="24" :sm="12" :lg="6">
  37. <el-form-item label="产品名称" prop="goodsName">
  38. <el-input v-model="screenForm.goodsName" placeholder="请输入产品名称"></el-input>
  39. </el-form-item>
  40. </el-col>
  41. <el-col :xs="24" :sm="12" :lg="6">
  42. <el-form-item label="规格型号" prop="model">
  43. <el-input v-model="screenForm.model" placeholder="请输入规格型号"></el-input>
  44. </el-form-item>
  45. </el-col>
  46. <el-col :xs="24" :sm="12" :lg="6">
  47. <el-form-item label="项目名称" prop="enginName">
  48. <el-input v-model="screenForm.enginName" placeholder="请输入项目名称"></el-input>
  49. </el-form-item>
  50. </el-col>
  51. <el-col :xs="24" :sm="12" :lg="6">
  52. <el-form-item label="工程登录编号" prop="loginNum">
  53. <el-input v-model="screenForm.loginNum" placeholder="请输入工程登录编号"></el-input>
  54. </el-form-item>
  55. </el-col>
  56. <el-col :xs="24" :sm="12" :lg="6">
  57. <el-form-item label="存货类别" prop="k3CategoryNumber">
  58. <el-select
  59. v-model="screenForm.k3CategoryNumber"
  60. filterable
  61. clearable
  62. multiple
  63. collapse-tags
  64. placeholder="请选择"
  65. >
  66. <el-option
  67. v-for="item in categoryList"
  68. :key="item.number"
  69. :label="item.name"
  70. :value="item.number"
  71. >
  72. </el-option>
  73. </el-select>
  74. </el-form-item>
  75. </el-col>
  76. <el-form-item label="制单日期" prop="date">
  77. <el-date-picker
  78. v-model="screenForm.date"
  79. type="datetimerange"
  80. range-separator="至"
  81. style="width: 100%"
  82. value-format="yyyy-MM-dd HH:mm:ss"
  83. start-placeholder="开始日期"
  84. end-placeholder="结束日期"
  85. >
  86. </el-date-picker>
  87. </el-form-item>
  88. </el-col>
  89. <el-col :xs="24" :sm="12" :lg="6">
  90. <el-form-item label="订单日期" prop="orderDate">
  91. <el-date-picker
  92. v-model="screenForm.date"
  93. type="datetimerange"
  94. range-separator="至"
  95. style="width: 100%"
  96. value-format="yyyy-MM-dd HH:mm:ss"
  97. start-placeholder="开始日期"
  98. end-placeholder="结束日期"
  99. >
  100. </el-date-picker>
  101. </el-form-item>
  102. </el-col>
  103. <el-col :xs="24" :sm="12" :lg="6">
  104. <el-form-item label="表头业务员" prop="serviceName ">
  105. <el-input v-model="screenForm.serviceName" placeholder="请输入表头业务员"></el-input>
  106. </el-form-item>
  107. </el-col>
  108. <el-col :xs="24" :sm="12" :lg="6">
  109. <el-form-item label="表体业务员" prop="itemServiceName">
  110. <el-input v-model="screenForm.itemServiceName" placeholder="请输入表体业务员"></el-input>
  111. </el-form-item>
  112. </el-col>
  113. <el-col :xs="24" :sm="12" :lg="6">
  114. <el-form-item label="归属业务员" prop="newServiceName">
  115. <el-input v-model="screenForm.newServiceName" placeholder="请输入归属业务员"></el-input>
  116. </el-form-item>
  117. </el-col>
  118. <el-col :xs="24" :sm="12" :lg="6">
  119. <el-form-item label="销售政策编号" prop="policyCode">
  120. <el-input v-model="screenForm.policyCode" placeholder="请输入销售政策编号"></el-input>
  121. </el-form-item>
  122. </el-col>
  123. <el-col :xs="24" :sm="12" :lg="6">
  124. <el-form-item label="销售政策说明" prop="policyRemark">
  125. <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明"></el-input>
  126. </el-form-item>
  127. </el-col>
  128. <el-col :xs="24" :sm="12" :lg="6">
  129. <el-form-item label="发货是否完成" prop="isOver">
  130. <el-select v-model="screenForm.isOver" clearable placeholder="请选择">
  131. <el-option label="是" :value="true"></el-option>
  132. <el-option label="否" :value="false"></el-option>
  133. </el-select>
  134. </el-form-item>
  135. </el-col>
  136. <el-col :xs="24" :sm="12" :lg="6">
  137. <el-form-item label="钱包" prop="walletIds1">
  138. <el-select v-model="screenForm.walletIds1" size="mini" multiple filterable>
  139. <el-option
  140. v-for="item in NoRebateWalletList"
  141. :key="item.id"
  142. :label="item.name"
  143. :value="item.id"
  144. />
  145. </el-select>
  146. </el-form-item>
  147. </el-col>
  148. </el-row>
  149. </el-form>
  150. </template>
  151. </Collapse>
  152. </div>
  153. <div class="mymain-container">
  154. <div class="btn-group clearfix">
  155. <div class="fr">
  156. <ExportButton :exUrl="'retail/exec/listTotalExport'" :exParams="exParams" />
  157. </div>
  158. </div>
  159. <div class="table">
  160. <el-table
  161. v-loading="listLoading"
  162. :data="dataList"
  163. element-loading-text="Loading"
  164. border
  165. fit
  166. highlight-current-row
  167. stripe
  168. show-summary
  169. :summary-method="$getSummaries"
  170. >
  171. <el-table-column align="left" label="标识" min-width="100" show-overflow-tooltip>
  172. <template slot-scope="scope">
  173. <el-tag
  174. type="warning"
  175. size="mini"
  176. style="cursor: pointer"
  177. @click="openDisplaceDetail(scope.row)"
  178. v-if="scope.row.isDisplaceOrder"
  179. >置换</el-tag
  180. >
  181. <el-tag type="success" size="mini" v-if="scope.row.directTransferStatusName !== '非直调'">直调</el-tag>
  182. </template>
  183. </el-table-column>
  184. <el-table-column
  185. align="left"
  186. label="制单日期"
  187. prop="createTime"
  188. min-width="160"
  189. show-overflow-tooltip
  190. ></el-table-column>
  191. <el-table-column
  192. align="left"
  193. label="受订日期"
  194. prop="theTime"
  195. min-width="160"
  196. show-overflow-tooltip
  197. ></el-table-column>
  198. <el-table-column align="left" label="销售订单" prop="id" min-width="140" show-overflow-tooltip>
  199. <template slot-scope="scope">
  200. <CopyButton :copyText="scope.row.id" />
  201. <span>{{ scope.row.id }}</span>
  202. </template>
  203. </el-table-column>
  204. <el-table-column
  205. align="left"
  206. label="经销商编码"
  207. prop="customerNumber"
  208. min-width="100"
  209. show-overflow-tooltip
  210. >
  211. <template slot-scope="scope">
  212. <CopyButton :copyText="scope.row.customerNumber" />
  213. <span>{{ scope.row.customerNumber }}</span>
  214. </template>
  215. </el-table-column>
  216. <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
  217. <template slot-scope="scope">
  218. <CopyButton :copyText="scope.row.customerName" />
  219. <span>{{ scope.row.customerName }}</span>
  220. </template>
  221. </el-table-column>
  222. <el-table-column
  223. align="left"
  224. label="销售类型"
  225. prop="saleTypeName"
  226. min-width="100"
  227. show-overflow-tooltip
  228. ></el-table-column>
  229. <el-table-column
  230. align="left"
  231. label="存货类别"
  232. prop="k3CategoryName"
  233. min-width="100"
  234. show-overflow-tooltip
  235. ></el-table-column>
  236. <el-table-column align="left" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip>
  237. <template slot-scope="scope">
  238. <CopyButton :copyText="scope.row.materialCode" />
  239. <span>{{ scope.row.materialCode }}</span>
  240. </template>
  241. </el-table-column>
  242. <el-table-column
  243. align="left"
  244. label="产品编码"
  245. prop="materialOldNumber"
  246. min-width="140"
  247. show-overflow-tooltip
  248. >
  249. <template slot-scope="scope">
  250. <CopyButton :copyText="scope.row.materialOldNumber" />
  251. <span>{{ scope.row.materialOldNumber }}</span>
  252. </template>
  253. </el-table-column>
  254. <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
  255. <template slot-scope="scope">
  256. <CopyButton :copyText="scope.row.materialName" />
  257. <span>{{ scope.row.materialName }}</span>
  258. </template>
  259. </el-table-column>
  260. <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
  261. <template slot-scope="scope">
  262. <CopyButton :copyText="scope.row.specification" />
  263. <span>{{ scope.row.specification }}</span>
  264. </template>
  265. </el-table-column>
  266. <el-table-column
  267. align="left"
  268. label="直调状态"
  269. prop="directTransferStatusName"
  270. min-width="100"
  271. show-overflow-tooltip
  272. >
  273. </el-table-column>
  274. <el-table-column
  275. align="left"
  276. label="钱包"
  277. prop="walletName"
  278. min-width="100"
  279. show-overflow-tooltip
  280. ></el-table-column>
  281. <el-table-column
  282. align="right"
  283. label="订单未发货数量"
  284. prop="refundableQty"
  285. min-width="120"
  286. show-overflow-tooltip
  287. ></el-table-column>
  288. <el-table-column
  289. align="right"
  290. label="总数量"
  291. prop="qty"
  292. min-width="100"
  293. show-overflow-tooltip
  294. ></el-table-column>
  295. <el-table-column
  296. align="right"
  297. label="退订数量"
  298. prop="retiredQty"
  299. min-width="100"
  300. show-overflow-tooltip
  301. ></el-table-column>
  302. <el-table-column
  303. align="right"
  304. label="退货数量"
  305. prop="refundProductQty"
  306. min-width="100"
  307. show-overflow-tooltip
  308. ></el-table-column>
  309. <el-table-column align="right" label="订单金额" prop="payAmount" min-width="100" show-overflow-tooltip>
  310. <template slot-scope="scope">
  311. {{ scope.row.payAmount | numToFixed }}
  312. </template>
  313. </el-table-column>
  314. <el-table-column
  315. align="right"
  316. label="订单返利金额"
  317. prop="payRebateAmount"
  318. min-width="110"
  319. show-overflow-tooltip
  320. >
  321. <template slot-scope="scope">
  322. {{ scope.row.payRebateAmount | numToFixed }}
  323. </template>
  324. </el-table-column>
  325. <el-table-column align="right" label="发货金额" prop="hasSendAmount" min-width="100" show-overflow-tooltip>
  326. <template slot-scope="scope">
  327. {{ scope.row.hasSendAmount | numToFixed }}
  328. </template>
  329. </el-table-column>
  330. <el-table-column
  331. align="right"
  332. label="发货数量"
  333. prop="hasSendQty"
  334. min-width="100"
  335. show-overflow-tooltip
  336. ></el-table-column>
  337. <el-table-column
  338. align="right"
  339. label="直调数量"
  340. prop="directTransferQty"
  341. min-width="100"
  342. show-overflow-tooltip
  343. ></el-table-column>
  344. <el-table-column align="right" label="退订金额" prop="retiredAmount" min-width="100" show-overflow-tooltip>
  345. <template slot-scope="scope">
  346. {{ scope.row.retiredAmount | numToFixed }}
  347. </template>
  348. </el-table-column>
  349. <el-table-column
  350. align="right"
  351. label="退货金额"
  352. prop="refundProductAmount"
  353. min-width="100"
  354. show-overflow-tooltip
  355. >
  356. <template slot-scope="scope">
  357. {{ scope.row.refundProductAmount | numToFixed }}
  358. </template>
  359. </el-table-column>
  360. <el-table-column
  361. align="left"
  362. label="表头业务员"
  363. prop="serviceName"
  364. min-width="100"
  365. show-overflow-tooltip
  366. ></el-table-column>
  367. <el-table-column
  368. align="left"
  369. label="表体业务员"
  370. prop="itemServiceName"
  371. min-width="100"
  372. show-overflow-tooltip
  373. ></el-table-column>
  374. <el-table-column
  375. align="left"
  376. label="归属业务员"
  377. prop="newServiceName"
  378. min-width="100"
  379. show-overflow-tooltip
  380. ></el-table-column>
  381. <!-- <el-table-column align="left" label="订单备注" prop="headerRemark" min-width="160" show-overflow-tooltip></el-table-column> -->
  382. <el-table-column
  383. align="left"
  384. label="表头备注"
  385. prop="remark"
  386. min-width="160"
  387. show-overflow-tooltip
  388. ></el-table-column>
  389. <el-table-column
  390. align="left"
  391. label="表体备注"
  392. prop="itemRemark"
  393. min-width="160"
  394. show-overflow-tooltip
  395. ></el-table-column>
  396. <el-table-column align="left" label="销售政策名称" prop="policyTitle" min-width="350" show-overflow-tooltip>
  397. <template slot-scope="scope">
  398. <CopyButton :copyText="scope.row.policyTitle" />
  399. <span>{{ scope.row.policyTitle }}</span>
  400. </template>
  401. </el-table-column>
  402. <el-table-column align="left" label="销售政策编码" prop="policyCode" min-width="350" show-overflow-tooltip>
  403. <template slot-scope="scope">
  404. <CopyButton :copyText="scope.row.policyCode" />
  405. <span>{{ scope.row.policyCode }}</span>
  406. </template>
  407. </el-table-column>
  408. </el-table>
  409. </div>
  410. </div>
  411. <div class="pagination clearfix">
  412. <div class="fr">
  413. <el-pagination
  414. @size-change="handleSizeChange"
  415. @current-change="handleCurrentChange"
  416. :current-page="currentPage"
  417. :page-sizes="[10, 20, 30, 50]"
  418. :page-size="10"
  419. layout="total, sizes, prev, pager, next, jumper"
  420. :total="listTotal"
  421. >
  422. </el-pagination>
  423. </div>
  424. </div>
  425. </div>
  426. <DisplaceDetail :listItem="queryItem" v-if="isShowDisplaceDetail" @backListFormDetail="backList" />
  427. </div>
  428. </template>
  429. <script>
  430. import { getTotalList } from '@/api/supply/implement'
  431. import { getCategoryList } from '@/api/common'
  432. import DisplaceDetail from '@/views/supply/implement/components/displace_detail'
  433. import { getNoRebateWalletList } from '@/api/policy_list'
  434. let that
  435. export default {
  436. components: {
  437. DisplaceDetail
  438. },
  439. filters: {
  440. statusFilter(val) {
  441. if (that.statusList.length) {
  442. let obj = that.statusList.find(o => o.value == val)
  443. return obj ? obj.label : ''
  444. }
  445. return ''
  446. }
  447. },
  448. data() {
  449. return {
  450. currentPage: 1, // 当前页码
  451. pageSize: 10, // 每页数量
  452. listTotal: 0, // 列表总数
  453. dataList: null, // 列表数据
  454. listLoading: false, // 列表加载loading
  455. screenForm: {
  456. // 筛选表单数据
  457. status: '2',
  458. goodsCode: '',
  459. saleNum: '',
  460. dealer: '',
  461. goodsName: '',
  462. model: '',
  463. date: '',
  464. serviceName: '',
  465. itemServiceName: '',
  466. newServiceName: '',
  467. enginName: '',
  468. loginNum: '',
  469. k3CategoryNumber: [],
  470. policyCode: '',
  471. policyRemark: '',
  472. isOver: '',
  473. orderDate:'',
  474. walletIds1: []
  475. },
  476. categoryList: [],
  477. statusList: [
  478. { label: '政策零售订单', value: '2' },
  479. { label: '零售订单', value: '1' },
  480. { label: '家用工程订单', value: 'HOME' },
  481. { label: '商用工程订单', value: 'TRADE' }
  482. ],
  483. isCollapse: true,
  484. queryItem: {},
  485. NoRebateWalletList: [],
  486. isShowDisplaceDetail: false
  487. }
  488. },
  489. computed: {
  490. exParams() {
  491. return {
  492. type: this.screenForm.status,
  493. materialOldNumber: this.screenForm.goodsCode,
  494. id: this.screenForm.saleNum,
  495. customerName: this.screenForm.dealer,
  496. materialName: this.screenForm.goodsName,
  497. specification: this.screenForm.model,
  498. startTime: this.screenForm.date ? this.screenForm.date[0] : '',
  499. endTime: this.screenForm.date ? this.screenForm.date[1] : '',
  500. orderStartTime: this.screenForm.orderDate ? this.screenForm.orderDate[0] : '',
  501. orderEndTime: this.screenForm.orderDate ? this.screenForm.orderDate[1] : '',
  502. serviceName: this.screenForm.serviceName,
  503. newServiceName: this.screenForm.newServiceName,
  504. itemServiceName: this.screenForm.itemServiceName,
  505. projectName: this.screenForm.enginName,
  506. enginRecordNo: this.screenForm.orderNum,
  507. k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
  508. policyCode: this.screenForm.policyCode,
  509. policyRemark: this.screenForm.policyRemark,
  510. isOver: this.screenForm.isOver
  511. }
  512. }
  513. },
  514. beforeCreate() {
  515. that = this
  516. },
  517. created() {
  518. this.getList()
  519. this.getCategoryList()
  520. },
  521. methods: {
  522. // 查询列表
  523. getList() {
  524. this.listLoading = true
  525. let params = {
  526. pageNum: this.currentPage,
  527. pageSize: this.pageSize,
  528. type: this.screenForm.status,
  529. materialOldNumber: this.screenForm.goodsCode,
  530. id: this.screenForm.saleNum,
  531. customerName: this.screenForm.dealer,
  532. materialName: this.screenForm.goodsName,
  533. specification: this.screenForm.model,
  534. startTime: this.screenForm.date ? this.screenForm.date[0] : '',
  535. endTime: this.screenForm.date ? this.screenForm.date[1] : '',
  536. orderStartTime: this.screenForm.orderDate ? this.screenForm.orderDate[0] : '',
  537. orderEndTime: this.screenForm.orderDate ? this.screenForm.orderDate[1] : '',
  538. serviceName: this.screenForm.serviceName,
  539. newServiceName: this.screenForm.newServiceName,
  540. itemServiceName: this.screenForm.itemServiceName,
  541. projectName: this.screenForm.enginName,
  542. enginRecordNo: this.screenForm.orderNum,
  543. k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
  544. walletIds1: this.screenForm.walletIds1.join(','),
  545. policyCode: this.screenForm.policyCode,
  546. policyRemark: this.screenForm.policyRemark,
  547. isOver: this.screenForm.isOver
  548. }
  549. getTotalList(params).then(res => {
  550. res.data.records.forEach(item => {
  551. item.sums1 = ['refundableQty', 'qty', 'retiredQty', 'hasSendQty', 'directTransferQty', 'refundProductQty']
  552. item.sums2 = ['payAmount', 'payRebateAmount', 'hasSendAmount', 'retiredAmount', 'refundProductAmount']
  553. })
  554. this.dataList = res.data.records
  555. this.listTotal = res.data.total
  556. this.listLoading = false
  557. })
  558. },
  559. // 获取存货类别列表
  560. getCategoryList() {
  561. getCategoryList({
  562. pageNum: 1,
  563. pageSize: -1,
  564. keyword: ''
  565. }).then(res => {
  566. this.categoryList = res.data.records
  567. })
  568. getNoRebateWalletList({
  569. walletName: ''
  570. }).then(res => {
  571. console.log(res)
  572. this.NoRebateWalletList = res.data
  573. })
  574. },
  575. // 提交筛选表单
  576. submitScreenForm() {
  577. this.currentPage = 1
  578. this.getList()
  579. },
  580. // 重置筛选表单
  581. resetScreenForm() {
  582. this.$refs.screenForm.resetFields()
  583. this.currentPage = 1
  584. this.getList()
  585. },
  586. // 更改每页数量
  587. handleSizeChange(val) {
  588. this.pageSize = val
  589. this.currentPage = 1
  590. this.getList()
  591. },
  592. // 更改当前页
  593. handleCurrentChange(val) {
  594. this.currentPage = val
  595. this.getList()
  596. },
  597. // 置换详情
  598. openDisplaceDetail(item) {
  599. this.queryItem = item
  600. this.isShowDisplaceDetail = true
  601. },
  602. backList() {
  603. this.queryItem = {}
  604. this.isShowDisplaceDetail = false
  605. }
  606. }
  607. }
  608. </script>
  609. <style lang="scss" scoped></style>