优化选择工艺

src/services/ore/oreManage.ts

@@ -34,3 +34,6 @@ export function updateCraft(params: { id: number; name: string; steps: string })
 export function deleteCraft(ids: string) {
 	return httpRequest<BaseResponse>({ url: `/api/crafts/${ids}`, method: "DELETE" });
 }
+export function getCraftList(ids: string) {
+	return httpRequest<BaseResponse>({ url: `/api/crafts/list/${ids}`, method: "GET" });
+}

src/views/graphite/components/CraftList.vue

@@ -1,6 +1,25 @@
 <template>
     <div class="craft">
-        <div class="craft_title">选择工艺</div>
+        <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)">
@@ -8,7 +27,7 @@
             </div>
         </section>
         <footer class="overlay_btn">
-            <van-button type="primary" class="btn ok">确定</van-button>
+            <van-button type="primary" class="btn ok" @click="onSave">确定</van-button>
             <van-button class="btn cancel" @click="onCancel">取消</van-button>
         </footer>
     </div>
@@ -16,30 +35,51 @@
 
 <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'])
+    const emits = defineEmits(['changeVisible', 'onSelectedCraft'])
+    const craftList = ref([])
+    const oreList = ref<any>([])
+    const oreId = ref()
     onMounted(()=>{
-        //获取工艺列表
-        
-        list.value = [{
-            id: 10,
-            name: '硫酸溶解法1'
-        },{
-            id: 20,
-            name: '硫酸溶解法2'
-        },{
-            id: 30,
-            name: '硫酸溶解法3'
-        }]
+        //获取矿石列表
+        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 = () => {
+        console.log('currentItem---', currentItem.value)
+        emits('onSelectedCraft', currentItem.value)
+    }
+
     const onCancel = () => {
         emits('changeVisible')
     }
@@ -52,23 +92,27 @@
         background: #ffffff;
 
         .craft_title{
-            width: 5.25rem;
             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{
-        width: 5rem;
         height: 1.875rem;
-        color: rgba(0, 0, 0, 0.85);
-        margin-left: 2rem;
+        margin-left: 1.5rem;
         margin-top: .625rem;
+        font-size: 1.5rem;
+        color:#868686
     }
 
     .craft_item{

src/views/graphite/index.vue

@@ -94,7 +94,7 @@
     </van-overlay>
     <!--选择工艺-->
     <OverlayModal :visible="craftVisible">
-      <CraftList @changeVisible="changeVisible"></CraftList>
+      <CraftList @changeVisible="changeVisible" @onSelectedCraft="onSelectedCraft"></CraftList>
     </OverlayModal>
 
 	<!--实验名称-->
@@ -213,6 +213,11 @@ const onAddLiquid = () => {
   liquidVisible.value = true;
 };
 
+//选择的工艺
+const onSelectedCraft = (craftData:any) => {
+	console.log('craftData===', craftData)
+}
+
 const onAddSolution = (data: any) => {
   let ids = data.map((item: any) => item.id);
   tubeList.forEach((item: any) => {