index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. <template>
  2. <div class="tenant">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable
  6. :source="sourceList.data"
  7. :pagination="sourceList.pagination"
  8. :config="config"
  9. :loading="loading"
  10. highlight-current-row
  11. :selectConfig="selectConfig"
  12. :table-events="{
  13. //element talbe事件都能传
  14. select: select,
  15. }"
  16. :action-list="[]"
  17. @get-list="getList"
  18. >
  19. <template #code="{ item }">
  20. <div style="cursor: pointer; color: #409eff">
  21. {{ item.businessCode }}
  22. </div>
  23. </template>
  24. <template #logistics="{ item }">
  25. {{ item.logisticsCompanyName }} (
  26. <span style="cursor: pointer; color: #409eff"> {{ item.code }} </span>
  27. )
  28. </template>
  29. </byTable>
  30. </div>
  31. <el-dialog
  32. title="入库"
  33. v-model="dialogVisible"
  34. width="800"
  35. v-loading="loading"
  36. destroy-on-close
  37. >
  38. <byForm
  39. :formConfig="formConfig"
  40. :formOption="formOption"
  41. v-model="formData.data"
  42. :rules="rules"
  43. ref="byform"
  44. >
  45. <template #detail>
  46. <div style="width: 100%">
  47. <el-table :data="formData.data.stockWaitDetailsList">
  48. <el-table-column prop="productCustomCode" label="物品编码" />
  49. <el-table-column prop="productName" label="物品名称" />
  50. <el-table-column prop="purchaseQuantity" label="采购数量" />
  51. <el-table-column prop="arrivalQuantity" label="本次发货" />
  52. <el-table-column prop="receiptQuantity" label="已入库" />
  53. <el-table-column prop="quantity" label="本次入库" min-width="150">
  54. <template #default="{ row, $index }">
  55. <el-form-item
  56. :prop="'stockWaitDetailsList.' + $index + '.quantity'"
  57. :rules="rules.quantity"
  58. :inline-message="true"
  59. >
  60. <el-input-number
  61. v-model="row.quantity"
  62. :precision="0"
  63. :controls="false"
  64. :min="0"
  65. onmousewheel="return false;"
  66. />
  67. </el-form-item>
  68. </template>
  69. </el-table-column>
  70. </el-table>
  71. </div>
  72. </template>
  73. </byForm>
  74. <template #footer>
  75. <el-button @click="dialogVisible = false" size="large">取 消</el-button>
  76. <el-button
  77. type="primary"
  78. @click="submitForm('byform')"
  79. size="large"
  80. :loading="submitLoading"
  81. >
  82. 确 定
  83. </el-button>
  84. </template>
  85. </el-dialog>
  86. </div>
  87. </template>
  88. <script setup>
  89. /* eslint-disable vue/no-unused-components */
  90. import { ElMessage, ElMessageBox } from "element-plus";
  91. import byTable from "@/components/byTable/index";
  92. import byForm from "@/components/byForm/index";
  93. import { computed, defineComponent, ref } from "vue";
  94. import useUserStore from "@/store/modules/user";
  95. const loading = ref(false);
  96. const submitLoading = ref(false);
  97. const sourceList = ref({
  98. data: [],
  99. pagination: {
  100. total: 3,
  101. pageNum: 1,
  102. pageSize: 10,
  103. type: 1,
  104. },
  105. });
  106. let dialogVisible = ref(false);
  107. let roomDialogVisible = ref(false);
  108. let modalType = ref("add");
  109. let rules = ref({
  110. type: [
  111. { required: true, message: "请选择仓库类型", trigger: ["blur", "change"] },
  112. ],
  113. warehouseId: [
  114. { required: true, message: "请选择仓库名称", trigger: "change" },
  115. ],
  116. quantity: [{ required: true, message: "请输入入库数量", trigger: "blur" }],
  117. });
  118. const { proxy } = getCurrentInstance();
  119. const selectConfig = reactive([
  120. {
  121. label: "入库状态",
  122. prop: "status",
  123. data: [],
  124. },
  125. ]);
  126. const inboundType = ref([
  127. {
  128. label: "未入库",
  129. value: "0",
  130. },
  131. {
  132. label: "部分入库",
  133. value: "1",
  134. },
  135. {
  136. label: "入库完成",
  137. value: "2",
  138. },
  139. ]);
  140. const config = computed(() => {
  141. return [
  142. {
  143. attrs: {
  144. label: "数据来源",
  145. prop: "businessType",
  146. },
  147. render(type) {
  148. return businessType.find((x) => x.value == type).label;
  149. },
  150. },
  151. {
  152. attrs: {
  153. label: "单号",
  154. prop: "code",
  155. slot: "code",
  156. },
  157. },
  158. {
  159. attrs: {
  160. label: "物流/快递信息",
  161. prop: "logisticsCompanyName",
  162. slot: "logistics",
  163. },
  164. },
  165. {
  166. attrs: {
  167. label: "仓库名称",
  168. prop: "receiptWarehouseName",
  169. },
  170. },
  171. {
  172. attrs: {
  173. label: "操作人",
  174. prop: "operatorName",
  175. },
  176. },
  177. {
  178. attrs: {
  179. label: "操作时间",
  180. prop: "createTime",
  181. },
  182. },
  183. {
  184. attrs: {
  185. label: "入库状态",
  186. prop: "status",
  187. },
  188. render(status) {
  189. return status == 0 ? "未入库" : status == 1 ? "部分入库" : "入库完成";
  190. },
  191. },
  192. {
  193. attrs: {
  194. label: "操作",
  195. width: "140",
  196. align: "center",
  197. },
  198. // 渲染 el-button,一般用在最后一列。
  199. renderHTML(row) {
  200. return [
  201. row.status < 2
  202. ? {
  203. attrs: {
  204. label: "入库",
  205. type: "primary",
  206. text: true,
  207. },
  208. el: "button",
  209. click() {
  210. getDtl(row);
  211. },
  212. }
  213. : {},
  214. {
  215. attrs: {
  216. label: "结束入库",
  217. type: "primary",
  218. text: true,
  219. },
  220. el: "button",
  221. click() {
  222. ElMessageBox.confirm("您确定结束入库吗?", "提示", {
  223. confirmButtonText: "确定",
  224. cancelButtonText: "取消",
  225. type: "warning",
  226. }).then(() => {
  227. // 删除
  228. proxy
  229. .post("/stockWait/endInStock", {
  230. id: row.id,
  231. })
  232. .then((res) => {
  233. ElMessage({
  234. message: "操作成功",
  235. type: "success",
  236. });
  237. getList();
  238. });
  239. });
  240. },
  241. },
  242. ];
  243. },
  244. },
  245. ];
  246. });
  247. let formData = reactive({
  248. data: {},
  249. treeData: [],
  250. });
  251. const formOption = reactive({
  252. inline: true,
  253. labelWidth: 100,
  254. itemWidth: 100,
  255. rules: [],
  256. });
  257. const byform = ref(null);
  258. const treeData = ref([]);
  259. const formConfig = reactive([
  260. {
  261. type: "title",
  262. title: "基础信息",
  263. },
  264. {
  265. type: "select",
  266. prop: "businessType",
  267. label: "入库类型",
  268. required: true,
  269. disabled: true,
  270. itemWidth: 100,
  271. data: [],
  272. },
  273. {
  274. type: "select",
  275. prop: "warehouseId",
  276. label: "仓库名称",
  277. itemWidth: 33,
  278. isLoad: {
  279. url: "/warehouse/page",
  280. req: {
  281. pageNum: 1,
  282. pageSize: 9999,
  283. },
  284. labelKey: "name",
  285. labelVal: "id",
  286. method: "post",
  287. resUrl: "rows",
  288. },
  289. },
  290. {
  291. type: "input",
  292. prop: "code",
  293. label: "物流信息",
  294. disabled: true,
  295. itemWidth: 33,
  296. },
  297. {
  298. type: "slot",
  299. slotName: "detail",
  300. label: "入库明细",
  301. },
  302. ]);
  303. const getList = async (req) => {
  304. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  305. loading.value = true;
  306. proxy
  307. .post("/stockWait/pageByWdly", sourceList.value.pagination)
  308. .then((message) => {
  309. console.log(message);
  310. sourceList.value.data = message.rows.map((x) => ({
  311. ...x,
  312. ...JSON.parse(x.victoriatouristJson),
  313. }));
  314. sourceList.value.pagination.total = message.total;
  315. setTimeout(() => {
  316. loading.value = false;
  317. }, 200);
  318. });
  319. };
  320. const openModal = () => {
  321. dialogVisible.value = true;
  322. modalType.value = "add";
  323. formData.data = {};
  324. };
  325. const submitForm = () => {
  326. byform.value.handleSubmit((valid) => {
  327. const list = formData.data.stockWaitDetailsList;
  328. const total = list.reduce((total, x) => (total += Number(x.quantity)), 0);
  329. if (!(total > 0)) {
  330. return ElMessage({
  331. message: `本次入库不能为0!`,
  332. type: "info",
  333. });
  334. }
  335. // for (let i = 0; i < list.length; i++) {
  336. // const e = list[i];
  337. // if (Number(e.receiptQuantity) + e.quantity > Number(e.arrivalQuantity)) {
  338. // return ElMessage({
  339. // message: "本次入库加已入库数量不可大于发货数量!",
  340. // type: "info",
  341. // });
  342. // }
  343. // }
  344. submitLoading.value = true;
  345. proxy.post("/stockWait/addByWdly", formData.data).then(
  346. (res) => {
  347. ElMessage({
  348. message: "操作成功",
  349. type: "success",
  350. });
  351. dialogVisible.value = false;
  352. submitLoading.value = false;
  353. getList();
  354. },
  355. (err) => (submitLoading.value = false)
  356. );
  357. });
  358. };
  359. const getDtl = (row) => {
  360. modalType.value = "edit";
  361. proxy.post("/stockWait/detailByWdly", { id: row.id }).then((res) => {
  362. const json = res.victoriatouristJson
  363. ? JSON.parse(res.victoriatouristJson)
  364. : {};
  365. formData.data = {
  366. id: row.id,
  367. type: "1",
  368. businessType: res.businessType + "",
  369. warehouseId: "",
  370. code: json.code ? json.code : "",
  371. stockWaitDetailsList: res.stockWaitDetailsList.map((x) => ({
  372. ...x,
  373. arrivalQuantity: x.quantity,
  374. quantity: undefined,
  375. })),
  376. };
  377. dialogVisible.value = true;
  378. });
  379. };
  380. const warehouseType = ref([]);
  381. const getDict = () => {
  382. // // 币种数据
  383. proxy
  384. .post("/dictTenantData/page", {
  385. pageNum: 1,
  386. pageSize: 999,
  387. tenantId: useUserStore().user.tenantId,
  388. dictCode: "warehouse_type",
  389. })
  390. .then((res) => {
  391. warehouseType.value = res.rows;
  392. });
  393. };
  394. const businessType = [
  395. { label: "线边回仓", value: "1" },
  396. { label: "完工入库", value: "2" },
  397. { label: "采购到货", value: "3" },
  398. { label: "退货出库", value: "4" },
  399. ];
  400. getList();
  401. getDict();
  402. onMounted(() => {
  403. selectConfig[0].data = inboundType.value;
  404. formConfig[1].data = businessType.map((x) => ({
  405. label: x.label,
  406. value: x.value,
  407. }));
  408. });
  409. </script>
  410. <style lang="scss" scoped>
  411. .tenant {
  412. padding: 20px;
  413. }
  414. </style>