processComponent.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <div
  3. class="mainContentBox"
  4. style="padding: 0; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1)"
  5. >
  6. <div class="header">
  7. <div class="title">绑定工序</div>
  8. <el-space>
  9. <el-button :icon="Back" size="small" @click="back">返回</el-button>
  10. <el-button
  11. :type="isChanged ? 'danger' : 'primary'"
  12. :icon="Document"
  13. size="small"
  14. @click="save"
  15. >保存</el-button
  16. >
  17. </el-space>
  18. </div>
  19. <div class="types">
  20. <el-dropdown @command="handleCommand">
  21. <div class="typeBox addBtn">
  22. <el-icon class="icon"><CirclePlus /></el-icon>
  23. <div class="name">添加组件</div>
  24. </div>
  25. <template #dropdown>
  26. <el-dropdown-menu>
  27. <el-dropdown-item
  28. v-for="(com, index) in comTypes"
  29. :key="index"
  30. :command="com"
  31. >
  32. <div
  33. v-if="
  34. prodtCode != '' ||
  35. (prodtCode == '' && com.compentName != '物料采集')
  36. "
  37. >
  38. {{ com.compentName }}
  39. </div></el-dropdown-item
  40. >
  41. </el-dropdown-menu>
  42. </template>
  43. </el-dropdown>
  44. <VueDraggable
  45. v-model="selectProComs"
  46. :animation="150"
  47. ghostClass="ghost"
  48. @update="onUpdate"
  49. style="display: flex"
  50. >
  51. <div
  52. class="typeContainer"
  53. v-for="(item, index) in selectProComs"
  54. :key="index"
  55. @click="clickToolCom(item, index)"
  56. >
  57. <div class="typeBox others" :class="getNameClass(index)">
  58. <svg-icon :icon-class="item.compentType" size="30" />
  59. <div class="name">{{ item.compentName }}</div>
  60. </div>
  61. <Delete class="delete" @click.stop="clickDelete(index)" />
  62. </div>
  63. </VueDraggable>
  64. </div>
  65. <div class="binContainer">
  66. <div v-if="isChanged || selectIndex === -1 || isNoneedEdit">
  67. <el-empty :image-size="200" :description="getTipContent()" />
  68. </div>
  69. <div v-else-if="tipTitle !== '编辑工序表单'">
  70. <div class="tipTitle">{{ tipTitle }}</div>
  71. <el-button
  72. type="primary"
  73. @click="creatNewData"
  74. style="margin-bottom: 15px"
  75. >新增</el-button
  76. >
  77. <el-button
  78. type="primary"
  79. @click="saveSortData"
  80. style="margin-bottom: 15px"
  81. >保存顺序</el-button
  82. >
  83. <BottomTable ref="bottomTableRef" :tableType="tableType" />
  84. </div>
  85. <div v-else>
  86. <div class="tipTitle">{{ tipTitle }}</div>
  87. <SetExcel />
  88. </div>
  89. </div>
  90. </div>
  91. </template>
  92. <script setup>
  93. import { Back, Document, CirclePlus, Delete } from "@element-plus/icons-vue";
  94. import { VueDraggable } from "vue-draggable-plus";
  95. import BottomTable from "@/views/base/craftManagement/route/components/bottomTable.vue";
  96. import SetExcel from "./setExcel/index.vue";
  97. import { comTypes } from "@/views/base/craftManagement/route/components/configs";
  98. import { saveCompoents, getCompoentsList } from "@/api/craft/process/index";
  99. import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
  100. import {
  101. processesByRouteId,
  102. saveProcessInRoute,
  103. } from "@/api/craft/route/index";
  104. const prodtCode = ref("");
  105. const routerId = ref("");
  106. const router = useRouter();
  107. const route = useRoute();
  108. //组件是否已经改变,如果改变了需要点击保存,才能展示下面的table
  109. const isChanged = ref(true);
  110. const isNoneedEdit = ref(false); //有些组件是不需要编辑的,所以下面也不展示table
  111. const loadTopList = () => {
  112. getCompoentsList(route.fullPath.split("/")[4]).then((res) => {
  113. selectProComs.value = res.data || [];
  114. selectIndex.value = -1;
  115. isChanged.value = false;
  116. });
  117. };
  118. onMounted(async () => {
  119. prodtCode.value = route.fullPath.split("/")[5];
  120. routerId.value = route.fullPath.split("/")[6];
  121. await loadTopList();
  122. });
  123. // 顶部====================
  124. const back = () => {
  125. router.back();
  126. };
  127. const save = async () => {
  128. for (let i = 0; i < selectProComs.value.length; i++) {
  129. selectProComs.value[i].operationId = route.fullPath.split("/")[4];
  130. selectProComs.value[i].sortNum = i;
  131. }
  132. let p = {
  133. operationId: route.fullPath.split("/")[4],
  134. dtos: selectProComs.value,
  135. };
  136. let { res, code } = await saveCompoents(p);
  137. if (code == "200") {
  138. ElMessage.success("保存成功");
  139. }
  140. loadTopList();
  141. };
  142. // Tools顶部组件 ==================
  143. // 已经存在的工序组件
  144. const selectProComs = ref([]);
  145. const selectIndex = ref(-1);
  146. const currentCom = ref({});
  147. const handleCommand = (item) => {
  148. let status = true;
  149. for (let i = 0; i < selectProComs.value.length; i++) {
  150. if (selectProComs.value[i].compentName == item.compentName) {
  151. status = false;
  152. }
  153. }
  154. if (status == true) {
  155. selectProComs.value.push(item);
  156. isChanged.value = true;
  157. selectIndex.value = -1;
  158. } else {
  159. ElMessage.error("请勿重复添加");
  160. }
  161. };
  162. // 点击某一个改变下面的table
  163. const clickToolCom = (com, index) => {
  164. // 如果上方组件更改了,提示先保存组件再操作
  165. if (isChanged.value) {
  166. ElMessage.warning("请先保存组件!!!");
  167. return;
  168. }
  169. tipTitle.value = "编辑" + com.compentName;
  170. selectIndex.value = index;
  171. currentCom.value = com;
  172. if (
  173. com.compentType === "jiluxiang" ||
  174. com.compentType === "mingpai" ||
  175. com.compentType === "duomeiticaiji" ||
  176. com.compentType === "tiaoshipipei" ||
  177. com.compentType === "jingu" ||
  178. com.compentType === "ceshishuju" ||
  179. com.compentType === "screwdriver"
  180. ) {
  181. isNoneedEdit.value = true;
  182. } else {
  183. tableType.value = com.compentType;
  184. isNoneedEdit.value = false;
  185. }
  186. };
  187. const onUpdate = () => {
  188. isChanged.value = true;
  189. selectIndex.value = -1;
  190. };
  191. const clickDelete = (index) => {
  192. selectProComs.value.splice(index, 1);
  193. selectIndex.value = -1;
  194. isChanged.value = true;
  195. };
  196. const getNameClass = (index) => {
  197. return index === selectIndex.value ? "selected" : "normal";
  198. };
  199. // 底部table ===============
  200. let tipTitle = ref({});
  201. const bottomTableRef = ref({});
  202. const tableType = ref("MARTERIAL_BOM");
  203. const creatNewData = () => {
  204. bottomTableRef.value && bottomTableRef.value.startCreat();
  205. };
  206. const saveSortData = () => {
  207. bottomTableRef.value && bottomTableRef.value.saveSortData();
  208. };
  209. const getTipContent = (itemValue) => {
  210. if (isNoneedEdit.value) {
  211. return "标准组件无需编辑";
  212. }
  213. if (selectIndex.value === -1 && isChanged.value) {
  214. return "请先保存组件,然后再进行操作";
  215. }
  216. return "请先选择组件";
  217. };
  218. </script>
  219. <style lang="scss" scoped>
  220. .header {
  221. height: 50px;
  222. display: flex;
  223. background-color: #f5f7f9;
  224. justify-content: space-between;
  225. align-items: center;
  226. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  227. }
  228. .types {
  229. width: 100%;
  230. height: 116px;
  231. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  232. padding: 12px 20px;
  233. display: flex;
  234. .typeContainer {
  235. }
  236. .typeBox {
  237. height: 80px;
  238. width: 80px;
  239. border-radius: 4px 4px 4px 4px;
  240. display: flex;
  241. flex-direction: column;
  242. justify-content: center;
  243. align-items: center;
  244. .icon {
  245. height: 32px;
  246. width: 32px;
  247. }
  248. .name {
  249. width: 56px;
  250. height: 16px;
  251. font-weight: 500;
  252. font-size: 14px;
  253. line-height: 16px;
  254. text-align: center;
  255. font-style: normal;
  256. text-transform: none;
  257. }
  258. }
  259. .addBtn {
  260. border: 1px solid #0a59f7;
  261. color: #0a59f7;
  262. }
  263. .others {
  264. color: rgba(0, 0, 0, 0.9);
  265. border: 1px solid rgba(0, 0, 0, 0.9);
  266. margin-left: 20px;
  267. position: relative;
  268. }
  269. .delete {
  270. //position: absolute;
  271. //bottom: -20px;
  272. //left: 0;
  273. margin-left: 50px;
  274. width: 1em;
  275. height: 1em;
  276. color: red;
  277. visibility: hidden;
  278. }
  279. .typeContainer:hover {
  280. .delete {
  281. visibility: visible;
  282. }
  283. }
  284. .normal {
  285. background: #ffffff;
  286. border: 1px solid rgba(35, 32, 50, 0.1);
  287. }
  288. .selected {
  289. background: rgba(10, 89, 247, 0.2);
  290. border: 1px solid #0a59f7;
  291. }
  292. }
  293. .title {
  294. line-height: 44px;
  295. color: #6f7991;
  296. font-size: 14px;
  297. font-weight: bold;
  298. text-align: left;
  299. margin-left: 20px;
  300. }
  301. .binContainer {
  302. height: calc(100vh - 280px);
  303. width: 100%;
  304. background-color: #f5f7f9;
  305. overflow-y: auto;
  306. background-color: white;
  307. //margin-top: 16px;
  308. //margin-left: 20px;
  309. padding: 16px 20px;
  310. }
  311. .tipTitle {
  312. width: 84px;
  313. height: 16px;
  314. font-weight: 500;
  315. font-size: 14px;
  316. color: rgba(0, 0, 0, 0.9);
  317. line-height: 16px;
  318. text-align: left;
  319. font-style: normal;
  320. text-transform: none;
  321. margin-bottom: 16px;
  322. }
  323. </style>