2023-08-09 DXS

1、新增校产管理模块
2、物品借用前端样式页面编写
3、物品归还前端样式页面编写
4、物品领用前端样式页面编写
5、设备报修前端样式页面编写
6、物品借用新增、编辑、查看表单

src/assets/style/common.css

+/**
+    * Describe:公共样式
+    * Date:2023-08-08
+*/
+.flexBLock {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.searchBlock {
+    justify-content: space-between;
+    background-color: #FFF;
+    padding-right: 2%;
+    overflow-x: hidden;
+}
+.searchInput {
+    width: 93%;
+}
+.listBlock {
+    background: #FFFFFF;
+    padding: 15px;
+    font-size: 13px;
+    color: #333;
+    line-height: 25px;
+    position: relative;
+    border-radius: 8px;
+    margin: 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.listBlock .flexBLock {
+    justify-content: space-between;
+}
+.formBlock {
+    background: #FFFFFF;
+    margin: 15px;
+    padding: 15px 0px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}

src/main.js

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 // import { Button } from "vant";
-// // import { DatePicker } from 'vant';
+// import { DatePicker } from 'vant';
 // import { NavBar } from "vant";
 // import { Rate } from "vant";
 // import { Search } from "vant";
@@ -13,7 +13,7 @@ import store from "./store";
 // import { Sticky } from "vant";
 // import { Image as VanImage } from "vant";
 // import { Cell, CellGroup } from "vant";
-import { Form, Field, Uploader } from "vant";
+import { Form, Field, Uploader,DatetimePicker,Calendar } from "vant";
 // import { Picker } from "vant";
 // import { Popup } from "vant";
 // import { Toast } from "vant";
@@ -36,6 +36,8 @@ import "vue3-hash-calendar/es/index.css";
 import "amfe-flexible/index.min.js";
 import "../rem.js";
 
+import "./assets/style/common.css"
+
 const app = createApp(App);
 app.config.globalProperties.$imgUrl = "http://43.143.63.140:8095/";
 // process.env.NODE_ENV == "development"
@@ -77,7 +79,7 @@ app
   // .use(ContactCard)
   // .use(Calendar)
   // .use(Divider)
+  .use(Calendar)
   .use(VueHashCalendar)
-  .use(Uploader);
-// .use(DatePicker)
+  .use(Uploader).use(DatetimePicker);
 app.use(store).use(router).mount("#app");

src/router/index.js

@@ -223,30 +223,6 @@ const routes = [
     name: "TeacherListTeac",
     component: () => import("../views/teacher/TeacherListTeac.vue"),
   },
-  /* 后勤报修 教师端的 */
-  {
-    path: "/logisticsRepair",
-    name: "logisticsRepair",
-    component: () => import("../views/teacher/logisticsRepair/index"),
-  },
-  /* 后勤报修新增 教师端的 */
-  {
-    path: "/addRepair",
-    name: "addRepair",
-    component: () => import("../views/teacher/logisticsRepair/addRepair"),
-  },
-  /* 后勤报修查看 教师端的 */
-  {
-    path: "/checkRepair",
-    name: "checkRepair",
-    component: () => import("../views/teacher/logisticsRepair/checkRepair"),
-  },
-  /* 后勤报修反馈 教师端的 */
-  {
-    path: "/feedbackRepair",
-    name: "feedbackRepair",
-    component: () => import("../views/teacher/logisticsRepair/feedbackRepair"),
-  },
   // /* 课程表 */
   // {
   //   path: "/gradeSchedule",
@@ -520,6 +496,81 @@ const routes = [
     component: () => import("../views/parent/InforCollection/apply.vue"),
   },
 
+  /**
+   * Type：教师端
+   * Describe：后勤报修、校产管理
+   * Date：2023-08-08
+   **/
+  /* 后勤报修 */
+  {
+    path: "/logisticsRepair",
+    name: "logisticsRepair",
+    component: () => import("../views/teacher/logisticsRepair/index"),
+  },
+  /* 后勤报修新增 */
+  {
+    path: "/addRepair",
+    name: "addRepair",
+    component: () => import("../views/teacher/logisticsRepair/addRepair"),
+  },
+  /* 后勤报修查看 */
+  {
+    path: "/checkRepair",
+    name: "checkRepair",
+    component: () => import("../views/teacher/logisticsRepair/checkRepair"),
+  },
+  /* 后勤报修反馈 */
+  {
+    path: "/feedbackRepair",
+    name: "feedbackRepair",
+    component: () => import("../views/teacher/logisticsRepair/feedbackRepair"),
+  },
+  /** 校产管理 schoolProperty 管理员权限 教师权限 **/
+  // 管理员 首页
+  {
+    path: "/schoolProperty",
+    name: "adminIndex",
+    component: () => import("../views/teacher/schoolProperty"),
+  },
+  // 管理员 物品借用列表页
+  {
+    path: "/schoolProperty/borrow",
+    name: "adminBorrowList",
+    component: () => import("../views/teacher/schoolProperty/borrowList"),
+  },
+  // 管理员 物品借用 新增、编辑、查看页面
+  {
+    path: "/schoolProperty/borrow/detail",
+    name: "adminBorrowDetail",
+    component: () => import("../views/teacher/schoolProperty/borrowDetail"),
+  },
+  // 管理员 归还列表页
+  {
+    path: "/schoolProperty/return",
+    name: "adminReturnList",
+    component: () => import("../views/teacher/schoolProperty/returnList"),
+  },
+  // 管理员 物品领用列表页
+  {
+    path: "/schoolProperty/use",
+    name: "adminUseList",
+    component: () => import("../views/teacher/schoolProperty/useList"),
+  },
+  // 管理员 物品领用 新增
+  {
+    path: "/schoolProperty/use/add",
+    name: "adminUseAdd",
+    component: () => import("../views/teacher/schoolProperty/useAdd"),
+  },
+  // 管理员 设备报修列表页
+  {
+    path: "/schoolProperty/device",
+    name: "adminDeviceList",
+    component: () => import("../views/teacher/schoolProperty/deviceList"),
+  },
+
+
+
 ];
 
 const router = createRouter({
@@ -530,7 +581,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  console.log(to,from);
+  // console.log(to,from);
   if (to.name == "development") {
     Toast("开发中");
     return;

src/views/tabbar/main/index.vue

@@ -411,6 +411,14 @@
           />
           <span class="item_text">后勤报修</span>
         </van-grid-item>
+
+        <!--  2023-08-08 新增校产管理模块 -->
+        <van-grid-item icon="photo-o" text="校产管理" url="#/schoolProperty">
+          <van-image style="width: 48px" :src="require('@/assets/index/dcwj.png')"/>
+          <span class="item_text">校产管理</span>
+        </van-grid-item>
+        <!--  2023-08-08 新增校产管理模块 -->
+
         <!-- <van-grid-item icon="photo-o" text="我的领用" url=" #/myUse">
           <van-image
             style="width: 24px"

src/views/teacher/schoolProperty/borrowDetail.vue

+<template>
+  <van-nav-bar :title=title left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <van-form @submit="onSubmit" class="formBlock" label-align="right" label-width="110px">
+    <van-cell-group inset>
+      <van-field v-model="borrowForm.code" label="自编码" placeholder="请输入自编码"/>
+      <van-field v-model="borrowForm.code" label="设备名称" placeholder="请输入设备名称"/>
+      <van-field v-model="borrowForm.code" label="型号" placeholder="请输入型号"/>
+      <van-field is-link readonly v-model="dateChoose" label="借用日期" @click="showPicker = true"
+                 placeholder="请选择借用日期"/>
+      <van-calendar v-model:show="showPicker" @confirm="onConfirm" />
+      <van-field v-model="borrowForm.code" label="借用人" placeholder="请输入借用人"/>
+      <van-field v-model="borrowForm.code" label="用途" placeholder="请输入用途"/>
+      <van-field v-model="borrowForm.code" label="借用期限(天)" placeholder="请输入借用期限"/>
+      <van-field is-link readonly v-model="dateChoose" label="归还时间" @click="showPicker = true"
+                 placeholder="请选择归还时间"/>
+      <van-calendar v-model:show="showPicker" @confirm="onConfirm" />
+      <van-field v-model="borrowForm.code" label="归还时设备情况" placeholder="请输入归还时设备情况"/>
+    </van-cell-group>
+    <div>
+      <van-button class="sureBtn" round block type="primary" native-type="submit">确 定</van-button>
+    </div>
+  </van-form>
+</template>
+
+<script setup>
+  import { reactive, ref } from "vue";
+
+  import { useRouter } from "vue-router";
+  const router = useRouter();
+
+  let title = ref('物品借用新增') // 页面标题
+
+  let borrowForm = reactive({ // 表单数据
+    code:'',
+    dateChoose:'',
+  })
+  let dateChoose = ref('') // 借用日期
+
+  let showPicker = ref(false) //是否显示日历选择
+  const onConfirm = (date) => {
+    dateChoose.value  = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    showPicker.value = false;
+  };
+
+  //返回上一页
+  const goback = () => {
+    router.back();
+  };
+
+  //表单提交
+  const onSubmit = () => {
+  }
+</script>
+
+<style scoped>
+.sureBtn {
+  margin: 30px auto;
+  width: 80%;
+}
+.van-cell-group--inset {
+  margin: 0px;
+}
+</style>

src/views/teacher/schoolProperty/borrowList.vue

+<template>
+  <van-nav-bar title="物品借用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <div class="flexBLock searchBlock">
+    <van-search class="searchInput" v-model="searchKey" placeholder="请输入搜索关键词" />
+    <van-icon name="scan" />
+  </div>
+  <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
+      <div v-for="(item,index) in list" :key="index" class="listBlock" @click="toDetailPage">
+        <div class="flexBLock">
+          <div>
+            <div>型号：联想Y0079</div>
+            <div>自编码：202308081101</div>
+            <div>设备名称：笔记本</div>
+            <div>借用人：张蔷</div>
+            <div>借用日期：2023-08-08 12:32:30</div>
+            <div>用途：用于课上办公</div>
+          </div>
+          <div class="listLeft">
+            <div>7</div>
+            <div>借用期限（天）</div>
+          </div>
+        </div>
+        <div class="waitReturn">待归还</div>
+        <div class="endReturn">已归还</div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+const router = useRouter();
+
+let searchKey = ref('')
+const loading = ref(false)
+
+const list = ref([1,2,3,4,5]);
+const pullLoading = ref(false);
+const finished = ref(false);
+
+//获取列表数据
+const getList = () => {
+
+}
+
+//跳转详情页面
+const toDetailPage = () => {
+  router.push({
+    path: "/schoolProperty/borrow/detail",
+  })
+}
+
+//返回上一页
+const goback = () => {
+  router.back();
+};
+
+//下拉刷新
+const onRefresh = () => {
+
+};
+</script>
+
+<style scoped>
+.listLeft {
+  text-align: center;
+}
+.listLeft div:first-child {
+  color: rgb(57, 190, 254);
+  font-weight: bold;
+  font-size: 50px;
+  padding-bottom: 20px;
+}
+.waitReturn,.endReturn {
+  position: absolute;
+  width: 80px;
+  color: #FFFFFF;
+  text-align: center;
+  top: 10px;
+  right: 0px;
+  border-bottom-left-radius: 18px;
+  border-top-left-radius: 18px;
+}
+.waitReturn {
+  background-color: #D5003A;
+}
+.endReturn {
+  background-color: #FEAF00;
+}
+
+</style>
+

src/views/teacher/schoolProperty/deviceList.vue

+<template>
+  <van-nav-bar title="设备报修" left-text="返回" left-arrow @click-left="goback"></van-nav-bar> <div class="flexBLock searchBlock">
+  <van-search class="searchInput" v-model="searchKey" placeholder="请输入搜索关键词" />
+  <van-icon name="scan" />
+</div>
+  <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
+      <div v-for="(item,index) in list" :key="index" class="listBlock">
+        <div>自编码：202308081101</div>
+        <div>设备名称：笔记本</div>
+        <div>型号：联想Y0079</div>
+        <div>投产日期：2023-08-08 12:32:30</div>
+        <div>地点：教学楼603</div>
+        <div>报修日期：2023-08-08 12:32:30</div>
+        <div>报修人：张蔷</div>
+        <div>问题：笔记本无法打开</div>
+        <div class="flexBLock btnBlock">
+          <van-button size="small" round type="primary" class="btn">修 改</van-button>
+          <van-button size="small" round type="success" class="btn">反 馈</van-button>
+          <van-button size="small" round type="default" class="btn">查 看</van-button>
+          <van-button size="small" round type="danger" class="btn">删 除</van-button>
+        </div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import {ref} from "vue";
+const router = useRouter();
+
+let searchKey = ref('')
+const loading = ref(false)
+
+const list = ref([1,2,3,4,5]);
+const pullLoading = ref(false);
+const finished = ref(false);
+
+//获取列表数据
+const getList = () => {
+
+}
+
+//返回上一页
+const goback = () => {
+  router.back();
+};
+
+//下拉刷新
+const onRefresh = () => {
+
+};
+</script>
+
+<style scoped>
+.btnBlock {
+  flex-wrap: wrap;
+}
+.btn {
+  width: 75px;
+  margin-top: 10px;
+}
+</style>

src/views/teacher/schoolProperty/index.vue

+<template>
+  <van-nav-bar title="校产管理" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <div class="borrowBlock" @click="toPage(3)">
+    <van-image class="leftImg" :src="require('../../../assets/icon/wallet.png')"/>
+    <div>物品借用</div>
+  </div>
+  <div class="returnBlock" @click="toPage(0)">
+    <van-image class="leftImg" :src="require('../../../assets/icon/return.png')"/>
+    <div>物品归还</div>
+  </div>
+  <div class="useBlock" @click="toPage(1)">
+    <van-image class="leftImg" :src="require('../../../assets/icon/use.png')"/>
+    <div>物品领用</div>
+  </div>
+  <div class="deviceBlock" @click="toPage(2)">
+    <van-image class="leftImg" :src="require('../../../assets/icon/device.png')"/>
+    <div>设备报修</div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const toPage = (type) => {
+  if(type == 0){
+    // 归还管理
+    router.push({
+      path: "/schoolProperty/return",
+    });
+  }else if (type == 1){
+    // 物品领用
+    router.push({
+      path: "/schoolProperty/use",
+    });
+  }else if (type == 2){
+    // 设备报修
+    router.push({
+      path: "/schoolProperty/device",
+    });
+  }else {
+    // 物品借用
+    router.push({
+      path: "/schoolProperty/borrow",
+    });
+  }
+}
+
+//返回上一页
+const goback = () => {
+  router.back();
+}
+</script>
+
+<style scoped>
+.returnBlock,.deviceBlock,.useBlock,.borrowBlock {
+  padding: 20px 30px;
+  border-radius: 12px;
+  color: #FFFFFF;
+  margin: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 23px;
+  font-weight: bold;
+}
+.borrowBlock {
+  background: linear-gradient(to right, #F4F484, #89C7CB);
+}
+.returnBlock {
+  background: linear-gradient(to right, #89C7CB, #7271C1);
+}
+.deviceBlock {
+  background: linear-gradient(to right, #F4F484, #FDAE86);
+}
+.useBlock {
+  background: linear-gradient(to right, #FDAE86, #EA4A6B);
+}
+.leftImg {
+  width: 56px;
+  height: 56px;
+  margin-right: 13%;
+}
+</style>

src/views/teacher/schoolProperty/returnList.vue

+<template>
+  <van-nav-bar title="归还管理" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <div class="flexBLock searchBlock">
+    <van-search class="searchInput" v-model="searchKey" placeholder="请输入搜索关键词" />
+    <van-icon name="scan" />
+  </div>
+  <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
+      <div v-for="(item,index) in list" :key="index" class="listBlock">
+        <div class="flexBLock">
+          <div>
+            <div>型号：联想Y0079</div>
+            <div>自编码：202308081101</div>
+            <div>借用人：张蔷</div>
+            <div>借用日期：2023-08-08 12:32:30</div>
+            <div>接收人：张蔷</div>
+            <div>归还日期：2023-08-08 12:32:30</div>
+            <div>归还时设备情况：良好</div>
+          </div>
+          <div class="listLeft">
+            <div>7</div>
+            <div>借用期限（天）</div>
+          </div>
+        </div>
+        <div>备注：已借用取回，暂不外借，设备换修。已借用取回，暂不外借，设备换修。</div>
+        <div class="waitReturn">待归还</div>
+        <div class="endReturn">已归还</div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+const router = useRouter();
+
+let searchKey = ref('')
+const loading = ref(false)
+
+const list = ref([1,2,3,4,5]);
+const pullLoading = ref(false);
+const finished = ref(false);
+
+//获取列表数据
+const getList = () => {
+
+}
+
+//返回上一页
+const goback = () => {
+  router.back();
+};
+
+//下拉刷新
+const onRefresh = () => {
+
+};
+
+</script>
+
+<style scoped>
+.listLeft {
+  text-align: center;
+}
+.listLeft div:first-child {
+  color: rgb(57, 190, 254);
+  font-weight: bold;
+  font-size: 50px;
+  padding-bottom: 20px;
+}
+.waitReturn,.endReturn {
+  position: absolute;
+  width: 80px;
+  color: #FFFFFF;
+  text-align: center;
+  top: 10px;
+  right: 0px;
+  border-bottom-left-radius: 18px;
+  border-top-left-radius: 18px;
+}
+.waitReturn {
+  background-color: #D5003A;
+}
+.endReturn {
+  background-color: #FEAF00;
+}
+</style>

src/views/teacher/schoolProperty/useAdd.vue

+<template>
+  <van-nav-bar title="新增物品领用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+</template>
+
+<script setup>
+  import { useRouter } from "vue-router";
+  const router = useRouter();
+  //返回上一页
+  const goback = () => {
+    router.back();
+  };
+</script>
+
+<style scoped>
+
+</style>

src/views/teacher/schoolProperty/useList.vue

+<template>
+  <van-nav-bar title="物品领用" left-text="返回" left-arrow @click-left="goback"></van-nav-bar>
+  <div class="flexBLock searchBlock">
+    <van-search class="searchInput" v-model="searchKey" placeholder="请输入搜索关键词" />
+    <van-icon @click="sacnClick" name="scan" />
+  </div>
+  <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
+      <div v-for="(item,index) in list" :key="index" class="listBlock">
+        <div class="flexBLock useBlock">
+          <div>
+            <div>型号：联想Y0079</div>
+            <div>自编码：202308081101</div>
+            <div>领用人：张蔷</div>
+            <div>设备名称：笔记本</div>
+          </div>
+          <div class="listLeft">
+            <div>2023-08-08</div>
+            <div>领用日期</div>
+          </div>
+        </div>
+        <div class="ywxBlock">已接单 — 已维修</div>
+        <div class="wfwxBlock">已接单 — 无法维修</div>
+        <div class="wjdBlock">未接单</div>
+      </div>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import {ref} from "vue";
+const router = useRouter();
+
+let searchKey = ref('')
+const loading = ref(false)
+
+const list = ref([1,2,3,4,5]);
+const pullLoading = ref(false);
+const finished = ref(false);
+
+//获取列表数据
+const getList = () => {
+
+}
+
+//扫码
+const sacnClick = () =>{
+  router.push({
+    path: "/schoolProperty/use/add",
+  })
+}
+
+//返回上一页
+const goback = () => {
+  router.back();
+};
+
+//下拉刷新
+const onRefresh = () => {
+
+};
+
+</script>
+
+<style scoped>
+.ywxBlock,.wfwxBlock,.wjdBlock {
+  position: absolute;
+  font-size: 12px;
+  font-weight: 500;
+  width: 120px;
+  color: #FFFFFF;
+  text-align: center;
+  top: 20px;
+  right: 0px;
+  border-bottom-left-radius: 18px;
+  border-top-left-radius: 18px;
+}
+.ywxBlock {
+  background-color: #D3DD18;
+}
+.wfwxBlock {
+  background-color: #0191B4;
+}
+.wjdBlock {
+  width: 80px!important;
+  background-color: #B0B5B5;
+}
+.useBlock {
+  align-items: flex-end!important;
+}
+.listLeft {
+  text-align: center;
+}
+.listLeft div:first-child {
+  color: rgb(57, 190, 254);
+  font-weight: bold;
+  font-size: 18px;
+}
+</style>