goodsLend.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  1. <template>
  2. <div>
  3. <en-table-layout
  4. :tableData="tableData.data"
  5. :loading="loading"
  6. @selection-change="handleSelectionChange"
  7. >
  8. <div slot="toolbar" class="inner-toolbar">
  9. <div class="toolbar-btns">
  10. <el-button
  11. size="mini"
  12. v-if="checkPermission(['goodsLend:add'])"
  13. type="primary"
  14. @click="handleAddGoodsLend"
  15. >新增</el-button
  16. >
  17. <!-- <el-button size="mini" v-if="checkPermission(['goodsLend:del'])" @click="handleDeleteGoodsLend()" type="danger"
  18. :disabled="multipleSelection.length === 0">删除</el-button> -->
  19. <el-button
  20. type="success"
  21. size="mini"
  22. v-if="checkPermission(['goodsLend:confirm'])"
  23. @click="handleConfirmGoodsLend"
  24. :disabled="multipleSelection.length === 0"
  25. >打印</el-button
  26. >
  27. </div>
  28. <div class="toolbar-search">
  29. <en-table-search
  30. @search="searchEvent"
  31. @advancedSearch="advancedSearchEvent"
  32. placeholder="请输入借出单编号"
  33. advanced
  34. advancedWidth="465"
  35. >
  36. <template slot="advanced-content">
  37. <el-form
  38. ref="advancedForm"
  39. :model="advancedForm"
  40. label-width="90px"
  41. >
  42. <el-form-item label="仓库">
  43. <el-cascader
  44. v-model="advancedForm.dept_id"
  45. :options="warehouseList"
  46. :props="{
  47. label: 'name',
  48. value: 'id',
  49. emitPath: false,
  50. checkStrictly: true,
  51. }"
  52. clearable
  53. ></el-cascader>
  54. </el-form-item>
  55. <el-form-item label="状态">
  56. <el-select v-model="advancedForm.status">
  57. <el-option key="NEW" label="新创建" value="NEW" />
  58. <el-option
  59. key="CONFIRMED"
  60. label="已确认"
  61. value="CONFIRMED"
  62. />
  63. <el-option key="RETURNED" label="已归还" value="RETURNED" />
  64. </el-select>
  65. </el-form-item>
  66. <el-form-item label="时间">
  67. <el-date-picker
  68. v-model="advancedForm.goodsLend_time_range"
  69. type="daterange"
  70. align="center"
  71. :editable="false"
  72. unlink-panels
  73. :clearable="false"
  74. :default-time="['00:00:00', '23:59:59']"
  75. range-separator="-"
  76. start-placeholder="开始日期"
  77. end-placeholder="结束日期"
  78. value-format="timestamp"
  79. :picker-options="{
  80. disabledDate(time) {
  81. return (
  82. time.getTime() - 1 >=
  83. new Date(
  84. new Date().getFullYear(),
  85. new Date().getMonth(),
  86. new Date().getDate()
  87. ).getTime() +
  88. 86400000 -
  89. 1
  90. );
  91. },
  92. shortcuts: MixinPickerShortcuts,
  93. }"
  94. >
  95. </el-date-picker>
  96. </el-form-item>
  97. </el-form>
  98. </template>
  99. </en-table-search>
  100. </div>
  101. </div>
  102. <template slot="table-columns">
  103. <el-table-column type="selection" width="55" />
  104. <el-table-column prop="warehouse.sn" label="仓库编号">
  105. <!-- <template slot-scope="scope">
  106. <router-link
  107. v-if="checkPermission(['goodsLend'])"
  108. style="color: #409eff;"
  109. :to="{ name: 'goodsLendDetail', params: { id: scope.row.id } }">
  110. {{ scope.row.sn }}
  111. </router-link>
  112. <span v-else>{{scope.row.sn}}</span>
  113. </template> -->
  114. </el-table-column>
  115. <el-table-column prop="warehouse.name" label="仓库名称">
  116. <!-- <template slot-scope="scope">{{ scope.row.lend_time | unixToDate }}</template> -->
  117. </el-table-column>
  118. <el-table-column prop="code" label="库位号" />
  119. <el-table-column prop="type" label="库位区域">
  120. <template slot-scope="scope">{{
  121. statusFilter(scope.row.type)
  122. }}</template>
  123. </el-table-column>
  124. <el-table-column prop="intro" label="库位说明" />
  125. <!-- <el-table-column prop="lend_person" label="借出人" />
  126. <el-table-column prop="status" label="状态">
  127. <template slot-scope="scope">{{ statusFilter(scope.row.status) }}</template>
  128. </el-table-column> -->
  129. <el-table-column label="操作" width="250">
  130. <template slot-scope="scope">
  131. <el-button
  132. size="mini"
  133. v-if="checkPermission(['goodsLend:edit'])"
  134. @click="introGoodsLend(scope.row)"
  135. >查看</el-button
  136. >
  137. <el-button
  138. size="mini"
  139. v-if="checkPermission(['goodsLend:edit'])"
  140. @click="AddGoodsLend(scope.row)"
  141. >添加商品</el-button
  142. >
  143. <el-button
  144. size="mini"
  145. v-if="checkPermission(['goodsLend:edit'])"
  146. @click="handleEditGoodsLend(scope.row)"
  147. >编辑</el-button
  148. >
  149. <el-button
  150. type="success"
  151. size="mini"
  152. v-if="checkPermission(['goodsLend:del'])"
  153. @click="handleReturnGoodsLend(scope.row)"
  154. >删除</el-button
  155. >
  156. <el-button
  157. type="primary"
  158. v-if="checkPermission(['goodsLend:print'])"
  159. size="mini"
  160. @click="handlePrintGoodsLendDialog(scope.row)"
  161. >打印</el-button
  162. >
  163. </template>
  164. </el-table-column>
  165. </template>
  166. <el-pagination
  167. v-if="tableData"
  168. slot="pagination"
  169. @size-change="handlePageSizeChange"
  170. @current-change="handlePageCurrentChange"
  171. :current-page="tableData.page_no"
  172. :page-sizes="[10, 20, 50, 100]"
  173. :page-size="tableData.page_size"
  174. layout="total, sizes, prev, pager, next, jumper"
  175. :total="tableData.data_total"
  176. >
  177. </el-pagination>
  178. </en-table-layout>
  179. <el-dialog
  180. title="打印预览"
  181. :visible.sync="dialogVisible"
  182. width="940px"
  183. center
  184. @close="handleCancle"
  185. >
  186. <el-button
  187. size="mini"
  188. type="primary"
  189. @click="handlePrintGoodsLend"
  190. class="print"
  191. >打印</el-button
  192. >
  193. <div id="deliverySheet" style="width: 900px">
  194. <div class="tips-t" v-for="(item, index) in codeList" :key="index">
  195. <div>
  196. <!-- <div class="qrcode-pic" ref="codeItem" ></div> -->
  197. <h1
  198. class="qrcode-title"
  199. style="
  200. margin-top: 20px;
  201. font-family: sans-serif;
  202. color: black;
  203. font-weight: 600;
  204. "
  205. >
  206. {{ item }}
  207. </h1>
  208. </div>
  209. </div>
  210. </div>
  211. </el-dialog>
  212. <el-dialog
  213. :title="title"
  214. :visible.sync="dialogVisibleForm"
  215. width="940px"
  216. center
  217. @close="addHandleCancle"
  218. >
  219. <el-form
  220. ref="addLendForm"
  221. :model="addLendForm"
  222. :rules="rules"
  223. label-width="90px"
  224. >
  225. <!-- <el-form-item label="仓库编号" prop="code">
  226. <el-input v-model="addLendForm.code" placeholder="请输入仓库编号"></el-input>
  227. </el-form-item>
  228. <el-form-item label="仓库名称" prop="name">
  229. <el-input v-model="addLendForm.name" placeholder="请输入仓库名称"></el-input>
  230. </el-form-item> -->
  231. <el-form-item label="仓库" prop="warehouse_id">
  232. <el-select
  233. v-model="addLendForm.warehouse_id"
  234. clearable
  235. @change="selWarehouse"
  236. >
  237. <el-option
  238. v-for="item in warehouseList"
  239. :key="item.id"
  240. :label="item.name"
  241. :value="item.id"
  242. />
  243. </el-select>
  244. <span
  245. style="
  246. color: red;
  247. margin-left: 20px;
  248. cursor: pointer;
  249. text-decoration: underline;
  250. "
  251. v-if="warehouseList.length == 0"
  252. @click="gowareHouse"
  253. >新增仓库</span
  254. >
  255. </el-form-item>
  256. <el-form-item label="库位号" prop="code">
  257. <el-input
  258. v-model="addLendForm.code"
  259. maxlength="12"
  260. placeholder="请输入库位号"
  261. style="width: 270px"
  262. >
  263. <template slot="prepend">{{ warehouseSn }}-</template>
  264. </el-input>
  265. </el-form-item>
  266. <el-form-item label="库位区域" prop="type">
  267. <el-select v-model="addLendForm.type" clearable>
  268. <el-option
  269. v-for="item in typeList"
  270. :key="item.id"
  271. :label="item.label"
  272. :value="item.value"
  273. />
  274. </el-select>
  275. </el-form-item>
  276. <el-form-item label="库位说明">
  277. <el-input
  278. type="textarea"
  279. :autosize="{ minRows: 2, maxRows: 4 }"
  280. placeholder="请输入内容"
  281. v-model="addLendForm.intro"
  282. >
  283. </el-input>
  284. </el-form-item>
  285. </el-form>
  286. <span slot="footer" class="dialog-footer">
  287. <el-button @click="addHandleCancle">取 消</el-button>
  288. <el-button type="primary" @click="lendCommit">确 定</el-button>
  289. </span>
  290. </el-dialog>
  291. </div>
  292. </template>
  293. <script>
  294. import * as API_GoodsLend from "@/api/goodsLend";
  295. import Print from "print-js";
  296. import * as API_Setting from "@/api/setting";
  297. import { Foundation } from "~/ui-utils";
  298. import QRCode from "qrcodejs2";
  299. export default {
  300. name: "goodsLend",
  301. data() {
  302. return {
  303. warehouseSn: "",
  304. warehouseList: [],
  305. // 列表loading状态
  306. loading: false,
  307. // 列表参数
  308. params: {
  309. page_no: 1,
  310. page_size: 10,
  311. },
  312. // 高级搜索数据
  313. advancedForm: {},
  314. // 列表数据
  315. tableData: "",
  316. dialogVisible: false,
  317. // 当前已选择的行
  318. multipleSelection: [],
  319. goodsLendForm: {},
  320. codeList: [],
  321. title: "",
  322. dialogVisibleForm: false,
  323. // 新增数据
  324. addLendForm: {},
  325. rules: {
  326. warehouse_id: [
  327. { required: true, message: "请选择仓库", trigger: "change" },
  328. ],
  329. name: [
  330. { required: true, message: "请选择输入仓库名称", trigger: "blur" },
  331. ],
  332. code: [
  333. { required: true, message: "请选择输入库位号", trigger: "blur" },
  334. ],
  335. type: [
  336. { required: true, message: "请选择仓库类型", trigger: "change" },
  337. ],
  338. },
  339. typeList: [],
  340. };
  341. },
  342. mounted() {
  343. this.GET_GoodsLendList();
  344. this.GET_DeptList();
  345. },
  346. watch: {
  347. $route: {
  348. immediate: true,
  349. handler(newVal) {
  350. if (newVal.query.status) {
  351. this.params.status = newVal.query.status;
  352. this.advancedForm.status = newVal.query.status;
  353. }
  354. this.params.page_no = 1;
  355. this.GET_GoodsLendList();
  356. },
  357. },
  358. },
  359. methods: {
  360. //查看已选中商品
  361. introGoodsLend(row){
  362. /* API_GoodsLend.getInfo({id:row.warehouse_id}).then(res=>{
  363. console.log(res);
  364. }) */
  365. this.$router.push({
  366. name: "inventoryItem",
  367. params: {
  368. warehouse_id:row.warehouse_id,
  369. type:'check'
  370. },
  371. });
  372. },
  373. AddGoodsLend(row) {
  374. this.$router.push({
  375. name: "inventoryItem",
  376. params: {
  377. id: row.id,
  378. warehouse_id:row.warehouse_id,
  379. code:row.code
  380. },
  381. });
  382. },
  383. gowareHouse() {
  384. this.dialogVisibleForm = false;
  385. this.$router.push({ name: "warehouseList" });
  386. },
  387. /* 选中仓库 */
  388. selWarehouse(val) {
  389. const list = this.warehouseList.filter((el) => {
  390. return el.id === val;
  391. });
  392. let obj = list[0];
  393. this.warehouseSn = obj.sn;
  394. },
  395. // 确认提交
  396. lendCommit() {
  397. this.$refs.addLendForm.validate((valid) => {
  398. if (valid) {
  399. if (this.title === "新增") {
  400. this.addLendForm.code =
  401. this.warehouseSn + "-" + this.addLendForm.code;
  402. API_GoodsLend.create(this.addLendForm).then((res) => {
  403. this.$message.success("添加成功!");
  404. this.dialogVisibleForm = false;
  405. this.warehouseSn = "";
  406. this.addLendForm = {};
  407. this.GET_GoodsLendList();
  408. });
  409. } else if (this.title === "编辑") {
  410. API_GoodsLend.update(this.addLendForm).then((res) => {
  411. this.$message.success("修改成功!");
  412. this.dialogVisibleForm = false;
  413. this.addLendForm = {};
  414. this.GET_GoodsLendList();
  415. });
  416. }
  417. } else {
  418. this.$message.error("提交失败");
  419. return false;
  420. }
  421. });
  422. },
  423. addHandleCancle() {
  424. this.dialogVisibleForm = false;
  425. this.addLendForm = {};
  426. },
  427. handleCancle() {
  428. this.dialogVisible = false;
  429. this.codeList = [];
  430. },
  431. // 二维码生成
  432. creatQrCode() {
  433. this.$nextTick(() => {
  434. this.codeList.forEach((item, index) => {
  435. this.$refs.codeItem[index].innerHTML = "";
  436. var qrcode = new QRCode(this.$refs.codeItem[index], {
  437. text: item, //二维码内容
  438. width: 600,
  439. height: 660,
  440. render: "table",
  441. colorDark: "#333333", //二维码颜色
  442. colorLight: "#ffffff", //二维码背景色
  443. correctLevel: QRCode.CorrectLevel.H,
  444. });
  445. });
  446. }, 500);
  447. },
  448. handleEditGoodsLend(row) {
  449. console.log(row);
  450. this.title = "编辑";
  451. this.addLendForm = row;
  452. this.dialogVisibleForm = true;
  453. // this.$router.push({ name: 'goodsLendEdit', params: { id: row.id }})
  454. },
  455. handleReturnGoodsLend(row) {
  456. this.$confirm("确定要删除吗?", "提示", { type: "warning" })
  457. .then(() => {
  458. API_GoodsLend.deletes({ id: row.id }).then(() => {
  459. this.$message.success("删除成功!");
  460. this.GET_GoodsLendList();
  461. });
  462. })
  463. .catch(() => {});
  464. },
  465. /** 状态 */
  466. statusFilter(val) {
  467. const obj = this.typeList.filter((el) => {
  468. return el.value === val;
  469. });
  470. if (obj.length !== 0) {
  471. return obj[0].label;
  472. } else {
  473. return "";
  474. }
  475. },
  476. handleConfirmGoodsLend() {
  477. if (!this.multipleSelection || !this.multipleSelection.length)
  478. return this.$message.error("请先选择!");
  479. const ids = this.multipleSelection.map((item) => item.code);
  480. this.codeList = ids;
  481. this.dialogVisible = true;
  482. this.creatQrCode();
  483. },
  484. /** 获取部门 */
  485. GET_DeptList() {
  486. API_Setting.getListAll().then((response) => {
  487. this.warehouseList = response;
  488. console.log(response);
  489. });
  490. API_Setting.getPage({
  491. dictType: "Warehouse_location_type",
  492. page_no: 1,
  493. page_size: 50,
  494. }).then((res) => {
  495. this.typeList = res.data;
  496. });
  497. },
  498. /** 打印对账详情 */
  499. handlePrintGoodsLend() {
  500. Print({
  501. printable: "deliverySheet",
  502. type: "html",
  503. targetStyles: ["*"],
  504. //style: 'body, html {font-size:300px !important;color:red;}', // 确保打印时应用这个样式
  505. ignoreElements: ["no-logs", "goods-image", "no-btn", "elementToIgnore"],
  506. });
  507. },
  508. handleDeleteGoodsLend() {
  509. if (!this.multipleSelection || !this.multipleSelection.length)
  510. return this.$message.error("请先选择!");
  511. this.$confirm("确定要删除这些借出单吗?", "提示", { type: "warning" })
  512. .then(() => {
  513. const ids = this.multipleSelection.map((item) => item.id);
  514. API_GoodsLend.deleteGoodsLend(ids).then(() => {
  515. this.$message.success("删除成功!");
  516. this.GET_GoodsLendList();
  517. });
  518. })
  519. .catch(() => {});
  520. },
  521. /** 多选改变 */
  522. handleSelectionChange(val) {
  523. this.multipleSelection = val;
  524. },
  525. /** 分页大小发生改变 */
  526. handlePageSizeChange(size) {
  527. this.params.page_size = size;
  528. this.GET_GoodsLendList();
  529. },
  530. /** 分页页数发生改变 */
  531. handlePageCurrentChange(page) {
  532. this.params.page_no = page;
  533. this.GET_GoodsLendList();
  534. },
  535. /** 添加调整单 */
  536. handleAddGoodsLend() {
  537. this.title = "新增";
  538. this.dialogVisibleForm = true;
  539. // this.$router.push({ name: 'goodsLendAdd'})
  540. },
  541. /** 打印调整单 */
  542. handlePrintGoodsLendDialog(row) {
  543. // this.GET_GoodsLendDetail(row.id)
  544. this.dialogVisible = true;
  545. this.codeList.push(row.code);
  546. this.creatQrCode();
  547. },
  548. /** 获取调整单详情页面数据 */
  549. GET_GoodsLendDetail(id) {
  550. API_GoodsLend.getGoodsLendInfo(id).then((response) => {
  551. this.goodsLendForm = response;
  552. if (response.product_list && response.product_list.length) {
  553. var str = "";
  554. response.product_list.forEach(function (i) {
  555. str += i.product_name + "、";
  556. });
  557. }
  558. // 生成库位号二维码
  559. this.goodsLendForm.illustrate = str;
  560. });
  561. },
  562. /** 搜索事件触发 */
  563. searchEvent(data) {
  564. this.params = {
  565. ...this.params,
  566. sn: data,
  567. };
  568. Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
  569. this.params.page_no = 1;
  570. this.GET_GoodsLendList();
  571. },
  572. /** 高级搜索事件触发 */
  573. advancedSearchEvent() {
  574. this.params = {
  575. ...this.params,
  576. ...this.advancedForm,
  577. };
  578. delete this.params.start_time;
  579. delete this.params.end_time;
  580. if (this.advancedForm.goodsLend_time_range) {
  581. this.params.start_time = parseInt(
  582. Number(this.advancedForm.goodsLend_time_range[0]) / 1000
  583. );
  584. this.params.end_time = parseInt(
  585. Number(this.advancedForm.goodsLend_time_range[1]) / 1000
  586. );
  587. }
  588. delete this.params.goodsLend_time_range;
  589. this.params.page_no = 1;
  590. this.GET_GoodsLendList();
  591. },
  592. /** 获取调整单列表 */
  593. GET_GoodsLendList() {
  594. this.loading = true;
  595. API_GoodsLend.query(this.params)
  596. .then((response) => {
  597. this.loading = false;
  598. this.tableData = response;
  599. })
  600. .catch(() => {
  601. this.loading = false;
  602. });
  603. },
  604. },
  605. };
  606. </script>
  607. <style type="text/scss" lang="scss" scoped>
  608. .print {
  609. margin-left: 790px;
  610. }
  611. .tips-t {
  612. display: flex;
  613. padding: 10px 0;
  614. div {
  615. flex: 1;
  616. // text-align: left;
  617. //padding-left: 70px;
  618. display: flex;
  619. justify-content: center;
  620. align-items: center;
  621. flex-direction: column;
  622. }
  623. }
  624. .tips-f {
  625. padding: 20px 0;
  626. }
  627. .face-image {
  628. display: block;
  629. width: 50px;
  630. height: 50px;
  631. margin: 0 auto;
  632. }
  633. /deep/ .el-dialog__body {
  634. padding: 10px 20px;
  635. }
  636. /deep/.el-form {
  637. .el-form-item__content {
  638. display: flex;
  639. }
  640. }
  641. /* @media print {
  642. html, body {
  643. font-size: 60pt !important;
  644. color: red;
  645. }
  646. } */
  647. </style>