serialList.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <template>
  2. <div>
  3. <div class="search">
  4. <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
  5. <el-row>
  6. <el-col :span="12">
  7. <el-form-item label="sku">
  8. <el-input v-model="advancedForm.sku" placeholder="请输入内容" clearable></el-input>
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="12">
  12. <el-form-item label="状态">
  13. <el-select v-model="advancedForm.status" clearable>
  14. <el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.value" />
  15. </el-select>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="8">
  19. <!-- <el-form-item label="出入库">
  20. <el-select v-model="advancedForm.status">
  21. <el-option key="WAIT" label="出库" value="WAIT" />
  22. <el-option key="NEW" label="入库" value="NEW" />
  23. </el-select>
  24. </el-form-item> -->
  25. </el-col>
  26. </el-row>
  27. </el-form>
  28. <el-button @click="searchEvent"> 搜索 </el-button>
  29. </div>
  30. <en-table-layout :tableData="tableData.data" :loading="loading" @selection-change="handleSelectionChange">
  31. <div slot="toolbar" class="inner-toolbar">
  32. <div class="toolbar-btns">
  33. <el-button size="mini" v-if="checkPermission(['stock:add'])" type="primary"
  34. @click="handleAddWarehouse">新增</el-button>
  35. <!-- <el-button
  36. size="mini"
  37. type="delect"
  38. :disabled="multipleSelection.length === 0"
  39. @click="handleDelectWarehous"
  40. >删除</el-button
  41. > -->
  42. <el-button size="mini" type="primary" :disabled="multipleSelection.length === 0"
  43. @click="batchPrint">批量打印</el-button>
  44. </div>
  45. <!--
  46. <div class="toolbar-search" style="display: flex; align-items: center">
  47. <span>商品编号/条码:</span>
  48. <en-table-search
  49. @search="searchEvent"
  50. placeholder="请输入关键字搜索"
  51. />
  52. </div> -->
  53. </div>
  54. <template slot="table-columns">
  55. <el-table-column type="selection" width="55" />
  56. <el-table-column prop="goods_vo.sn" label="商品编号" />
  57. <el-table-column prop="goods_vo.name" label="商品名称" />
  58. <el-table-column prop="product_vo.spec_name" label="规格型号" />
  59. <el-table-column prop="sku" label="sku" />
  60. <el-table-column prop="sn_code" label="序列号" />
  61. <el-table-column prop="status" label="状态">
  62. <template slot-scope="scope">
  63. {{ typeName(scope.row.status) }}
  64. </template>
  65. </el-table-column>
  66. <el-table-column prop="out_house_id" label="出库单编号" />
  67. <el-table-column prop="entry_house_id" label="入库单编号" />
  68. <el-table-column label="操作" width="310">
  69. <template slot-scope="scope">
  70. <el-button size="mini" v-if="checkPermission(['stock:edit'])"
  71. @click="handleEditWarehouse(scope.$index, scope.row)">查看</el-button>
  72. <!-- <el-button
  73. size="mini"
  74. v-if="checkPermission(['stock:del'])"
  75. type="danger"
  76. @click="handleDeleteWarehouse(scope.$index, scope.row)"
  77. >删除</el-button
  78. > -->
  79. <el-button size="mini" @click="editPrintIng(scope.row)">编辑序列号</el-button>
  80. <el-button size="mini" @click="PrintIng(scope.row)">打印序列号</el-button>
  81. </template>
  82. </el-table-column>
  83. </template>
  84. <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
  85. @current-change="handlePageCurrentChange" :current-page="tableData.page_no" :page-sizes="[10, 20, 50, 100]"
  86. :page-size="tableData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.data_total">
  87. </el-pagination>
  88. </en-table-layout>
  89. <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @open="handleDialogOpen"
  90. :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
  91. <div class="header">
  92. <span>商品编号/sku</span>
  93. <el-input v-model="stockForm.sn"></el-input>
  94. <el-button>搜索</el-button>
  95. </div>
  96. <div class="center">
  97. <el-table :data="snTableData.records" border ref="table" style="width: 100%"
  98. @selection-change="snHandleSelectionChange">
  99. <el-table-column type="selection" width="55" />
  100. <el-table-column prop="goods_vo.sn" label="商品编号">
  101. </el-table-column>
  102. <el-table-column prop="goods_vo.name" label="商品名称" />
  103. <el-table-column prop="sku" label="sku" v-if="title !== '查看序列号'">
  104. </el-table-column>
  105. <el-table-column prop="product_vo.sku" label="sku" v-else>
  106. </el-table-column>
  107. <el-table-column prop="spec_name" label="规格型号" v-if="title !== '查看序列号'">
  108. </el-table-column>
  109. <el-table-column prop="product_vo.spec_name" label="规格型号" v-else>
  110. </el-table-column>
  111. </el-table>
  112. </div>
  113. <el-pagination @size-change="goodsPageSizeChange" @current-change="goodsPageCurrentChange"
  114. :current-page="snTableData.current" :page-sizes="[10, 20, 50, 100]" :page-size="snTableData.size"
  115. layout="total, sizes, prev, pager, next, jumper" :total="snTableData.total"></el-pagination>
  116. <!-- <el-form :model="stockForm" :rules="stockRules" ref="stockForm" label-width="120px">
  117. <el-form-item label="商品编码/条码">
  118. <span>
  119. <el-input v-model="stockForm.sn"></el-input><el-button>搜索</el-button>
  120. </span>
  121. </el-form-item>
  122. <el-form-item label="仓库名称" prop="name">
  123. <el-input v-model="stockForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入仓库名称"></el-input>
  124. </el-form-item>
  125. <el-form-item label="备注" prop="description">
  126. <el-input v-model="stockForm.description" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
  127. placeholder="请输入备注"></el-input>
  128. </el-form-item>
  129. </el-form> -->
  130. <div class="dialog-footer">
  131. <el-input :disabled="title == '查看序列号'" v-model="stockForm.qty" placeholder="请输入要生成序列号的数量"></el-input>
  132. <el-button :disabled="title == '查看序列号'" @click="saveQ">生成</el-button>
  133. <!-- <el-button @click="dialogVisible = false">取 消</el-button>
  134. <el-button type="primary" @click="submitWarehouseForm">确 定</el-button> -->
  135. </div>
  136. <div class="info">
  137. <p>生成规则:序号号=商品编号+4位规格编码+当前生成时间+4位自然序号</p>
  138. <p>
  139. 注意:如果没有规格的商品默认规格编码就是0000,单次生成数量不得超过9999
  140. </p>
  141. </div>
  142. </el-dialog>
  143. <el-dialog title="打印预览" :visible.sync="PrintVisible" width="940px" center @close="handleCancle">
  144. <el-button size="mini" type="primary" @click="handlePrintGoodsLend" class="print">打印</el-button>
  145. <div id="deliverySheet" style="width: 900px">
  146. <div class="tips-t" v-for="(item, index) in codeList" :key="index">
  147. <div>
  148. <!-- <div class="qrcode-pic" ref="codeItem" ></div> -->
  149. <div class="numOrder">
  150. </div>
  151. <div style="margin-top: 10px; font-size: 20px; text-align: center">
  152. <barcode :value="item" format="CODE128"></barcode>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </el-dialog>
  158. <el-dialog title="修改序列号" :visible.sync="SKUVisible" width="30%" center @close="snCodeCancle" >
  159. <el-form ref="SKUForm" :model="SKUForm" :rules="SKUFormRule" label-width="160px" inline class="change-form">
  160. <el-form-item label="序列号" prop="snCode" class="change-form-item">
  161. <el-input v-model="SKUForm.snCode" placeholder="请输入" style="width: 300px;"></el-input>
  162. </el-form-item>
  163. </el-form>
  164. <span slot="footer">
  165. <el-button @click="snCodeCancle">取消</el-button>
  166. <el-button @click="snCodeEdit">修改</el-button>
  167. </span>
  168. </el-dialog>
  169. </div>
  170. </template>
  171. <script>
  172. import * as API_BasicSetting from "@/api/basicSetting";
  173. import * as API_Setting from "@/api/setting";
  174. import * as API_Auth from "@/api/auth";
  175. import { Foundation } from "~/ui-utils";
  176. import { mapGetters } from "vuex";
  177. import Print from "print-js";
  178. export default {
  179. name: "warehouse",
  180. data() {
  181. return {
  182. deptList: [],
  183. adminList: [],
  184. // postList: [],
  185. // 列表loading状态
  186. loading: false,
  187. // 列表参数
  188. params: {
  189. page_no: 1,
  190. page_size: 10,
  191. },
  192. // 列表数据
  193. tableData: "",
  194. // 仓库表单
  195. stockForm: {
  196. qty: 0,
  197. },
  198. // 仓库表单 规则
  199. stockRules: {
  200. sn: [{ required: true, message: "请输入仓库编号", trigger: "blur" }],
  201. name: [
  202. { required: true, message: "请选择输入仓库名称", trigger: "blur" },
  203. ],
  204. },
  205. // 仓库表单 dialog
  206. dialogVisible: false,
  207. snTableData: [],
  208. // 当前已选择的行
  209. multipleSelection: [],
  210. PrintVisible: false,
  211. codeList: [],
  212. // 新增窗口选中的值
  213. snMultipleSelection: [],
  214. title: "",
  215. statusList: [],
  216. // 高级搜索数据
  217. advancedForm: {},
  218. barcodeValue: "",
  219. SKUForm: {
  220. snCode: '',
  221. id: ''
  222. },
  223. SKUFormRule: {
  224. snCode: [{
  225. required: true,
  226. message: '请输入序列号',
  227. trigger: 'blur'
  228. }
  229. ],
  230. },
  231. SKUVisible: false
  232. };
  233. },
  234. mounted() {
  235. this.GET_WarehouseList();
  236. this.GET_DeptList();
  237. // this.GET_StationAllList()
  238. this.GET_AdministratorList();
  239. },
  240. watch: {
  241. },
  242. computed: {
  243. ...mapGetters(["user"]),
  244. },
  245. methods: {
  246. snCodeCancle() {
  247. this.SKUForm.id = ""
  248. this.SKUForm.snCode = ""
  249. this.SKUVisible = false
  250. },
  251. snCodeEdit() {
  252. API_Setting.updateSnCode(this.SKUForm.id, this.SKUForm.snCode).then(res => {
  253. this.$message.success('修改成功!')
  254. this.SKUForm.id = ""
  255. this.SKUForm.snCode = ""
  256. this.SKUVisible = false
  257. this.GET_WarehouseList();
  258. })
  259. },
  260. editPrintIng(row) {
  261. this.SKUForm.id = row.id
  262. this.SKUForm.snCode = row.sn_code
  263. this.SKUVisible = true
  264. },
  265. /* 分页 */
  266. goodsPageSizeChange(size) {
  267. this.params.page_size = size;
  268. API_Setting.getSnProduct(this.params).then((res) => {
  269. this.snTableData = res; //this.tableData.data
  270. });
  271. },
  272. goodsPageCurrentChange(page) {
  273. this.params.page_no = page;
  274. API_Setting.getSnProduct(this.params).then((res) => {
  275. this.snTableData = res; //this.tableData.data
  276. });
  277. },
  278. typeName(val) {
  279. let name = "";
  280. this.statusList.map((el) => {
  281. if (el.value == val) {
  282. return (name = el.label);
  283. }
  284. });
  285. return name;
  286. },
  287. close() {
  288. this.dialogVisible = false;
  289. this.snTableData = [];
  290. },
  291. snHandleSelectionChange(val) {
  292. if (val.length > 1) {
  293. // 如果当前选中数量超过1,移除先前选中的,保留最后选中的
  294. const lastSelected = val[val.length - 1];
  295. this.$refs.table.clearSelection(); // 清除所有选中
  296. this.$refs.table.toggleRowSelection(lastSelected, true); // 重新选中最后一个
  297. }
  298. this.snMultipleSelection = val; // 更新当前选中的行
  299. },
  300. // 批量打印
  301. batchPrint() {
  302. const ids = this.multipleSelection.map((item) => item.sn_code);
  303. this.codeList = ids;
  304. this.PrintVisible = true;
  305. },
  306. /** 打印对账详情 */
  307. handlePrintGoodsLend() {
  308. Print({
  309. printable: "deliverySheet",
  310. type: "html",
  311. targetStyles: ["*"],
  312. ignoreElements: ["no-logs", "goods-image", "no-btn"],
  313. });
  314. },
  315. handleCancle() {
  316. this.dialogVisible = false;
  317. this.codeList = [];
  318. },
  319. // 打印
  320. PrintIng(row) {
  321. this.barcodeValue = row.sn_code;
  322. this.$nextTick(() => {
  323. this.codeList.push(row.sn_code);
  324. this.PrintVisible = true;
  325. });
  326. },
  327. // 删除
  328. handleDelectWarehous() {
  329. /* if (!this.multipleSelection || !this.multipleSelection.length)
  330. return this.$message.error("请先选择!");
  331. this.$confirm("确定要删除这些吗?", "提示", { type: "warning" })
  332. .then(() => {
  333. const ids = this.multipleSelection.map((item) => item.id);
  334. API_Setting.deleteSn(ids).then(() => {
  335. this.$message.success("删除成功!");
  336. this.GET_WarehouseList();
  337. });
  338. })
  339. .catch(() => {}); */
  340. },
  341. /** 多选改变 */
  342. handleSelectionChange(val) {
  343. this.multipleSelection = val;
  344. },
  345. // 生成序列号
  346. saveQ() {
  347. // if (!this.snMultipleSelection || !this.snMultipleSelection.length)
  348. API_Setting.addCreateSnCode({
  349. product_id: this.snMultipleSelection[0].id,
  350. num: Number(this.stockForm.qty),
  351. }).then((res) => {
  352. this.dialogVisible = false;
  353. this.snTableData = [];
  354. this.GET_WarehouseList();
  355. });
  356. },
  357. /** 获取人员列表 */
  358. GET_AdministratorList() {
  359. API_Auth.getAdministratorList({
  360. page_no: 1,
  361. page_size: 9999,
  362. user_state: 0,
  363. }).then((response) => {
  364. this.adminList = response.data;
  365. });
  366. },
  367. // /** 获取岗位 */
  368. // GET_StationAllList() {
  369. // API_Setting.getStationAllList().then(response => {
  370. // this.postList = response
  371. // })
  372. // },
  373. /** 获取部门 */
  374. GET_DeptList() {
  375. API_Setting.getDeptList().then((response) => {
  376. this.deptList = Foundation.buildTree(response, "0");
  377. });
  378. },
  379. /** 分页大小发生改变 */
  380. handlePageSizeChange(size) {
  381. this.params.page_size = size;
  382. this.GET_WarehouseList();
  383. },
  384. /** 分页页数发生改变 */
  385. handlePageCurrentChange(page) {
  386. this.params.page_no = page;
  387. this.GET_WarehouseList();
  388. },
  389. /** 添加仓库 */
  390. handleAddWarehouse() {
  391. /* this.stockForm = {
  392. dept_id: 0,
  393. admin_id: this.user.uid,
  394. }; */
  395. this.title = "新增序列号";
  396. API_Setting.getSnProduct(this.params).then((res) => {
  397. this.snTableData = res; //this.tableData.data
  398. this.dialogVisible = true;
  399. });
  400. },
  401. /** 编辑仓库 */
  402. handleEditWarehouse(index, row) {
  403. this.title = "查看序列号";
  404. this.snTableData.push(row);
  405. this.dialogVisible = true;
  406. },
  407. /** 删除 */
  408. handleDeleteWarehouse(index, row) {
  409. /* this.$confirm("确定要删除这个仓库吗?", "提示", { type: "warning" })
  410. .then(() => {
  411. API_Setting.deleteSn(row.id).then(() => {
  412. this.$message.success("删除成功!");
  413. this.GET_WarehouseList();
  414. });
  415. })
  416. .catch(() => {}); */
  417. },
  418. /** dialog打开后重置form表单校验结果 */
  419. handleDialogOpen() {
  420. setTimeout(() => {
  421. this.$refs["stockForm"].clearValidate();
  422. });
  423. },
  424. /** 提交仓库表单 */
  425. submitWarehouseForm() {
  426. this.$refs["stockForm"].validate((valid) => {
  427. if (valid) {
  428. const { id } = this.stockForm;
  429. const params = this.MixinClone(this.stockForm);
  430. if (!params.real_name) delete params.real_name;
  431. params.role_id === "超级仓库" ? (params.role_id = 0) : null;
  432. delete params.admin_name;
  433. if (id) {
  434. API_BasicSetting.editWarehouse(id, params).then((response) => {
  435. this.dialogVisible = false;
  436. this.$message.success("修改成功!");
  437. this.GET_WarehouseList();
  438. });
  439. } else {
  440. API_BasicSetting.addWarehouse(params).then(() => {
  441. this.dialogVisible = false;
  442. this.$message.success("添加成功!");
  443. this.GET_WarehouseList();
  444. });
  445. }
  446. } else {
  447. this.$message.error("表单填写有误,请核对!");
  448. return false;
  449. }
  450. });
  451. },
  452. /** 搜索事件触发 */
  453. searchEvent(data) {
  454. this.params = {
  455. ...this.params,
  456. ...this.advancedForm,
  457. };
  458. this.params.page_no = 1;
  459. this.GET_WarehouseList();
  460. },
  461. /** 获取序列号列表 */
  462. GET_WarehouseList() {
  463. this.loading = true;
  464. API_Setting.getDictSn(this.params)
  465. .then((response) => {
  466. this.loading = false;
  467. this.tableData = response;
  468. })
  469. .catch(() => {
  470. this.loading = false;
  471. });
  472. API_Setting.getPage({ dictType: "sn_code_status" }).then((res) => {
  473. this.statusList = res.data;
  474. });
  475. },
  476. },
  477. };
  478. </script>
  479. <style type="text/scss" lang="scss" scoped>
  480. .print {
  481. margin-left: 790px;
  482. }
  483. .face-image {
  484. display: block;
  485. width: 50px;
  486. height: 50px;
  487. margin: 0 auto;
  488. }
  489. /deep/ .el-dialog__body {
  490. padding: 10px 20px;
  491. }
  492. .header {
  493. display: flex;
  494. justify-content: flex-start;
  495. align-items: center;
  496. .el-input {
  497. width: 200px;
  498. margin: 15px;
  499. }
  500. }
  501. .dialog-footer {
  502. margin-top: 30px;
  503. margin-bottom: 20px;
  504. display: flex;
  505. justify-content: center;
  506. .el-input {
  507. width: 200px;
  508. margin-right: 15px;
  509. }
  510. }
  511. .info {
  512. text-align: center;
  513. color: #aaaaaa;
  514. }
  515. .search {
  516. display: flex;
  517. align-items: center;
  518. background: #fff;
  519. overflow: hidden;
  520. padding: 30px 10px 10px 10px;
  521. /deep/ .el-form-item {
  522. .el-form-item__content {
  523. .el-input {
  524. width: 200px;
  525. }
  526. }
  527. }
  528. .el-button {
  529. margin-top: -19px;
  530. margin-left: 20px;
  531. }
  532. }
  533. .numOrder {
  534. display: flex;
  535. justify-content: center;
  536. }
  537. </style>