details.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="createRow"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. :row-style="rowStyle"
  18. :cell-style="cellStyle"
  19. @selection-change="selectionChange"
  20. />
  21. </div>
  22. </template>
  23. <script setup>
  24. import { ref, getCurrentInstance } from "vue";
  25. import { useCrud } from "@/hooks/userCrud";
  26. import ButtonPermKeys from "@/common/configs/buttonPermission";
  27. import { useCommonStoreHook } from "@/store";
  28. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  29. // 传入一个url,后面不带/
  30. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  31. useCrud({
  32. src: "/api/v1/semiFinishedStock/detail",
  33. });
  34. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  35. Methords; //增删改查
  36. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  37. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  38. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  39. import { getSemi, oprerate } from "@/api/storage/index";
  40. import { useDictionaryStore } from "@/store";
  41. const { dicts } = useDictionaryStore();
  42. const emits = defineEmits(["close"]);
  43. const ruleFormRef = ref(null);
  44. const dialog1 = reactive({
  45. title: "工单号选择",
  46. visible: false,
  47. });
  48. const materialInfo1 = (value) => {
  49. formData.value.outWorkOrderCode = value.workOrderCode;
  50. dialog1.visible = false;
  51. };
  52. const formData = ref({
  53. stockId: "",
  54. stockType: "2",
  55. inWorkOrderCode: "",
  56. workOrderSeqNos: [],
  57. });
  58. const props = defineProps({
  59. id: {
  60. type: String,
  61. },
  62. });
  63. const detailsData = ref();
  64. const tableData = ref([]);
  65. const getData = async () => {
  66. const { data } = await getSemi(props.id);
  67. detailsData.value = data;
  68. formData.value.inWorkOrderCode = data.inWorkOrderCode;
  69. tableData.value = detailsData.value.detailsList;
  70. };
  71. const submit = async () => {
  72. await ruleFormRef.value.validate(async (valid, fields) => {
  73. if (valid) {
  74. const { code } = await oprerate({ ...formData.value, stockId: props.id });
  75. if (code == "200") {
  76. ElMessage.success("出库成功!");
  77. ruleFormRef.value.resetFields();
  78. getData();
  79. emits("close");
  80. }
  81. } else {
  82. }
  83. });
  84. };
  85. onMounted(() => {
  86. search.value.inStockId=props.id;
  87. dataList();
  88. });
  89. // 设置表格列或者其他自定义的option
  90. option.value = Object.assign(option.value, {
  91. searchEnter: true,
  92. delBtn: false,
  93. selection: true,
  94. labelWidth: 100,
  95. editBtn: false,
  96. viewBtn: false,
  97. menu: false,
  98. addBtn: false,
  99. column: [
  100. {
  101. label: "生产批号",
  102. prop: "workOrderCode",
  103. editDisabled: true,
  104. addDisplay: false,
  105. search: true,
  106. rules: [
  107. {
  108. required: true,
  109. trigger: "trigger",
  110. },
  111. ],
  112. },
  113. {
  114. label: "管号",
  115. prop: "workOrderSeqNo",
  116. editDisabled: true,
  117. addDisplay: false,
  118. search: true,
  119. },
  120. ]
  121. });
  122. watch(
  123. () => props.id,
  124. () => {
  125. search.value.inStockId=props.id;
  126. dataList();
  127. }
  128. );
  129. </script>