迭代八-巡查工作的子页面创建和巡查任务页面部分搭建

src/views/worker/inspectionWork/index.vue

@@ -1,3 +1,12 @@
 <template>
-  巡查工作首页
-</template>
+  <van-tabs v-model:active="active" type="card">
+    <van-tab title="巡查任务"> <PatrolTask /></van-tab>
+    <van-tab title="巡查记录"><InspectionRecord /></van-tab>
+    <van-tab title="巡查日历"><PatrolCalendar /></van-tab>
+  </van-tabs>
+</template>
+<script setup lang="ts">
+import InspectionRecord from "./inspectionRecord.vue";
+import PatrolCalendar from "./patrolCalendar.vue";
+import PatrolTask from "./patrolTask.vue";
+</script>

src/views/worker/inspectionWork/inspectionRecord.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/worker/inspectionWork/patrolCalendar.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/worker/inspectionWork/patrolTask.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="container">
+    <van-search
+      v-model="queryParams.search_keyword"
+      class="common-search"
+      :left-icon="searchImg"
+      :right-icon="closeImg"
+      @search="on_search_keyword"
+      @click-right-icon.stop="on_search_cancel"
+    />
+    <van-list
+      v-model:loading="loading"
+      v-model:error="error"
+      error-text="请求失败，点击重新加载"
+      :finished="finished"
+      finished-text="没有更多事件了"
+      @load="getList"
+    >
+      <div
+        v-for="(item, index) in event_list"
+        :key="item.id"
+        class="event-list-item"
+      >
+        <div class="item-title">
+          <div class="item-title-text">
+            {{ item.title }}
+          </div>
+          <div class="item-title-control">
+            <van-button type="primary" @click="handleView(item)">
+              巡查上报
+            </van-button>
+          </div>
+        </div>
+        <div class="item-content">
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">巡查周期：</div>
+            </div>
+            <div class="item-data-value">{{ item.cycle }}</div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">巡查范围：</div>
+            </div>
+            <div class="item-data-value">{{ item.scope }}</div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">要求巡检时间：</div>
+            </div>
+            <div class="item-data-value">{{ item.time }}</div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, reactive, ref, toRefs, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import searchImg from "@/assets/images/search.png";
+import closeImg from "@/assets/images/close.png";
+const proxy = getCurrentInstance()?.proxy;
+const router = useRouter();
+const event_list = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const error = ref(false);
+const finished = ref(false);
+const initFormData = reactive({
+  scope: "",
+  cycle: "",
+  time: "",
+  event_title: "",
+  id: ""
+});
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10
+  }
+});
+const { queryParams, form } = toRefs(data);
+// 获取列表数据的方法
+async function getList() {
+  loading.value = true;
+  try {
+    // 这里是获取列表数据的逻辑，可以根据实际需求进行修改
+    const res = await fetchListData(
+      queryParams.value.page,
+      queryParams.value.pageSize
+    );
+    event_list.value = res.data.list;
+    total.value = res.data.total;
+  } catch (err) {
+    console.error("获取列表数据出错", err);
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+// 搜索关键字变化时触发的方法
+function on_search_keyword(keyword) {
+  // 根据搜索关键字更新查询参数
+  queryParams.value.search_keyword = keyword;
+  // 刷新列表数据
+  getList();
+}
+
+// 右侧关闭按钮点击时触发的方法
+function on_search_cancel() {
+  // 清空搜索关键字
+  queryParams.value.search_keyword = "";
+  // 刷新列表数据
+  getList();
+}
+</script>
+
+<style lang="scss" scoped>
+.van-doc-block__title {
+  color: var(--van-doc-text-color-4);
+  margin: 0;
+  padding: 32px 16px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.event-list-item {
+  position: relative;
+  margin: 16px 16px 0;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 0.5px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  &:first-child {
+    margin-top: 0;
+  }
+  .item-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 46px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    padding: 0 12px;
+    .item-title-text {
+      font-size: 16px;
+      color: #414f64;
+      font-weight: 600;
+    }
+
+    .item-title-control {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .van-button {
+      width: 73px;
+      height: 24px;
+      padding: 0;
+    }
+  }
+  .item-content {
+    padding: 0 12px 12px;
+  }
+  .item-data {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: start;
+    line-height: 26px;
+    .item-left {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .item-data-label {
+      flex-shrink: 0;
+      color: #414f64;
+    }
+
+    .item-data-value {
+      color: #414f64;
+    }
+  }
+}
+.van-dropdown-menu {
+  :deep(.van-dropdown-menu__bar) {
+    background: transparent;
+    box-shadow: none;
+  }
+}
+.common-search {
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+.icon1 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon1.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon2 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon2.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon3 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon3.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon4 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon4.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon5 {
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/images/event/icon5.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+</style>