55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
|
<script lang="tsx">
|
||
|
|
import FinishedProducts from './components/finished-products/index.vue';
|
||
|
|
import RawMaterial from './components/raw-material/index.vue';
|
||
|
|
|
||
|
|
const TABS = [
|
||
|
|
{
|
||
|
|
label: '成品库',
|
||
|
|
key: '1',
|
||
|
|
routeName: 'MaterialCenterFinishedProducts',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '原料库',
|
||
|
|
key: '2',
|
||
|
|
routeName: 'MaterialCenterRawMaterial',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
export default defineComponent({
|
||
|
|
setup(_, { attrs, slots, expose }) {
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const activeKey = ref('1');
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
activeKey.value = TABS.find((item) => item.routeName === route.name)?.key;
|
||
|
|
});
|
||
|
|
return () => (
|
||
|
|
<div class="material-center-wrap h-full flex flex-col">
|
||
|
|
<header class="py-16px px-24px rounded-8px bg-#fff flex items-center mb-16px">
|
||
|
|
{TABS.map((item) => (
|
||
|
|
<p
|
||
|
|
key={item.key}
|
||
|
|
class={`font-family-medium color-#737478 font-400 text-16px lh-24px cursor-pointer mr-32px ${
|
||
|
|
item.key === activeKey.value ? '!color-#6D4CFE font-500' : ''
|
||
|
|
}`}
|
||
|
|
onClick={() => {
|
||
|
|
activeKey.value = item.key;
|
||
|
|
router.push({ name: item.routeName });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
</header>
|
||
|
|
{activeKey.value === '1' ? <FinishedProducts /> : <RawMaterial />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@import './style.scss';
|
||
|
|
</style>
|