add.vue 8.9 KB

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