processComponent.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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(routerId.value).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 = routerId.value;
  130. selectProComs.value[i].sortNum = i;
  131. }
  132. let p = {
  133. operationId: routerId.value,
  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. ) {
  179. isNoneedEdit.value = true;
  180. } else {
  181. tableType.value = com.compentType;
  182. isNoneedEdit.value = false;
  183. }
  184. };
  185. const onUpdate = () => {
  186. isChanged.value = true;
  187. selectIndex.value = -1;
  188. };
  189. const clickDelete = (index) => {
  190. selectProComs.value.splice(index, 1);
  191. selectIndex.value = -1;
  192. isChanged.value = true;
  193. };
  194. const getNameClass = (index) => {
  195. return index === selectIndex.value ? "selected" : "normal";
  196. };
  197. // 底部table ===============
  198. let tipTitle = ref({});
  199. const bottomTableRef = ref({});
  200. const tableType = ref("MARTERIAL_BOM");
  201. const creatNewData = () => {
  202. bottomTableRef.value && bottomTableRef.value.startCreat();
  203. };
  204. const saveSortData = () => {
  205. bottomTableRef.value && bottomTableRef.value.saveSortData();
  206. };
  207. const getTipContent = (itemValue) => {
  208. if (isNoneedEdit.value) {
  209. return "标准组件无需编辑";
  210. }
  211. if (selectIndex.value === -1 && isChanged.value) {
  212. return "请先保存组件,然后再进行操作";
  213. }
  214. return "请先选择组件";
  215. };
  216. </script>
  217. <style lang="scss" scoped>
  218. .header {
  219. height: 50px;
  220. display: flex;
  221. background-color: #f5f7f9;
  222. justify-content: space-between;
  223. align-items: center;
  224. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  225. }
  226. .types {
  227. width: 100%;
  228. height: 116px;
  229. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  230. padding: 12px 20px;
  231. display: flex;
  232. .typeContainer {
  233. }
  234. .typeBox {
  235. height: 80px;
  236. width: 80px;
  237. border-radius: 4px 4px 4px 4px;
  238. display: flex;
  239. flex-direction: column;
  240. justify-content: center;
  241. align-items: center;
  242. .icon {
  243. height: 32px;
  244. width: 32px;
  245. }
  246. .name {
  247. width: 56px;
  248. height: 16px;
  249. font-weight: 500;
  250. font-size: 14px;
  251. line-height: 16px;
  252. text-align: center;
  253. font-style: normal;
  254. text-transform: none;
  255. }
  256. }
  257. .addBtn {
  258. border: 1px solid #0a59f7;
  259. color: #0a59f7;
  260. }
  261. .others {
  262. color: rgba(0, 0, 0, 0.9);
  263. border: 1px solid rgba(0, 0, 0, 0.9);
  264. margin-left: 20px;
  265. position: relative;
  266. }
  267. .delete {
  268. //position: absolute;
  269. //bottom: -20px;
  270. //left: 0;
  271. margin-left: 50px;
  272. width: 1em;
  273. height: 1em;
  274. color: red;
  275. visibility: hidden;
  276. }
  277. .typeContainer:hover {
  278. .delete {
  279. visibility: visible;
  280. }
  281. }
  282. .normal {
  283. background: #ffffff;
  284. border: 1px solid rgba(35, 32, 50, 0.1);
  285. }
  286. .selected {
  287. background: rgba(10, 89, 247, 0.2);
  288. border: 1px solid #0a59f7;
  289. }
  290. }
  291. .title {
  292. line-height: 44px;
  293. color: #6f7991;
  294. font-size: 14px;
  295. font-weight: bold;
  296. text-align: left;
  297. margin-left: 20px;
  298. }
  299. .binContainer {
  300. height: calc(100vh - 280px);
  301. width: 100%;
  302. background-color: #f5f7f9;
  303. overflow-y: auto;
  304. background-color: white;
  305. //margin-top: 16px;
  306. //margin-left: 20px;
  307. padding: 16px 20px;
  308. }
  309. .tipTitle {
  310. width: 84px;
  311. height: 16px;
  312. font-weight: 500;
  313. font-size: 14px;
  314. color: rgba(0, 0, 0, 0.9);
  315. line-height: 16px;
  316. text-align: left;
  317. font-style: normal;
  318. text-transform: none;
  319. margin-bottom: 16px;
  320. }
  321. </style>