goodsExchange.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. <template>
  2. <div>
  3. <div>
  4. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  5. <el-tab-pane label="入库明细" name="second"></el-tab-pane>
  6. <el-tab-pane label="出库明细" name="first"></el-tab-pane>
  7. </el-tabs>
  8. </div>
  9. <div class="btn"></div>
  10. <div class="search">
  11. <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
  12. <el-row>
  13. <el-col :span="activeName == 'first' ? 12 : 8">
  14. <el-form-item label="出入时间">
  15. <el-date-picker
  16. v-model="advancedForm.goodsExchange_time_range"
  17. type="daterange"
  18. align="center"
  19. :editable="false"
  20. unlink-panels
  21. :clearable="true"
  22. :default-time="['00:00:00', '23:59:59']"
  23. range-separator="-"
  24. start-placeholder="开始日期"
  25. end-placeholder="结束日期"
  26. value-format="timestamp"
  27. :picker-options="{
  28. disabledDate(time) {
  29. return (
  30. time.getTime() - 1 >=
  31. new Date(
  32. new Date().getFullYear(),
  33. new Date().getMonth(),
  34. new Date().getDate()
  35. ).getTime() +
  36. 86400000 -
  37. 1
  38. );
  39. },
  40. shortcuts: MixinPickerShortcuts,
  41. }"
  42. >
  43. </el-date-picker>
  44. </el-form-item>
  45. </el-col>
  46. <el-col :span="8">
  47. <el-form-item label="仓库">
  48. <el-select v-model="advancedForm.warehouse_id" clearable>
  49. <el-option
  50. v-for="item in warehouseList"
  51. :key="item.id"
  52. :label="item.name"
  53. :value="item.id"
  54. />
  55. </el-select>
  56. </el-form-item>
  57. </el-col>
  58. <el-col :span="6" v-if="activeName == 'second'">
  59. <el-form-item label="入库类型">
  60. <el-select v-model="advancedForm.type" clearable>
  61. <el-option
  62. v-for="item in entryList"
  63. :key="item.id"
  64. :label="item.label"
  65. :value="item.value"
  66. />
  67. </el-select>
  68. </el-form-item>
  69. </el-col>
  70. <el-col :span="8" v-if="activeName == 'second'">
  71. <el-form-item label="客户名称">
  72. <el-input
  73. v-model="advancedForm.customer_name"
  74. clearable
  75. placeholder="请输入客户名称"
  76. ></el-input>
  77. </el-form-item>
  78. </el-col>
  79. <el-col :span="8" v-if="activeName == 'second'">
  80. <el-form-item label="手机号">
  81. <el-input
  82. v-model="advancedForm.customer_phone"
  83. clearable
  84. placeholder="请输入手机号"
  85. ></el-input>
  86. </el-form-item>
  87. </el-col>
  88. </el-row>
  89. </el-form>
  90. <el-button @click="advancedSearchEvent"> 搜索 </el-button>
  91. </div>
  92. <en-table-layout
  93. :tableData="tableData.data"
  94. :loading="loading"
  95. @selection-change="handleSelectionChange"
  96. >
  97. <div slot="toolbar" class="inner-toolbar">
  98. <div class="toolbar-btns">
  99. <el-button
  100. size="mini"
  101. v-if="checkPermission(['addInventory']) && activeName == 'second'"
  102. type="primary"
  103. @click="handleAddGoodsExchange"
  104. >新增入库</el-button
  105. >
  106. <el-button
  107. size="mini"
  108. v-if="
  109. checkPermission(['goodsExchangeAdd']) && activeName == 'first'
  110. "
  111. type="primary"
  112. @click="handleShiftGoodsExchange"
  113. >新增出库</el-button
  114. >
  115. <!-- <el-button
  116. v-if="checkPermission(['goodsExchange:del'])"
  117. size="mini"
  118. @click="handleDeleteGoodsExchange()"
  119. type="danger"
  120. :disabled="multipleSelection.length === 0"
  121. >删除</el-button
  122. > -->
  123. </div>
  124. </div>
  125. <template slot="table-columns">
  126. <el-table-column type="selection" width="55" />
  127. <el-table-column
  128. v-if="activeName == 'first'"
  129. prop="sn"
  130. label="出库单号"
  131. >
  132. <template slot-scope="scope">
  133. {{ scope.row.sn }}
  134. </template>
  135. </el-table-column>
  136. <el-table-column v-else prop="sn" label="入库单号">
  137. <template slot-scope="scope">
  138. {{ scope.row.sn }}
  139. </template>
  140. </el-table-column>
  141. <el-table-column prop="warehouse_id" label="仓库名称">
  142. <template slot-scope="scope">
  143. {{ warehouseName(scope.row.warehouse_id) }}
  144. </template>
  145. </el-table-column>
  146. <el-table-column prop="warehouse_id" label="客户名称">
  147. <template slot-scope="scope">
  148. {{ scope.row.customer_name }}
  149. </template>
  150. </el-table-column>
  151. <el-table-column prop="warehouse_id" label="客户手机号">
  152. <template slot-scope="scope">
  153. {{ scope.row.customer_phone }}
  154. </template>
  155. </el-table-column>
  156. <el-table-column
  157. prop="memo"
  158. label="出库类型"
  159. v-if="activeName == 'first'"
  160. >
  161. <template slot-scope="scope">
  162. <span>{{ outName(scope.row.type) }}</span>
  163. </template>
  164. </el-table-column>
  165. <el-table-column prop="memo" label="入库类型" v-else>
  166. <template slot-scope="scope">
  167. <span>{{ entryName(scope.row.type) }}</span>
  168. </template>
  169. </el-table-column>
  170. <el-table-column
  171. prop="memo"
  172. label="入库时间"
  173. v-if="activeName == 'second'"
  174. >
  175. <template slot-scope="scope">
  176. <span>{{ scope.row.create_time | unixToDate }}</span>
  177. </template>
  178. </el-table-column>
  179. <el-table-column prop="order_id_list" label="订单编号" />
  180. <el-table-column label="状态">
  181. <template slot-scope="scope">
  182. <span v-if="activeName == 'first'">{{
  183. scope.row.has_submit == "Y" ? "已出库" : "未出库"
  184. }}</span>
  185. <span v-else>{{
  186. scope.row.has_submit == "Y" ? "已入库" : "未入库"
  187. }}</span>
  188. </template>
  189. </el-table-column>
  190. <el-table-column
  191. prop="memo"
  192. label="出库时间"
  193. v-if="activeName == 'first'"
  194. >
  195. <template slot-scope="scope">
  196. <span>{{ scope.row.create_time | unixToDate }}</span>
  197. </template>
  198. </el-table-column>
  199. <el-table-column prop="goodsName" label="商品名称"></el-table-column>
  200. <el-table-column prop="memo" label="备注">
  201. <template slot-scope="scope">
  202. <span v-if="activeName == 'first'">{{ scope.row.notes }}</span>
  203. <span v-else>{{ scope.row.memo }}</span>
  204. </template>
  205. </el-table-column>
  206. <el-table-column label="操作" width="450">
  207. <template slot-scope="scope">
  208. <el-button
  209. size="mini"
  210. v-if="checkPermission(['checkInventory'])"
  211. @click="handleAuditGoodsExchange(scope.row)"
  212. >查看</el-button
  213. >
  214. <el-button
  215. size="mini"
  216. v-if="
  217. scope.row.has_submit == 'N' &&
  218. checkPermission(['editInventory']) &&
  219. checkPermission(['goodsExchangeEdit']) &&
  220. activeName == 'first'
  221. "
  222. @click="handleEditGoodsExchange(scope.row)"
  223. >出库</el-button
  224. >
  225. <el-button
  226. size="mini"
  227. v-if="
  228. scope.row.has_submit == 'N' &&
  229. checkPermission(['editInventory']) &&
  230. checkPermission(['goodsExchangeEdit']) &&
  231. activeName == 'second'
  232. "
  233. @click="handleEditGoodsExchange(scope.row)"
  234. >入库</el-button
  235. >
  236. </template>
  237. </el-table-column>
  238. </template>
  239. <el-pagination
  240. v-if="tableData"
  241. slot="pagination"
  242. @size-change="handlePageSizeChange"
  243. @current-change="handlePageCurrentChange"
  244. :current-page="tableData.page_no"
  245. :page-sizes="[10, 20, 50, 100]"
  246. :page-size="tableData.page_size"
  247. layout="total, sizes, prev, pager, next, jumper"
  248. :total="tableData.data_total"
  249. >
  250. </el-pagination>
  251. </en-table-layout>
  252. </div>
  253. </template>
  254. <script>
  255. import * as API_GoodsExchange from "@/api/goodsExchange";
  256. import Print from "print-js";
  257. import * as API_Setting from "@/api/setting";
  258. import { Foundation } from "~/ui-utils";
  259. import * as API_BasicSetting from "@/api/basicSetting";
  260. export default {
  261. name: "goodsExchange",
  262. data() {
  263. return {
  264. //仓库列表
  265. warehouseList: [],
  266. deptList: [],
  267. // 列表loading状态
  268. loading: false,
  269. // 列表参数
  270. params: {
  271. page_no: 1,
  272. page_size: 10,
  273. },
  274. // 高级搜索数据
  275. advancedForm: {},
  276. // 列表数据
  277. tableData: "",
  278. dialogVisible: false,
  279. // 当前已选择的行
  280. multipleSelection: [],
  281. goodsExchangeForm: {},
  282. activeName: "second",
  283. entryList: [],
  284. outList: [],
  285. };
  286. },
  287. mounted() {
  288. if (this.activeName == "first") {
  289. this.GET_GoodsExchangeList();
  290. } else {
  291. this.GET_WarehouseEntry();
  292. }
  293. this.GET_DeptList();
  294. this.GET_WarehouseList();
  295. },
  296. watch: {
  297. $route: function ({ query }) {
  298. this.params.page_no = 1;
  299. if (this.activeName == "first") {
  300. this.GET_GoodsExchangeList();
  301. } else {
  302. this.GET_WarehouseEntry();
  303. }
  304. },
  305. },
  306. methods: {
  307. //获取仓库名称
  308. outName(val) {
  309. let name = "";
  310. this.outList.map((el) => {
  311. if (el.value == val) {
  312. return (name = el.label);
  313. }
  314. });
  315. return name;
  316. },
  317. //获取仓库名称
  318. entryName(val) {
  319. let name = "";
  320. this.entryList.map((el) => {
  321. if (el.value == val) {
  322. return (name = el.label);
  323. }
  324. });
  325. return name;
  326. },
  327. //获取仓库名称
  328. warehouseName(val) {
  329. let name = "";
  330. this.warehouseList.map((el) => {
  331. if (el.id == val) {
  332. return (name = el.name);
  333. }
  334. });
  335. return name;
  336. },
  337. handleClick(tab, event) {
  338. this.activeName = tab.name;
  339. this.params.page_no = 1;
  340. if (tab.name == "first") {
  341. this.GET_GoodsExchangeList();
  342. } else {
  343. this.GET_WarehouseEntry();
  344. }
  345. },
  346. /** 状态 */
  347. statusFilter(val) {
  348. switch (val) {
  349. case "WAIT":
  350. return "待审核";
  351. case "NEW":
  352. return "新创建";
  353. case "CONFIRMED":
  354. return "已确认";
  355. case "RETURNED":
  356. return "已归还";
  357. case "COMPLETE":
  358. return "已完成";
  359. case "PASS":
  360. return "审核通过";
  361. case "REJECT":
  362. return "审核拒绝";
  363. default:
  364. return "";
  365. }
  366. },
  367. /** 编辑 */
  368. handleEditGoodsExchange(row) {
  369. if (this.activeName == "first") {
  370. this.$router.push({
  371. name: "goodsExchangeEdit",
  372. params: { id: row.id },
  373. });
  374. } else {
  375. this.$router.push({
  376. name: "editInventory",
  377. params: { id: row.id },
  378. });
  379. }
  380. },
  381. /** 提交审核 */
  382. handleSubmitGoodsExchange(row) {
  383. API_GoodsExchange.submitAuditGoodsExchange(row.id).then(() => {
  384. this.$message.success("提交成功!");
  385. this.GET_GoodsExchangeList();
  386. });
  387. },
  388. /** 撤回审核 */
  389. handleCancelGoodsExchange(row) {
  390. API_GoodsExchange.cancelGoodsExchange(row.id).then(() => {
  391. this.$message.success("撤回成功!");
  392. this.GET_GoodsExchangeList();
  393. });
  394. },
  395. handleAuditGoodsExchange(row) {
  396. if (this.activeName == "first") {
  397. this.$router.push({
  398. name: "checkInventory",
  399. params: {
  400. id: row.id,
  401. type: this.activeName,
  402. },
  403. });
  404. } else {
  405. //auditInventory
  406. this.$router.push({
  407. name: "checkInventory",
  408. params: {
  409. id: row.id,
  410. type: this.activeName,
  411. },
  412. });
  413. }
  414. },
  415. /** 获取仓库 */
  416. GET_WarehouseList() {
  417. API_BasicSetting.getWarehouseListAll().then((response) => {
  418. this.warehouseList = response;
  419. });
  420. },
  421. /** 获取部门 */
  422. GET_DeptList() {
  423. /* API_Setting.getDeptList().then((response) => {
  424. this.deptList = Foundation.buildTree(response, "0");
  425. }); */
  426. /* 入库类型 */
  427. API_Setting.getPage({ dictType: "warehouse_entry_type" }).then((res) => {
  428. this.entryList = res.data;
  429. });
  430. /* 出库类型 */
  431. API_Setting.getPage({ dictType: "out_warehouse_type" }).then((res) => {
  432. this.outList = res.data;
  433. });
  434. },
  435. /** 打印对账详情 */
  436. handlePrintGoodsExchange() {
  437. Print({
  438. printable: "deliverySheet",
  439. type: "html",
  440. targetStyles: ["*"],
  441. ignoreElements: ["no-logs", "goods-image", "no-btn"],
  442. });
  443. },
  444. handleDeleteGoodsExchange() {
  445. if (!this.multipleSelection || !this.multipleSelection.length)
  446. return this.$message.error("请先选择!");
  447. this.$confirm("确定要删除这些换货单吗?", "提示", { type: "warning" })
  448. .then(() => {
  449. const ids = this.multipleSelection.map((item) => item.id);
  450. API_GoodsExchange.deleteGoodsExchange(ids).then(() => {
  451. this.$message.success("删除成功!");
  452. this.GET_GoodsExchangeList();
  453. });
  454. })
  455. .catch(() => {});
  456. },
  457. /** 多选改变 */
  458. handleSelectionChange(val) {
  459. console.log("val=-", val);
  460. this.multipleSelection = val;
  461. },
  462. /** 分页大小发生改变 */
  463. handlePageSizeChange(size) {
  464. this.params.page_size = size;
  465. if (this.activeName == "first") {
  466. this.GET_GoodsExchangeList();
  467. } else {
  468. this.GET_WarehouseEntry();
  469. }
  470. },
  471. /** 分页页数发生改变 */
  472. handlePageCurrentChange(page) {
  473. this.params.page_no = page;
  474. if (this.activeName == "first") {
  475. this.GET_GoodsExchangeList();
  476. } else {
  477. this.GET_WarehouseEntry();
  478. }
  479. },
  480. // 新增出库
  481. handleShiftGoodsExchange() {
  482. this.$router.push({
  483. name: "goodsExchangeAdd",
  484. params: { callback: this.GET_GoodsExchangeList, type: "first" },
  485. });
  486. },
  487. /** 新增入库 */
  488. handleAddGoodsExchange() {
  489. this.$router.push({
  490. name: "addInventory",
  491. params: { callback: this.GET_GoodsExchangeList, type: "second" },
  492. });
  493. },
  494. /** 打印换货单 */
  495. handlePrintGoodsExchangeDialog(row) {
  496. this.GET_GoodsExchangeDetail(row.id);
  497. },
  498. /** 获取换货单详情页面数据 */
  499. GET_GoodsExchangeDetail(id) {
  500. API_GoodsExchange.getGoodsExchangeInfo(id).then((response) => {
  501. this.goodsExchangeForm = response;
  502. if (response.change_list && response.change_list.length) {
  503. var str = "";
  504. response.change_list.forEach(function (i) {
  505. str += i.product_name + "、";
  506. });
  507. }
  508. this.goodsExchangeForm.illustrate = str;
  509. this.dialogVisible = true;
  510. });
  511. },
  512. /** 搜索事件触发 */
  513. searchEvent(data) {
  514. this.params = {
  515. ...this.params,
  516. sn: data,
  517. };
  518. Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
  519. this.params.page_no = 1;
  520. this.GET_GoodsExchangeList();
  521. },
  522. /** 高级搜索事件触发 */
  523. advancedSearchEvent() {
  524. this.params = {
  525. ...this.params,
  526. ...this.advancedForm,
  527. };
  528. delete this.params.start_time;
  529. delete this.params.end_time;
  530. if (this.advancedForm.goodsExchange_time_range) {
  531. this.params.start_time = parseInt(
  532. Number(this.advancedForm.goodsExchange_time_range[0]) / 1000
  533. );
  534. this.params.end_time = parseInt(
  535. Number(this.advancedForm.goodsExchange_time_range[1]) / 1000
  536. );
  537. }
  538. delete this.params.goodsExchange_time_range;
  539. this.params.page_no = 1;
  540. if (this.activeName == "first") {
  541. this.GET_GoodsExchangeList();
  542. } else {
  543. this.GET_WarehouseEntry();
  544. }
  545. },
  546. /** 获取出库单列表 */
  547. GET_GoodsExchangeList() {
  548. this.loading = true;
  549. API_GoodsExchange.getWarehouseOut(this.params)
  550. .then((response) => {
  551. this.loading = false;
  552. this.tableData = response;
  553. })
  554. .catch(() => {
  555. this.loading = false;
  556. });
  557. },
  558. /* 获取入库单列表 */
  559. GET_WarehouseEntry() {
  560. this.loading = true;
  561. API_GoodsExchange.getWarehouseEntry(this.params)
  562. .then((response) => {
  563. this.loading = false;
  564. // 使用 Promise.all 处理所有异步请求
  565. Promise.all(
  566. response.data.map((el) => {
  567. return API_GoodsExchange.getGoodsExchangeInfo(el.id)
  568. .then((res) => {
  569. try {
  570. // 使用 map 获取所有商品名称,然后用逗号连接
  571. if (res && res.product_list && Array.isArray(res.product_list)) {
  572. el.goodsName = res.product_list
  573. .map((e) => (e && e.product_vo ? e.product_vo.name : '未知商品'))
  574. .join(", ");
  575. } else {
  576. el.goodsName = '无商品信息';
  577. }
  578. } catch (error) {
  579. console.error('处理商品名称时出错:', error);
  580. el.goodsName = '获取商品信息失败';
  581. }
  582. return el;
  583. })
  584. .catch((error) => {
  585. console.error(`获取ID为${el.id}的商品信息失败:`, error);
  586. el.goodsName = '获取商品信息失败';
  587. return el; // 即使请求失败也返回原始元素
  588. });
  589. })
  590. )
  591. .then((results) => {
  592. console.log(response);
  593. this.tableData = response;
  594. })
  595. .catch((error) => {
  596. console.error('处理商品列表时出错:', error);
  597. this.tableData = response; // 确保即使出错也能显示基本数据
  598. });
  599. })
  600. .catch(() => {
  601. this.loading = false;
  602. });
  603. },
  604. },
  605. };
  606. </script>
  607. <style type="text/scss" lang="scss" scoped>
  608. .btn {
  609. padding: 30px 20px 5px;
  610. border-radius: 5px;
  611. background-color: #fff;
  612. .el-button {
  613. width: 100px;
  614. }
  615. }
  616. .search {
  617. display: flex;
  618. align-items: center;
  619. background: #fff;
  620. overflow: hidden;
  621. padding: 30px 10px 10px 10px;
  622. /deep/ .el-form-item {
  623. .el-form-item__content {
  624. .el-input {
  625. width: 200px;
  626. }
  627. }
  628. }
  629. .el-button {
  630. margin-top: -19px;
  631. margin-left: 20px;
  632. }
  633. }
  634. .print {
  635. margin-left: 790px;
  636. }
  637. .tips-t {
  638. display: flex;
  639. padding: 10px 0;
  640. div {
  641. flex: 1;
  642. text-align: left;
  643. padding-left: 70px;
  644. }
  645. }
  646. .tips-f {
  647. padding: 20px 0;
  648. }
  649. .face-image {
  650. display: block;
  651. width: 50px;
  652. height: 50px;
  653. margin: 0 auto;
  654. }
  655. /deep/ .el-dialog__body {
  656. padding: 10px 20px;
  657. }
  658. .el-table {
  659. min-height: 500px !important;
  660. }
  661. </style>