选择工艺弹框调整

src/stores/setting.ts

@@ -3,10 +3,19 @@ import type { ConfigItem, ConfigSubItem, Container } from "@/services/sysConfig/
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import * as R from "ramda";
+import type { Craft, Ore } from "@/services/ore/oreManage";
 
 export type ContainerWithLiquid = Container & { solution: Liquid };
 
 export const useSettingStore = defineStore("setting", () => {
+	const oreList = ref<Ore[] | undefined>();
+	const setOreList = (ore: Ore[]) => {
+		oreList.value = ore;
+	};
+
+	const allCrafts = computed(() => {
+		return R.pipe(R.pluck("craftsList"), R.flatten)(oreList.value || []) as Ore["craftsList"];
+	});
 	const configs = ref<ConfigItem[] | undefined>();
 	const setConfigs = (usr: ConfigItem[]) => {
 		configs.value = usr;
@@ -90,6 +99,9 @@ export const useSettingStore = defineStore("setting", () => {
 	});
 
 	return {
+		oreList,
+		setOreList,
+		allCrafts,
 		heatAreaConfig,
 		areaOptions,
 		actionAreaConfig,

src/views/graphite/components/CraftList.vue

@@ -1,146 +1,115 @@
 <template>
-    <div class="craft">
-        <div class="craft_title">
-            <div style="width: 5rem;">
-                选择矿石
-            </div>
-            <div class="ore_select">
-                <el-select
-                    placeholder="请选择矿石"
-                    size="large"
-                    style="width: 240px;height: 5rem;"
-                    v-model="oreId"
-                    @change="onOreChange"
-                >
-                    <el-option
-                        v-for="item in oreList"
-                        :label="item.oresName"
-                        :value="item.id"
-                    />
-                </el-select>
-            </div>
-        </div>
-        <section>
-            <div class="craft_column_name">工艺名称</div>
-            <div v-for="item in list" class="craft_item" @click="onChooseCraft(item)">
-                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="craft_li">{{ item.name }}</div>
-            </div>
-        </section>
-        <footer class="overlay_btn">
-            <van-button type="primary" class="btn ok" @click="onSave">确定</van-button>
-            <van-button class="btn cancel" @click="onCancel">取消</van-button>
-        </footer>
-    </div>
+	<div class="craft px-5 py-[1.875rem]">
+		<p class="text-xl font-medium mb-5">选择工艺</p>
+		<el-select v-model="selectCraftId" placeholder="Select" style="width: 17.5rem">
+			<el-option-group v-for="ore in settingStore.oreList" :key="ore.id" :label="ore.oresName">
+				<el-option v-for="item in ore.craftsList" :key="item.id" :label="item.name" :value="item.id" />
+			</el-option-group>
+		</el-select>
+
+		<footer class="mt-5 flex justify-center gap-5">
+			<van-button type="primary" class="btn w-20 ok" @click="onSave">确定</van-button>
+			<van-button class="btn w-20 cancel" @click="onCancel">取消</van-button>
+		</footer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-    import { ref, onMounted } from 'vue'
-    import {
-        getCraftList,
-        getOreList,
-    } from "@/services/ore/oreManage";
-    const currentItem = ref()
-    const activeColor = ref('#ffffff')
-    const list = ref()
-    const emits = defineEmits(['changeVisible', 'selectedCraft'])
-    const craftList = ref([])
-    const oreList = ref<any>([])
-    const oreId = ref()
-    onMounted(()=>{
-        //获取矿石列表
-        queryOreList()
-    })
-
-    const onOreChange = (value:any) => {
-        queryCraftList(value)
-    }
-
-    const queryOreList = () => {
-        const params = { pageNum: 1, pageSize: 20 }
-        getOreList(params).then(res=> {
-            if(res.success){
-                oreList.value = res.data.list;
-            }
-        })
-    }
-
-    const queryCraftList = (oreId:string) => {
-        getCraftList(oreId).then(res=> {
-            list.value = res.data
-        })
-    }
-
-    const onChooseCraft = (data:any) => {
-        activeColor.value = 'rgb(157 205 241)'
-        currentItem.value = data
-    }
-
-    const onSave = () => {
-        emits('selectedCraft', currentItem.value)
-    }
-
-    const onCancel = () => {
-        emits('changeVisible')
-    }
+import { ref, onMounted } from "vue";
+import { getCraftList, getOreList, type Craft } from "@/services/ore/oreManage";
+import { useSettingStore } from "@/stores/setting";
+
+const settingStore = useSettingStore();
+const selectCraftId = ref(3);
+
+const currentItem = ref();
+const activeColor = ref("#ffffff");
+const list = ref();
+const emits = defineEmits<{
+	(e: "changeVisible"): void;
+	(e: "selectedCraft", craft?: Craft): void;
+}>();
+const craftList = ref([]);
+const oreList = ref<any>([]);
+const oreId = ref();
+onMounted(() => {
+	//获取矿石列表
+	queryOreList();
+});
+
+const onOreChange = (value: any) => {
+	queryCraftList(value);
+};
+
+const queryOreList = () => {
+	const params = { pageNum: 1, pageSize: 20 };
+	getOreList(params).then(res => {
+		if (res.success) {
+			oreList.value = res.data.list;
+		}
+	});
+};
+
+const queryCraftList = (oreId: string) => {
+	getCraftList(oreId).then(res => {
+		list.value = res.data;
+	});
+};
+
+const onChooseCraft = (data: any) => {
+	activeColor.value = "rgb(157 205 241)";
+	currentItem.value = data;
+};
+
+const onSave = () => {
+	emits(
+		"selectedCraft",
+		settingStore.allCrafts.find(c => c.id === selectCraftId.value)
+	);
+};
+
+const onCancel = () => {
+	emits("changeVisible");
+};
 </script>
 
 <style lang="scss" scoped>
-    .craft{
-        height: 27.5rem;
-        width: 23.75rem;
-        background: #ffffff;
-
-        .craft_title{
-            height: 1.875rem;
-            margin-left: 1.25rem;
-            margin-top: 1.875rem;
-            color: #40474E;
-            font-weight: 500;
-            font-size: 1.25rem;
-            display: flex;
-
-            .ore_select{
-                margin-top:-0.5rem;
-                margin-left:0.5rem;
-            }
-        }
-    }
-
-    .craft_column_name{
-        height: 1.875rem;
-        margin-left: 1.5rem;
-        margin-top: .625rem;
-        font-size: 1.5rem;
-        color:#868686
-    }
-
-    .craft_item{
-        .craft_li{
-            display: flex;
-            align-items: center;
-            width: 23.75rem;
-            height: 3.125rem;
-            padding-left: 1.875rem;
-            font-size: 1.25rem;
-            color: rgba(0, 0, 0, 0.85);
-        }
-    }
-
-    .overlay_btn{
-        .btn{
-            width: 6.875rem;
-            height: 2.875rem;
-            font-size: 1.25rem;
-            margin-top: 6.875rem;
-        }
-
-        .ok{
-            margin-left: 5rem;
-        }
-
-        .cancel{
-            margin-left: 2.375rem;
-        }
-
-    }
-</style>
+.craft {
+	background: #ffffff;
+
+	.craft_title {
+		height: 1.875rem;
+		margin-left: 1.25rem;
+		margin-top: 1.875rem;
+		color: #40474e;
+		font-weight: 500;
+		font-size: 1.25rem;
+		display: flex;
+
+		.ore_select {
+			margin-top: -0.5rem;
+			margin-left: 0.5rem;
+		}
+	}
+}
+
+.craft_column_name {
+	height: 1.875rem;
+	margin-left: 1.5rem;
+	margin-top: 0.625rem;
+	font-size: 1.5rem;
+	color: #868686;
+}
+
+.craft_item {
+	.craft_li {
+		display: flex;
+		align-items: center;
+		width: 23.75rem;
+		height: 3.125rem;
+		padding-left: 1.875rem;
+		font-size: 1.25rem;
+		color: rgba(0, 0, 0, 0.85);
+	}
+}
+</style>