Skip to content

M
map-property-mobile
Commit 7f0cdc6a authored by leidahong's avatar leidahong
Browse files
Options

新增事件、事件详情、搜索

parent ddbc4ea3
Hide whitespace changes
Inline Side-by-side
Showing with 10491 additions and 559 deletions
pnpm-lock.yaml 0 → 100644
View file @ 7f0cdc6a
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
View file @ 7f0cdc6a
<template> <template>
<div id="app"> <div id="app">
<keep-alive :include="include"> <keep-alive :include="include">
<router-view/> <router-view />
</keep-alive> </keep-alive>
</div> </div>
</template> </template>
...@@ -9,10 +9,11 @@ ...@@ -9,10 +9,11 @@
export default { export default {
computed: { computed: {
include() { include() {
return ['Home', 'Search'] return ["Home", "Search"];
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./assets/icon/iconfont.css";
</style> </style>
src/api/index.js
View file @ 7f0cdc6a
import request from '../utils/request' import request from "../utils/request";
// 获取验证码 // 获取验证码
export function getCodeImg() { export function getCodeImg() {
return request({ return request({
url: '/code', url: "/code",
headers: { headers: {
isToken: false isToken: false,
}, },
method: 'get' method: "get",
}) });
} }
// 登录 // 登录
export function login(data) { export function login(data) {
return request({ return request({
url: '/auth/login', url: "/auth/login",
method: 'post', method: "post",
data data,
}) });
} }
// 获取用户信息 // 获取用户信息
export function getUserInfo() { export function getUserInfo() {
return request({ return request({
url: '/system/user/getInfo', url: "/system/user/getInfo",
method: 'get' method: "get",
}) });
}
//新增事件
export function addEvent(data) {
return request({
url: "/wcwy/eventInfo/add",
method: "post",
data,
});
} }
// 获取处理列表 // 获取处理列表
export function getEventList(params) { export function getEventList(params) {
return request({ return request({
url: 'wcwy/api/event', url: "wcwy/api/event",
params params,
}) });
} }
// 获取处理详情 // 获取处理详情
export function getEventDetail(id) { export function getEventDetail(id) {
return request({ return request({
url: '/wcwy/eventInfo/' + id url: "/wcwy/eventInfo/" + id,
}) });
} }
// 获取处理后详情 // 获取处理后详情
export function getEventInfo(id) { export function getEventInfo(id) {
return request({ return request({
url: '/wcwy/eventInfo/get/' + id url: "/wcwy/eventInfo/get/" + id,
}) });
} }
// 获取消息列表 // 获取消息列表
export function getMessageList(params) { export function getMessageList(params) {
return request({ return request({
url: '/wcwy/api/eventMessage', url: "/wcwy/api/eventMessage",
params params,
}) });
} }
// 获取消息详情 // 获取消息详情
export function getMessageDetail(id) { export function getMessageDetail(id) {
return request({ return request({
url: '/wcwy/api/eventMessage/getInfo/' + id url: "/wcwy/api/eventMessage/getInfo/" + id,
}) });
} }
// 上传图片 // 上传图片
export function uploadImg(data) { export function uploadImg(data) {
return request({ return request({
url: '/file/upload', url: "/file/upload",
method: 'post', method: "post",
data, data,
}) });
} }
// 获取未读消息数量 // 获取未读消息数量
export function getMessageCount() { export function getMessageCount() {
return request({ return request({
url: '/wcwy/api/eventMessage/getUnreadCnt' url: "/wcwy/api/eventMessage/getUnreadCnt",
}) });
} }
// 处理事件 // 处理事件
export function handleEvent(data) { export function handleEvent(data) {
return request({ return request({
url: '/wcwy/api/event/process', url: "/wcwy/api/event/process",
method: 'post', method: "post",
data, data,
}) });
} }
// 获取事件类型统计 // 获取事件类型统计
export function getTypeChartData() { export function getTypeChartData() {
return request({ return request({
url: '/wcwy/api/event/getEventCategoryStatics' url: "/wcwy/api/event/getEventCategoryStatics",
}) });
} }
// 获取事件处理量统计 // 获取事件处理量统计
export function getCountChartData() { export function getCountChartData() {
return request({ return request({
url: '/wcwy/api/event/getEventProcessCntStatics' url: "/wcwy/api/event/getEventProcessCntStatics",
}) });
} }
\ No newline at end of file
//社区列表
export function getCommunityList(params) {
return request({
url: "/atlas/atlas/community/list",
params,
});
}
//小区列表
export function getVillageList(params) {
return request({
url: "/wcwy/house/getHouseList/" + params,
});
}
src/assets/icon/iconfont.css 0 → 100644
View file @ 7f0cdc6a
@font-face {
font-family: "iconfont"; /* Project id 4070328 */
src: url('iconfont.woff2?t=1686102393775') format('woff2'),
url('iconfont.woff?t=1686102393775') format('woff'),
url('iconfont.ttf?t=1686102393775') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shouye2:before {
content: "\e606";
}
.icon-wode1:before {
content: "\e735";
}
.icon-tianjia:before {
content: "\e7df";
}
.icon-daiban:before {
content: "\e63e";
}
.icon-daiban1:before {
content: "\e629";
}
src/router/index.js
View file @ 7f0cdc6a
import Vue from 'vue' import Vue from "vue";
import VueRouter from 'vue-router' import VueRouter from "vue-router";
import { getToken } from "@/utils/auth";
Vue.use(VueRouter) Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: '/home', path: "/home",
name: 'Home', name: "Home",
component: () => import('../views/Home.vue'), component: () => import("../views/Home.vue"),
children:[ children: [
{ {
path: '', path: "/",
name: 'EventList', name: "EventList",
component: () => import('../views/EventList.vue'), component: () => import("../views/EventList.vue"),
meta: { meta: {
title: '事件' title: "事件",
} },
}, },
{ {
path: '/message', path: "/message",
name: 'Message', name: "Message",
component: () => import('../views/Message.vue'), component: () => import("../views/Message.vue"),
meta: { meta: {
title: '消息' title: "消息",
} },
}, },
{ {
path: '/statistics', path: "/statistics",
name: 'Statistics', name: "Statistics",
component: () => import('../views/Statistics.vue'), component: () => import("../views/Statistics.vue"),
meta: { meta: {
title: '统计' title: "统计",
} },
} },
] ],
}, },
{ {
path: '/', path: "/",
name: 'Login', name: "Login",
component: () => import('../views/Login.vue'), component: () => import("../views/Login.vue"),
meta: { meta: {
title: '登录' title: "登录",
} },
}, },
{ {
path: '/event-detail', path: "/event-detail",
name: 'EventDetail', name: "EventDetail",
component: () => import('../views/EventDetail.vue'), component: () => import("../views/EventDetail.vue"),
meta: { meta: {
title: '事件详情' title: "事件详情",
} },
}, },
{ {
path: '/search', path: "/search",
name: 'Search', name: "Search",
component: () => import('../views/Search.vue'), component: () => import("../views/Search.vue"),
meta: { meta: {
title: '搜索' title: "搜索",
} },
}, },
{ {
path: '/handle', path: "/handle",
name: 'Handle', name: "Handle",
component: () => import('../views/Handle.vue'), component: () => import("../views/Handle.vue"),
meta: { meta: {
title: '处理' title: "处理",
} },
} },
] {
path: "/addEvent",
name: "AddEvent",
component: () => import("../views/addEvent.vue"),
meta: {
title: "添加",
},
},
];
const router = new VueRouter({ const router = new VueRouter({
routes routes,
}) });
router.beforeEach((to, from, next) => {
if (to.path === "/") {
if (getToken()) next("/home");
}
next();
});
export default router export default router;
src/utils/index.js 0 → 100644
View file @ 7f0cdc6a
export const eleDrag = (dragDom) => {
const oDiv = document.querySelector(dragDom);
let disX = 0;
let disY = 0;
oDiv.addEventListener("touchstart", (e) => {
let touch = e.touches[0];
disX = touch.clientX - oDiv.offsetLeft;
disY = touch.clientY - oDiv.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
oDiv.addEventListener("touchmove", (e) => {
let touch = e.touches[0];
let oLeft = touch.clientX - disX;
let oTop = touch.clientY - disY;
if (oLeft < 10) {
oLeft = 10;
} else if (
oLeft >
document.documentElement.clientWidth - oDiv.offsetWidth - 10
) {
oLeft = document.documentElement.clientWidth - oDiv.offsetWidth - 10;
}
if (oTop < 0) {
oTop = 0;
} else if (
oTop >
document.documentElement.clientHeight - oDiv.offsetHeight - 50
) {
oTop = document.documentElement.clientHeight - oDiv.offsetHeight - 50;
}
oDiv.style.left = oLeft + "px";
oDiv.style.top = oTop + "px";
});
oDiv.addEventListener("touchend", () => {
document.removeEventListener("touchmove", defaultEvent, false);
});
const defaultEvent = (e) => {
e.preventDefault();
};
};
src/utils/request.js
View file @ 7f0cdc6a
import axios from 'axios' import axios from "axios";
import { getToken, removeToken } from "@/utils/auth"; import { getToken, removeToken } from "@/utils/auth";
import router from '@/router' import router from "@/router";
import { Toast } from 'vant' import { Toast } from "vant";
const baseURL = process.env.NODE_ENV === "production" ? "/hmit-api" : "/proxyApi" const baseURL = process.env.NODE_ENV === "production" ? "/api" : "/proxyApi";
const request = axios.create({ const request = axios.create({
baseURL, baseURL,
timeout: 10000, timeout: 10000,
withCredentials: true withCredentials: true,
}); });
request.interceptors.request.use( request.interceptors.request.use(
config => { (config) => {
config.headers["Authorization"] = "Bearer " + getToken(); config.headers["Authorization"] = "Bearer " + getToken();
return config return config;
}, },
error => { (error) => {
return Promise.reject(error) return Promise.reject(error);
} }
) );
request.interceptors.response.use((response) => { request.interceptors.response.use(
(response) => {
const res = response.data; const res = response.data;
if (res.code === 200) { if (res.code === 200) {
return res return res;
} else if (res.code === 401) { } else if (res.code === 401) {
Toast.fail(res.msg) Toast.fail(res.msg);
router.replace('/login') removeToken();
router.push("/");
} else { } else {
Toast.fail(res.msg) Toast.fail(res.msg);
return res return res;
} }
}, (err) => { },
Toast('网络请求异常，请稍后重试!'); (err) => {
return err Toast("网络请求异常，请稍后重试!");
}); return err;
export default request; }
\ No newline at end of file );
export default request;
src/views/EventDetail.vue
View file @ 7f0cdc6a
...@@ -3,77 +3,96 @@ ...@@ -3,77 +3,96 @@
<div class="detail-container"> <div class="detail-container">
<div class="detail-item"> <div class="detail-item">
<div class="label">事件编号</div> <div class="label">事件编号</div>
<div class="val">{{ info.eventNo }}</div> <div class="val">{{ info.eventNo || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">事件类型</div> <div class="label">事件类型</div>
<div class="val">{{ info.category }}</div> <div class="val">{{ info.category || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">事发地点</div> <div class="label">事发地点</div>
<div class="val">{{ info.address }}</div> <div class="val">{{ info.address || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">上报网络</div> <div class="label">上报网络</div>
<div class="val">{{ info.gridName }}</div> <div class="val">{{ info.gridName || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">事件描述</div> <div class="label">事件描述</div>
<div class="val" style="line-height: .42rem;">{{ info.description }}</div> <div class="val" style="line-height: 0.42rem">
{{ info.description || "--" }}
</div>
<div class="val">
<div class="img-box">
<img
:src="item"
@click="preview(imgUrlList, index)"
v-for="(item, index) in imgUrlList"
/>
</div>
</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">涉及人数</div> <div class="label">涉及人数</div>
<div class="val">{{ info.involvedNumber }}</div> <div class="val">{{ info.involvedNumber || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">上报人</div> <div class="label">上报人</div>
<div class="val">{{ info.reportName }}</div> <div class="val">{{ info.reportName || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">上报人电话</div> <div class="label">上报人电话</div>
<div class="val">{{ info.reflectorMobile }}</div> <div class="val">{{ info.reflectorMobile || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">上报时间</div> <div class="label">上报时间</div>
<div class="val">{{ info.reportDate }}</div> <div class="val">{{ info.reportDate || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">事件等级</div> <div class="label">事件等级</div>
<div class="val">{{ info.rankNo }}</div> <div class="val">{{ info.rankNo || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">处理天数</div> <div class="label">处理天数</div>
<div class="val">{{ info.expectedDays }}天</div> <div class="val">{{ info.expectedDays || "--" }}天</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">处理状态</div> <div class="label">处理状态</div>
<div class="val">{{ info.status }}</div> <div class="val">{{ info.status || "--" }}</div>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<div class="label">处理时间</div> <div class="label">处理时间</div>
<div class="val">{{ info.registerDate }}</div> <div class="val">{{ info.registerDate || "--" }}</div>
</div> </div>
<div class="detail-item" v-if="hasProcess"> <div class="detail-item" v-if="hasProcess">
<div class="label">处理内容</div> <div class="label">处理内容</div>
<div class="val">{{ info.processContent }}</div> <div class="val">{{ info.processContent || "--" }}</div>
</div> </div>
<div class="detail-item" v-if="hasProcess"> <div class="detail-item" v-if="hasProcess">
<div class="label">处理前</div> <div class="label">处理前</div>
<div class="val"> <div class="val">
<div class="img-box" > <div class="img-box">
<img :src="item" @click="preview(beforeHandleImgs, index)" v-for="(item, index) in beforeHandleImgs" /> <img
:src="item"
@click="preview(beforeHandleImgs, index)"
v-for="(item, index) in beforeHandleImgs"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="detail-item" v-if="hasProcess"> <div class="detail-item" v-if="hasProcess">
<div class="label">处理后</div> <div class="label">处理后</div>
<div class="val"> <div class="val">
<div class="img-box" > <div class="img-box">
<img :src="item" @click="preview(afterHandleImgs, index)" v-for="(item, index) in afterHandleImgs" /> <img
:src="item"
@click="preview(afterHandleImgs, index)"
v-for="(item, index) in afterHandleImgs"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="detail-item"> <!-- <div class="detail-item">
<div class="label">附件</div> <div class="label">附件</div>
<div class="val"> <div class="val">
<div class="file-list"> <div class="file-list">
...@@ -83,125 +102,153 @@ ...@@ -83,125 +102,153 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="handle-btn-box" v-if="Object.keys(info).length > 0 && !hasProcess"> <div
<van-button type="info" style="height: .86rem; background-color: #3978F8;color: #fff;" round size="large" @click="toHandle">去处理</van-button> class="handle-btn-box"
v-if="Object.keys(info).length > 0 && !hasProcess"
>
<van-button
type="info"
style="height: 0.86rem; background-color: #3978f8; color: #fff"
round
size="large"
@click="toHandle"
>去处理</van-button
>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ImagePreview } from 'vant'; import { ImagePreview } from "vant";
import { getEventDetail, getEventInfo } from '../api/index' import { getEventDetail, getEventInfo } from "../api/index";
export default { export default {
data() { data() {
return { return {
id: '', id: "",
info: {}, info: {},
afterHandleImgs: [], afterHandleImgs: [],
beforeHandleImgs: [] beforeHandleImgs: [],
imgUrlList: [],
scrollTop: 0,
}; };
}, },
computed: { computed: {
hasProcess() { hasProcess() {
return this.info.status === '已处理' return this.info.status === "已处理";
} },
}, },
methods: { methods: {
getInfo() { getInfo() {
getEventDetail(this.id).then(res => { getEventDetail(this.id).then((res) => {
this.info = res.data; this.info = res.data;
if (res.data.status === '已处理') { if (res.data.status === "已处理") {
this.getPrecessInfo() this.getPrecessInfo();
} }
}) });
}, },
getPrecessInfo() { getPrecessInfo() {
getEventInfo(this.id).then(res => { getEventInfo(this.id).then((res) => {
this.info.processContent = res.data.processContent; this.info.processContent = res.data.processContent;
if (res.data.beforeProcessImgList) { if (res.data.beforeProcessImgList) {
this.beforeHandleImgs = res.data.beforeProcessImgList.split(',').map(i => { this.beforeHandleImgs = res.data.beforeProcessImgList.split(",");
return 'http://192.168.20.11:10008/file/' + i
});
} }
if (res.data.afterProcessImgList) { if (res.data.afterProcessImgList) {
this.afterHandleImgs = res.data.afterProcessImgList.split(',').map(i => { this.afterHandleImgs = res.data.afterProcessImgList.split(",");
return 'http://192.168.20.11:10008/file/' + i }
}); if (res.data.imgUrlList) {
this.info.imgUrlList = res.data.imgUrlList.split(",");
} }
if (res.data.fileUrlList) { if (res.data.fileUrlList) {
this.info.fileList = res.data.fileUrlList.split(','); this.info.fileList = res.data.fileUrlList.split(",");
} }
}) });
}, },
toHandle() { toHandle() {
this.$router.push('/handle?id=' + this.id); this.$router.push("/handle?id=" + this.id);
}, },
preview(images, startPosition) { preview(images, startPosition) {
this.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
alert(this.scrollTop);
ImagePreview({ ImagePreview({
images, startPosition images,
startPosition,
}); });
}, },
}, },
mounted() { mounted() {
this.id = this.$route.query.id; this.id = this.$route.query.id;
this.getInfo(); this.getInfo();
} },
async beforeRouteLeave(to, from, next) {
if (
!document.querySelector(".van-image-preview") ||
document.querySelector(".van-image-preview").style.display === "none"
) {
next(true);
} else {
next(false);
await new Promise((resolve) => setTimeout(resolve, 0));
document.documentElement.scrollTop = this.scrollTop;
document.body.scrollTop = this.scrollTop;
}
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.event-detail { .event-detail {
.detail-container{ .detail-container {
border-top: 15px solid #F7F7F7; border-top: 15px solid #f7f7f7;
border-bottom: 15px solid #f7f7f7; border-bottom: 15px solid #f7f7f7;
padding: .3rem .35rem 1.28rem; padding: 0.3rem 0.35rem 1.28rem;
.detail-item { .detail-item {
.label{ .label {
color: #999; color: #999;
font-size: .25rem; font-size: 0.25rem;
} }
.val{ .val {
color: #111; color: #111;
margin-top: .2rem; margin-top: 0.2rem;
font-size: .31rem; font-size: 0.31rem;
.img-box{ .img-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
img{ img {
width: 1.6rem; width: 1.6rem;
height: 1.06rem; height: 1.06rem;
margin-right: .14rem; margin-right: 0.14rem;
margin-bottom: .14rem; margin-bottom: 0.14rem;
} }
} }
.file-list{ .file-list {
.file-item{ .file-item {
margin-bottom: .2rem; margin-bottom: 0.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
.file-name{ .file-name {
color: #111; color: #111;
font-size: .31rem; font-size: 0.31rem;
} }
.check-btn{ .check-btn {
margin-left: .5rem; margin-left: 0.5rem;
border-radius: 0.21rem; border-radius: 0.21rem;
border: 1px solid #3978F8; border: 1px solid #3978f8;
color: #3978F8; color: #3978f8;
font-size: .25rem; font-size: 0.25rem;
padding: .1rem .2rem; padding: 0.1rem 0.2rem;
} }
} }
} }
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom: .35rem; margin-bottom: 0.35rem;
} }
} }
} }
.handle-btn-box{ .handle-btn-box {
width: 100%; width: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -211,7 +258,7 @@ export default { ...@@ -211,7 +258,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 .62rem; padding: 0 0.62rem;
} }
} }
</style> </style>
\ No newline at end of file
src/views/EventList.vue
View file @ 7f0cdc6a
...@@ -10,8 +10,20 @@ ...@@ -10,8 +10,20 @@
</div> </div>
<div class="event-list-box"> <div class="event-list-box">
<div class="tab-box"> <div class="tab-box">
<div class="tab-item" @click="changeTab(0)" :class="{'active': tabIndex === 0}">待处理</div> <div
<div class="tab-item" @click="changeTab(1)" :class="{'active': tabIndex === 1}">已处理</div> class="tab-item"
@click="changeTab(0)"
:class="{ active: tabIndex === 0 }"
>
待处理
</div>
<div
class="tab-item"
@click="changeTab(1)"
:class="{ active: tabIndex === 1 }"
>
已处理
</div>
</div> </div>
<div class="search-container" @click="toSearch"> <div class="search-container" @click="toSearch">
<div class="search-box"> <div class="search-box">
...@@ -21,42 +33,50 @@ ...@@ -21,42 +33,50 @@
</div> </div>
<div class="event-list"> <div class="event-list">
<van-list <van-list
v-model="loading" v-model="loading"
:finished="finished" :finished="finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="getList" @load="getList"
>
<div
class="item"
:key="item.id"
v-for="(item, index) in list"
@click="toDetail(item)"
> >
<div class="item-name">{{ item.eventName }}</div> <div
<div class="_bottom"> class="item"
<div class="item-info"> :key="item.id"
<div class="item-type"> v-for="(item, index) in list"
<div class="label">事件类型：</div> @click="toDetail(item)"
<div class="val">{{ item.category }}</div> >
<div class="item-name">{{ item.eventName }}</div>
<div class="_bottom">
<div class="item-info">
<div class="item-type">
<div class="label">事件类型：</div>
<div class="val">{{ item.category }}</div>
</div>
<div class="item-deadline" v-if="tabIndex === 0">
<div class="label">处理期限：</div>
<div class="val" :class="getClass(item.expectedDays)">
{{ item.expectedDays }}天
</div>
</div>
</div> </div>
<div class="item-deadline" v-if="tabIndex === 0"> <div class="handle-btn">
<div class="label">处理期限：</div> {{ tabIndex === 0 ? "去处理" : "查看" }}
<div class="val" :class="getClass(item.expectedDays)">{{ item.expectedDays }}天</div>
</div> </div>
</div> </div>
<div class="handle-btn">{{ tabIndex === 0 ? '去处理' : '查看' }}</div>
</div> </div>
</div> </van-list>
</van-list>
</div> </div>
</div> </div>
<div class="addEvent" @click="toAddEvent()">
<i :class="`iconfont icon-tianjia`"></i>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Toast } from 'vant' import { Toast } from "vant";
import { getEventList } from '../api/index' import { getEventList } from "../api/index";
import { removeToken } from '../utils/auth' import { eleDrag } from "@/utils/index.js";
import { removeToken } from "../utils/auth";
export default { export default {
data() { data() {
return { return {
...@@ -67,39 +87,39 @@ export default { ...@@ -67,39 +87,39 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
} };
}, },
methods: { methods: {
getClass(day) { getClass(day) {
if (day > 2) { if (day > 2) {
return 'green' return "green";
} else if (day === 2) { } else if (day === 2) {
return 'yellow' return "yellow";
} else { } else {
return 'red' return "red";
} }
}, },
logout() { logout() {
removeToken() removeToken();
Toast.success('退出成功') Toast.success("退出成功");
this.$router.replace('/login') this.$router.replace("/");
}, },
toSearch() { toSearch() {
this.$router.push({ this.$router.push({
name: 'Search', name: "Search",
query: { query: {
type: this.tabIndex type: this.tabIndex,
} },
}) });
}, },
changeTab(index) { changeTab(index) {
if (this.tabIndex === index) return; if (this.tabIndex === index) return;
this.tabIndex = index this.tabIndex = index;
this.pageNum = 1 this.pageNum = 1;
this.finished = false this.finished = false;
this.list = [] this.list = [];
this.getList() this.getList();
}, },
getList() { getList() {
this.loading = true; this.loading = true;
let params = { let params = {
...@@ -107,12 +127,13 @@ export default { ...@@ -107,12 +127,13 @@ export default {
pageNum: this.pageNum, pageNum: this.pageNum,
pageSize: this.pageSize, pageSize: this.pageSize,
}; };
getEventList(params).then(res => { getEventList(params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.loading = false; this.loading = false;
this.total = res.total; this.total = res.total;
if (this.total === 0) { if (this.total === 0) {
this.finished = true; this.finished = true;
this.list = [];
return; return;
} }
if (this.pageNum === 1) { if (this.pageNum === 1) {
...@@ -126,189 +147,214 @@ export default { ...@@ -126,189 +147,214 @@ export default {
this.pageNum++; this.pageNum++;
} }
} }
}) });
}, },
toDetail(item) { toDetail(item) {
this.$router.push({ this.$router.push({
name: 'EventDetail', name: "EventDetail",
query: { query: {
id: item.id id: item.id,
} },
}) });
} },
toAddEvent() {
this.$router.push({
name: "AddEvent",
});
},
}, },
mounted() { mounted() {
this.getList() this.getList();
} eleDrag(".addEvent");
} },
activated() {
this.pageNum = 1;
this.getList();
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
.event-list-container{ .event-list-container {
.banner{ .banner {
background: url('../assets/imgs/index_top_bg.png') no-repeat; background: url("../assets/imgs/index_top_bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 3.4rem; height: 3.4rem;
padding: 1.1rem .28rem 1.28rem; padding: 1.1rem 0.28rem 1.28rem;
.user-box{ .user-box {
height: .74rem; height: 0.74rem;
display: flex; display: flex;
align-items: center; align-items: center;
img{ img {
width: .74rem; width: 0.74rem;
height: .74rem; height: 0.74rem;
border-radius: 50%; border-radius: 50%;
} }
.name{ .name {
color: #fff; color: #fff;
font-size: .32rem; font-size: 0.32rem;
font-weight: bold; font-weight: bold;
margin: 0 .3rem; margin: 0 0.3rem;
} }
.dept{ .dept {
color: #fff; color: #fff;
font-size: .26rem; font-size: 0.26rem;
border-left: 1px solid #fff; border-left: 1px solid #fff;
padding-left: .2rem; padding-left: 0.2rem;
} }
.logout{ .logout {
color: #fff; color: #fff;
font-size: .26rem; font-size: 0.26rem;
margin-left: auto; margin-left: auto;
font-weight: bold; font-weight: bold;
} }
} }
} }
.event-list-box{ .event-list-box {
height: calc(100vh - 2.4rem); height: calc(100vh - 2.4rem);
width: 100%; width: 100%;
background: #FFFFFF; background: #ffffff;
border-radius: 0.42rem 0.42rem 0rem 0rem; border-radius: 0.42rem 0.42rem 0rem 0rem;
margin-top: -1rem; margin-top: -1rem;
.tab-box{ .tab-box {
height: 1rem; height: 1rem;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #DCDCDC; border-bottom: 1px solid #dcdcdc;
.tab-item{ .tab-item {
font-size: .28rem; font-size: 0.28rem;
color: #666666; color: #666666;
} }
.active{ .active {
color: #111; color: #111;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
&::after{ &::after {
content: ''; content: "";
position: absolute; position: absolute;
background-color: #111; background-color: #111;
height: 0.06rem; height: 0.06rem;
width: .35rem; width: 0.35rem;
border-radius: .1rem; border-radius: 0.1rem;
bottom: -.15rem; bottom: -0.15rem;
left: 50%; left: 50%;
margin-left: -.18rem; margin-left: -0.18rem;
} }
} }
} }
.search-container{ .search-container {
padding: .2rem .35rem 0; padding: 0.2rem 0.35rem 0;
.search-box{ .search-box {
width: 100%; width: 100%;
background-color: #F1F1F1; background-color: #f1f1f1;
border-radius: 0.33rem; border-radius: 0.33rem;
height: .68rem; height: 0.68rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: .28rem; padding-left: 0.28rem;
img{ img {
width: .25rem; width: 0.25rem;
height: .25rem; height: 0.25rem;
margin-right: .13rem; margin-right: 0.13rem;
} }
span{ span {
color: #A6A9B0; color: #a6a9b0;
font-size: .29rem; font-size: 0.29rem;
} }
} }
} }
.event-list{ .event-list {
padding: 0 .35rem 1.28rem; padding: 0 0.35rem 1.28rem;
.item{ .item {
margin-top: .42rem; margin-top: 0.42rem;
.item-name{ .item-name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
color: #111; color: #111;
font-size: .31rem; font-size: 0.31rem;
} }
._bottom{ ._bottom {
margin-top: .34rem; margin-top: 0.34rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.item-info{ .item-info {
font-size: .25rem; font-size: 0.25rem;
.item-type{ .item-type {
display: flex; display: flex;
margin-bottom: .28rem; margin-bottom: 0.28rem;
}
.item-deadline{
display: flex;
.val{
position: relative;
padding-left: .32rem;
&::after{
position: absolute;
width: .13rem;
height: .13rem;
content: '';
left: .05rem;
top: .05rem;
border-radius: 50%;
}
} }
.red{ .item-deadline {
&::after{ display: flex;
background-color: #E9691F; .val {
position: relative;
padding-left: 0.32rem;
&::after {
position: absolute;
width: 0.13rem;
height: 0.13rem;
content: "";
left: 0.05rem;
top: 0.05rem;
border-radius: 50%;
}
} }
} .red {
.yellow{ &::after {
&::after{ background-color: #e9691f;
background-color: #FEBC2F; }
} }
} .yellow {
.green{ &::after {
&::after{ background-color: #febc2f;
background-color: #1CC291; }
}
.green {
&::after {
background-color: #1cc291;
}
} }
} }
.label {
color: #999;
}
.val {
color: #111;
}
} }
.label{ .handle-btn {
color: #999; width: 1.3rem;
} height: 0.54rem;
.val{ border-radius: 0.26rem;
color: #111; border: 1px solid #3978f8;
color: #3978f8;
text-align: center;
line-height: 0.54rem;
} }
} }
.handle-btn{
width: 1.3rem;
height: .54rem;
border-radius: .26rem;
border: 1px solid #3978F8;
color: #3978F8;
text-align: center;
line-height: .54rem;
}
}
} }
} }
} }
} }
</style> .addEvent {
\ No newline at end of file width: 45px;
height: 45px;
position: fixed;
right: 10px;
bottom: 150px;
background-color: #3f79e0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 30px;
color: #fff;
}
}
</style>
src/views/Login.vue
View file @ 7f0cdc6a
<template> <template>
<div class="login"> <div class="login">
<div class="banner"> <div class="banner">
<!-- <a
href="https://apis.map.qq.com/uri/v1/search?keyword=酒店&region=北京&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
>123123123</a
> -->
<p>Hello!</p> <p>Hello!</p>
<p style="margin-top: 0.3rem">欢迎登录XXXX物业管理端</p> <p style="margin-top: 0.3rem">欢迎登录XXXX物业管理端</p>
</div> </div>
...@@ -9,7 +13,11 @@ ...@@ -9,7 +13,11 @@
<input v-model="form.username" type="text" placeholder="请输入账号" /> <input v-model="form.username" type="text" placeholder="请输入账号" />
</div> </div>
<div class="form-item"> <div class="form-item">
<input type="password" v-model="form.password" placeholder="请输入密码" /> <input
type="password"
v-model="form.password"
placeholder="请输入密码"
/>
</div> </div>
<div class="code-box"> <div class="code-box">
<div class="form-item code"> <div class="form-item code">
...@@ -17,23 +25,25 @@ ...@@ -17,23 +25,25 @@
</div> </div>
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
<van-button type="info" @click="submit" round size="large">立即登录</van-button> <van-button type="info" @click="submit" round size="large"
>立即登录</van-button
>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { login, getCodeImg, getUserInfo } from "../api"; import { login, getCodeImg, getUserInfo } from "../api";
import { setToken } from '../utils/auth' import { setToken } from "../utils/auth";
export default { export default {
data() { data() {
return { return {
codeUrl: '', codeUrl: "",
form: { form: {
username: 'tyjy', username: "tyjy",
password: 'xcsq1234,', password: "xcsq1234,",
code: '', code: "",
uuid: '' uuid: "",
}, },
}; };
}, },
...@@ -50,16 +60,16 @@ export default { ...@@ -50,16 +60,16 @@ export default {
}, },
submit() { submit() {
login(this.form).then((res) => { login(this.form).then((res) => {
if( res.code === 200) { if (res.code === 200) {
setToken(res.data.access_token) setToken(res.data.access_token);
this.$router.replace('/home') this.$router.replace("/home");
} }
}); });
}, },
}, },
mounted() { mounted() {
this.getCode(); this.getCode();
} },
}; };
</script> </script>
...@@ -98,13 +108,13 @@ export default { ...@@ -98,13 +108,13 @@ export default {
background-color: #f1f2f6; background-color: #f1f2f6;
} }
} }
.code-box{ .code-box {
display: flex; display: flex;
img{ img {
margin-left: .2rem; margin-left: 0.2rem;
height: 1rem; height: 1rem;
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/Message.vue
View file @ 7f0cdc6a
...@@ -12,7 +12,9 @@ ...@@ -12,7 +12,9 @@
<div class="item-title">{{ item.title }}</div> <div class="item-title">{{ item.title }}</div>
<div class="item-time">{{ item.publishTime }}</div> <div class="item-time">{{ item.publishTime }}</div>
</div> </div>
<div class="item-desc" :class="{'notRead': item.status === 0}">{{ item.content }}啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="item-desc" :class="{ notRead: item.status === 0 }">
{{ item.content }}
</div>
</div> </div>
</van-list> </van-list>
</div> </div>
...@@ -20,7 +22,7 @@ ...@@ -20,7 +22,7 @@
</template> </template>
<script> <script>
import { getMessageList, getMessageDetail, getMessageCount } from '../api' import { getMessageList, getMessageDetail, getMessageCount } from "../api";
export default { export default {
data() { data() {
return { return {
...@@ -29,96 +31,95 @@ export default { ...@@ -29,96 +31,95 @@ export default {
page: 1, page: 1,
limit: 10, limit: 10,
total: 0, total: 0,
list: [] list: [],
} };
}, },
methods: { methods: {
getList() { getList() {
this.loading = true this.loading = true;
let params = { let params = {
page: this.page, page: this.page,
limit: this.limit limit: this.limit,
} };
getMessageList(params).then(res => { getMessageList(params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.loading = false this.loading = false;
this.list = this.list.concat(res.rows) this.list = this.list.concat(res.rows);
this.total = res.total this.total = res.total;
this.page++ this.page++;
if (this.list.length >= this.total) { if (this.list.length >= this.total) {
this.finished = true this.finished = true;
} }
} else { } else {
this.finished = true this.finished = true;
} }
});
})
}, },
toDetail(item) { toDetail(item) {
getMessageDetail(item.id).then(res => { getMessageDetail(item.id).then((res) => {
item.status = 1 item.status = 1;
getMessageCount().then(res => { getMessageCount().then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.$store.commit('SET_READCOUNT', res.data) this.$store.commit("SET_READCOUNT", res.data);
} }
}) });
}) });
this.$router.push({ this.$router.push({
name: 'EventDetail', name: "EventDetail",
query: { query: {
id: item.eventId id: item.eventId,
} },
}) });
} },
}, },
mounted() { mounted() {
this.getList() this.getList();
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.message-container{ .message-container {
.message-list{ .message-list {
padding: 0 .26rem; padding: 0 0.26rem;
.message-item{ .message-item {
border-bottom: 1px solid #E7E9F0; border-bottom: 1px solid #e7e9f0;
padding: .26rem 0 .35rem; padding: 0.26rem 0 0.35rem;
._top{ ._top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item-title{ .item-title {
font-weight: bold; font-weight: bold;
font-size: .31rem; font-size: 0.31rem;
} }
.item-time{ .item-time {
color: #999; color: #999;
font-size: .23rem; font-size: 0.23rem;
} }
} }
.item-desc{ .item-desc {
padding-right: .3rem; padding-right: 0.3rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-top: .24rem; margin-top: 0.24rem;
color: #999; color: #999;
font-size: .28rem; font-size: 0.28rem;
} }
.notRead{ .notRead {
position: relative; position: relative;
&::after{ &::after {
position: absolute; position: absolute;
width: .15rem; width: 0.15rem;
height: .15rem; height: 0.15rem;
content: ''; content: "";
background-color: #FE5219; background-color: #fe5219;
border-radius: 50%; border-radius: 50%;
right: 0; right: 0;
top: .06rem; top: 0.06rem;
} }
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/Search.vue
View file @ 7f0cdc6a
...@@ -14,18 +14,23 @@ ...@@ -14,18 +14,23 @@
<van-icon name="delete-o" @click="deleteHistory" /> <van-icon name="delete-o" @click="deleteHistory" />
</div> </div>
<div class="history-list"> <div class="history-list">
<div class="history-item" v-for="item in searchHistory" :key="item" @click="historyClick(item)"> <div
class="history-item"
v-for="item in searchHistory"
:key="item"
@click="historyClick(item)"
>
{{ item }} {{ item }}
</div> </div>
</div> </div>
</div> </div>
<div class="result-list"> <div class="result-list">
<van-list <van-list
v-model="loading" v-model="loading"
:finished="finished" :finished="finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="getList" @load="getList"
> >
<div <div
class="item" class="item"
:key="item.id" :key="item.id"
...@@ -41,10 +46,12 @@ ...@@ -41,10 +46,12 @@
</div> </div>
<div class="item-deadline" v-if="type === '0'"> <div class="item-deadline" v-if="type === '0'">
<div class="label">处理期限：</div> <div class="label">处理期限：</div>
<div class="val" :class="getClass(item.expectedDays)">{{ item.expectedDays }}天</div> <div class="val" :class="getClass(item.expectedDays)">
{{ item.expectedDays }}天
</div>
</div> </div>
</div> </div>
<div class="handle-btn">{{ type === '0' ? '去处理' : '查看' }}</div> <div class="handle-btn">{{ type === "0" ? "去处理" : "查看" }}</div>
</div> </div>
</div> </div>
</van-list> </van-list>
...@@ -53,191 +60,201 @@ ...@@ -53,191 +60,201 @@
</template> </template>
<script> <script>
import { getEventList } from '../api' import { getEventList } from "../api";
export default { export default {
data() { data() {
return { return {
type: '', type: "",
loading: false, loading: false,
finished: false, finished: false,
list: [], list: [],
page: 1, page: 1,
limit: 10, limit: 10,
total: 0, total: 0,
searchVal: '', searchVal: "",
searchHistory: [] searchHistory: [],
} };
}, },
methods: { methods: {
getClass(day) { getClass(day) {
if (day > 2) { if (day > 2) {
return 'green' return "green";
} else if (day === 2) { } else if (day === 2) {
return 'yellow' return "yellow";
} else { } else {
return 'red' return "red";
} }
}, },
toDetail(item) { toDetail(item) {
this.$router.push({ this.$router.push({
name: 'EventDetail', name: "EventDetail",
query: { query: {
id: item.id id: item.id,
} },
}) });
}, },
historyClick(item) { historyClick(item) {
this.searchVal = item this.list = [];
this.listReset() this.searchVal = item;
this.getList() this.listReset();
this.getList();
}, },
listReset() { listReset() {
this.page = 1 this.page = 1;
this.limit = 1
this.total = 0 this.total = 0;
this.loading = false this.loading = false;
this.finished = false this.finished = false;
}, },
getList() { getList() {
if (this.searchVal.trim() === '') { if (this.searchVal.trim() === "") {
this.finished = true this.finished = true;
return return;
} }
this.finished = false this.finished = false;
this.loading = true this.loading = true;
let params = { let params = {
pageNum: this.page, pageNum: this.page,
pageSize: this.limit, pageSize: this.limit,
processed: this.type === '0' ? true : false, processed: this.type == "0" ? false : true,
keyword: this.searchVal keyword: this.searchVal,
} };
getEventList(params).then(res => { getEventList(params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.loading = false this.loading = false;
this.total = res.total this.total = res.total;
this.list = this.list.concat(res.rows) this.list = this.list.concat(res.rows);
this.page ++ this.page++;
if (this.list.length >= this.total) { if (this.list.length >= this.total) {
this.finished = true this.finished = true;
} }
} else { } else {
this.loading = false this.loading = false;
this.finished = true this.finished = true;
} }
}) });
}, },
onSearch(val) { onSearch(val) {
this.getList() this.list = [];
this.getList();
if (this.searchHistory.indexOf(val) === -1) {
if (this.searchHistory.length >= 5) this.searchHistory.pop();
this.searchHistory.unshift(val);
}
localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
}, },
onCancel() { onCancel() {
console.log('cancel') this.list = [];
}, },
deleteHistory() { deleteHistory() {
this.searchHistory = [] this.searchHistory = [];
} localStorage.removeItem("searchHistory");
},
}, },
mounted() { created() {
this.type = this.$route.query.type this.type = this.$route.query.type;
} this.searchHistory = JSON.parse(
} localStorage.getItem("searchHistory") || "[]"
);
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-container{ .search-container {
.history-container{ .history-container {
padding: .42rem .28rem; padding: 0.42rem 0.28rem;
.history-title{ .history-title {
display: flex; display: flex;
font-size: .31rem; font-size: 0.31rem;
justify-content: space-between; justify-content: space-between;
} }
.history-list{ .history-list {
margin-top: .28rem; margin-top: 0.28rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.history-item{ .history-item {
margin-right: .28rem; margin-right: 0.28rem;
background-color: #f7f7f7; background-color: #f7f7f7;
color: #666666; color: #666666;
border-radius: .3rem; border-radius: 0.3rem;
padding: .2rem .35rem; padding: 0.2rem 0.35rem;
margin-bottom: .18rem; margin-bottom: 0.18rem;
} }
} }
} }
.result-list{ .result-list {
padding: 0 .35rem 1.28rem; padding: 0 0.35rem 1.28rem;
.item{ .item {
margin-top: .42rem; margin-top: 0.42rem;
.item-name{ .item-name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
color: #111; color: #111;
font-size: .31rem; font-size: 0.31rem;
} }
._bottom{ ._bottom {
margin-top: .34rem; margin-top: 0.34rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.item-info{ .item-info {
font-size: .25rem; font-size: 0.25rem;
.item-type{ .item-type {
display: flex; display: flex;
margin-bottom: .28rem; margin-bottom: 0.28rem;
} }
.item-deadline{ .item-deadline {
display: flex; display: flex;
.val{ .val {
position: relative; position: relative;
padding-left: .32rem; padding-left: 0.32rem;
&::after{ &::after {
position: absolute; position: absolute;
width: .13rem; width: 0.13rem;
height: .13rem; height: 0.13rem;
content: ''; content: "";
left: .05rem; left: 0.05rem;
top: .05rem; top: 0.05rem;
border-radius: 50%; border-radius: 50%;
} }
} }
.red{ .red {
&::after{ &::after {
background-color: #E9691F; background-color: #e9691f;
} }
} }
.yellow{ .yellow {
&::after{ &::after {
background-color: #FEBC2F; background-color: #febc2f;
} }
} }
.green{ .green {
&::after{ &::after {
background-color: #1CC291; background-color: #1cc291;
} }
} }
} }
.label{ .label {
color: #999; color: #999;
} }
.val{ .val {
color: #111; color: #111;
} }
} }
.handle-btn{ .handle-btn {
width: 1.3rem; width: 1.3rem;
height: .54rem; height: 0.54rem;
border-radius: .26rem; border-radius: 0.26rem;
border: 1px solid #3978F8; border: 1px solid #3978f8;
color: #3978F8; color: #3978f8;
text-align: center; text-align: center;
line-height: .54rem; line-height: 0.54rem;
} }
} }
}
} }
}
} }
</style> </style>
\ No newline at end of file
src/views/addEvent.vue 0 → 100644
View file @ 7f0cdc6a
<template>
<div>
<van-form @submit="onSubmit" class="form">
<van-cell-group inset class="wrap" :border="false">
<van-field v-model="form.eventName" v-bind="field('eventName', 1)" />
<van-field
readonly
is-link
v-model="form.category"
v-bind="field('category', 1)"
@click="popupChange('category')"
/>
<van-field
is-link
readonly
v-model="form.community"
v-bind="field('community', 1)"
@click="popupChange('community')"
/>
<van-field
readonly
is-link
v-model="form.house"
v-bind="field('house', 1)"
@click="popupChange('house')"
/>
<van-field v-model="form.gridName" v-bind="field('gridName')" />
<van-field v-model="form.address" v-bind="field('address')" />
<div class="content">
<van-field
v-model="form.eventDetails"
rows="4"
autosize
type="textarea"
maxlength="200"
placeholder="请填写事件详情"
:border="false"
show-word-limit
class="textarea"
/><van-uploader
class="uploader"
v-model="fileList"
multiple
:after-read="afterRead"
:before-delete="beforeDelete"
@click-preview="clickPreview"
/>
</div>
<van-field
v-model="form.involvedNumber"
v-bind="field('involvedNumber')"
/>
<van-field v-model="form.reportName" v-bind="field('reportName')" />
<van-field
v-model="form.reflectorMobile"
v-bind="field('reflectorMobile', 1)"
/>
<van-field
readonly
is-link
v-model="form.reportDate"
v-bind="field('reportDate', 1)"
@click="popupChange('reportDate')"
/>
<van-field
readonly
is-link
v-model="form.rankNo"
v-bind="field('rankNo')"
@click="popupChange('rankNo')"
/>
<van-field v-model="form.expectedDays" v-bind="field('expectedDays')" />
<van-field readonly />
</van-cell-group>
<div class="btn">
<van-button
round
block
:disabled="isDisabled"
type="primary"
native-type="submit"
color="linear-gradient(to right,#2498e2, #2f88ed)"
>
提交
</van-button>
</div>
<van-popup v-model="popupShow" position="bottom">
<van-picker
v-if="
['category', 'rankNo', 'community', 'house'].includes(popupType)
"
show-toolbar
:columns="popupData"
@confirm="onConfirm"
@cancel="popupShow = false"
/>
<van-datetime-picker
v-if="popupType == 'reportDate'"
title="上报时间"
v-model="currentDate"
type="datetime"
@confirm="onConfirm"
:min-date="minDate"
:max-date="maxDate"
/>
</van-popup>
</van-form>
</div>
</template>
<script>
import {
addEvent,
getCommunityList,
getVillageList,
uploadImg,
} from "@/api/index";
export default {
data() {
return {
form: {
eventName: "123",
reportDate: "",
expectedDays: "1",
imgUrlList: [],
status: "待处理",
},
fieldMap: {
eventName: "事件名称",
category: "事件类型",
community: "社区",
house: "小区",
gridName: "上报网络",
address: "事发地点",
eventDetails: "事件详情",
involvedNumber: "涉及人数",
reportName: "上报人",
reflectorMobile: "上报人电话",
reportDate: "上报时间",
rankNo: "事件等级",
expectedDays: "处理天数",
},
fileList: [],
popupShow: false,
popupType: "",
popupData: [],
isDisabled: false,
popupList: {
category: [
{ text: "类型1", value: 1 },
{ text: "类型2", value: 2 },
{ text: "类型3", value: 3 },
],
rankNo: [
{ text: "一级事件", value: 1 },
{ text: "二级事件", value: 2 },
{ text: "三级事件", value: 3 },
],
community: [],
},
isPreview: false,
};
},
created() {
getCommunityList().then((res) => {
this.popupList.community = res.data.map((item) => ({
text: item.name,
value: item.id,
}));
});
this.form.reportDate = this.dateFormate(new Date());
},
methods: {
async onSubmit() {
console.log(this.form);
this.form.imgUrlList = this.form.imgUrlList.join(",");
if (this.isDisabled) return;
this.isDisabled = true;
const res = await addEvent(this.form);
this.isDisabled = false;
if (res.code == 200) {
this.$toast.success("提交成功");
this.$router.push("/home");
}
},
popupChange(type) {
this.popupType = type;
this.popupShow = true;
const handle = {
category: () => (this.popupData = this.popupList[type]),
community: () => (this.popupData = this.popupList[type]),
rankNo: () => (this.popupData = this.popupList[type]),
house: () => {
if (this.form.communityId) {
this.popupData = this.popupList[type];
} else {
this.$toast("请先选择社区");
this.popupShow = false;
}
},
reportDate: () => (this.currentDate = new Date()),
};
handle[type]();
},
onConfirm(e) {
const handle = {
category: () => (this.form[this.popupType] = e.text),
community: async () => {
if (e.value != this.form.communityId) {
this.form.houseId = "";
this.form.house = "";
}
this.form[this.popupType] = e.text;
this.form.communityId = e.value;
const res = await getVillageList(e.value);
this.popupList.house = res.data.map((item) => ({
text: item.name,
value: item.id,
}));
},
house: () => {
this.form[this.popupType] = e.text;
this.form.houseId = e.value;
},
rankNo: () => (this.form[this.popupType] = e.text),
reportDate: () => (this.form[this.popupType] = this.dateFormate(e)),
};
handle[this.popupType]();
this.popupShow = false;
},
clickPreview() {
this.isPreview = true;
},
afterRead(files) {
if (!Array.isArray(files)) files = [files];
files.forEach(async (file) => {
file.status = "uploading";
file.message = "上传中...";
let formData = new FormData();
formData.append("file", file.file);
const res = await uploadImg(formData);
this.form.imgUrlList.push(res.data.url);
if (res.code == 200) {
file.status = "done";
file.message = "上传成功";
} else {
file.status = "failed";
file.message = "上传失败";
}
});
},
beforeDelete(file, detail) {
this.form.photo.splice(detail.index, 1);
return true;
},
field(key, required) {
const data = {
label: this.fieldMap[key],
placeholder: `请填写${this.fieldMap[key]}`,
required: required,
};
if (required) data.rules = [{ required: true }];
return data;
},
dateFormate(date) {
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours().toString().padStart(2, "0");
let minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute} `;
},
},
computed: {
minDate() {
let date = new Date();
let year = date.getFullYear() - 1;
let month = date.getMonth() + 1;
let day = date.getDate();
return new Date(year, month, day);
},
maxDate() {
return new Date();
},
},
};
</script>
<style lang="scss" scoped>
.form {
overflow: hidden;
}
.wrap {
background-color: #fff;
border-radius: 0;
// box-shadow: 0 2px 8px #f0f1f5;
.content {
margin: 16px;
border-radius: 8px;
border: 1px solid #ebedf0;
overflow: hidden;
.uploader {
margin: 0 16px;
}
}
}
.btn {
margin: 0px 30px;
}
</style>
vue.config.js
View file @ 7f0cdc6a
...@@ -2,40 +2,54 @@ module.exports = { ...@@ -2,40 +2,54 @@ module.exports = {
lintOnSave: false, lintOnSave: false,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/", publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
chainWebpack: (config) => { chainWebpack: (config) => {
const svgRule = config.module.rule("svg"); const svgRule = config.module.rule("svg");
svgRule.uses.clear(); svgRule.uses.clear();
svgRule svgRule
.test(/\.svg$/) .test(/\.svg$/)
.use("svg-sprite-loader") .use("svg-sprite-loader")
.loader("svg-sprite-loader"); .loader("svg-sprite-loader");
}, },
configureWebpack: { configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: { module: {
rules: [ rules: [
{ {
test: /\.ts?$/, test: /\.ts?$/,
loader: 'ts-loader', loader: "ts-loader",
exclude: /node_modules/, exclude: /node_modules/,
options: { options: {
appendTsSuffixTo: [/\.vue$/], appendTsSuffixTo: [/\.vue$/],
} },
} },
] ],
} },
}, },
productionSourceMap: false, productionSourceMap: false,
devServer: { devServer: {
proxy: { proxy: {
"/proxyApi": { "/proxyApi": {
// target: 'http://192.168.10.12:18001/hmit-api', // target: 'http://192.168.10.12:18001/hmit-api',
target: 'http://192.168.10.4:10024/', target: "http://192.168.10.4:10024/",
changeOrigin: true, // target: "https://xcsq.zjhmit.com/api",
pathRewrite: { changeOrigin: true,
"^/proxyApi": "/", pathRewrite: {
}, "^/proxyApi": "",
} },
logLevel: "debug",
onProxyRes(proxyRes, req, res) {
console.log("Proxying response from:", req.path);
},
},
"/img-original": {
target: "https://xcsq.zjhmit.com",
changeOrigin: true,
logLevel: "debug",
onProxyRes(proxyRes, req, res) {
console.log("file:", req.path);
},
}, },
port: 8080 },
port: 8080,
}, },
}; };
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment