drawing-page.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-form ref="formRef" v-model="form" :option="option" @submit="rowSave">
  4. <template #drawingPath="scope">
  5. <single-upload v-model="form.drawingPath" />
  6. </template>
  7. </avue-form>
  8. <avue-crud
  9. ref="crudRef"
  10. v-model:search="search"
  11. v-model="form"
  12. :data="data"
  13. :option="option"
  14. v-model:page="page"
  15. @row-save="createRow"
  16. @row-update="updateRow"
  17. @row-del="deleteRow"
  18. @search-change="searchChange"
  19. @search-reset="resetChange"
  20. @size-change="dataList"
  21. @current-change="dataList"
  22. @selection-change="selectionChange"
  23. search-option="false"
  24. >
  25. <template #menu-left="{ size }">
  26. <el-button
  27. :disabled="toDeleteIds.length < 1"
  28. type="danger"
  29. icon="el-icon-delete"
  30. :size="size"
  31. @click="multipleDelete"
  32. >删除</el-button
  33. >
  34. </template>
  35. </avue-crud>
  36. <CommonTable
  37. ref="ctableRef"
  38. tableTitle="物料列表"
  39. tableType="MARTERIAL"
  40. @selected-sure="onSelectedFinish"
  41. />
  42. </div>
  43. </template>
  44. <script setup>
  45. import { ref, getCurrentInstance } from "vue";
  46. import { useCrud } from "@/hooks/userCrud";
  47. import ButtonPermKeys from "@/common/configs/buttonPermission";
  48. import { useCommonStoreHook } from "@/store";
  49. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  50. import { useDictionaryStoreHook } from "@/store";
  51. import { addStationDevice } from "@/api/station";
  52. const test = () => {
  53. isShowTable.value = true;
  54. tableType.value = tableType.value == 1 ? 2 : 1;
  55. };
  56. // 传入一个url,后面不带/
  57. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  58. useCrud({
  59. src: "/api/v1/base/drawing",
  60. });
  61. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  62. Methords; //增删改查
  63. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  64. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  65. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  66. // const permission = reactive({
  67. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  68. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  69. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  70. // menu: true,
  71. // });
  72. function rowSave(form2, done) {
  73. form.value.associationCode = props.materialCode;
  74. createRow(form, done, done);
  75. }
  76. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  77. onMounted(() => {
  78. // console.log("crudRef", crudRef)
  79. search.value.materialCode = props.materialCode;
  80. dataList();
  81. });
  82. /**
  83. * 上传excel相关
  84. */
  85. const uploadRef = ref(null);
  86. const uploadFinished = () => {
  87. // 上传完成后的刷新操作
  88. page.currentPage = 1;
  89. dataList();
  90. };
  91. const importExcelData = () => {
  92. if (uploadRef.value) {
  93. uploadRef.value.show("/api/v1/base/stationDevice");
  94. }
  95. };
  96. const ctableRef = ref(null);
  97. const deviceList = () => {
  98. ctableRef.value.startSelect();
  99. };
  100. // 设置表格列或者其他自定义的option
  101. option.value = Object.assign(option.value, {
  102. selection: true,
  103. column: [
  104. {
  105. label: "物料编号",
  106. prop: "associationCode",
  107. hide: true,
  108. display: false,
  109. },
  110. {
  111. label: "图纸编号",
  112. prop: "drawingCode",
  113. rules: [
  114. {
  115. required: true,
  116. message: "图纸编号不能为空",
  117. trigger: "blur",
  118. },
  119. ],
  120. },
  121. {
  122. label: "图纸标题",
  123. prop: "drawingTitle",
  124. rules: [
  125. {
  126. required: true,
  127. message: "图纸名称不能为空",
  128. trigger: "blur",
  129. },
  130. ],
  131. },
  132. {
  133. label: "图纸类型",
  134. prop: "drawingDictValue",
  135. value: "material",
  136. display: false,
  137. hide: true,
  138. },
  139. {
  140. label: "排序",
  141. prop: "sort",
  142. type: "number",
  143. },
  144. {
  145. label: "版本",
  146. prop: "drawingVersion",
  147. type: "number",
  148. precision: 1,
  149. rules: [
  150. {
  151. required: true,
  152. message: "版本号不能为空",
  153. trigger: "blur",
  154. },
  155. ],
  156. },
  157. {
  158. label: "图纸上传",
  159. prop: "drawingPath",
  160. span: 24,
  161. slot: true,
  162. hide: true,
  163. /*formatter: (row, column, cellValue, index) => {
  164. return `<img src="${row.drawingPath}" alt="${row.drawingPath}" width="50" height="50">`;
  165. }
  166. */
  167. },
  168. {
  169. label: "图纸",
  170. prop: "drawing",
  171. type: "img",
  172. span: 24,
  173. display: false,
  174. slot: true,
  175. formatter: (row, column, cellValue, index) => {
  176. return `${row.drawingPath}`;
  177. },
  178. },
  179. ],
  180. delBtn: false,
  181. editBtn: false,
  182. viewBtn: false,
  183. addBtn: false,
  184. menu: false,
  185. });
  186. const props = defineProps({
  187. materialCode: {
  188. type: String,
  189. default: () => {
  190. return 0;
  191. },
  192. },
  193. dialog: {
  194. type: Object,
  195. default: () => {
  196. return {};
  197. },
  198. },
  199. });
  200. const onSelectedFinish = (selectedValue) => {
  201. form.value.materialCode = selectedValue.materialCode;
  202. form.value.materialName = selectedValue.materialName;
  203. form.value.productionLineId = props.productionLineId;
  204. };
  205. </script>