首页

src/views/index.vue

@@ -1,194 +1,255 @@
 <template>
   <div class="app-container home">
-    <ul class="block" v-if="sysType == 1">
-      <li @click="jump('/business/inStock')">
-        <div>
-          <i
-            class="el-icon-download"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>入库</p>
-        </div>
-      </li>
-      <li @click="jump('/business/outStock')">
-        <div>
-          <i
-            class="el-icon-upload2"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>出库</p>
-        </div>
-      </li>
-      <li @click="jump('/basicdata/corps')">
-        <div>
-          <i
-            class="el-icon-s-custom"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>新增用户</p>
-        </div>
-      </li>
-      <li @click="jump('/basicdata/goods')">
-        <div>
-          <i
-            class="el-icon-s-cooperation"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>新增商品</p>
-        </div>
-      </li>
-      <li @click="jump('/business/stockTransfer')">
-        <div>
-          <i
-            class="el-icon-connection"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>调拨</p>
-        </div>
-      </li>
-      <li @click="jump('/finance/charge')">
-        <div>
-          <i
-            class="el-icon-wallet"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>收款</p>
-        </div>
-      </li>
-      <li @click="jump('/finance/payment')">
-        <div>
-          <i
-            class="el-icon-money"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>付款</p>
-        </div>
-      </li>
-      <li @click="jump('/finance/contrast')">
-        <div>
-          <i
-            class="el-icon-s-management"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>对账</p>
-        </div>
-      </li>
-      <li @click="jump('/business/goodsTransfer')">
-        <div>
-          <i
-            class="el-icon-takeaway-box"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>货转</p>
-        </div>
-      </li>
-      <li @click="jump('/agreement/agreementStorage')">
-        <div>
-          <i
-            class="el-icon-s-order"
-            style="font-size: 50px; text-align: center"
-          ></i>
-          <p>协议</p>
-        </div>
-      </li>
-    </ul>
-    <div style="width: 30%; float: right" v-if="sysType == 1">
+    <div v-if="sysType == 1">
       <div style="display: flex">
-        <div id="box" style="width: 100%; height: 350px"></div>
+        <div style="width: 70%">
+          <ul class="block" v-if="sysType == 1">
+            <li @click="jump('/business/inStock')">
+              <div>
+                <i
+                  class="el-icon-download"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>入库</p>
+              </div>
+            </li>
+            <li @click="jump('/business/outStock')">
+              <div>
+                <i
+                  class="el-icon-upload2"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>出库</p>
+              </div>
+            </li>
+            <li @click="jump('/basicdata/corps')">
+              <div>
+                <i
+                  class="el-icon-s-custom"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>新增用户</p>
+              </div>
+            </li>
+            <li @click="jump('/basicdata/goods')">
+              <div>
+                <i
+                  class="el-icon-s-cooperation"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>新增商品</p>
+              </div>
+            </li>
+            <li @click="jump('/business/stockTransfer')">
+              <div>
+                <i
+                  class="el-icon-connection"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>调拨</p>
+              </div>
+            </li>
+            <li @click="jump('/finance/charge')">
+              <div>
+                <i
+                  class="el-icon-wallet"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>收款</p>
+              </div>
+            </li>
+            <li @click="jump('/finance/payment')">
+              <div>
+                <i
+                  class="el-icon-money"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>付款</p>
+              </div>
+            </li>
+            <li @click="jump('/finance/contrast')">
+              <div>
+                <i
+                  class="el-icon-s-management"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>对账</p>
+              </div>
+            </li>
+            <li @click="jump('/business/goodsTransfer')">
+              <div>
+                <i
+                  class="el-icon-takeaway-box"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>货转</p>
+              </div>
+            </li>
+            <li @click="jump('/agreement/agreementStorage')">
+              <div>
+                <i
+                  class="el-icon-s-order"
+                  style="font-size: 50px; text-align: center"
+                ></i>
+                <p>协议</p>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div style="width: 30%">
+          <div style="width: 100%" v-if="sysType == 1">
+            <div style="display: flex">
+              <div id="box" style="width: 100%; height: 350px"></div>
 
-        <el-select
-          v-model="select"
-          slot="prepend"
-          size="mini"
-          :select="query()"
-          placeholder="点击切换仓库"
-          style="position: absolute; width: 8%; right: 1%"
-        >
-          <div v-for="(item, index) in warehouse" :key="index">
-            <el-option
-              :label="item.fName"
-              :value="item.fWarehouseid"
-            ></el-option>
+              <el-select
+                v-model="select"
+                slot="prepend"
+                size="mini"
+                :select="query()"
+                placeholder="点击切换仓库"
+                style="position: absolute; width: 8%; right: 1%"
+              >
+                <div v-for="(item, index) in warehouse" :key="index">
+                  <el-option
+                    :label="item.fName"
+                    :value="item.fWarehouseid"
+                  ></el-option>
+                </div>
+              </el-select>
+            </div>
           </div>
-        </el-select>
+        </div>
       </div>
-    </div>
-    <div style="width: 100%; margin-bottom: 50px" v-if="sysType == 1">
-      <el-table
-        :data="tableData"
-        :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
-        :cell-style="cellStyle"
-        style="width: 67.5%; float: left"
-      >
-        <el-table-column
-          prop="refno1"
-          :show-overflow-tooltip="true"
-          label="委托方"
-        ></el-table-column>
-        <el-table-column
-          prop="auditItem"
-          :show-overflow-tooltip="true"
-          label="日期"
-        >
-          <template slot-scope="scope">
-            <span v-if="!scope.row.auditItem">无时间</span>
-            <span v-else>{{ scope.row.auditItem.slice(0, 10) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="refno3"
-          :show-overflow-tooltip="true"
-          label="提单号"
-        ></el-table-column>
-        <el-table-column
-          prop="refno2"
-          :show-overflow-tooltip="true"
-          label="业务类型"
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.refno2 === 'SJRK'">入库</span>
-            <span v-else-if="scope.row.refno2 === 'SJCK'">出库</span>
-            <span v-else-if="scope.row.refno2 === 'HQZY'">货转</span>
-            <span v-else-if="scope.row.refno2 === 'CKDB'">调拨</span>
-            <span v-else-if="scope.row.refno2 === 'CCF'">仓储费</span>
-            <span v-else-if="scope.row.refno2 === 'HWTG'">货物通关</span>
-            <span v-else-if="scope.row.refno2 === 'ZYF'">作业费</span>
-            <span v-else-if="scope.row.refno2 === 'SF'">收费</span>
-            <span v-else-if="scope.row.refno2 === 'DZ'">对账</span>
-            <span v-else-if="scope.row.refno2 === 'FF'">付费</span>
-            <span v-else-if="scope.row.refno2 === 'JSCCF'">计算仓储费</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="address" label="操作" width="80">
-          <template slot-scope="scope">
-            <span style="cursor: pointer" @click="approval(scope.row)"
-              >查看详情</span
+      <div style="display: flex">
+        <div style="width: 70%">
+          <div>
+            <div
+              style="
+                display: flex;
+                color: #515a6e;
+                font-weight: 600;
+                background-color: #f8f8f9;
+                height: 42.6px;
+                font-size: 13px;
+                justify-content: space-between;
+                border-bottom: 1px dashed #dfe6ec;
+              "
+            >
+              <div class="home_stock_table">委托方</div>
+              <div class="home_stock_table">日期</div>
+              <div class="home_stock_table">提单号</div>
+              <div class="home_stock_table">业务类型</div>
+              <div class="home_stock_table">操作</div>
+            </div>
+            <div v-if="tableData.length > 0">
+              <div
+                style="
+                  display: flex;
+                  height: 42.6px;
+                  border-bottom: 1px dashed #dfe6ec;
+                "
+                v-for="(item, index) in tableData"
+                :key="index"
+              >
+                <div class="home_stock_table">{{ item.refno1 }}</div>
+                <div class="home_stock_table">
+                  {{ item.auditItem }}/div>
+                  <div class="home_stock_table">{{ item.refno3 }}</div>
+                  <div class="home_stock_table">{{ item.refno2 }}</div>
+                  <div class="home_stock_table">操作</div>
+                </div>
+              </div>
+            </div>
+            <div v-else style="display: flex;justify-content:center;height: 213px;border-bottom: 2px solid #dfe6ec;">
+              <div style="align-self: center;color: #909399;font-size:14px;">
+                        暂无数据
+              </div>
+              
+            </div>
+          </div>
+          <!-- <el-table
+            :data="tableData"
+            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
+            :cell-style="cellStyle"
+          >
+            <el-table-column
+              prop="refno1"
+              :show-overflow-tooltip="true"
+              label="委托方"
+            ></el-table-column>
+            <el-table-column
+              prop="auditItem"
+              :show-overflow-tooltip="true"
+              label="日期"
             >
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-table
-        :data="tableDataTwo"
-        :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
-        :cell-style="cellStyle"
-        style="width: 30%; float: right; margin-left: 20px"
-      >
-        <el-table-column
-          prop="noticeTitle"
-          :show-overflow-tooltip="true"
-          label="消息中心"
-        />
-        <el-table-column prop="address" label="操作" width="80">
-          <template slot-scope="scope">
-            <span
-              @click="querytoDo(scope.row.noticeContent)"
-              style="cursor: pointer"
-              >查看详情</span
+              <template slot-scope="scope">
+                <span v-if="!scope.row.auditItem">无时间</span>
+                <span v-else>{{ scope.row.auditItem.slice(0, 10) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="refno3"
+              :show-overflow-tooltip="true"
+              label="提单号"
+            ></el-table-column>
+            <el-table-column
+              prop="refno2"
+              :show-overflow-tooltip="true"
+              label="业务类型"
             >
-          </template>
-        </el-table-column>
-      </el-table>
+              <template slot-scope="scope">
+                <span v-if="scope.row.refno2 === 'SJRK'">入库</span>
+                <span v-else-if="scope.row.refno2 === 'SJCK'">出库</span>
+                <span v-else-if="scope.row.refno2 === 'HQZY'">货转</span>
+                <span v-else-if="scope.row.refno2 === 'CKDB'">调拨</span>
+                <span v-else-if="scope.row.refno2 === 'CCF'">仓储费</span>
+                <span v-else-if="scope.row.refno2 === 'HWTG'">货物通关</span>
+                <span v-else-if="scope.row.refno2 === 'ZYF'">作业费</span>
+                <span v-else-if="scope.row.refno2 === 'SF'">收费</span>
+                <span v-else-if="scope.row.refno2 === 'DZ'">对账</span>
+                <span v-else-if="scope.row.refno2 === 'FF'">付费</span>
+                <span v-else-if="scope.row.refno2 === 'JSCCF'">计算仓储费</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="操作" width="80">
+              <template slot-scope="scope">
+                <span style="cursor: pointer" @click="approval(scope.row)"
+                  >查看详情</span
+                >
+              </template>
+            </el-table-column>
+          </el-table> -->
+        </div>
+        <div style="width: 30%">
+          <el-table
+            :data="tableDataTwo"
+            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
+            :cell-style="cellStyle"
+            style="margin-left: 20px"
+          >
+            <el-table-column
+              prop="noticeTitle"
+              :show-overflow-tooltip="true"
+              label="消息中心"
+            />
+            <el-table-column prop="address" label="操作" width="80">
+              <template slot-scope="scope">
+                <span
+                  @click="querytoDo(scope.row.noticeContent)"
+                  style="cursor: pointer"
+                  >查看详情</span
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div style="display: flex">
+        <div style="width: 70%"></div>
+        <div style="width: 30%"></div>
+      </div>
     </div>
+    <div style="width: 100%; margin-bottom: 50px" v-if="sysType == 1"></div>
     <div style="width: 100%; float: left; margin-top: 20px" v-if="sysType == 1">
       <div style="display: flex">
         <div
@@ -440,7 +501,11 @@
                 backgroundColor: index % 2 == 0 ? '#fafbfd' : '#FFFFFF',
               }"
             >
-              <div style="width: 30%" @click="goPage(item.id)"><el-link type="primary" :underline="false">{{ item.mblno }}</el-link></div>
+              <div style="width: 30%" @click="goPage(item.id)">
+                <el-link type="primary" :underline="false">{{
+                  item.mblno
+                }}</el-link>
+              </div>
               <div style="width: 20%">{{ item.carregNo }}</div>
               <div style="width: 15%; color: #67c23a">
                 {{ item.orderStatus | statusType }}
@@ -602,11 +667,11 @@ export default {
     this.inquiry();
   },
   methods: {
-    goPage(id){
-        this.$router.push({
-            path: "/track/cabinet",
-            query: { id: id },
-          });
+    goPage(id) {
+      this.$router.push({
+        path: "/track/cabinet",
+        query: { id: id },
+      });
     },
     //跳转审批页面
     approval(row) {
@@ -1049,13 +1114,10 @@ export default {
 
 <style scoped lang="scss">
 .block {
-  width: 68%;
-  float: left;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  height: 350px;
-
   li:hover {
     background-color: #025184;
   }
@@ -1085,7 +1147,7 @@ export default {
     color: #ffffff;
     border-radius: 10px;
     cursor: pointer;
-
+    margin-bottom: 15px;
     div {
       margin-top: 40px;
 
@@ -1228,4 +1290,10 @@ export default {
   max-width: 100%;
   height: auto;
 }
+.home_stock_table {
+  display: flex;
+  width: 20%;
+  justify-content: center;
+  align-self: center;
+}
 </style>