index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <div>
  3. <el-card class="box-card">
  4. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  5. <template #basicInformation>
  6. <div style="width: 100%">
  7. <el-row>
  8. <el-col :span="12">
  9. <el-form-item label="事业部" prop="departmentId" style="width: 100%; margin-bottom: 18px">
  10. <el-select v-model="formData.data.departmentId" placeholder="请选择事业部" clearable style="width: 100%">
  11. <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="出库仓库" prop="outWarehouseId" style="width: 100%; margin-bottom: 18px">
  15. <el-select v-model="formData.data.outWarehouseId" placeholder="请选择出库仓库" disabled style="width: 100%">
  16. <el-option v-for="item in warehouseList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="入库仓库" prop="inWarehouseId" style="width: 100%; margin-bottom: 18px">
  20. <el-select v-model="formData.data.inWarehouseId" placeholder="请选择入库仓库" disabled style="width: 100%">
  21. <el-option v-for="item in warehouseList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="申请人" prop="applicant" style="width: 100%; margin-bottom: 18px">
  25. <el-input v-model="formData.data.applicant" placeholder="请输入申请人" />
  26. </el-form-item>
  27. </el-col>
  28. <el-col :span="12">
  29. <el-form-item label="备注" prop="remark" style="width: 100%; margin-bottom: 18px">
  30. <el-input v-model="formData.data.remark" :rows="4" type="textarea" placeholder="请输入备注" />
  31. </el-form-item>
  32. </el-col>
  33. </el-row>
  34. </div>
  35. </template>
  36. <template #inOutStorageBomList>
  37. <div style="width: 100%; padding: 0 20px">
  38. <div style="margin-bottom: 10px">
  39. <el-button type="primary" size="small" @click="clickAddBOM()">选择BOM</el-button>
  40. </div>
  41. <el-table :data="formData.data.inOutStorageBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
  42. <el-table-column label="品号" prop="code" width="180" />
  43. <el-table-column label="品名" prop="name" min-width="220" />
  44. <el-table-column label="可用库存" prop="availableStock" width="120" />
  45. <el-table-column label="入库数量" width="180">
  46. <template #default="{ row, $index }">
  47. <el-form-item :prop="'inOutStorageBomList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true" style="width: 100%">
  48. <el-input-number
  49. onmousewheel="return false;"
  50. v-model="row.quantity"
  51. placeholder="入库数量"
  52. style="width: 100%"
  53. :controls="false"
  54. :min="0"
  55. :precision="0"
  56. :max="row.availableStock" />
  57. </el-form-item>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="操作" align="center" fixed="right" width="60">
  61. <template #default="{ $index }">
  62. <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
  63. </template>
  64. </el-table-column>
  65. </el-table>
  66. </div>
  67. </template>
  68. </byForm>
  69. <div style="text-align: center; margin: 10px">
  70. <el-button @click="clickCancel()" size="large">取 消</el-button>
  71. <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
  72. </div>
  73. </el-card>
  74. <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="90%">
  75. <SelectInventory
  76. :selectStatus="true"
  77. :departmentId="formData.data.departmentId"
  78. :warehouseId="formData.data.outWarehouseId"
  79. @selectBOM="selectBOM"></SelectInventory>
  80. <template #footer>
  81. <el-button @click="openBOM = false" size="large">关 闭</el-button>
  82. </template>
  83. </el-dialog>
  84. </div>
  85. </template>
  86. <script setup>
  87. import byForm from "/src/components/byForm/index";
  88. import { ElMessage } from "element-plus";
  89. import { useRouter } from "vue-router";
  90. import useTagsViewStore from "/src/store/modules/tagsView";
  91. import SelectInventory from "/src/views/production/warehouse/inventory/index";
  92. const { proxy } = getCurrentInstance();
  93. const departmentList = ref([]);
  94. const warehouseList = ref([]);
  95. const router = useRouter();
  96. const submit = ref(null);
  97. const formOption = reactive({
  98. inline: true,
  99. labelWidth: "100px",
  100. itemWidth: 100,
  101. rules: [],
  102. labelPosition: "right",
  103. });
  104. const formData = reactive({
  105. data: {
  106. outWarehouseId: "1684037092708990977",
  107. inWarehouseId: "1684037244354052098",
  108. applicant: proxy.useUserStore().user.nickName,
  109. inOutStorageBomList: [],
  110. },
  111. });
  112. const formConfig = computed(() => {
  113. return [
  114. {
  115. type: "title",
  116. title: "仓库信息",
  117. label: "",
  118. },
  119. {
  120. type: "slot",
  121. slotName: "basicInformation",
  122. label: "",
  123. },
  124. {
  125. type: "title",
  126. title: "物料信息",
  127. label: "",
  128. },
  129. {
  130. type: "slot",
  131. slotName: "inOutStorageBomList",
  132. label: "",
  133. },
  134. ];
  135. });
  136. const rules = ref({
  137. departmentId: [{ required: true, message: "请选择事业部", trigger: "change" }],
  138. outWarehouseId: [{ required: true, message: "请选择出库仓库", trigger: "change" }],
  139. inWarehouseId: [{ required: true, message: "请选择入库仓库", trigger: "change" }],
  140. applicant: [{ required: true, message: "请输入申请人", trigger: "blur" }],
  141. quantity: [{ required: true, message: "请输入调拨数量", trigger: "blur" }],
  142. });
  143. const getDemandData = () => {
  144. proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  145. if (res.rows && res.rows.length > 0) {
  146. departmentList.value = res.rows.map((item) => {
  147. return {
  148. dictKey: item.id,
  149. dictValue: item.name,
  150. };
  151. });
  152. }
  153. });
  154. proxy.post("/warehouse/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  155. if (res.rows && res.rows.length > 0) {
  156. warehouseList.value = res.rows.map((item) => {
  157. return {
  158. dictKey: item.id,
  159. dictValue: item.name,
  160. };
  161. });
  162. }
  163. });
  164. };
  165. getDemandData();
  166. const openBOM = ref(false);
  167. const clickAddBOM = () => {
  168. if (!(formData.data.departmentId || formData.data.departmentId === "0")) {
  169. return ElMessage("请先选择事业部");
  170. }
  171. if (!(formData.data.outWarehouseId || formData.data.outWarehouseId === "0")) {
  172. return ElMessage("请先选择仓库");
  173. }
  174. openBOM.value = true;
  175. };
  176. const selectBOM = (item) => {
  177. if (formData.data.inOutStorageBomList && formData.data.inOutStorageBomList.length > 0) {
  178. let list = formData.data.inOutStorageBomList.filter((itemFilter) => itemFilter.bomSpecId === item.bomSpecId);
  179. if (list && list.length > 0) {
  180. return ElMessage("该BOM已添加");
  181. }
  182. }
  183. if (item.bomSpecId) {
  184. formData.data.inOutStorageBomList.push({
  185. bomSpecId: item.bomSpecId,
  186. code: item.bomSpecCode,
  187. name: item.bomSpecName,
  188. quantity: undefined,
  189. availableStock: item.quantity,
  190. });
  191. ElMessage({ message: "选择完成", type: "success" });
  192. }
  193. };
  194. const clickDelete = (index) => {
  195. formData.data.inOutStorageBomList.splice(index, 1);
  196. };
  197. const submitForm = () => {
  198. submit.value.handleSubmit(() => {
  199. if (formData.data.inOutStorageBomList && formData.data.inOutStorageBomList.length > 0) {
  200. proxy.post("/inOutStorage/addAllot", formData.data).then(() => {
  201. ElMessage({
  202. message: "提交成功",
  203. type: "success",
  204. });
  205. clickCancel();
  206. });
  207. } else {
  208. return ElMessage("请添加BOM");
  209. }
  210. });
  211. };
  212. const clickCancel = () => {
  213. const useTagsStore = useTagsViewStore();
  214. useTagsStore.delVisitedView(router.currentRoute.value);
  215. router.replace({
  216. path: "/production/warehouse/warehouse-putInStorage",
  217. });
  218. };
  219. </script>
  220. <style lang="scss" scoped>
  221. ::v-deep(.el-input-number .el-input__inner) {
  222. text-align: left;
  223. }
  224. :deep(.el-dialog) {
  225. margin-top: 10px !important;
  226. margin-bottom: 10px !important;
  227. }
  228. </style>