Skip to content

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

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

parent ddbc4ea3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 10491 additions and 559 deletions
pnpm-lock.yaml 0 → 100644
View file @ 7f0cdc6a
This diff is collapsed.
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",
}) });
}
//社区列表
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; export default request;
src/views/EventDetail.vue
View file @ 7f0cdc6a
This diff is collapsed.
src/views/EventList.vue
View file @ 7f0cdc6a
This diff is collapsed.
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,10 +108,10 @@ export default { ...@@ -98,10 +108,10 @@ 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;
} }
} }
......
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,93 +31,92 @@ export default { ...@@ -29,93 +31,92 @@ 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;
} }
} }
} }
......
src/views/Search.vue
View file @ 7f0cdc6a
...@@ -14,7 +14,12 @@ ...@@ -14,7 +14,12 @@
<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>
...@@ -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 class="handle-btn">{{ type === '0' ? '去处理' : '查看' }}</div> </div>
<div class="handle-btn">{{ type === "0" ? "去处理" : "查看" }}</div>
</div> </div>
</div> </div>
</van-list> </van-list>
...@@ -53,188 +60,198 @@ ...@@ -53,188 +60,198 @@
</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() { },
this.type = this.$route.query.type created() {
} 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;
} }
} }
} }
......
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
...@@ -15,27 +15,41 @@ module.exports = { ...@@ -15,27 +15,41 @@ module.exports = {
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/",
// target: "https://xcsq.zjhmit.com/api",
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/proxyApi": "/", "^/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,
}, },
}; };
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