productClassAdd.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <div class="bg-in-stock">
  3. <el-form ref="productListAddForm" :model="productListAddForm" :rules="productListAddFormRule"
  4. :disabled="isDetail" label-width="160px" inline class="change-form">
  5. <div class="mx">
  6. <el-form-item label="分类类型" prop="hire_or_sail" class="change-form-item">
  7. <el-select v-model="productListAddForm.hire_or_sail" clearable @change="selhire_or_sail">
  8. <el-option label="售卖商品" value="sail" />
  9. <el-option label="出租商品" value="hire" />
  10. </el-select>
  11. </el-form-item>
  12. <el-form-item label="分类名称" prop="name" class="change-form-item">
  13. <el-input v-model="productListAddForm.name" placeholder="请输入"></el-input>
  14. </el-form-item>
  15. <el-form-item label="备注" prop="remark" class="change-form-item" style="width: 61%">
  16. <el-input style="flex: 1" v-model="productListAddForm.remark" type="textarea"
  17. :disabled="type === 'detail' || type === 'audit'" :autosize="{ minRows: 3, maxRows: 4 }"
  18. placeholder="请输入"></el-input>
  19. </el-form-item>
  20. </div>
  21. <div class="mx">
  22. <h3>分类商品</h3>
  23. <el-button class="button" size="mini" type="primary" :disabled="type === 'check'"
  24. v-if="type !== 'detail' && type !== 'audit'" @click="handleSelectWarehouseEntryBatch">选择</el-button>
  25. </div>
  26. <div style="width: 100%; display: block">
  27. <el-form-item style="width: 100%">
  28. <el-table :data="productListAddForm.item_do_list" border :cell-style="{ textAlign: 'center' }"
  29. :header-cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 20px">
  30. <el-table-column label="商品编号">
  31. <template slot-scope="scope">
  32. {{ scope.row.goods_vo.sn }}
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="商品名称">
  36. <template slot-scope="scope">
  37. {{ scope.row.goods_vo.name }}
  38. </template>
  39. </el-table-column>
  40. <el-table-column label="条码">
  41. <template slot-scope="scope">
  42. {{ scope.row.bar_code }}
  43. </template>
  44. </el-table-column>
  45. <!-- <el-table-column label="序列号">
  46. <template slot-scope="scope">
  47. {{ scope.row.sn_code }}
  48. </template>
  49. </el-table-column> -->
  50. <el-table-column prop="spec_name" label="规格型号">
  51. </el-table-column>
  52. <el-table-column label="单位">
  53. <template slot-scope="scope">
  54. {{ scope.row.unit }}
  55. </template>
  56. </el-table-column>
  57. <el-table-column label="操作" v-if="type !== 'detail' && type !== 'audit'">
  58. <template slot-scope="scope">
  59. <el-button size="mini" type="danger" @click="
  60. productListAddForm.item_do_list.splice(scope.$index, 1)
  61. ">删除</el-button>
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65. </el-form-item>
  66. </div>
  67. </el-form>
  68. <div class="footer">
  69. <el-button v-if="type !== 'audit' && type !== 'detail'" type="primary" :disabled="type === 'check'"
  70. @click="saveproductListAddForm">添加
  71. </el-button>
  72. <el-button @click="$router.back()">返回</el-button>
  73. </div>
  74. <el-dialog title="商品列表" :visible.sync="goodsVisible" width="1000px" @close="closeGoosData">
  75. <el-table ref="table" :data="goodsData" border style="width: 100%"
  76. @selection-change="handleSelectionChange">
  77. <el-table-column type="selection" width="55" />
  78. <el-table-column prop="goods_vo.sn" label="商品编号"> </el-table-column>
  79. <el-table-column prop="bar_code" label="商品条码"> </el-table-column>
  80. <el-table-column prop="sn_code" label="序列号"> </el-table-column>
  81. <el-table-column prop="goods_vo.name" label="商品名称"> </el-table-column>
  82. <el-table-column prop="spec_name" label="规格型号">
  83. </el-table-column>
  84. <el-table-column prop="unit" label="单位"> </el-table-column>
  85. </el-table>
  86. <span slot="footer" class="dialog-footer">
  87. <el-button @click="closeGoosData">取 消</el-button>
  88. <el-button type="primary" @click="submitGoosData()">确 定</el-button>
  89. </span>
  90. </el-dialog>
  91. </div>
  92. </template>
  93. <script>
  94. import { mapGetters } from "vuex";
  95. import { Foundation, RegExp } from "~/ui-utils";
  96. import * as API_GoodsExchange from "@/api/goodsExchange";
  97. import * as API_GoodsLend from "@/api/goodsLend"
  98. import * as API_Setting from "@/api/setting";
  99. import * as API_BasicSetting from "@/api/basicSetting";
  100. import * as API_Erp from "@/api/erp";
  101. import * as API_Auth from "@/api/auth";
  102. import * as API_productClass from "@/api/productClass.js"
  103. export default {
  104. name: "goodsExchangeAdd",
  105. data() {
  106. return {
  107. typeList: [],
  108. adminList: [],
  109. dialogVisible: false,
  110. warehouseList: [],
  111. deptList: [],
  112. deptListAll: [],
  113. orderList: [],
  114. params:{
  115. pages: 1,
  116. size: 10
  117. },
  118. id: "",
  119. type: "",
  120. /** 出库单表单*/
  121. productListAddForm: {
  122. item_do_list: [],
  123. type: "",
  124. hire_or_sail:''
  125. },
  126. /** 校验规则 */
  127. productListAddFormRule: {
  128. name: [this.MixinRequired("请填写组合名称", "blur")],
  129. hire_or_sail: [this.MixinRequired("请选择商品类型", "change")],
  130. },
  131. warehouseProduct: null,
  132. scanDialogVisible: false,
  133. scanGoodsForm: {},
  134. //出入库
  135. sttorageType: "",
  136. // 出库商品明细
  137. goodsVisible: false,
  138. goodsData: [],
  139. // 暂存已勾选商品
  140. goodsList: [],
  141. item_do_list: [],
  142. code: "", //当前库位号
  143. warehouse_id: "",//当前仓库id
  144. activeList: [],//选中的商品
  145. isDetail: undefined,
  146. };
  147. },
  148. mounted() {
  149. this.id = this.$route.params.id
  150. this.type = this.$route.params.type
  151. if (this.type === 'check') {
  152. this.isDetail = true
  153. this.GET_goodsExchangeAddDetail();
  154. }
  155. this.GET_WarehouseList();
  156. this.GET_DeptList();
  157. this.outType();
  158. },
  159. watch: {
  160. $route: {
  161. immediate: true,
  162. handler(newVal) {
  163. if (newVal.name === "productClassEdit") {
  164. this.GET_goodsExchangeAddDetail();
  165. }
  166. },
  167. },
  168. },
  169. computed: {
  170. ...mapGetters(["user"]),
  171. },
  172. methods: {
  173. selhire_or_sail(){
  174. this.productListAddForm.item_do_list=[]
  175. },
  176. // 保存已选商品
  177. submitGoosData() {
  178. if (this.goodsList.length >= 1) {
  179. this.productListAddForm.item_do_list = this.goodsList
  180. this.goodsVisible = false;
  181. } else {
  182. this.$message.error("请选择商品信息");
  183. }
  184. },
  185. //选择商品
  186. handleSelectionChange(val) {
  187. this.goodsList = val
  188. },
  189. // 关闭商品明细
  190. closeGoosData() {
  191. this.goodsVisible = false;
  192. },
  193. //获取出库类型字典
  194. outType() {
  195. API_Setting.getPage({ dictType: "out_warehouse_type" }).then((res) => {
  196. this.typeList = res.data.filter((el) => {
  197. if (el.value !== "SALE_OUT" && el.value !== "HAIL_OUT") {
  198. return el;
  199. }
  200. });
  201. });
  202. },
  203. // 打印功能
  204. printIng() { },
  205. toSearch() {
  206. API_GoodsExchange.getGoodsInfo({
  207. barcode: this.scanGoodsForm.bar_code,
  208. }).then((res) => { });
  209. },
  210. // 扫码入库
  211. scanCode() {
  212. this.scanDialogVisible = true;
  213. this.$nextTick(() => {
  214. this.$refs.input.focus();
  215. });
  216. },
  217. /** 获取人员列表 */
  218. GET_AdministratorList() {
  219. API_Auth.getAdministratorList({
  220. page_no: 1,
  221. page_size: 9999,
  222. user_state: 0,
  223. }).then((response) => {
  224. this.adminList = response.data;
  225. });
  226. },
  227. /** 获取仓库 */
  228. GET_WarehouseList(e) {
  229. API_BasicSetting.getWarehouseListAll().then((response) => {
  230. this.warehouseList = response;
  231. });
  232. },
  233. //保存
  234. saveproductListAddForm() {
  235. this.$refs["productListAddForm"].validate((valid) => {
  236. if (valid) {
  237. const { id } = this.productListAddForm;
  238. const params = this.MixinClone(this.productListAddForm);
  239. const query = []
  240. if (!this.productListAddForm.item_do_list.length) {
  241. this.$message.error("请选择商品!");
  242. return;
  243. }
  244. params.item_do_list.map(el => {
  245. el.product_id = el.id
  246. el.id = ''
  247. })
  248. if (id) {
  249. /* params.item_do_list.map(el => {
  250. el.id = ''
  251. }) */
  252. API_productClass.editProduct(id, params).then(() => {
  253. this.$message.success("修改成功!");
  254. const { callback } = this.$route.params;
  255. if (typeof callback === "function") callback();
  256. this.$store.dispatch("delCurrentViews", {
  257. view: this.$route,
  258. $router: this.$router,
  259. });
  260. this.$router.push({ name: "productClass" });
  261. });
  262. } else {
  263. API_productClass.productGroup(params).then(() => {
  264. this.$message.success("添加成功!");
  265. const { callback } = this.$route.params;
  266. if (typeof callback === "function") callback();
  267. this.$store.dispatch("delCurrentViews", {
  268. view: this.$route,
  269. $router: this.$router,
  270. });
  271. this.$router.push({ name: "productClass" });
  272. });
  273. }
  274. }
  275. });
  276. },
  277. reverseSelect(rows) {
  278. this.$refs.table.toggleRowSelection(rows);
  279. },
  280. // 商品列表
  281. async handleSelectWarehouseEntryBatch() {
  282. if (this.productListAddForm.hire_or_sail !== '') {
  283. this.params.hire_or_sail=this.productListAddForm.hire_or_sail
  284. API_productClass.getProduct(this.params).then((res) => {
  285. this.goodsData = res.data;
  286. this.goodsVisible = true;
  287. console.log(res);
  288. /* API_GoodsLend.getInfo({ id: this.id }).then(response => {
  289. this.activeList = response.area_stock_vo
  290. res.records.map(item => {
  291. response.area_stock_vo.map(el => {
  292. if (item.id === el.product_stock_id) {
  293. this.reverseSelect(item)
  294. }
  295. })
  296. })
  297. }) */
  298. });
  299. }else{
  300. this.$message.error("请先选择商品分类类型")
  301. }
  302. },
  303. /** 选择订单编号 */
  304. async handleSelectOrderSn() {
  305. const orders = await this.$EnPickerOrder({
  306. orderApi: "admin/erp/order",
  307. selectedIds: [this.productListAddForm.order_sn],
  308. limit: 1,
  309. });
  310. this.$set(
  311. this.productListAddForm,
  312. "distribution_name",
  313. orders[0].distribution_name
  314. );
  315. const orderIds = orders.map((v) => v.sn);
  316. this.$set(this.productListAddForm, "order_sn", orderIds.join(","));
  317. this.GET_WarehouseOutProduct();
  318. },
  319. /** 获取出库单商品明细 */
  320. async GET_WarehouseOutProduct() {
  321. const res = await API_Erp.getWarehouseOutProduct({
  322. order_sn: this.productListAddForm.order_sn,
  323. });
  324. this.productListAddForm.return_list = res.data.map((item) => {
  325. item.amount = item.product_price;
  326. item.product_sn = item.product_sn;
  327. item.product_name = item.product_name;
  328. item.specification = item.product_specification;
  329. item.product_id = item.product_id;
  330. item.unit = item.product_unit;
  331. item.out_num = item.return_num;
  332. item.stock_sn = item.warehouse_entry_sn;
  333. item.cost_price = item.product_cost_price;
  334. return item;
  335. });
  336. },
  337. /** 获取仓库 */
  338. GET_DeptList() {
  339. API_GoodsExchange.getInfo().then((response) => {
  340. this.deptListAll = response;
  341. this.deptListAll.password = "";
  342. });
  343. },
  344. /** 切换仓库 */
  345. handleChangeWareHouse(val) {
  346. //this.productListAddForm.item_do_list = []change_list
  347. },
  348. /** 获取详情页面数据 */
  349. GET_goodsExchangeAddDetail() {
  350. this.$nextTick(() => {
  351. API_productClass.getById(this.id).then(res => {
  352. res.item_do_list.map(el => {
  353. el.bar_code = el.product_vo.bar_code
  354. el.spec_name = el.product_vo.spec_name
  355. el.unit = el.product_vo.unit
  356. })
  357. this.productListAddForm = res
  358. })
  359. });
  360. },
  361. },
  362. };
  363. </script>
  364. <style type="text/scss" lang="scss" scoped>
  365. /** 底部步骤 */
  366. .footer {
  367. width: 100%;
  368. padding: 10px;
  369. bottom: 0px;
  370. text-align: center;
  371. z-index: 999;
  372. }
  373. .mx {
  374. display: flex;
  375. align-items: center;
  376. width: 100%;
  377. .button {
  378. margin-left: 10px;
  379. }
  380. }
  381. .change-form {
  382. display: flex;
  383. justify-content: flex-start;
  384. align-items: flex-start;
  385. flex-wrap: wrap;
  386. min-width: 900px;
  387. .change-form-item {
  388. width: 30%;
  389. margin: 0 10px 20px 0;
  390. display: flex;
  391. flex-direction: row;
  392. flex-wrap: nowrap;
  393. }
  394. /deep/ {
  395. .el-form-item__content {
  396. flex: 1;
  397. width: 100%;
  398. }
  399. .el-date-editor,
  400. .el-cascader,
  401. .el-select {
  402. width: 100%;
  403. }
  404. }
  405. }
  406. .bg-in-stock {
  407. background-color: #fff;
  408. margin: 10px;
  409. padding: 25px;
  410. }
  411. .goods-info {
  412. display: flex;
  413. .goods-name-box {
  414. text-align: left;
  415. .goods-name {
  416. text-overflow: ellipsis;
  417. display: -webkit-box;
  418. -webkit-line-clamp: 2;
  419. -webkit-box-orient: vertical;
  420. overflow: hidden;
  421. line-height: 16px;
  422. }
  423. .specs {
  424. color: #999999;
  425. }
  426. }
  427. }
  428. /deep/ {
  429. .el-input--suffix .el-input__inner {
  430. padding-right: 10px;
  431. }
  432. .error-input {
  433. .el-input__inner {
  434. border: 1px solid red;
  435. }
  436. }
  437. }
  438. </style>