You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.3 KiB
65 lines
2.3 KiB
<template>
|
|
<div class="component-page">
|
|
<section class="flex items-center h-20 gap-3 pl-3">
|
|
<button class="btn-light px-3 py-1 text-xs">添加矿石</button>
|
|
<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button>
|
|
<button class="btn-light px-3 py-1 text-xs">删除矿石</button>
|
|
|
|
<button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button>
|
|
<button class="btn-light px-3 py-1 text-xs">编辑工艺</button>
|
|
<button class="btn-light px-3 py-1 text-xs">删除工艺</button>
|
|
</section>
|
|
|
|
<section>
|
|
<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
|
|
<div class="w-10 self-stretch flex justify-center items-center">
|
|
<img src="@/assets/Icon-unselect.svg" alt="icon" />
|
|
</div>
|
|
<p class="w-14">序号</p>
|
|
<p class="w-[18rem]">矿石名称</p>
|
|
<p>工艺</p>
|
|
</header>
|
|
<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
|
|
<div class="w-10 self-stretch flex justify-center items-center">
|
|
<img :src="isSelect ? icon_select : icon_unselect" alt="" />
|
|
</div>
|
|
<p class="w-14">1</p>
|
|
<p class="w-[18rem]">矿石名称1</p>
|
|
<div class="flex-auto">
|
|
<ul class="appearance-none flex items-center gap-x-3 text-sm">
|
|
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
|
|
工艺名称1
|
|
</li>
|
|
<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
|
|
工艺名称2
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<van-overlay :show="showCraftEditDialog">
|
|
<div class="flex justify-center items-center h-full">
|
|
<CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
|
|
</div>
|
|
</van-overlay>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import CraftConfig from "./components/CraftConfig.vue";
|
|
import icon_unselect from "@/assets/Icon-unselect.svg";
|
|
import icon_select from "@/assets/Icon-select.svg";
|
|
import { ref } from "vue";
|
|
|
|
const isSelect = ref<boolean>(true);
|
|
const opDisable = ref<boolean>(true);
|
|
const showCraftEditDialog = ref<boolean>(false);
|
|
|
|
function confirmCraftEdit() {
|
|
showCraftEditDialog.value = false
|
|
}
|
|
function onAddCraft() {
|
|
showCraftEditDialog.value = true
|
|
}
|
|
</script>
|