index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  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. @search-change="searchChange"
  13. @search-reset="resetChange"
  14. @size-change="dataList"
  15. @current-change="dataList"
  16. @selection-change="selectionChange"
  17. >
  18. <template #usable="{ row }">
  19. <el-tag v-if="row.usable == '1'" type="success">已绑定</el-tag>
  20. <el-tag v-else type="info">未绑定</el-tag>
  21. </template>
  22. <!-- :disabled="row.usable == '1' ? false : true" -->
  23. <template #menu-right="{}">
  24. <el-dropdown split-button
  25. >导入
  26. <template #dropdown>
  27. <el-dropdown-menu>
  28. <el-dropdown-item
  29. @click="downloadTemplate('/api/v1/op/route/template')"
  30. >
  31. <i-ep-download />下载模板
  32. </el-dropdown-item>
  33. <el-dropdown-item @click="importExcelData">
  34. <i-ep-top />导入数据
  35. </el-dropdown-item>
  36. </el-dropdown-menu>
  37. </template>
  38. </el-dropdown>
  39. </template>
  40. <template #menu="{ row }">
  41. <el-button
  42. link
  43. type="primary"
  44. icon="el-icon-edit"
  45. v-if="row.usable === 0"
  46. @click="doEdit(row, index)"
  47. >编辑</el-button
  48. >
  49. <el-button
  50. link
  51. type="danger"
  52. icon="el-icon-edit"
  53. v-if="row.usable === 0"
  54. @click="deleteRow(row, index)"
  55. >删除</el-button
  56. >
  57. <el-button
  58. link
  59. type="primary"
  60. icon="el-icon-copy-document"
  61. :disabled="false"
  62. @click="copyRow(row)"
  63. >复制</el-button
  64. >
  65. <el-button
  66. type="primary"
  67. link
  68. icon="el-icon-link"
  69. @click="bindProcess(row)"
  70. >绑定</el-button
  71. >
  72. </template>
  73. </avue-crud>
  74. <CommonTable
  75. ref="ctableRef"
  76. tableTitle="添加产品"
  77. tableType="MARTERIAL"
  78. @selected-sure="onSelectedFinish"
  79. />
  80. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  81. <el-dialog
  82. v-model="centerDialogVisible"
  83. title="重命名"
  84. width="500"
  85. align-center
  86. >
  87. <el-form :model="tmpForm" label-width="auto" style="max-width: 800px">
  88. <el-row>
  89. <el-col :span="12">
  90. <el-form-item label="工艺路线编号">
  91. <el-input v-model="tmpForm.processRouteCode" />
  92. </el-form-item>
  93. </el-col>
  94. <el-col :span="12">
  95. <el-form-item label="工艺路线名称">
  96. <el-input v-model="tmpForm.processRouteName" />
  97. </el-form-item>
  98. </el-col>
  99. </el-row>
  100. </el-form>
  101. <template #footer>
  102. <div class="dialog-footer">
  103. <el-button @click="centerDialogVisible = false">取消</el-button>
  104. <el-button type="primary" @click="renameRoute()"> 确定 </el-button>
  105. </div>
  106. </template>
  107. </el-dialog>
  108. </div>
  109. </template>
  110. <script setup>
  111. import { ref, getCurrentInstance } from "vue";
  112. import { useCrud } from "@/hooks/userCrud";
  113. import ButtonPermKeys from "@/common/configs/buttonPermission";
  114. import dictDataUtil from "@/common/configs/dictDataUtil";
  115. import { useDictionaryStore } from "@/store";
  116. import { copyRoute } from "@/api/craft/route/index";
  117. // 数据字典相关
  118. const { dicts } = useDictionaryStore();
  119. const testDebunce = () => {
  120. console.log("执行了事件");
  121. };
  122. // 传入一个url,后面不带/
  123. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  124. useCrud({
  125. src: "/api/v1/op/route",
  126. });
  127. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  128. Methords; //增删改查
  129. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  130. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  131. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  132. // const permission = reactive({
  133. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  134. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  135. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  136. // menu: true,
  137. // });
  138. let centerDialogVisible = ref(false);
  139. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  140. const tmpForm = ref({});
  141. onMounted(() => {
  142. // console.log("crudRef", crudRef)
  143. dataList();
  144. });
  145. const doEdit = (row, index) => {
  146. row.prodtName1 = row.prodtName;
  147. crudRef.value && crudRef.value.rowEdit(row, index);
  148. };
  149. /**
  150. * 上传excel相关
  151. */
  152. const uploadRef = ref(null);
  153. const uploadFinished = () => {
  154. // 上传完成后的刷新操作
  155. page.currentPage = 1;
  156. dataList();
  157. };
  158. const importExcelData = () => {
  159. if (uploadRef.value) {
  160. uploadRef.value.show("/api/v1/op/route/import");
  161. }
  162. };
  163. // 选择产品相关
  164. const ctableRef = ref(null);
  165. const onSelectedFinish = (selectedValue) => {
  166. // search.value.prodtName = selectedValue.materialName;
  167. form.value.prodtName = selectedValue.materialName;
  168. form.value.prodtName1 = selectedValue.materialName;
  169. form.value.prodtCode = selectedValue.materialCode;
  170. form.value.prodtModel = selectedValue.spec;
  171. };
  172. const startChooseProduct = () => {
  173. if (ctableRef.value) {
  174. ctableRef.value.startSelect();
  175. }
  176. };
  177. // 已经绑定了工序的可以复制,跟后端HT商量只传id即可。
  178. const copyRow = (row) => {
  179. if (row.usable == 0) {
  180. ElMessage.error("该路线未被绑定!");
  181. return;
  182. }
  183. form.value = Object.assign(form.value, row);
  184. form.value.processRouteVersion = "";
  185. crudRef.value.rowAdd();
  186. };
  187. const renameRoute = () => {
  188. tmpForm.value.id;
  189. tmpForm.value.processRouteCode;
  190. tmpForm.value.processRouteName;
  191. copyRoute(tmpForm.value).then(() => {
  192. tmpForm.value.id = undefined;
  193. tmpForm.value.processRouteCode = undefined;
  194. tmpForm.value.processRouteName = undefined;
  195. page.currentPage = 1;
  196. dataList();
  197. });
  198. centerDialogVisible.value = false;
  199. };
  200. const router = useRouter();
  201. // 绑定工序
  202. const bindProcess = (row) => {
  203. router.push({
  204. path: `/base/craftManagement/bindProcess/${row.id}`,
  205. query: { prodtCode: row.prodtCode, routeId: row.id, usable: row.usable },
  206. });
  207. };
  208. // 设置表格列或者其他自定义的option
  209. option.value = Object.assign(option.value, {
  210. selection: true,
  211. labelWidth: 100,
  212. editBtn: false,
  213. delBtn: false,
  214. menuWidth: 250,
  215. searchLabelWidth: 100,
  216. column: [
  217. {
  218. label: "工艺路线编号",
  219. prop: "processRouteCode",
  220. search: true,
  221. width: 150,
  222. addDisplay: true,
  223. editDisabled: true,
  224. overHidden: true,
  225. rules: [
  226. {
  227. required: true,
  228. message: "工艺路线名称不能为空",
  229. trigger: "blur",
  230. },
  231. ],
  232. },
  233. {
  234. label: "工艺路线名称",
  235. prop: "processRouteName",
  236. width: 150,
  237. search: true,
  238. overHidden: true,
  239. rules: [
  240. {
  241. required: true,
  242. message: "工艺路线名称不能为空",
  243. trigger: "blur",
  244. },
  245. ],
  246. },
  247. {
  248. label: "工艺路线类型",
  249. prop: "processRouteType",
  250. minWidth: 120,
  251. search: true,
  252. overHidden: true,
  253. rules: [
  254. {
  255. required: true,
  256. message: "工艺路线类型不能为空",
  257. trigger: "change",
  258. },
  259. ],
  260. type: "select",
  261. dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.routing_type,
  262. props: {
  263. label: "dictLabel",
  264. value: "dictValue",
  265. },
  266. },
  267. {
  268. label: "产品名称",
  269. prop: "prodtName",
  270. overHidden: true,
  271. width: 150,
  272. search: true,
  273. editDisplay: false,
  274. addDisplay: false,
  275. rules: [
  276. {
  277. required: true,
  278. message: "请选择产品",
  279. trigger: "blur",
  280. },
  281. ],
  282. readOnly: true,
  283. },
  284. {
  285. label: "产品名称",
  286. prop: "prodtName1",
  287. overHidden: true,
  288. width: 150,
  289. viewDisplay: false,
  290. hide: true,
  291. rules: [
  292. {
  293. required: true,
  294. message: "请选择产品",
  295. trigger: "blur",
  296. },
  297. ],
  298. readOnly: true,
  299. click: () => {
  300. startChooseProduct();
  301. },
  302. },
  303. {
  304. label: "产品编号",
  305. prop: "prodtCode",
  306. overHidden: true,
  307. search: true,
  308. width: 150,
  309. disabled: true,
  310. },
  311. {
  312. label: "产品型号",
  313. prop: "prodtModel",
  314. overHidden: true,
  315. search: true,
  316. minWidth: 200,
  317. disabled: true,
  318. },
  319. // 在产品那边绑定了工艺路线才是已绑定
  320. {
  321. label: "路线状态",
  322. prop: "usable",
  323. addDisplay: false,
  324. editDisplay: false,
  325. slot: true,
  326. width: 100,
  327. type: "radio",
  328. dicData: [
  329. {
  330. label: "已绑定",
  331. value: 1,
  332. },
  333. {
  334. label: "未绑定",
  335. value: 0,
  336. },
  337. ],
  338. },
  339. {
  340. label: "启用状态",
  341. prop: "enabled",
  342. addDisplay: false,
  343. // editDisplay: false,
  344. slot: true,
  345. width: 100,
  346. type: "radio",
  347. dicData: [
  348. {
  349. label: "未启用",
  350. value: 1,
  351. },
  352. {
  353. label: "启用",
  354. value: 0,
  355. },
  356. ],
  357. value: 0,
  358. },
  359. // 只有绑定了工序才可以复制。
  360. {
  361. label: "是否可复制",
  362. prop: "usable2",
  363. slot: true,
  364. width: 100,
  365. search: false,
  366. filterable: true,
  367. hide: true,
  368. addDisplay: false,
  369. editDisplay: false,
  370. type: "radio",
  371. dicData: [
  372. {
  373. label: "否",
  374. value: 0,
  375. },
  376. {
  377. label: "是",
  378. value: 1,
  379. },
  380. ],
  381. value: 0,
  382. },
  383. {
  384. label: "版本",
  385. prop: "processRouteVersion",
  386. addDisplay: true,
  387. editDisplay: true,
  388. precision: 1,
  389. value: "1.0",
  390. rules: [
  391. {
  392. required: true,
  393. message: "请输入版本",
  394. trigger: "blur",
  395. },
  396. ],
  397. },
  398. {
  399. label: "创建人",
  400. prop: "creator",
  401. addDisplay: false,
  402. editDisplay: false,
  403. overHidden: true,
  404. },
  405. {
  406. label: "创建时间",
  407. prop: "created",
  408. addDisplay: false,
  409. editDisplay: false,
  410. width: 150,
  411. overHidden: true,
  412. },
  413. ],
  414. });
  415. </script>