|
@@ -1,30 +1,42 @@
|
|
|
<template>
|
|
|
<div class="container-desperse">
|
|
|
- <div class="left">2</div>
|
|
|
- <div class="right">3</div>
|
|
|
- </div>
|
|
|
- <!-- <el-scrollbar>
|
|
|
- <div class="grid-container">
|
|
|
+ <div class="left">
|
|
|
<div
|
|
|
- v-for="(box, index) in merterielBoxes"
|
|
|
+ class="box-item"
|
|
|
+ v-for="(box, index) in leftTrees"
|
|
|
:key="index"
|
|
|
- class="suit-box"
|
|
|
- @click="testClick(index)"
|
|
|
+ :class="{ hoverEffect: index === leftTreeIndex }"
|
|
|
+ @click="changeRightEl(box, index)"
|
|
|
>
|
|
|
- <div>
|
|
|
- <div class="suit-title">{{ box?.materialName }}</div>
|
|
|
- <div class="suit-desc">{{ box?.spec }}</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <span class="suit-count">{{ box?.num }}</span>
|
|
|
- <span class="suit-desc">{{ box?.unit }}</span>
|
|
|
+ {{ box.dictLabel }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="grid-container">
|
|
|
+ <div
|
|
|
+ v-for="(box, index) in merterielBoxes"
|
|
|
+ :key="index"
|
|
|
+ class="suit-box"
|
|
|
+ @click="testClick(index)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="suit-title">{{ box?.materialName }}</div>
|
|
|
+ <div class="suit-desc">{{ box?.spec }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span class="suit-count">{{ box?.totalNum }}</span>
|
|
|
+ <span class="suit-desc">{{ box?.unit }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="suit-desc">当前库存</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="suit-desc">当前库存</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-scrollbar>-->
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- <CallHistory ref="callHistoryRef" />
|
|
|
<MarterielBoxDetail ref="materielBoxDetailRef" />
|
|
|
<ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
|
|
@@ -36,21 +48,43 @@
|
|
|
// import MarterielBoxDetail from "@/views/pro-operation/call-materiel/components/materiel-box-detail.vue";
|
|
|
// import ChangeCount from "@/components/CommonDialogs/ChangeCount.vue";
|
|
|
// import ConfirmMessage from "@/components/CommonDialogs/ConfirmMessage.vue";
|
|
|
-// import { stockMaterialList } from "@/api/process/callMateriel";
|
|
|
-// import { useProcessStore } from "@/store/modules/processView";
|
|
|
-// import { useDictionaryStore } from "@/store/modules/dictionary";
|
|
|
+import { stockMaterialList, accessoriesList } from "@/api/process/callMateriel";
|
|
|
+import { useProcessStore } from "@/store/modules/processView";
|
|
|
+import { useDictionaryStore } from "@/store/modules/dictionary";
|
|
|
|
|
|
-// const processStore = useProcessStore();
|
|
|
-// const dictStore = useDictionaryStore();
|
|
|
-// const merterielBoxes = ref<any>([]);
|
|
|
+const processStore = useProcessStore();
|
|
|
+const dictStore = useDictionaryStore();
|
|
|
+const leftTrees = ref<any[]>([]);
|
|
|
+const leftTreeIndex = ref(0);
|
|
|
+const merterielBoxes = ref<any>([]);
|
|
|
+const changeRightEl = (row, index) => {
|
|
|
+ leftTreeIndex.value = index;
|
|
|
+ accessoriesDataList(index);
|
|
|
+};
|
|
|
+const testClick = () => {
|
|
|
+ console.log("here---in");
|
|
|
+};
|
|
|
+const accessoriesDataList = (index) => {
|
|
|
+ const firstObj = leftTrees?.value[index];
|
|
|
+ //dictLabel: "炼胶",dictSort: 1,dictValue: "1"
|
|
|
+ const queryAccessoriesParam = {
|
|
|
+ accessoriesType: firstObj.dictValue,
|
|
|
+ pageNo: 0,
|
|
|
+ pageSize: 1000,
|
|
|
+ };
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- // console.log("dictS.dicts", dictStore.dicts.accessories_type);
|
|
|
- // merterielBoxes.value = dictStore.dicts.accessories_type.keys();
|
|
|
// 获取数据
|
|
|
- // stockMaterialList(processStore.scanInfo.materialCode).then((res) => {
|
|
|
- // merterielBoxes.value = res.data;
|
|
|
- // });
|
|
|
+ accessoriesList(queryAccessoriesParam).then((res) => {
|
|
|
+ // console.log("onMounted", res.data);
|
|
|
+ merterielBoxes.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ console.log("dictS.dicts", dictStore.dicts.accessories_type);
|
|
|
+ leftTrees.value = dictStore?.dicts?.accessories_type;
|
|
|
+ if (leftTrees?.value) {
|
|
|
+ accessoriesDataList(0);
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -58,57 +92,71 @@ onMounted(() => {
|
|
|
.container-desperse {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
width: 300px;
|
|
|
- background-color: red;
|
|
|
+ .box-item {
|
|
|
+ border: 1px solid red;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .hoverEffect {
|
|
|
+ color: blue;
|
|
|
+ // text-decoration: underline;
|
|
|
+ // background-color: red;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
// margin-left: 12%;
|
|
|
- background-color: black;
|
|
|
}
|
|
|
}
|
|
|
-// .grid-container {
|
|
|
-// width: 100%;
|
|
|
-// display: grid;
|
|
|
-// /*行间距*/
|
|
|
-// grid-row-gap: 24px;
|
|
|
-// /*列间距*/
|
|
|
-// grid-column-gap: 24px;
|
|
|
+.grid-container {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ /*行间距*/
|
|
|
+ grid-row-gap: 24px;
|
|
|
+ /*列间距*/
|
|
|
+ grid-column-gap: 24px;
|
|
|
|
|
|
-// grid-template-columns: 1fr 1fr 1fr;
|
|
|
-// overflow-y: auto;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
-// .suit-box {
|
|
|
-// height: 210px;
|
|
|
-// background-color: white;
|
|
|
-// border-radius: 16px 16px 16px 16px;
|
|
|
-// padding: 24px 30px;
|
|
|
-// display: flex;
|
|
|
-// flex-direction: column;
|
|
|
-// align-items: start;
|
|
|
-// justify-content: space-between;
|
|
|
-// position: relative;
|
|
|
+ .suit-box {
|
|
|
+ height: 210px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 16px 16px 16px 16px;
|
|
|
+ padding: 24px 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: start;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
|
|
|
-// .suit-title {
|
|
|
-// font-weight: 500;
|
|
|
-// font-size: 20px;
|
|
|
-// color: rgba(0, 0, 0, 0.9);
|
|
|
-// text-align: left;
|
|
|
-// }
|
|
|
+ .suit-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
-// .suit-count {
|
|
|
-// font-weight: bold;
|
|
|
-// font-size: 38px;
|
|
|
-// color: rgba(0, 0, 0, 0.9);
|
|
|
-// text-align: left;
|
|
|
-// }
|
|
|
+ .suit-count {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 38px;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
-// .suit-desc {
|
|
|
-// font-size: 20px;
|
|
|
-// color: rgba(0, 0, 0, 0.6);
|
|
|
-// text-align: left;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
+ .suit-desc {
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|