yf-admin-ui/src/views/iosBasicData/boxDynamic/index.vue

<template>
  <div class="pageBack">
    <div class="gradient-background">
      <el-form ref="query" :model="query" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="Release Ref">
              <el-input class="rounded-input" v-model="query.containerNumber" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Container">
              <el-input class="rounded-input" v-model="query.code" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="primary" round @click="search">Search</el-button>
              <el-button type="success" round @click="openReport">Download</el-button>
              <el-button v-if="roleName.includes('admin')" type="danger" round @click="designReport">Design Report</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding: 20px;">
      <el-form ref="form" :model="form" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="Type/Quantity">
              <el-input class="rounded-input" v-model="form.boxTypeQuantityOne" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Picked-up">
              <el-input class="rounded-input" v-model="form.suitcaseNum" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Await">
              <el-input class="rounded-input" v-model="form.notSuitcaseNum" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Condition">
              <el-input class="rounded-input" v-model="form.boxCondition" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="POL">
              <el-input class="rounded-input" v-model="form.polCname" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="POD">
              <el-input class="rounded-input" v-model="form.podCname" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding:0 20px 20px 20px;">
      <avue-crud class="diy_table" :option="option" :data="form.tradingBoxItemsList"> </avue-crud>
    </div>
    <report ref="report" :id="form.id" businessValue="OW-N" classifyCode="动态查询"></report>
    <reports :id="form.id" :assemblyForm="form" businessValue="OW-N" ref="reports"></reports>
 </div>
</template>

<script>
import { containerDynamicInquiry } from "@/api/iosBasicData/boxDynamic.js";
import report from "./components/report.vue";
import reports from "@/components/boxManagement/reports.vue";
export default {
  name: "箱动态查询",
  components: { report,reports },
  data() {
    return {
      roleName: localStorage.getItem("roleName"),
      query: {},
      form: {
        tradingBoxItemsList: []
      },
      option: {
        header: false,
        menu: false,
        align: "center",
        headerAlign: "center",
        border: true,
        index: true,
        indexLabel: "Serial",
        indexWidth: 60,
        stripe: true,
        emptyText: "No Data",
        maxHeight: 600,
        column: [
          {
            label: "Container",
            prop: "code",
            overHidden: true
          },
          {
            label: "Type",
            prop: "boxType",
            overHidden: true
          },
          {
            label: "POL Depot",
            prop: "polCyCname",
            overHidden: true
          },
          {
            label: "Gate Out",
            prop: "polPreAppearanceDate",
            overHidden: true
          },
          {
            label: "ETD",
            prop: "etd",
            overHidden: true
          },
          {
            label: "ATD",
            prop: "actualEtd",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            overHidden: true
          },
          {
            label: "ETA",
            prop: "eta",
            overHidden: true
          },
          {
            label: "ATA",
            prop: "actualEta",
            overHidden: true
          },
          {
            label: "Gatein",
            prop: "podEmptyContainerReturnDate",
            overHidden: true
          },
          {
            label: "POD Depot",
            prop: "podStationCname",
            overHidden: true
          },
          {
            label: "Days In Use",
            prop: "podBoxUseDays",
            overHidden: true
          }
        ]
      }
    };
  },

  created() {},
  methods: {
    openReport() {
      if (!this.form.id) {
        return this.$message.error("未查询数据，不允许打开报表!");
      }
      this.$refs.report.openDialog();
    },
    designReport() {
      if (!this.form.id) {
        return this.$message.error("未查询数据，不允许打开设计报表!");
      }
      this.$refs.reports.openDialog();
    },
    search() {
      if (!this.query.containerNumber) {
        return this.$message.error("Please enter Release Ref!");
      }
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      containerDynamicInquiry(this.query)
        .then(res => {
          this.form = res.data.data;
        })
        .finally(() => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.pageBack {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.gradient-background {
  /* 背景渐变效果，从右上角到左下角 */
  background: linear-gradient(to bottom left, #a1d1fe, #ffffff);
  padding: 42px 20px 20px 20px;
}
.rounded-input ::v-deep .el-input__inner {
  border-radius: 20px !important; /* 使用 !important 确保覆盖默认样式 */
}
.el-form ::v-deep .el-form-item__label {
  font-weight: 700;
  font-size: 20px;
  color: #606266;
}
.avue-crud ::v-deep .el-table th {
  color: #ffffff;
  background-color: #001e63;
}
</style>