|
@@ -2,23 +2,23 @@
|
|
|
<div class="container-desperse">
|
|
|
<div class="left">
|
|
|
<div
|
|
|
- class="box-item"
|
|
|
v-for="(box, index) in leftTrees"
|
|
|
:key="index"
|
|
|
- :class="{ hoverEffect: index === leftTreeIndex }"
|
|
|
+ :class="{ boxSelected: index === leftTreeIndex }"
|
|
|
+ class="box-item"
|
|
|
@click="changeRightEl(box, index)"
|
|
|
>
|
|
|
{{ box.dictLabel }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <el-scrollbar>
|
|
|
+ <el-scrollbar v-loading="loading">
|
|
|
<div class="grid-container">
|
|
|
<div
|
|
|
v-for="(box, index) in merterielBoxes"
|
|
|
:key="index"
|
|
|
class="suit-box"
|
|
|
- @click="testClick(index)"
|
|
|
+ @click="testClick"
|
|
|
>
|
|
|
<div>
|
|
|
<div class="suit-title">{{ box?.materialName }}</div>
|
|
@@ -36,35 +36,25 @@
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <CallHistory ref="callHistoryRef" />
|
|
|
- <MarterielBoxDetail ref="materielBoxDetailRef" />
|
|
|
- <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
|
|
|
- <ConfirmMessage ref="confirmMessageRef" /> -->
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-// import CallHistory from "@/views/pro-operation/call-materiel/components/call-history.vue";
|
|
|
-// 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, accessoriesList } from "@/api/process/callMateriel";
|
|
|
-import { useProcessStore } from "@/store/modules/processView";
|
|
|
+import { accessoriesList } from "@/api/process/callMateriel";
|
|
|
import { useDictionaryStore } from "@/store/modules/dictionary";
|
|
|
|
|
|
-const processStore = useProcessStore();
|
|
|
const dictStore = useDictionaryStore();
|
|
|
const leftTrees = ref<any[]>([]);
|
|
|
const leftTreeIndex = ref(0);
|
|
|
const merterielBoxes = ref<any>([]);
|
|
|
-const changeRightEl = (row, index) => {
|
|
|
+const loading = ref(false);
|
|
|
+const changeRightEl = (row: any, index: number) => {
|
|
|
leftTreeIndex.value = index;
|
|
|
accessoriesDataList(index);
|
|
|
};
|
|
|
const testClick = () => {
|
|
|
console.log("here---in");
|
|
|
};
|
|
|
-const accessoriesDataList = (index) => {
|
|
|
+const accessoriesDataList = (index: number) => {
|
|
|
const firstObj = leftTrees?.value[index];
|
|
|
//dictLabel: "炼胶",dictSort: 1,dictValue: "1"
|
|
|
const queryAccessoriesParam = {
|
|
@@ -74,13 +64,17 @@ const accessoriesDataList = (index) => {
|
|
|
};
|
|
|
|
|
|
// 获取数据
|
|
|
- accessoriesList(queryAccessoriesParam).then((res) => {
|
|
|
- // console.log("onMounted", res.data);
|
|
|
- merterielBoxes.value = res.data;
|
|
|
- });
|
|
|
+ loading.value = true;
|
|
|
+ accessoriesList(queryAccessoriesParam)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log("onMounted", res.data);
|
|
|
+ merterielBoxes.value = res.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
- console.log("dictS.dicts", dictStore.dicts.accessories_type);
|
|
|
leftTrees.value = dictStore?.dicts?.accessories_type;
|
|
|
if (leftTrees?.value) {
|
|
|
accessoriesDataList(0);
|
|
@@ -91,31 +85,34 @@ onMounted(() => {
|
|
|
<style lang="scss" scoped>
|
|
|
.container-desperse {
|
|
|
display: flex;
|
|
|
+
|
|
|
.left {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
width: 300px;
|
|
|
+
|
|
|
.box-item {
|
|
|
- border: 1px solid red;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
line-height: 80px;
|
|
|
height: 80px;
|
|
|
+ border-radius: 40px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #1482f0;
|
|
|
+ }
|
|
|
}
|
|
|
- .hoverEffect {
|
|
|
- color: blue;
|
|
|
- // text-decoration: underline;
|
|
|
- // background-color: red;
|
|
|
+
|
|
|
+ .boxSelected {
|
|
|
+ background: #fff;
|
|
|
+ color: #1482f0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
- // margin-left: 12%;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.grid-container {
|
|
|
width: 100%;
|
|
|
display: grid;
|