u

code/container-ocr/ocr-vue/src/views/container/update-dialog.vue

@@ -0,0 +1,103 @@
+<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>