index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  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. @selection-change="selectionChange"
  18. >
  19. <template #menu-left="{ size }">
  20. <el-button
  21. :disabled="toDeleteIds.length < 1"
  22. type="danger"
  23. icon="el-icon-delete"
  24. :size="size"
  25. @click="multipleDelete"
  26. >删除</el-button
  27. ></template
  28. >
  29. <template #menu="{ row, index, type }">
  30. <el-button @click="binding(row)" text type="primary"
  31. >BOM
  32. <template #icon> <svg-icon icon-class="BOM"></svg-icon> </template
  33. ></el-button>
  34. <el-button @click="drawing(row)" text type="primary"
  35. >图纸<template #icon>
  36. <svg-icon icon-class="tuzhi"></svg-icon> </template
  37. ></el-button>
  38. </template>
  39. <template #menu-right="{}">
  40. <el-dropdown split-button
  41. >物料导入
  42. <template #dropdown>
  43. <el-dropdown-menu>
  44. <el-dropdown-item
  45. @click="downloadTemplate('/api/v1/base/material/template')"
  46. >
  47. <i-ep-download />下载模板
  48. </el-dropdown-item>
  49. <el-dropdown-item @click="importExcelData">
  50. <i-ep-top />导入数据
  51. </el-dropdown-item>
  52. </el-dropdown-menu>
  53. </template>
  54. </el-dropdown>
  55. <el-dropdown split-button style="margin-left: 10px"
  56. >BOM导入
  57. <template #dropdown>
  58. <el-dropdown-menu>
  59. <el-dropdown-item
  60. @click="downloadTemplate('/api/v1/base/materialBom/bom/template')"
  61. >
  62. <i-ep-download />下载模板
  63. </el-dropdown-item>
  64. <el-dropdown-item @click="importBomExcelData">
  65. <i-ep-top />导入数据
  66. </el-dropdown-item>
  67. </el-dropdown-menu>
  68. </template>
  69. </el-dropdown>
  70. <el-button
  71. class="ml-3"
  72. @click="exportData('/api/v1/base/material/export')"
  73. >
  74. <template #icon> <i-ep-download /> </template>物料导出
  75. </el-button>
  76. </template>
  77. </avue-crud>
  78. <el-dialog
  79. v-model="dialog.visible"
  80. :title="dialog.title"
  81. width="900px"
  82. @close="dialog.visible = false"
  83. :destroy-on-close="true"
  84. >
  85. <drawing-page
  86. :materialCode="drawingDetail.materialCode"
  87. :materialName="drawingDetail.materialName"
  88. :dialog="dialog"
  89. />
  90. </el-dialog>
  91. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  92. </div>
  93. </template>
  94. <script setup lang="ts">
  95. import { ref, getCurrentInstance } from "vue";
  96. import { useCrud } from "@/hooks/userCrud";
  97. import ButtonPermKeys from "@/common/configs/buttonPermission";
  98. import {
  99. useCommonStoreHook,
  100. useDictionaryStore,
  101. useDictionaryStoreHook,
  102. } from "@/store";
  103. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  104. import { columns } from "./columns";
  105. const { dicts } = useDictionaryStore();
  106. const test = () => {
  107. isShowTable.value = true;
  108. tableType.value = tableType.value == 1 ? 2 : 1;
  109. };
  110. const dialog = reactive({
  111. title: "图纸",
  112. visible: false,
  113. });
  114. const drawingDetail = ref(null);
  115. const drawing = (row) => {
  116. drawingDetail.value = row;
  117. dialog.visible = true;
  118. };
  119. // 传入一个url,后面不带/
  120. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  121. useCrud({
  122. src: "/api/v1/base/material",
  123. });
  124. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  125. Methords; //增删改查
  126. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  127. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  128. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  129. // const permission = reactive({
  130. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  131. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  132. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  133. // menu: true,
  134. // });
  135. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  136. const router = useRouter();
  137. const binding = (row) => {
  138. router.push(`/base/bom/${row.materialCode}`);
  139. };
  140. onMounted(() => {
  141. // 设置表格列或者其他自定义的option
  142. dataList();
  143. });
  144. /**
  145. * 上传excel相关
  146. */
  147. const uploadRef = ref(null);
  148. const uploadFinished = () => {
  149. // 上传完成后的刷新操作
  150. page.currentPage = 1;
  151. dataList();
  152. };
  153. const importExcelData = () => {
  154. if (uploadRef.value) {
  155. uploadRef.value.show("/api/v1/base/material/import");
  156. }
  157. };
  158. const importBomExcelData = () => {
  159. if (uploadRef.value) {
  160. uploadRef.value.show("/api/v1/base/materialBom/bom/import");
  161. }
  162. };
  163. option.value = Object.assign(option.value, {
  164. selection: true,
  165. column: [
  166. {
  167. label: "物料编码",
  168. prop: "materialCode",
  169. width: 130,
  170. overHidden: true,
  171. search: true,
  172. rules: [
  173. {
  174. required: true,
  175. editDisabled: false,
  176. message: "请填写物料编码",
  177. trigger: "blur",
  178. },
  179. ],
  180. },
  181. {
  182. label: "物料名称",
  183. prop: "materialName",
  184. width: 140,
  185. overHidden: true,
  186. search: true,
  187. rules: [
  188. {
  189. required: true,
  190. message: "请填写物料名称",
  191. trigger: "blur",
  192. },
  193. ],
  194. },
  195. {
  196. label: "物料属性",
  197. prop: "attributeDictValue",
  198. search: true,
  199. filterable: true,
  200. type: "select",
  201. width: 100,
  202. overHidden: true,
  203. dicData: dicts.material_properties,
  204. props: { label: "dictLabel", value: "dictValue" },
  205. rules: [
  206. {
  207. required: true,
  208. message: "请选择物料属性",
  209. trigger: "blur",
  210. },
  211. ],
  212. },
  213. {
  214. label: "物料规格",
  215. prop: "spec",
  216. width: 100,
  217. overHidden: true,
  218. rules: [
  219. {
  220. required: true,
  221. message: "请填写物料规格",
  222. trigger: "blur",
  223. },
  224. ],
  225. },
  226. {
  227. label: "单位",
  228. prop: "unitDictValue",
  229. filterable: true,
  230. type: "select",
  231. dicData: dicts.danwei_type,
  232. props: { label: "dictLabel", value: "dictValue" },
  233. rules: [
  234. {
  235. required: true,
  236. message: "请选择单位",
  237. trigger: "blur",
  238. },
  239. ],
  240. },
  241. {
  242. label: "物料级别",
  243. prop: "levelDictValue",
  244. search: true,
  245. filterable: true,
  246. type: "select",
  247. width: 100,
  248. overHidden: true,
  249. dicData: dicts.material_level,
  250. props: { label: "dictLabel", value: "dictValue" },
  251. rules: [
  252. {
  253. required: true,
  254. message: "请选择物料级别",
  255. trigger: "blur",
  256. },
  257. ],
  258. },
  259. {
  260. label: "生产厂家",
  261. prop: "manufacturer",
  262. width: 100,
  263. overHidden: true,
  264. rules: [
  265. {
  266. required: true,
  267. message: "请填写生产厂家",
  268. trigger: "blur",
  269. },
  270. ],
  271. },
  272. {
  273. label: "质检方案",
  274. prop: "inspectDictValue",
  275. search: true,
  276. filterable: true,
  277. type: "select",
  278. width: 100,
  279. overHidden: true,
  280. dicData: dicts.quality_testing_plan,
  281. props: { label: "dictLabel", value: "dictValue" },
  282. },
  283. {
  284. label: "适用平台",
  285. prop: "applicablePlatformsDictValue",
  286. search: true,
  287. filterable: true,
  288. type: "select",
  289. width: 100,
  290. overHidden: true,
  291. dicData: dicts.applicable_platforms,
  292. props: { label: "dictLabel", value: "dictValue" },
  293. rules: [
  294. {
  295. required: true,
  296. message: "请选择适用平台",
  297. trigger: "blur",
  298. },
  299. ],
  300. },
  301. {
  302. label: "质量等级",
  303. prop: "qualityLevelDictValue",
  304. search: true,
  305. width: 100,
  306. overHidden: true,
  307. filterable: true,
  308. type: "select",
  309. dicData: dicts.quality_grade,
  310. props: { label: "dictLabel", value: "dictValue" },
  311. rules: [
  312. {
  313. required: true,
  314. message: "请选择质量等级",
  315. trigger: "blur",
  316. },
  317. ],
  318. },
  319. {
  320. label: "选用类型",
  321. prop: "selectionDictValue",
  322. search: true,
  323. filterable: true,
  324. width: 100,
  325. overHidden: true,
  326. type: "select",
  327. dicData: dicts.selection_type,
  328. props: { label: "dictLabel", value: "dictValue" },
  329. },
  330. {
  331. label: "产品阶段",
  332. prop: "stageDictValue",
  333. search: true,
  334. filterable: true,
  335. width: 100,
  336. overHidden: true,
  337. type: "select",
  338. dicData: dicts.stage,
  339. props: { label: "dictLabel", value: "dictValue" },
  340. },
  341. { label: "客户型号", prop: "customerModel", width: 100, overHidden: true },
  342. {
  343. label: "保质期(天)",
  344. prop: "qualityGuaranteePeriod",
  345. width: 100,
  346. overHidden: true,
  347. type: "number",
  348. min: 0,
  349. },
  350. {
  351. label: "封装方法",
  352. prop: "packageDictValue",
  353. search: true,
  354. width: 100,
  355. overHidden: true,
  356. filterable: true,
  357. type: "select",
  358. dicData: dicts.packaging_method,
  359. props: { label: "dictLabel", value: "dictValue" },
  360. },
  361. {
  362. label: "是否工装",
  363. prop: "frock",
  364. search: true,
  365. width: 90,
  366. overHidden: true,
  367. filterable: true,
  368. type: "radio", //类型为单选框
  369. dicData: [
  370. {
  371. label: "是",
  372. value: "1",
  373. },
  374. {
  375. label: "否",
  376. value: "0",
  377. },
  378. ],
  379. value: "1",
  380. rules: [
  381. {
  382. required: true,
  383. message: "是否工装",
  384. trigger: "blur",
  385. },
  386. ],
  387. },
  388. {
  389. label: "筛选规范",
  390. prop: "selectionSpec",
  391. width: 150,
  392. overHidden: true,
  393. type: "textarea",
  394. span: 18,
  395. },
  396. {
  397. label: "备注",
  398. prop: "remark",
  399. width: 150,
  400. overHidden: true,
  401. type: "textarea",
  402. span: 18,
  403. },
  404. ],
  405. });
  406. </script>