LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

选择工艺弹框调整

master
zhangjiming 5 months ago
parent
b9dfffa0df
commit
157b2c18b8
2 changed files with 120 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/stores/setting.ts
  2. 181
      src/views/graphite/components/CraftList.vue

12
src/stores/setting.ts
View File

@ -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,

181
src/views/graphite/components/CraftList.vue
View File

@ -1,121 +1,108 @@
<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"
/>
<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>
</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 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(()=>{
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()
})
queryOreList();
});
const onOreChange = (value:any) => {
queryCraftList(value)
}
const onOreChange = (value: any) => {
queryCraftList(value);
};
const queryOreList = () => {
const params = { pageNum: 1, pageSize: 20 }
getOreList(params).then(res=> {
if(res.success){
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')
}
});
};
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;
.craft {
background: #ffffff;
.craft_title{
.craft_title {
height: 1.875rem;
margin-left: 1.25rem;
margin-top: 1.875rem;
color: #40474E;
color: #40474e;
font-weight: 500;
font-size: 1.25rem;
display: flex;
.ore_select{
margin-top:-0.5rem;
margin-left:0.5rem;
}
.ore_select {
margin-top: -0.5rem;
margin-left: 0.5rem;
}
}
}
.craft_column_name{
.craft_column_name {
height: 1.875rem;
margin-left: 1.5rem;
margin-top: .625rem;
margin-top: 0.625rem;
font-size: 1.5rem;
color:#868686
}
color: #868686;
}
.craft_item{
.craft_li{
.craft_item {
.craft_li {
display: flex;
align-items: center;
width: 23.75rem;
@ -124,23 +111,5 @@
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>
Write Preview
Loading…
Cancel
Save