index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. <template>
  2. <div class="pageIndexClass">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
  6. :selectConfig="selectConfig" :table-events="{
  7. //element talbe事件都能传
  8. select: select,
  9. }" :action-list="[
  10. {
  11. text: '添加产线',
  12. action: () => openModal('add'),
  13. },
  14. ]" @get-list="getList">
  15. <template #line="{ item }">
  16. <div style="width:100%">
  17. <span v-for="(x, i) in item.processRouteNameList" :key="i">
  18. {{ x }}
  19. <span style="margin: 0 3px" v-if="i + 1 < item.processRouteNameList.length"> ,
  20. </span>
  21. </span>
  22. </div>
  23. </template>
  24. <template #product="{ item }">
  25. <div style="width:100%">
  26. <span v-for="(x, i) in item.applicableProductsNameList" :key="i">
  27. {{ x }}
  28. <span v-if="i + 1 < item.applicableProductsNameList.length">,
  29. </span>
  30. </span>
  31. </div>
  32. </template>
  33. </byTable>
  34. </div>
  35. <el-dialog :title="modalType == 'add' ? '添加产线' : '编辑产线'" v-model="dialogVisible" width="90%" destroy-on-close>
  36. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform" v-loading="submitLoading">
  37. <!-- <template #lineSlot>
  38. <el-transfer v-model="selectLine" filterable filter-placeholder="搜索" :data="lineData" :titles="['可选', '已选']" target-order="push">
  39. <template #default="{ option }">
  40. <div class="parent">
  41. <div :draggable="selectLine.includes(option.key)" @dragstart="dragStar($event, option)" @dragover="dragOver($event, option)"
  42. @drop="handleDrop($event)" style="cursor: default" :id="option.key">
  43. {{ option.label }}
  44. </div>
  45. </div>
  46. </template>
  47. </el-transfer>
  48. </template> -->
  49. <template #lineSlot>
  50. <div class="processChart" style="width:100%">
  51. <div class="from">
  52. <div class="commons-title">工序</div>
  53. <!-- <div>
  54. <el-form labelPosition='top'>
  55. <el-form-item label="工序" label-width="80px">
  56. </el-form-item>
  57. </el-form>
  58. </div> -->
  59. </div>
  60. <div class="content">
  61. <div class="commons-title">产线路线</div>
  62. <div class="chart-warp">
  63. <vueFlow :nodeObject="nodeObject" ref="vueFlowDom"></vueFlow>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. </byForm>
  69. <template #footer>
  70. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  71. <el-button type="primary" @click="submitForm" size="default" :loading="submitLoading">
  72. 确 定
  73. </el-button>
  74. </template>
  75. </el-dialog>
  76. <el-dialog v-model="openProduct" title="选择产品" width="70%" append-to-body>
  77. <SelectProduct @handleSelect="handleSelect" :isTechnology="'0'"></SelectProduct>
  78. <template #footer>
  79. <span class="dialog-footer">
  80. <el-button @click="openProduct = false">取消</el-button>
  81. </span>
  82. </template>
  83. </el-dialog>
  84. <el-dialog :title=" '产线适用产品'" v-model="dialogVisibleOne" width="50%" destroy-on-close>
  85. <byForm :formConfig="formConfigOne" :formOption="formOption" v-model="formData.dataOne" ref="byformOne" v-loading="submitLoading">
  86. <template #productSlot>
  87. <div>
  88. <el-button type="primary" @click="openProduct = true">
  89. 添加产品
  90. </el-button>
  91. <div style="margin-top: 15px" v-if="productList && productList.length > 0">
  92. <el-tag style="margin-right: 10px" type="info" closable v-for="(product, index) in productList" :key="product.id"
  93. @close="handleRemove(index)">{{ product.name }}({{ product.spec }})</el-tag>
  94. </div>
  95. </div>
  96. </template>
  97. </byForm>
  98. <template #footer>
  99. <el-button @click="dialogVisibleOne = false" size="default">取 消</el-button>
  100. <el-button type="primary" @click="submitFormOne" size="default" :loading="submitLoading">
  101. 确 定
  102. </el-button>
  103. </template>
  104. </el-dialog>
  105. </div>
  106. </template>
  107. <script setup>
  108. /* eslint-disable vue/no-unused-components */
  109. import { ElMessage, ElMessageBox } from "element-plus";
  110. import byTable from "@/components/byTable/index";
  111. import byForm from "@/components/byForm/index";
  112. import SelectProduct from "@/components/product/SelectProduct";
  113. import vueFlow from "@/views/production/project/processConfig/vueFlow.vue";
  114. import { computed, defineComponent, nextTick, ref, toRaw } from "vue";
  115. const loading = ref(false);
  116. const submitLoading = ref(false);
  117. const sourceList = ref({
  118. data: [],
  119. pagination: {
  120. total: 3,
  121. pageNum: 1,
  122. pageSize: 10,
  123. },
  124. });
  125. let lineData = ref([
  126. {
  127. key: "1",
  128. label: "测试1",
  129. disabled: false,
  130. },
  131. {
  132. key: "2",
  133. label: "测试2",
  134. disabled: false,
  135. },
  136. {
  137. key: "3",
  138. label: "测试3",
  139. disabled: false,
  140. },
  141. {
  142. key: "4",
  143. label: "测试4",
  144. disabled: false,
  145. },
  146. ]);
  147. let selectLine = ref([]);
  148. let dialogVisible = ref(false);
  149. let openProduct = ref(false);
  150. let modalType = ref("add");
  151. let rules = ref({
  152. name: [{ required: true, message: "请输入产线名称", trigger: "blur" }],
  153. });
  154. const { proxy } = getCurrentInstance();
  155. const selectConfig = reactive([
  156. // {
  157. // label: "车间类型",
  158. // prop: "type",
  159. // data: [
  160. // {
  161. // label: "普通车间",
  162. // value: "1",
  163. // },
  164. // {
  165. // label: "半自动化车间",
  166. // value: "2",
  167. // },
  168. // {
  169. // label: "自动化车间",
  170. // value: "3",
  171. // },
  172. // ],
  173. // },
  174. ]);
  175. const config = computed(() => {
  176. return [
  177. {
  178. attrs: {
  179. label: "产线名称",
  180. prop: "name",
  181. width: 150,
  182. },
  183. },
  184. {
  185. attrs: {
  186. label: "产线路线",
  187. slot: "line",
  188. },
  189. },
  190. {
  191. attrs: {
  192. label: "适用产品",
  193. slot: "product",
  194. },
  195. },
  196. {
  197. attrs: {
  198. label: "产线说明",
  199. prop: "remarks",
  200. },
  201. },
  202. {
  203. attrs: {
  204. label: "操作",
  205. width: "160",
  206. align: "center",
  207. },
  208. // 渲染 el-button,一般用在最后一列。
  209. renderHTML(row) {
  210. return [
  211. {
  212. attrs: {
  213. label: "产品",
  214. type: "primary",
  215. text: true,
  216. },
  217. el: "button",
  218. click() {
  219. updateProduct(row);
  220. },
  221. },
  222. {
  223. attrs: {
  224. label: "修改",
  225. type: "primary",
  226. text: true,
  227. },
  228. el: "button",
  229. click() {
  230. getDtl(row);
  231. },
  232. },
  233. {
  234. attrs: {
  235. label: "删除",
  236. type: "danger",
  237. text: true,
  238. },
  239. el: "button",
  240. click() {
  241. // 弹窗提示是否删除
  242. ElMessageBox.confirm(
  243. "此操作将永久删除该数据, 是否继续?",
  244. "提示",
  245. {
  246. confirmButtonText: "确定",
  247. cancelButtonText: "取消",
  248. type: "warning",
  249. }
  250. ).then(() => {
  251. // 删除
  252. proxy
  253. .post("/technology/delete", {
  254. id: row.id,
  255. })
  256. .then((res) => {
  257. ElMessage({
  258. message: "删除成功",
  259. type: "success",
  260. });
  261. getList();
  262. });
  263. });
  264. },
  265. },
  266. ];
  267. },
  268. },
  269. ];
  270. });
  271. let formData = reactive({
  272. data: {
  273. name: "",
  274. processRouteList: [],
  275. remarks: "",
  276. },
  277. dataOne: {},
  278. });
  279. const formOption = reactive({
  280. inline: true,
  281. labelWidth: 100,
  282. itemWidth: 100,
  283. rules: [],
  284. });
  285. const byform = ref(null);
  286. const formConfig = computed(() => {
  287. return [
  288. {
  289. type: "input",
  290. prop: "name",
  291. label: "产线名称",
  292. },
  293. {
  294. type: "radio",
  295. prop: "radioaa",
  296. label: "批量模式",
  297. data: [
  298. {
  299. dictKey: "0",
  300. dictValue: "关闭批量模式",
  301. },
  302. {
  303. dictKey: "1",
  304. dictValue: "开启批量模式",
  305. },
  306. ],
  307. fn: (val) => {
  308. if (val == "0") {
  309. formData.data.unit = [];
  310. }
  311. },
  312. },
  313. {
  314. type: "select",
  315. prop: "unit",
  316. label: "生产任务",
  317. data: [],
  318. itemWidth: 100,
  319. multiple: true,
  320. isShow: formData.data.radioaa == "1",
  321. },
  322. {
  323. type: "slot",
  324. slotName: "lineSlot",
  325. label: "产线路线",
  326. },
  327. // {
  328. // type: "slot",
  329. // slotName: "productSlot",
  330. // label: "适用产品",
  331. // },
  332. {
  333. type: "input",
  334. prop: "remarks",
  335. label: "产线说明",
  336. itemType: "textarea",
  337. },
  338. ];
  339. });
  340. const formConfigOne = computed(() => {
  341. return [
  342. {
  343. type: "slot",
  344. slotName: "productSlot",
  345. label: "适用产品",
  346. },
  347. ];
  348. });
  349. const getList = async (req) => {
  350. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  351. loading.value = true;
  352. proxy
  353. .post("/technology/page", sourceList.value.pagination)
  354. .then((message) => {
  355. console.log(message);
  356. sourceList.value.data = message.rows;
  357. sourceList.value.pagination.total = message.total;
  358. setTimeout(() => {
  359. loading.value = false;
  360. }, 200);
  361. });
  362. };
  363. const getProcesses = async () => {
  364. proxy
  365. .post("/productionProcesses/page", { pageNum: 1, pageSize: 9999 })
  366. .then((message) => {
  367. lineData.value = message.rows.map((x) => ({
  368. key: x.id,
  369. label: x.name,
  370. disabled: false,
  371. }));
  372. });
  373. };
  374. const openModal = () => {
  375. dialogVisible.value = true;
  376. nodeObject.value = "";
  377. modalType.value = "add";
  378. formData.data = {};
  379. selectLine.value = [];
  380. };
  381. const vueFlowDom = ref(null);
  382. const nodeObject = ref("");
  383. const submitForm = () => {
  384. console.log("www");
  385. byform.value.handleSubmit((valid) => {
  386. const data = vueFlowDom.value.submitAll();
  387. if (!data) {
  388. return;
  389. }
  390. formData.data.nodeObject = data.nodeObject;
  391. submitLoading.value = true;
  392. proxy.post("/technology/" + modalType.value, formData.data).then(
  393. (res) => {
  394. ElMessage({
  395. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  396. type: "success",
  397. });
  398. dialogVisible.value = false;
  399. submitLoading.value = false;
  400. getList();
  401. },
  402. (err) => {
  403. submitLoading.value = false;
  404. }
  405. );
  406. });
  407. };
  408. const submitFormOne = () => {
  409. if (!productList.value.length > 0)
  410. return ElMessage({
  411. message: "请添加适用产品",
  412. type: "info",
  413. });
  414. formData.dataOne.productList = productList.value.map((x) => ({
  415. productId: x.id,
  416. }));
  417. //选择的产品数据
  418. submitLoading.value = true;
  419. proxy.post("/technology/editProduct", formData.dataOne).then(
  420. (res) => {
  421. ElMessage({
  422. message: "操作成功",
  423. type: "success",
  424. });
  425. dialogVisibleOne.value = false;
  426. submitLoading.value = false;
  427. getList();
  428. },
  429. (err) => {
  430. submitLoading.value = false;
  431. }
  432. );
  433. };
  434. const getDtl = (row) => {
  435. modalType.value = "edit";
  436. proxy.post("/technology/detail", { id: row.id }).then((res) => {
  437. nodeObject.value = res.nodeObject;
  438. // productList.value = res.applicableProductsList;
  439. // selectLine.value = res.processRouteList.map((x) => x.id);
  440. formData.data = res;
  441. dialogVisible.value = true;
  442. });
  443. };
  444. const dialogVisibleOne = ref(false);
  445. const updateProduct = (row) => {
  446. proxy.post("/technology/detail", { id: row.id }).then((res) => {
  447. productList.value = res.applicableProductsList;
  448. formData.dataOne = {
  449. id: row.id,
  450. productList: [],
  451. };
  452. dialogVisibleOne.value = true;
  453. });
  454. };
  455. const productList = ref([]);
  456. const handleSelect = (row) => {
  457. const flag = productList.value.some((x) => x.id === row.id);
  458. if (flag)
  459. return ElMessage({
  460. message: "该产品已选择",
  461. type: "info",
  462. });
  463. productList.value.push(row);
  464. return ElMessage({
  465. message: "选择成功",
  466. type: "success",
  467. });
  468. };
  469. const handleRemove = (index) => {
  470. productList.value.splice(index, 1);
  471. return ElMessage({
  472. message: "删除成功",
  473. type: "success",
  474. });
  475. };
  476. getList();
  477. getProcesses();
  478. // 以下是实现拖拽排序的处理方法
  479. const dragStar = (e, option) => {
  480. // if (!selectLine.value.includes(e.target.id)) return; //拖拽的数据如不是选择的数据直接return
  481. e.dataTransfer.setData("text/plain", option.key);
  482. e.dataTransfer.effectAllowed = "move";
  483. e.dataTransfer.dropEffect = "move";
  484. };
  485. const dragOver = (e, option) => {
  486. e.preventDefault();
  487. };
  488. const handleDrop = (e) => {
  489. // if (!selectLine.value.includes(e.target.id)) return; //拖拽的数据如不是选择的数据直接return
  490. e.preventDefault();
  491. const sourceKey = e.dataTransfer.getData("text/plain"); //获取拖动元素的key值
  492. const targetKey = e.target.id; //获取被互换元素的id值
  493. swapItems(sourceKey, targetKey);
  494. };
  495. // const findIndex = (target) => {
  496. // while (target && target.parentNode) {
  497. // let targetParent = target.parentNode;
  498. // const index = Array.from(targetParent.children).indexOf(target);
  499. // if (index !== -1) {
  500. // return index;
  501. // }
  502. // }
  503. // return -1;
  504. // };
  505. // 调换数据源位置
  506. const swapItems = (sourceKey, targetKey) => {
  507. const sourceIndex = selectLine.value.findIndex((x) => x === sourceKey);
  508. const targetIndex = selectLine.value.findIndex((x) => x === targetKey);
  509. const temp = selectLine.value[sourceIndex];
  510. selectLine.value[sourceIndex] = selectLine.value[targetIndex];
  511. selectLine.value[targetIndex] = temp;
  512. };
  513. </script>
  514. <style lang="scss" scoped>
  515. .tenant {
  516. padding: 20px;
  517. }
  518. .processChart {
  519. border: 1px solid #ccc;
  520. padding: 20px;
  521. display: flex;
  522. justify-content: space-between;
  523. position: relative;
  524. .from {
  525. width: 400px;
  526. background: #fff;
  527. border-radius: 5px;
  528. padding: 20px;
  529. }
  530. .content {
  531. width: calc(100% - 420px);
  532. border-radius: 5px;
  533. padding: 20px;
  534. background: #fff;
  535. }
  536. }
  537. .chart-warp {
  538. width: 100%;
  539. // height: calc(100vh - 280px);
  540. }
  541. </style>