完成订单管理页面的布局和一些功能

admin/src/layout/components/NavbarItem.vue

@@ -84,10 +84,13 @@ export default {
   data() {
     return {
       isCollapse: false,
-      ItemIndex: "/home",
+      ItemIndex: "",
     };
   },
-  mounted() {},
+  mounted() {
+    console.log(this.$route.path);
+    this.ItemIndex = this.$route.path;
+  },
   methods: {
     select(index, indexPath) {
       this.ItemIndex = index;

admin/src/views/home/index.vue

@@ -956,4 +956,9 @@ export default {
     top: 35px !important;
   }
 }
+.el-message-box__wrapper {
+  .el-button--primary {
+    background-color: rgba(41, 109, 227, 1);
+  }
+}
 </style>

admin/src/views/inform/index.vue

@@ -96,7 +96,7 @@ export default {
         {
           date: "续住通知",
           name: "王小虎",
-          address: "2022.07.02 08:50:50",
+          address: "2022.07.02 08:55:50",
         },
         {
           date: "续住通知",
@@ -118,7 +118,7 @@ export default {
           name: "王小虎",
           address: "2022.06.30 09:50:50",
         },
-        ,
+
         {
           date: "续住通知",
           name: "王小虎",
@@ -129,7 +129,7 @@ export default {
           name: "王小虎",
           address: "2022.06.30 08:55:50",
         },
-        ,
+
         {
           date: "续住通知",
           name: "王小虎",
@@ -191,6 +191,306 @@ export default {
           name: "王小虎",
           address: "2022.06.30 08:50:50",
         },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
+        {
+          date: "续住通知",
+          name: "王小虎",
+          address: "2022.06.30 08:50:50",
+        },
       ],
     };
   },
@@ -212,8 +512,9 @@ export default {
     },
 
     handleCurrentChange(val) {
-      this.data = this.tableData.slice((val - 1) * 9, val * 9);
-      // console.log(`当前页: ${val}`);
+      this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      console.log(`当前页: ${val}`);
+      console.log(this.data);
     },
   },
 };

admin/src/views/order/index.vue

@@ -1,12 +1,798 @@
 <template>
-  <div>order</div>
+  <div class="inform">
+    <el-card class="box-card" style="width: 1612px; height: 950px">
+      <div slot="header" class="clearfix">
+        <div class="inform-title">订单管理</div>
+        <div class="inform-header">
+          <el-input placeholder="请输入时间">
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button type="primary">查询</el-button>
+        </div>
+      </div>
+      <div class="inform-body">
+        <div class="order-top">
+          <el-input
+            placeholder="请输入内容"
+            style="width: 261px"
+            v-model="value"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button>查询</el-button>
+          <div class="paydate">
+            <span class="demonstration">支付时间</span>
+            <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </div>
+          <div class="paydate">
+            <span class="demonstration">创建时间</span>
+            <el-date-picker
+              v-model="value2"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </div>
+          <div class="state">
+            <span>状态</span>
+            <el-select v-model="state" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="export">导出订单</div>
+        </div>
+        <div class="inform-table">
+          <el-table
+            :data="data"
+            max-height="576"
+            height="576"
+            style="width: 1550px"
+            stripe
+            :cell-style="rowbg"
+            :header-cell-style="{
+              color: ' rgba(0, 0, 0, 1)',
+              background: 'rgba(240, 243, 247, 1)',
+            }"
+          >
+            <el-table-column
+              type="selection"
+              width="60"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="orderNum"
+              width="120"
+              label="订单号"
+              align="center"
+            >
+            </el-table-column>
+
+            <el-table-column
+              prop="state"
+              width="100"
+              align="center"
+              label="状态"
+            >
+            </el-table-column>
+
+            <el-table-column
+              prop="room"
+              width="160"
+              align="center"
+              label="房间"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="electricity"
+              align="center"
+              width="130"
+              label="电费（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="water"
+              width="130"
+              align="center"
+              label="水费（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="imprest"
+              align="center"
+              width="150"
+              label="收预付款（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="refund"
+              width="150"
+              align="center"
+              label="退预付款（元）"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="create"
+              width="180"
+              align="center"
+              label="创建时间"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="pay"
+              width="180"
+              align="center"
+              label="支付时间"
+            >
+            </el-table-column>
+            <el-table-column prop="address" align="center" label="操作">
+              <template slot-scope="scope">
+                <span
+                  @click="handleEdit(scope.$index, scope.row)"
+                  class="operate"
+                >
+                  详情
+                </span>
+                <el-dialog
+                  title="订单详情"
+                  :visible.sync="dialogVisible"
+                  width="30%"
+                  :before-close="handleClose"
+                >
+                  <div class="userinfo">用户信息</div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">姓名</div>
+                      <el-input value="刘老师"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">联系方式</div>
+                      <el-input value="13234564"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">订单号</div>
+                      <el-input value="261691612"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">预付款金额（元）</div>
+                      <el-input value="20.00"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">入住时间</div>
+                      <el-input value="2022-07-26"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">离住时间</div>
+                      <el-input value="2022-07-26"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">入住天数</div>
+                      <el-input value="1"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">支付时间</div>
+                      <el-input value="2022-07-27   15:15:15"></el-input>
+                    </div>
+                  </div>
+                  <div class="rate">水费明细</div>
+                  <div class="water">
+                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
+                  </div>
+                  <el-table
+                    :data="waterTable"
+                    max-height="93"
+                    style="width: 832px"
+                    stripe
+                    :cell-style="rowbg"
+                    :header-cell-style="{
+                      color: ' rgba(0, 0, 0, 1)',
+                      background: 'rgba(240, 243, 247, 1)',
+                    }"
+                  >
+                    <el-table-column
+                      prop="start"
+                      width="100"
+                      label="始码"
+                      align="center"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="end"
+                      width="100"
+                      align="center"
+                      label="终码"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="flow"
+                      align="center"
+                      label="水量（吨）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="pirce"
+                      align="center"
+                      label="水价（元）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="subsidy"
+                      align="center"
+                      label="补助量（吨）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="production"
+                      align="center"
+                      label="产生水费（元）"
+                    >
+                    </el-table-column>
+                  </el-table>
+
+                  <div class="rate">电费明细</div>
+                  <div class="water">
+                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
+                  </div>
+                  <el-table
+                    :data="waterTable"
+                    max-height="93"
+                    style="width: 832px"
+                    stripe
+                    :cell-style="rowbg"
+                    :header-cell-style="{
+                      color: ' rgba(0, 0, 0, 1)',
+                      background: 'rgba(240, 243, 247, 1)',
+                    }"
+                  >
+                    <el-table-column
+                      prop="start"
+                      width="100"
+                      label="始码"
+                      align="center"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="end"
+                      width="100"
+                      align="center"
+                      label="终码"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="flow"
+                      align="center"
+                      label="电量（度）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="pirce"
+                      align="center"
+                      label="电价（元）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="subsidy"
+                      align="center"
+                      label="补助量（度）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="production"
+                      align="center"
+                      label="产生水费（元）"
+                    >
+                    </el-table-column>
+                  </el-table>
+                </el-dialog>
+
+                <span
+                  @click="handleDelete(scope.$index, scope.row)"
+                  class="operate"
+                >
+                  删除
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="block">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            current-page.sync="1"
+            :page-size="8"
+            layout="prev, pager, next, jumper"
+            :total="tableData.length"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "Order",
+  name: "Inform",
+  data() {
+    return {
+      data: [],
+      tableData: [
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+        {
+          orderNum: "116161656",
+          state: "已入住",
+          room: "17栋1单元2层04房",
+          electricity: "2.09",
+          water: "0.00",
+          imprest: "20.00",
+          refund: "20.00",
+          create: "2022.07.02 08:50:50",
+          pay: "2022.07.02 08:50:50",
+        },
+      ],
+
+      options: [
+        {
+          value: "选项1",
+          label: "已入住",
+        },
+        {
+          value: "选项2",
+          label: "已入住",
+        },
+        {
+          value: "选项3",
+          label: "已入住",
+        },
+        {
+          value: "选项4",
+          label: "已入住",
+        },
+        {
+          value: "选项5",
+          label: "已入住",
+        },
+      ],
+
+      state: "",
+      value: "",
+      value1: "",
+      value2: "",
+      dialogVisible: false,
+      waterTable: [
+        {
+          start: 36,
+          end: 36,
+          flow: 20,
+          pirce: 2.0,
+          subsidy: 5,
+          production: 2,
+        },
+      ],
+    };
+  },
+  mounted() {
+    document.getElementsByClassName(
+      "el-pagination__jump"
+    )[0].childNodes[0].nodeValue = "跳转到";
+    this.handleCurrentChange(1);
+  },
+  methods: {
+    allRead($event, index) {
+      this.className = this.className.map((item) => (item = ""));
+      this.className[index] = "active";
+    },
+    rowbg(row) {
+      if (row.rowIndex % 2 != 0) {
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
+      }
+    },
+
+    handleCurrentChange(val) {
+      this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      // console.log(`当前页: ${val}`);
+    },
+
+    // 表格操作
+    handleEdit(index, row) {
+      console.log(index, row);
+      this.dialogVisible = true;
+    },
+
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+    handleClose(done) {
+      this.dialogVisible = false;
+    },
+  },
 };
 </script>
 
-<style>
-</style>
+<style lang="scss" scoped>
+.inform /deep/ .el-card {
+  width: 1612px;
+  height: 950px;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+  border-radius: 8px;
+  .clearfix {
+    height: 96px;
+    width: 100%;
+    border-bottom: 1px solid rgba(204, 204, 204, 1);
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .inform-title {
+      width: 96px;
+      height: 36px;
+      color: rgba(0, 0, 0, 1);
+      font-size: 24px;
+      font-weight: 500;
+      margin-left: 33px;
+    }
+    .inform-header {
+      display: flex;
+      margin-right: 29px;
+      .el-button {
+        margin-left: 9px;
+        background-color: rgba(41, 109, 227, 1);
+      }
+    }
+  }
+  .inform-body {
+    .order-top {
+      display: flex;
+      align-items: center;
+      padding: 33px 29px 34px 33px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #000;
+      .el-button {
+        background-color: rgba(41, 109, 227, 1);
+        color: #fff;
+        margin-left: 9px;
+      }
+      .paydate {
+        margin: 0 0 0 44px;
+        .el-date-editor {
+          margin-left: 7px;
+          width: 236px;
+          .el-range__icon {
+            display: none;
+          }
+        }
+      }
+      .state {
+        margin-left: 30px;
+        .el-input {
+          width: 112px;
+        }
+      }
+      .export {
+        width: 94px;
+        height: 32px;
+        opacity: 1;
+        color: #fff;
+        text-align: center;
+        line-height: 32px;
+        background: rgba(41, 109, 227, 1);
+        cursor: pointer;
+        border-radius: 2px;
+        margin-left: 221px;
+      }
+    }
+    .inform-table {
+      .el-table {
+        font-weight: 400;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 1);
+        margin: 0 auto;
+        .el-table__header-wrapper {
+          border-radius: 5px;
+        }
+        tr {
+          height: 64px;
+          td {
+            .cell {
+              .operate {
+                color: rgba(41, 109, 227, 1);
+                cursor: pointer;
+                font-size: 16px;
+                font-weight: 400;
+                padding: 0 5px;
+              }
+              .el-dialog__wrapper {
+                overflow: hidden;
+                .el-dialog {
+                  width: 968px !important;
+                  margin-top: 126px !important;
+                  height: 914px;
+                  opacity: 1;
+                  background: rgba(255, 255, 255, 1);
+                  box-shadow: none;
+                  .el-dialog__header {
+                    height: 83px;
+                    border-bottom: 1px solid rgba(230, 230, 230, 1);
+
+                    span {
+                      float: left;
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: #000;
+                    }
+
+                    .el-dialog__close {
+                      width: 35px;
+                      height: 35px;
+                      &::before {
+                        font-size: 24px;
+                        color: #000;
+                      }
+                    }
+                  }
+                  .el-dialog__body {
+                    padding: 0 38px;
+                    .userinfo {
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(0, 0, 0, 1);
+                      text-align: left;
+                      margin-top: 15px;
+                    }
+                    .info {
+                      display: flex;
+                      .user {
+                        .name {
+                          text-align: left;
+                          padding: 12px 0;
+                        }
+                        .el-input {
+                          width: 283px;
+                          height: 38px;
+                          opacity: 1;
+                          margin-right: 81px;
+                          .el-input__inner {
+                            color: #000;
+                          }
+                        }
+                      }
+                    }
+                    .rate {
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(0, 0, 0, 1);
+                      text-align: left;
+                      margin: 15px 0;
+                    }
+                    .water {
+                      text-align: left;
+                      font-size: 16px;
+                      font-weight: 400;
+                      color: rgba(0, 0, 0, 1);
+                    }
+                    .el-table {
+                      margin: 10px 0;
+                      tr {
+                        height: 48px;
+                      }
+                      .el-table__body-wrapper {
+                        overflow: visible;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .el-dialog__title {
+                color: rgba(41, 109, 227, 1);
+                cursor: pointer;
+                padding: 10px 18px 0 18px;
+              }
+            }
+          }
+          .el-checkbox__inner {
+            width: 18px;
+            height: 18px;
+            &::after {
+              transform: rotate(45deg) scaleY(1.5);
+              top: 3px;
+              left: 5px;
+            }
+          }
+        }
+        th {
+          font-weight: 400;
+        }
+      }
+    }
+    .block {
+      height: 36px;
+      margin: 66px 29px 0 0;
+      float: right;
+      .el-pagination {
+        padding: 0;
+        button {
+          width: 36px;
+          background: #fff;
+          color: rgba(0, 0, 0, 1);
+          height: 36px;
+          font-size: 14px;
+          border: 1px solid rgba(112, 112, 112, 1);
+          border-radius: 8px;
+        }
+        ul {
+          .active {
+            background: #fff;
+            color: rgba(0, 97, 255, 1);
+            border: 1px solid rgba(0, 97, 255, 1);
+            box-sizing: border-box;
+          }
+          .el-icon {
+            border: none;
+          }
+          li {
+            background: #fff;
+            color: rgba(0, 0, 0, 1);
+            width: 36px;
+            height: 36px;
+            font-size: 14px;
+            border: 1px solid rgba(112, 112, 112, 1);
+            border-radius: 8px;
+            line-height: 36px;
+          }
+        }
+        .el-pagination__jump {
+          color: rgba(0, 0, 0, 1);
+          font-size: 16px;
+          margin-left: 10px;
+          font-weight: 400;
+          height: 36px;
+          .el-input {
+            width: 65px;
+            height: 36px;
+            margin: 0 10px;
+            input {
+              width: 65px;
+              height: 36px;
+              border: 1px solid rgba(0, 0, 0, 1);
+              border-radius: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.box-card {
+  /deep/ .el-card__header {
+    padding: 0;
+  }
+  /deep/ .el-card__body {
+    padding: 0;
+  }
+}
+</style>>

admin/src/views/staff/index.vue

@@ -1,13 +1,746 @@
 <template>
-    <div>System</div>
+  <div class="inform">
+    <el-card class="box-card" style="width: 1612px; height: 950px">
+      <div slot="header" class="clearfix">
+        <div class="inform-title">员工管理</div>
+      </div>
+      <div class="inform-body">
+        <div class="order-top">
+          <div class="staff-inquire">
+            <el-input
+              placeholder="请输入手机号码或员工姓名"
+              style="width: 261px"
+              v-model="value"
+            >
+              <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+            <el-button>查询</el-button>
+          </div>
+          <div class="export" @click="addStaff">添加员工</div>
+          <el-dialog
+            title="添加员工"
+            :visible.sync="addStaffShow"
+            :before-close="addClose"
+          >
+            <div class="info">
+              <div class="user">
+                <div class="name">员工姓名</div>
+                <el-input value="刘老师"></el-input>
+              </div>
+              <div class="user">
+                <div class="name">手机号码</div>
+                <el-input value="13234564"></el-input>
+              </div>
+            </div>
+            <div class="info">
+              <div class="user">
+                <div class="name">职位</div>
+                <el-select v-model="value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click.stop="addStaffShow = false" class="cancel"
+                >取消</el-button
+              >
+              <el-button @click.stop="addStaffShow = false">完成</el-button>
+            </span>
+          </el-dialog>
+        </div>
+        <div class="inform-table">
+          <el-table
+            :data="data"
+            max-height="576"
+            height="576"
+            style="width: 1550px"
+            stripe
+            :cell-style="rowbg"
+            :header-cell-style="{
+              color: ' rgba(0, 0, 0, 1)',
+              background: 'rgba(240, 243, 247, 1)',
+            }"
+          >
+            <el-table-column
+              prop="phone"
+              width="300"
+              label="手机号码"
+              align="center"
+            >
+            </el-table-column>
+
+            <el-table-column prop="staff" align="center" label="员工姓名">
+            </el-table-column>
+
+            <el-table-column prop="position" align="center" label="职位">
+            </el-table-column>
+            <el-table-column prop="address" align="center" label="操作">
+              <template slot-scope="scope">
+                <span
+                  @click="handleEdit(scope.$index, scope.row)"
+                  class="operate"
+                >
+                  编辑
+                </span>
+                <el-dialog
+                  title="订单详情"
+                  :visible.sync="dialogVisible"
+                  width="30%"
+                  :before-close="handleClose"
+                >
+                  <div class="userinfo">用户信息</div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">姓名</div>
+                      <el-input value="刘老师"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">联系方式</div>
+                      <el-input value="13234564"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">订单号</div>
+                      <el-input value="261691612"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">预付款金额（元）</div>
+                      <el-input value="20.00"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">入住时间</div>
+                      <el-input value="2022-07-26"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">离住时间</div>
+                      <el-input value="2022-07-26"></el-input>
+                    </div>
+                  </div>
+                  <div class="info">
+                    <div class="user">
+                      <div class="name">入住天数</div>
+                      <el-input value="1"></el-input>
+                    </div>
+                    <div class="user">
+                      <div class="name">支付时间</div>
+                      <el-input value="2022-07-27   15:15:15"></el-input>
+                    </div>
+                  </div>
+                  <div class="rate">水费明细</div>
+                  <div class="water">
+                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
+                  </div>
+                  <el-table
+                    :data="waterTable"
+                    max-height="93"
+                    style="width: 832px"
+                    stripe
+                    :cell-style="rowbg"
+                    :header-cell-style="{
+                      color: ' rgba(0, 0, 0, 1)',
+                      background: 'rgba(240, 243, 247, 1)',
+                    }"
+                  >
+                    <el-table-column
+                      prop="start"
+                      width="100"
+                      label="始码"
+                      align="center"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="end"
+                      width="100"
+                      align="center"
+                      label="终码"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="flow"
+                      align="center"
+                      label="水量（吨）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="pirce"
+                      align="center"
+                      label="水价（元）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="subsidy"
+                      align="center"
+                      label="补助量（吨）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="production"
+                      align="center"
+                      label="产生水费（元）"
+                    >
+                    </el-table-column>
+                  </el-table>
+
+                  <div class="rate">电费明细</div>
+                  <div class="water">
+                    表计：101 楼层：12栋1单元2层01 抄表时间：2022-07-27 15:15:15
+                  </div>
+                  <el-table
+                    :data="waterTable"
+                    max-height="93"
+                    style="width: 832px"
+                    stripe
+                    :cell-style="rowbg"
+                    :header-cell-style="{
+                      color: ' rgba(0, 0, 0, 1)',
+                      background: 'rgba(240, 243, 247, 1)',
+                    }"
+                  >
+                    <el-table-column
+                      prop="start"
+                      width="100"
+                      label="始码"
+                      align="center"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="end"
+                      width="100"
+                      align="center"
+                      label="终码"
+                    >
+                    </el-table-column>
+
+                    <el-table-column
+                      prop="flow"
+                      align="center"
+                      label="电量（度）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="pirce"
+                      align="center"
+                      label="电价（元）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="subsidy"
+                      align="center"
+                      label="补助量（度）"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      prop="production"
+                      align="center"
+                      label="产生水费（元）"
+                    >
+                    </el-table-column>
+                  </el-table>
+                </el-dialog>
+
+                <span
+                  @click="handleDelete(scope.$index, scope.row)"
+                  class="operate"
+                >
+                  删除
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="block">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            current-page.sync="1"
+            :page-size="8"
+            layout="prev, pager, next, jumper"
+            :total="tableData.length"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'System'
+  name: "Inform",
+  data() {
+    return {
+      data: [],
+      tableData: [
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+        {
+          phone: 13602320232,
+          staff: "刘德华",
+          position: "歌星",
+        },
+      ],
 
-}
+      options: [
+        {
+          value: "选项1",
+          label: "已入住",
+        },
+        {
+          value: "选项2",
+          label: "已入住",
+        },
+        {
+          value: "选项3",
+          label: "已入住",
+        },
+        {
+          value: "选项4",
+          label: "已入住",
+        },
+        {
+          value: "选项5",
+          label: "已入住",
+        },
+      ],
+
+      state: "",
+      value: "",
+      value1: "",
+      value2: "",
+      dialogVisible: false,
+      waterTable: [
+        {
+          start: 36,
+          end: 36,
+          flow: 20,
+          pirce: 2.0,
+          subsidy: 5,
+          production: 2,
+        },
+      ],
+      addStaffShow: false,
+    };
+  },
+  mounted() {
+    document.getElementsByClassName(
+      "el-pagination__jump"
+    )[0].childNodes[0].nodeValue = "跳转到";
+    this.handleCurrentChange(1);
+  },
+  methods: {
+    allRead($event, index) {
+      this.className = this.className.map((item) => (item = ""));
+      this.className[index] = "active";
+    },
+    rowbg(row) {
+      if (row.rowIndex % 2 != 0) {
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
+      }
+    },
+
+    handleCurrentChange(val) {
+      this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      // console.log(`当前页: ${val}`);
+    },
+
+    // 表格操作
+    handleEdit(index, row) {
+      console.log(index, row);
+      this.dialogVisible = true;
+    },
+
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+    handleClose(done) {
+      this.dialogVisible = false;
+    },
+
+    // 添加员工
+    addStaff() {
+      this.addStaffShow = true;
+    },
+    addClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-</style>
+.inform /deep/ .el-card {
+  width: 1612px;
+  height: 950px;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+  border-radius: 8px;
+  .clearfix {
+    height: 96px;
+    width: 100%;
+    border-bottom: 1px solid rgba(204, 204, 204, 1);
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .inform-title {
+      width: 96px;
+      height: 36px;
+      color: rgba(0, 0, 0, 1);
+      font-size: 24px;
+      font-weight: 500;
+      margin-left: 33px;
+    }
+    .inform-header {
+      display: flex;
+      margin-right: 29px;
+      .el-button {
+        margin-left: 9px;
+        background-color: rgba(41, 109, 227, 1);
+      }
+    }
+  }
+  .inform-body {
+    .order-top {
+      display: flex;
+      align-items: center;
+      padding: 30px 29px 27px 33px;
+      font-size: 16px;
+      justify-content: space-between;
+      font-weight: 400;
+      color: #000;
+
+      .el-button {
+        background-color: rgba(41, 109, 227, 1);
+        color: #fff;
+        margin-left: 9px;
+      }
+
+      .state {
+        margin-left: 30px;
+      }
+      .export {
+        width: 94px;
+        height: 32px;
+        opacity: 1;
+        color: #fff;
+        text-align: center;
+        line-height: 32px;
+        background: rgba(41, 109, 227, 1);
+        cursor: pointer;
+        border-radius: 3px;
+      }
+      .el-dialog__wrapper {
+        .el-dialog {
+          width: 555px !important;
+          height: 377px !important;
+          margin-top: 352px !important;
+          .el-dialog__header {
+            height: 80px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid rgba(230, 230, 230, 1);
+            .el-dialog__title {
+              font-size: 20px;
+              font-weight: 500;
+              padding-left: 30px;
+              color: rgba(0, 0, 0, 1);
+            }
+            .el-dialog__headerbtn {
+              width: 35px;
+              height: 35px;
+              .el-dialog__close {
+                font-size: 28px;
+                font-weight: 500;
+                color: #000;
+              }
+            }
+          }
+          .el-dialog__body {
+            padding: 0 30px;
+            .info {
+              display: flex;
+              .user {
+                margin-right: 82px;
+                .name {
+                  margin: 21px 0 9px 0;
+                }
+                .el-input {
+                  width: 205px;
+                  height: 38px;
+                  input {
+                    color: #000;
+                  }
+                }
+              }
+            }
+          }
+          .el-dialog__footer {
+            padding: 52px 30px 0 0;
+            .el-button {
+              width: 67px;
+              height: 37px;
+              padding: 0;
+            }
+            .cancel {
+              background-color: #fff;
+              color: rgba(56, 56, 56, 1);
+            }
+          }
+        }
+      }
+    }
+    .inform-table {
+      .el-table {
+        font-weight: 400;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 1);
+        margin: 0 auto;
+        .el-table__header-wrapper {
+          border-radius: 5px;
+        }
+        tr {
+          height: 64px;
+          td {
+            .cell {
+              .operate {
+                color: rgba(41, 109, 227, 1);
+                cursor: pointer;
+                font-size: 16px;
+                font-weight: 400;
+                padding: 0 5px;
+              }
+              .el-dialog__wrapper {
+                overflow: hidden;
+                .el-dialog {
+                  width: 968px !important;
+                  margin-top: 126px !important;
+                  height: 914px;
+                  opacity: 1;
+                  background: rgba(255, 255, 255, 1);
+                  box-shadow: none;
+                  .el-dialog__header {
+                    height: 83px;
+                    border-bottom: 1px solid rgba(230, 230, 230, 1);
+
+                    span {
+                      float: left;
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: #000;
+                    }
+
+                    .el-dialog__close {
+                      width: 35px;
+                      height: 35px;
+                      &::before {
+                        font-size: 24px;
+                        color: #000;
+                      }
+                    }
+                  }
+                  .el-dialog__body {
+                    padding: 0 38px;
+                    .userinfo {
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(0, 0, 0, 1);
+                      text-align: left;
+                      margin-top: 15px;
+                    }
+                    .info {
+                      display: flex;
+                      .user {
+                        .name {
+                          text-align: left;
+                          padding: 12px 0;
+                        }
+                        .el-input {
+                          width: 283px;
+                          height: 38px;
+                          opacity: 1;
+                          margin-right: 81px;
+                          .el-input__inner {
+                            color: #000;
+                          }
+                        }
+                      }
+                    }
+                    .rate {
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(0, 0, 0, 1);
+                      text-align: left;
+                      margin: 15px 0;
+                    }
+                    .water {
+                      text-align: left;
+                      font-size: 16px;
+                      font-weight: 400;
+                      color: rgba(0, 0, 0, 1);
+                    }
+                    .el-table {
+                      margin: 10px 0;
+                      tr {
+                        height: 48px;
+                      }
+                      .el-table__body-wrapper {
+                        overflow: visible;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .el-dialog__title {
+                color: rgba(41, 109, 227, 1);
+                cursor: pointer;
+                padding: 10px 18px 0 18px;
+              }
+            }
+          }
+          .el-checkbox__inner {
+            width: 18px;
+            height: 18px;
+            &::after {
+              transform: rotate(45deg) scaleY(1.5);
+              top: 3px;
+              left: 5px;
+            }
+          }
+        }
+        th {
+          font-weight: 400;
+        }
+      }
+    }
+    .block {
+      height: 36px;
+      margin: 66px 29px 0 0;
+      float: right;
+      .el-pagination {
+        padding: 0;
+        button {
+          width: 36px;
+          background: #fff;
+          color: rgba(0, 0, 0, 1);
+          height: 36px;
+          font-size: 14px;
+          border: 1px solid rgba(112, 112, 112, 1);
+          border-radius: 8px;
+        }
+        ul {
+          .active {
+            background: #fff;
+            color: rgba(0, 97, 255, 1);
+            border: 1px solid rgba(0, 97, 255, 1);
+            box-sizing: border-box;
+          }
+          .el-icon {
+            border: none;
+          }
+          li {
+            background: #fff;
+            color: rgba(0, 0, 0, 1);
+            width: 36px;
+            height: 36px;
+            font-size: 14px;
+            border: 1px solid rgba(112, 112, 112, 1);
+            border-radius: 8px;
+            line-height: 36px;
+          }
+        }
+        .el-pagination__jump {
+          color: rgba(0, 0, 0, 1);
+          font-size: 16px;
+          margin-left: 10px;
+          font-weight: 400;
+          height: 36px;
+          .el-input {
+            width: 65px;
+            height: 36px;
+            margin: 0 10px;
+            input {
+              width: 65px;
+              height: 36px;
+              border: 1px solid rgba(0, 0, 0, 1);
+              border-radius: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.box-card {
+  /deep/ .el-card__header {
+    padding: 0;
+  }
+  /deep/ .el-card__body {
+    padding: 0;
+  }
+}
+</style>>