修改运单页面

src/views/baggageManagement/departure/station/index.vue

@@ -1,276 +1,11 @@
 <template>
-  <div class="station">
-    <div class="station-head">
-      <div class="station-head-title">运单基本信息</div>
-      <div class="station-head-content flex">
-        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
-      </div>
-    </div>
-    <div class="station-status flex">
-      <div class="station-status-info flex-wrap">
-        <div class="manageTitle">运单跟踪信息</div>
-        <div class="status">正常</div>
-      </div>
-      <div class="station-status-search">
-        <Search @clear="clear" @search="search" />
-      </div>
-    </div>
-    <div class="station-list flex-wrap">
-      <div class="station-list-left">
-        <div class="title flex-wrap">
-          <div class="title-list">航班号CA1001</div>
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
-        </div>
-        <Steps :datas="datas" />
-      </div>
-      <div class="station-list-right">
-        <div class="title flex-wrap">
-          <div class="title-list">航班号CA1001</div>
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
-        </div>
-        <Steps :datas="datas1" />
-      </div>
-    </div>
-    <div class="station-list flex-wrap">
-      <div class="station-list-left">
-        <div class="title flex-wrap">
-          <div class="title-list">航班号CA1001</div>
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
-        </div>
-        <Steps :datas="datas" />
-      </div>
-      <div class="station-list-right">
-        <div class="title flex-wrap">
-          <div class="title-list">航班号CA1001</div>
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
-        </div>
-        <Steps :datas="datas1" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table :tableHeader="tableHeader" :tableData="tableData" />
-    </div>
-  </div>
+  <div></div>
 </template>
+<script lang="ts">
+import { defineComponent } from "vue";
 
-<script setup lang="ts">
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import { ElMessage } from "element-plus";
-const dataInfo = [
-  {
-    id: 1,
-    name: "运单",
-    value: "FA56888829",
-  },
-  {
-    id: 2,
-    name: "货代公司",
-    value: "深圳市联运通货有限公司",
-  },
-  {
-    id: 3,
-    name: "品名",
-    value: "电路板、手机外壳",
-  },
-  {
-    id: 4,
-    name: "特货信息",
-    value: "特",
-  },
-  {
-    id: 5,
-    name: "始发机场",
-    value: "SZX",
-  },
-  {
-    id: 6,
-    name: "目的机场",
-    value: "CTU",
-  },
-  {
-    id: 7,
-    name: "货物数量",
-    value: "7件",
-  },
-  {
-    id: 8,
-    name: "货物总重",
-    value: "82KG",
-  },
-];
-const datas = [
-  {
-    id: 1,
-    name: "收货核单",
-    flag: true,
-    labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 2,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 3,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 4,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 5,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 6,
-    name: "安检",
-    flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 7,
-    name: "安检安检",
-    flag: false,
-    labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-];
-const datas1 = [
-  {
-    id: 1,
-    name: "收货核单",
-    flag: true,
-    labelWidth: 100,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 2,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 3,
-    name: "安检",
-    flag: true,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-  {
-    id: 4,
-    name: "安检",
-    flag: false,
-    children: ["A32", "534件", "通过", "10:25"],
-  },
-];
-const tableHeader = [
-  { label: "账号组名称", key: "appName" },
-  { label: "账号组描述", key: "appDesc", lableClass: "scoreColumn" },
-  { label: "appId", key: "appId" },
-];
-const tableData = [
-  {
-    id: 1,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-  {
-    id: 2,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-  {
-    id: 3,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-  {
-    id: 4,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-];
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
-const clear = () => {
-  ElMessage.success(`清除`);
-};
+export default defineComponent({
+  setup() {},
+});
 </script>
-
-<style lang="scss" scoped>
-.station {
-  &-head {
-    height: 144px;
-    background: #410425;
-    padding: 24px 30px;
-    color: #ffffff;
-    &-title {
-      font-size: 18px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      margin-bottom: 40px;
-    }
-  }
-  &-status {
-    margin: 24px 0;
-    line-height: 32px;
-    .status {
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #519f6b;
-    }
-  }
-  &-list {
-    margin-bottom: 8px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    .title {
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #101116;
-      margin-bottom: 28px;
-      &-list {
-        margin-right: 50px;
-      }
-    }
-    &-left {
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-      width: 1090px;
-      margin-right: 8px;
-    }
-    &-right {
-      flex: 1;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    .scoreColumn {
-      background: #eef3d6;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/baggageManagement/departure/waybill/index.vue

@@ -1,11 +1,276 @@
 <template>
-  <div>123123</div>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  setup() {},
-});
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "账号组名称", key: "appName" },
+  { label: "账号组描述", key: "appDesc", lableClass: "scoreColumn" },
+  { label: "appId", key: "appId" },
+];
+const tableData = [
+  {
+    id: 1,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 2,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 3,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 4,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>