SendSubscribe.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div style="width: 100%; padding: 0px 15px">
  3. <byForm
  4. :formConfig="formConfig"
  5. :formOption="formOption"
  6. v-model="formData.data"
  7. :rules="rules"
  8. ref="formDom"
  9. >
  10. <template #details>
  11. <div style="width: 100%">
  12. <el-button
  13. type="primary"
  14. @click="openProduct = true"
  15. style="margin-bottom: 10px"
  16. >
  17. 添加物品
  18. </el-button>
  19. <el-table :data="formData.data.subscribeDetailList">
  20. <el-table-column
  21. prop="goodType"
  22. label="物品类型"
  23. :formatter="(row) => (row.goodType == 1 ? '产品' : '物料')"
  24. />
  25. <el-table-column prop="productCode" label="物品编码" />
  26. <el-table-column prop="productName" label="物品名称" />
  27. <el-table-column prop="productSpec" label="规格型号" />
  28. <el-table-column prop="productUnit" label="单位" />
  29. <el-table-column prop="count" label="申购数量" min-width="150">
  30. <template #default="{ row, $index }">
  31. <el-form-item
  32. :prop="'subscribeDetailList.' + $index + '.count'"
  33. :rules="rules.count"
  34. :inline-message="true"
  35. >
  36. <el-input-number
  37. v-model="row.count"
  38. :precision="4"
  39. :controls="false"
  40. :min="0"
  41. />
  42. </el-form-item>
  43. </template>
  44. </el-table-column>
  45. <el-table-column prop="remark" label="备注" min-width="150">
  46. <template #default="{ row, $index }">
  47. <el-form-item
  48. :prop="'subscribeDetailList.' + $index + '.remark'"
  49. :rules="rules.remark"
  50. :inline-message="true"
  51. >
  52. <el-input v-model="row.remark" placeholder="请输入" />
  53. </el-form-item>
  54. </template>
  55. </el-table-column>
  56. <el-table-column prop="zip" label="操作" width="100">
  57. <template #default="{ $index }">
  58. <el-button type="primary" link @click="handleRemove($index)"
  59. >删除</el-button
  60. >
  61. </template>
  62. </el-table-column>
  63. </el-table>
  64. </div>
  65. </template>
  66. </byForm>
  67. <el-dialog
  68. v-model="openProduct"
  69. title="选择物品"
  70. width="70%"
  71. append-to-body
  72. >
  73. <SelectGoods
  74. @cancel="openProduct = false"
  75. @pushGoods="pushGoods"
  76. ></SelectGoods>
  77. </el-dialog>
  78. </div>
  79. </template>
  80. <script setup>
  81. import byForm from "@/components/byForm/index";
  82. import { ElMessage, ElMessageBox } from "element-plus";
  83. import SelectGoods from "@/components/product/SelectGoods";
  84. import useUserStore from "@/store/modules/user";
  85. const { proxy } = getCurrentInstance();
  86. let formData = reactive({
  87. data: {
  88. subscribeDetailList: [],
  89. },
  90. });
  91. let rules = ref({
  92. receiptWarehouseId: [
  93. { required: true, message: "请选择收获仓库", trigger: "change" },
  94. ],
  95. planArrivalTime: [
  96. { required: true, message: "请选择要求到货时间", trigger: "change" },
  97. ],
  98. count: [{ required: true, message: "请输入申购数量", trigger: "blur" }],
  99. remark: [{ required: true, message: "请输入申购备注", trigger: "blur" }],
  100. });
  101. const formOption = reactive({
  102. inline: true,
  103. labelWidth: 100,
  104. itemWidth: 100,
  105. });
  106. const formConfig = computed(() => {
  107. return [
  108. {
  109. type: "input",
  110. prop: "deptName",
  111. label: "申购部门",
  112. itemWidth: 25,
  113. disabled: true,
  114. style: {
  115. "margin-right": "10px",
  116. },
  117. },
  118. {
  119. type: "input",
  120. prop: "subcribeName",
  121. label: "申购人",
  122. itemWidth: 25,
  123. disabled: true,
  124. style: {
  125. "margin-right": "10px",
  126. },
  127. },
  128. {
  129. type: "date",
  130. prop: "subcribeTime",
  131. label: "申购时间",
  132. itemWidth: 26,
  133. disabled: true,
  134. style: {
  135. "margin-right": "10px",
  136. },
  137. },
  138. {
  139. type: "select",
  140. prop: "receiptWarehouseId",
  141. label: "收获仓库",
  142. itemWidth: 25,
  143. isLoad: {
  144. url: "/warehouse/page",
  145. req: {
  146. pageNum: 1,
  147. pageSize: 9999,
  148. },
  149. labelKey: "name",
  150. labelVal: "id",
  151. method: "post",
  152. resUrl: "rows",
  153. },
  154. },
  155. {
  156. type: "date",
  157. prop: "planArrivalTime",
  158. label: "要求到货时间",
  159. itemWidth: 25,
  160. format: "YYYY-MM-DD",
  161. style: {
  162. "margin-left": "10px",
  163. },
  164. },
  165. {
  166. type: "input",
  167. itemType: "textarea",
  168. prop: "subcribeContent",
  169. label: "申购说明",
  170. },
  171. {
  172. type: "slot",
  173. slotName: "details",
  174. label: "申购明细",
  175. },
  176. ];
  177. });
  178. const formDom = ref(null);
  179. const handleSubmit = async () => {
  180. const vaild = await formDom.value.handleSubmit(() => {}); //拿到内部表单是否验证通过
  181. if (vaild) {
  182. if (formData.data.subscribeDetailList.length > 0) {
  183. const list = formData.data.subscribeDetailList;
  184. for (let i = 0; i < list.length; i++) {
  185. const e = list[i];
  186. if (e.count == 0) {
  187. ElMessage({
  188. message: "申购数量不能为0!",
  189. type: "info",
  190. });
  191. return false;
  192. }
  193. }
  194. return true;
  195. }
  196. ElMessage({
  197. message: "请添加申购明细!",
  198. type: "info",
  199. });
  200. return false;
  201. }
  202. };
  203. let openProduct = ref(false);
  204. const handleRemove = (index) => {
  205. formData.data.subscribeDetailList.splice(index, 1);
  206. return ElMessage({
  207. message: "删除成功!",
  208. type: "success",
  209. });
  210. };
  211. const pushGoods = (goods) => {
  212. const arr = goods.map((x) => ({
  213. goodType: x.goodType,
  214. productCode: x.code,
  215. productName: x.name,
  216. productSpec: x.spec,
  217. productUnit: x.unit,
  218. count: 0,
  219. bussinessId: x.id,
  220. remark: "",
  221. }));
  222. formData.data.subscribeDetailList =
  223. formData.data.subscribeDetailList.concat(arr);
  224. return ElMessage({
  225. message: "添加成功!",
  226. type: "success",
  227. });
  228. };
  229. // 接收父组件的传值
  230. const props = defineProps({
  231. queryData: String,
  232. });
  233. // 获取用户信息并赋默认值
  234. const userInfo = useUserStore().user;
  235. onMounted(() => {
  236. formData.data.subcribeTime = proxy.parseTime(new Date());
  237. formData.data.deptName = userInfo.dept.deptName;
  238. formData.data.subcribeName = userInfo.nickName;
  239. });
  240. // 向父组件暴露
  241. defineExpose({
  242. submitData: formData.data,
  243. handleSubmit,
  244. });
  245. </script>
  246. <style lang="scss" scoped>
  247. </style>