104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<script lang="js" setup>
|
|
const visible = defineModel(false);
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const loading = reactive({
|
|
submit: false,
|
|
global: true,
|
|
});
|
|
|
|
const form = ref({
|
|
b_id: "",
|
|
b_container_no: "",
|
|
});
|
|
|
|
const title = computed(() => {
|
|
if (visible.value) {
|
|
if (props.data.b_container_no) {
|
|
return `更新 ${props.data.b_container_no}`;
|
|
} else {
|
|
return "更新";
|
|
}
|
|
}
|
|
});
|
|
|
|
function onOpened() {
|
|
loading.global = true;
|
|
console.log("对话框已打开");
|
|
}
|
|
|
|
function onClosed() {
|
|
console.log("对话框已关闭");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog
|
|
v-bind="$attrs"
|
|
:title="title"
|
|
width="500"
|
|
@opened="onOpened"
|
|
@closed="onClosed"
|
|
v-model="visible"
|
|
>
|
|
<div class="form-container" v-loading="loading.global">
|
|
<!-- 箱号 -->
|
|
<div class="form-item">
|
|
<div class="label">箱号</div>
|
|
<div class="content">
|
|
<el-input v-model="form.b_container_no" placeholder="请输入箱号" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<el-button :loading="loading.submit" @click="visible = false">
|
|
<el-icon class="el-icon--left">
|
|
<G3Icon icon="lucide:refresh-ccw" />
|
|
</el-icon>
|
|
取消
|
|
</el-button>
|
|
<el-button type="primary">
|
|
<el-icon class="el-icon--left">
|
|
<G3Icon icon="lucide:cloud-download" />
|
|
</el-icon>
|
|
保存
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
::deep(.el-input) {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|