<template>
    <div class="table-box">
        <div class="tabs-box">
            <el-tabs v-model="formActiveName" class="demo-tabs">
                <el-tab-pane label="操作信息" name="infoOperate">
                    <DetailsSearch :formData="datas.formData" :ruleForm="datas.ruleForm" :labelWidth="labelWidth" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="outboundOrderListDetails">
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import { getDetailsApi } from "@/api/modules/deliveryAndOutbound";
import { FORMDATA, RULEFORM } from "./constant/list/details";
import { useRoute } from "vue-router";
const $route = useRoute();
let datas = reactive({
    ruleForm: RULEFORM, // 表单值
    formData: FORMDATA //表单配置
});
let labelWidth = ref<any>("107px");
let formActiveName = ref<any>("infoOperate");
const getDetails = async (id: any) => {
    const result = await getDetailsApi(id);
    if (result.status === 200) {
        const { data } = result;
        datas.ruleForm = data;
    }
};
getDetails($route.query.id);
onActivated(() => {
    getDetails($route.query.id);
});
</script>

<style scoped lang="scss">
.tabs-box {
    height: 100%;
    padding: 16px 16px 0;
    background-color: #ffffff;
    border-radius: 6px;
}
</style>
