Merge branch 'dev' into vite
# Conflicts: # examples/App.vue # examples/router/autoRoutes.js # examples/utils/index.js # package.json # packages/wechat/AppProjectActivities/components/Event.vue # project/dv/apps/AppHomesteadDV.vue # vue.config.js
This commit is contained in:
aixianling
130
examples/App.vue
130
examples/App.vue
@@ -1,21 +1,14 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="header" v-if="showTools">
|
||||
<b v-text="serveName"/>
|
||||
<el-button type="text" @click="showTools=false">隐藏工具栏</el-button>
|
||||
<el-button type="text" @click="handleLogin">点此登录</el-button>
|
||||
</div>
|
||||
<el-row class="main-content" type="flex">
|
||||
<el-scrollbar class="menu" v-if="showTools">
|
||||
<el-input size="small" v-model="search" placeholder="应用名称或文件名" clearable @change="recordSearch"/>
|
||||
<el-menu router>
|
||||
<el-menu-item v-for="(menu,j) in menus" :key="j" :index="menu.path">
|
||||
{{ menu.label }}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<router-view v-if="selectedApp"/>
|
||||
<ai-empty v-else>请选择应用</ai-empty>
|
||||
<header-nav v-if="showTools" :title="serveName">
|
||||
<template #right>
|
||||
<div @click="showTools=false">隐藏工具栏</div>
|
||||
<div @click="handleLogin">点此登录</div>
|
||||
</template>
|
||||
</header-nav>
|
||||
<el-row class="fill mar-t48" type="flex">
|
||||
<slider-nav v-if="showTools"/>
|
||||
<main-content class="fill"/>
|
||||
</el-row>
|
||||
<div v-if="dialog" class="sign-box">
|
||||
<ai-sign style="margin: auto" :instance="$axios" :action="{login}"
|
||||
@@ -26,12 +19,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import SliderNav from "./components/sliderNav";
|
||||
import MainContent from "./components/mainContent";
|
||||
import HeaderNav from "./components/headerNav";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {HeaderNav, MainContent, SliderNav},
|
||||
computed: {
|
||||
...mapState(['apps']),
|
||||
serveName() {
|
||||
let names = {
|
||||
development: "村微产品库",
|
||||
@@ -39,25 +34,17 @@ export default {
|
||||
}
|
||||
return names[process.env.NODE_ENV]
|
||||
},
|
||||
menus() {
|
||||
let reg = new RegExp(`.*${this.search.replace(/-/g,'')||''}.*`, 'gi')
|
||||
return (this.apps || []).filter(e => !this.search || reg.test(e.name) || reg.test(e.label))
|
||||
},
|
||||
selectedApp() {
|
||||
return this.$route?.name != "产品库"
|
||||
},
|
||||
login() {
|
||||
let url = '/auth/oauth/token';
|
||||
/project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
|
||||
return url
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
token: "",
|
||||
search: "",
|
||||
dialog: false,
|
||||
showTools: true
|
||||
showTools: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -86,12 +73,9 @@ export default {
|
||||
this.dialog = true
|
||||
})
|
||||
},
|
||||
recordSearch() {
|
||||
localStorage.setItem("searchApp", this.search)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.search = localStorage.getItem("searchApp") || ""
|
||||
this.token = localStorage.getItem("ui-token")
|
||||
if (this.token) this.getUserInfo()
|
||||
wx = jWeixin
|
||||
},
|
||||
@@ -111,33 +95,8 @@ html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.villageFinance-autocomplete {
|
||||
width: auto !important;
|
||||
|
||||
li {
|
||||
line-height: normal !important;
|
||||
padding: 7px !important;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
&:hover {
|
||||
background-color: #f4f4f4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
.mar-t48 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
#app {
|
||||
@@ -166,58 +125,6 @@ html, body {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
min-width: 200px;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
border-right: solid 1px #e6e6e6;
|
||||
background-color: #fff;
|
||||
|
||||
.el-scrollbar__view {
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header {
|
||||
text-align: start;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
height: 43px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
& > b {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .main-content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > *:last-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
z-index: 99;
|
||||
margin: -10px;
|
||||
@@ -229,4 +136,5 @@ html, body {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
BIN
examples/assets/nav_bg.png
Normal file
BIN
examples/assets/nav_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
271
examples/components/headerNav.vue
Normal file
271
examples/components/headerNav.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="headerNav">
|
||||
<div style="position: relative">
|
||||
<ai-icon type="logo" :icon="'iconcunwei'"/>
|
||||
<ai-icon type="logo" :icon="'iconcunwei'" class="textShadow"/>
|
||||
</div>
|
||||
<span class="headerTitle">{{ title }}<div class="textShadow" v-html="title"/></span>
|
||||
<el-row type="flex" align="middle" class="toolbar">
|
||||
<slot v-if="$slots.right" name="right"/>
|
||||
</el-row>
|
||||
<el-dropdown @visible-change="v=>isClick=v" @command="doMenu" class="rightDropdown">
|
||||
<el-row type="flex" align="middle">
|
||||
<el-avatar :src="user.info.avatar">
|
||||
{{ user.info.name.slice(-2) }}
|
||||
</el-avatar>
|
||||
<span>{{ [user.info.name, user.info.roleName].join(" - ") }}</span>
|
||||
<i :class="dropdownIcon"/>
|
||||
</el-row>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="user">用户中心</el-dropdown-item>
|
||||
<el-dropdown-item command="signOut">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'headerNav',
|
||||
props: {
|
||||
title: {default: ""}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClick: false,
|
||||
drawer: false,//抽屉
|
||||
count: 0,
|
||||
filesList: [],
|
||||
fileName: '',
|
||||
badgeNum: 0,
|
||||
dvOptions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
dropdownIcon() {
|
||||
return this.isClick ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取最新的安卓、ios下载二维码
|
||||
doMenu(comm) {
|
||||
switch (comm) {
|
||||
case 'signOut':
|
||||
//登出
|
||||
this.$confirm("是否要登出?", {type: "warning"}).then(() => {
|
||||
this.$store.commit("SignOut")
|
||||
}).catch(() => {
|
||||
})
|
||||
break;
|
||||
case 'user':
|
||||
this.$router.push({name: "个人中心"})
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headerNav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-image: url("../assets/nav_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 48px;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
height: 48px;
|
||||
padding-left: 24px;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
||||
.AiIcon {
|
||||
font-size: 38px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #CCDBF6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 24px;
|
||||
color: #FFF;
|
||||
line-height: 28px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #CCDBF6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textShadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-shadow: 0 2px 0 #384DC3;
|
||||
color: transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
::v-deep.toolbar {
|
||||
gap: 12px;
|
||||
margin-right: 32px;
|
||||
|
||||
& > div {
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: rgba(#fff, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(46, 51, 68, .15);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.el-image {
|
||||
margin: 12px 0 12px 16px;
|
||||
}
|
||||
|
||||
|
||||
.rightDropdown {
|
||||
font-size: 12px;
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
background: rgba(#fff, .1);
|
||||
|
||||
.el-row {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .downLoad_main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.infinite-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.infinite-list-item {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(208, 212, 220, 1);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
|
||||
.svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
|
||||
.fileName {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
border-right: solid 1px #999999;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
border-right: solid 1px #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 50px;
|
||||
color: #5088FF;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #8888;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
162
examples/components/mainContent.vue
Normal file
162
examples/components/mainContent.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<section class="mainContent">
|
||||
<el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick"
|
||||
@tab-remove="handleTabRemove">
|
||||
<el-tab-pane label="默认页" class="layoutItem">
|
||||
<ai-empty>欢迎使用村微产品库</ai-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-for="op in tabs" :key="op.name" :closable="op.name!='工作台'" :name="op.name" :label="op.label" lazy>
|
||||
<router-view/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "mainContent",
|
||||
computed: {
|
||||
...mapState(['apps']),
|
||||
currentTab() {
|
||||
let {name, query, hash} = this.$route
|
||||
return [name, query?.id, hash].join("")
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(v) {
|
||||
this.getTabs(v)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab) {
|
||||
let to = {}, selectedTab = this.tabs.find(e => e.name == tab.name)
|
||||
if (selectedTab) {
|
||||
to = {...selectedTab, params: {tabclick: 1}}
|
||||
} else {
|
||||
let {name, query, hash} = tab
|
||||
to = {name, query, hash, params: {tabclick: 1}}
|
||||
}
|
||||
this.$router.push({...to})
|
||||
},
|
||||
handleTabRemove(id = this.currentTab) {
|
||||
let tabs = JSON.parse(JSON.stringify(this.tabs)),
|
||||
index = tabs?.findIndex(e => id == e.name)
|
||||
if (id == this.currentTab) {
|
||||
let next = tabs?.[index + 1] || tabs?.[index - 1]
|
||||
this.handleTabClick(next)
|
||||
}
|
||||
this.tabs.splice(index, 1)
|
||||
},
|
||||
getTabs() {
|
||||
let {name, query, hash} = this.$route
|
||||
let tab = this.tabs.find(e => e.name == this.currentTab)
|
||||
if (tab) {
|
||||
} else if (name) {
|
||||
let menu = this.apps.find(e => e.name == name)
|
||||
this.tabs.push({name, query, hash, label: menu?.label})
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTabs()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mainContent {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
::v-deep.layout {
|
||||
height: 100%;
|
||||
background: #F5F6F9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > .el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
border: none;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 8px 0 12px;
|
||||
text-align: left;
|
||||
min-width: 130px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border: none;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
|
||||
& + .el-tabs__item {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
float: right;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
color: #89b;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 1px solid #D8DCE3;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: #F5F6F9;
|
||||
color: #222;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
content: " ";
|
||||
width: 1px;
|
||||
background: #D8DCE3;
|
||||
height: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
254
examples/components/sliderNav.vue
Normal file
254
examples/components/sliderNav.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<section class="sliderNav">
|
||||
<el-input class="searchApp" size="small" v-model="searchApp" placeholder="搜索应用" clearable
|
||||
prefix-icon="iconfont iconSearch" @change="recordSearch"/>
|
||||
<el-scrollbar class="ai-menu">
|
||||
<div v-for="(item,i) in navs" :key="i">
|
||||
<div class="rootMenu" :class="{isActive:menuPath.includes(item.name)}"
|
||||
@click.stop="openKidMenu(item)">
|
||||
<i class="prep-icon" :class="item.style||'iconfont iconloudongmoxing'"/>
|
||||
<span class="menuName fill" v-text="item.label"/>
|
||||
<i v-if="item.children" class="iconfont" :class="arrowIcon(item.showChildren)"/>
|
||||
</div>
|
||||
<div class="kidMenu" v-if="item.showChildren" @click.stop>
|
||||
<div class="kidPane">
|
||||
<div class="submenu wrap" flex v-for="menu in item.children" :key="menu.name">
|
||||
<b v-text="menu.label" :class="{menuBtn:menu.type==1,current:menuPath.includes(menu.name)}"
|
||||
@click="handleSelect(menu)"/>
|
||||
<div class="menuBtn" v-for="kid in menu.children" :key="kid.name" v-text="kid.label"
|
||||
@click="handleSelect(kid)"
|
||||
:class="{current:menuPath.includes(kid.name)}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"/>
|
||||
</el-scrollbar>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "sliderNav",
|
||||
data() {
|
||||
return {
|
||||
searchApp: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user', 'apps']),
|
||||
navs() {
|
||||
let reg = new RegExp(`.*${this.searchApp?.replace(/-/g,'')||''}.*`, 'gi')
|
||||
return (this.apps || []).filter(e => !this.searchApp || reg?.test(e.name) || reg?.test(e.label))
|
||||
},
|
||||
isConsoleRoute() {
|
||||
return this.$route.name == "工作台"
|
||||
},
|
||||
menuPath() {
|
||||
let paths = [], current = this.apps?.find(e => e.name == this.$route.name)
|
||||
const findParent = name => {
|
||||
let menu = this.apps?.find(e => e.name == name)
|
||||
if (menu) {
|
||||
paths.push(menu.name)
|
||||
if (!!menu.parentId) findParent(menu.parentId)
|
||||
}
|
||||
}
|
||||
if (current) {
|
||||
findParent(current.name)
|
||||
}
|
||||
return paths
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openKidMenu(parent) {
|
||||
if (parent.children) {
|
||||
parent.showChildren = !parent.showChildren
|
||||
} else {
|
||||
this.handleSelect(parent)
|
||||
}
|
||||
},
|
||||
handleSelect(item) {
|
||||
if (!item.path) return
|
||||
if (item.name == this.$route.name) {
|
||||
//避免同一路由跳转的BUG vue-router官方BUG
|
||||
} else {
|
||||
let {name, path} = item
|
||||
if (/\?app=/.test(path)) {
|
||||
this.goto({name, query: {app: path.replace(/.+\?app=/, '')}})
|
||||
} else if (/\?moduleId=/.test(path)) {
|
||||
this.goto({name, query: {moduleId: path.replace(/.+\?moduleId=/, '')}})
|
||||
} else {
|
||||
this.goto({name})
|
||||
}
|
||||
}
|
||||
},
|
||||
goto(item) {
|
||||
this.$router.push(item)
|
||||
},
|
||||
subMenuIcon(flag) {
|
||||
return flag ? 'iconfont iconArrow_Down' : "iconfont iconArrow_Right"
|
||||
},
|
||||
arrowIcon(v) {
|
||||
return v ? "iconArrow_Down" : "iconArrow_Right"
|
||||
},
|
||||
recordSearch() {
|
||||
localStorage.setItem("searchApp", this.searchApp)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.searchApp = localStorage.getItem("searchApp") || ""
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sliderNav {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
transition: width .1s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
background: #EFF1F4;
|
||||
color: #222;
|
||||
position: relative;
|
||||
|
||||
.kidMenu {
|
||||
padding: 0 16px;
|
||||
background: #EFF1F4;
|
||||
|
||||
.rootName {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kidPane {
|
||||
font-size: 13px;
|
||||
|
||||
.submenu {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
color: #aaa;
|
||||
|
||||
& > b {
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.menuBtn {
|
||||
display: block;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: #26f;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rootMenu {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px -1px 0px 0px #D8DCE3 inset, 0px 1px 0px 0px #FFF inset, -1px 0px 0px 0px #E5E5E5 inset;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
|
||||
.iconfont {
|
||||
color: #89B;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&.isActive {
|
||||
color: #26f;
|
||||
|
||||
.iconfont {
|
||||
color: #26f !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-menu {
|
||||
padding-left: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .searchApp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0px -1px 0px 0px #E5E5E5 inset;
|
||||
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
background: inherit;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
left: 16px;
|
||||
|
||||
.iconSearch {
|
||||
font-size: 20px;
|
||||
width: fit-content;
|
||||
color: #89B;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: #aaa;
|
||||
border-top: 1px solid #ddd;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
margin: 16px 16px 32px;
|
||||
|
||||
&:before {
|
||||
content: "到达底部";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0 16px;
|
||||
background: #EFF1F4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -58,14 +58,6 @@ const $decimalCalc = (...arr) => {
|
||||
//返回计算值
|
||||
return intArr.reduce((t, a) => t + a) / precision
|
||||
}
|
||||
/**
|
||||
* @param { function } func
|
||||
|
||||
* @param { number } wait 延迟执行毫秒数
|
||||
|
||||
* @param { boolean } immediate true 表立即执行，false 表非立即执行
|
||||
*/
|
||||
|
||||
export const waiting = {
|
||||
init(ops, count) {
|
||||
if (document.body) {
|
||||
|
||||
@@ -28,6 +28,7 @@ export default {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="AppMonitoringObject">
|
||||
<keep-alive :include="['List']">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
import Add from "./components/add";
|
||||
export default {
|
||||
name: "AppMonitoringObject",
|
||||
label: "监测对象",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
List, Add
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Add") {
|
||||
this.component = "Add";
|
||||
this.params = data.params;
|
||||
}
|
||||
|
||||
if (data.type === "List") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getTableData();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppMonitoringObject {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,797 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%">
|
||||
<ai-detail class="add">
|
||||
<template #title>
|
||||
<ai-title :title="params.id ? '监测对象详情' : '新增监测对象'" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)">
|
||||
<template slot="rightBtn" v-if="params.id && navIndex != 1">
|
||||
<el-button size="small" icon="iconfont iconEdit" type="primary" v-if="!isEdit" @click="isEdit=true">编辑</el-button>
|
||||
<el-button size="small" icon="iconfont" type="primary" v-if="isEdit" @click="save">保存</el-button>
|
||||
<el-button size="small" icon="iconfont" v-if="isEdit" @click="getDetail(),isEdit=false">取消</el-button>
|
||||
</template>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="136px">
|
||||
<div class="nav-list" v-if="params.id">
|
||||
<div class="nav-item" :class="navIndex != 1 ? 'active' : ''" @click="navIndex=0">基本信息</div>
|
||||
<div class="nav-item" :class="navIndex == 1 ? 'active' : ''" @click="navIndex=1;getLogList()">帮扶日志</div>
|
||||
</div>
|
||||
<div v-if="navIndex != 1">
|
||||
<ai-card title="基础信息">
|
||||
<template slot="content">
|
||||
<div v-if="isEdit">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="监测对象类型" prop="type" >
|
||||
<ai-select v-model="forms.type" placeholder="请选择" clearable :selectList="$dict.getDict('fpType')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="phone" >
|
||||
<el-input v-model="forms.phone" placeholder="请输入" maxlength="20" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="是否搬迁" prop="move" >
|
||||
<ai-select v-model="forms.move" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="所属区域" prop="addressAreaId">
|
||||
<ai-area-select
|
||||
clearable
|
||||
always-show
|
||||
:instance="instance"
|
||||
v-model="forms.addressAreaId"
|
||||
@fullname="v=>forms.addressArea=v"
|
||||
:disabled-level="user.info.areaList.length"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="家庭住址" prop="address">
|
||||
<el-input v-model="forms.address" placeholder="请输入" maxlength="50" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="安置地区" prop="placeAreaId" v-if="forms.move == '01'">
|
||||
<ai-area-select
|
||||
clearable
|
||||
always-show
|
||||
:instance="instance"
|
||||
v-model="forms.placeAreaId"
|
||||
@fullname="v=>forms.placeArea=v"
|
||||
:disabled-level="user.info.areaList.length"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安置详细地址" prop="place" v-if="forms.move == '01'">
|
||||
<el-input v-model="forms.place" placeholder="请输入" maxlength="50" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="监测对象类型："><span >{{dict.getLabel('fpType', forms.type)}}</span></ai-info-item>
|
||||
<ai-info-item label="联系方式："><span >{{forms.phone}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="是否搬迁："><span >{{dict.getLabel('fpYesOrNo', forms.move)}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="所属区域："><span >{{forms.addressArea}}</span></ai-info-item>
|
||||
<ai-info-item label="家庭住址："><span >{{forms.address}}</span></ai-info-item>
|
||||
<ai-info-item label="安置地区：" v-if="forms.move == '01'"><span >{{forms.placeArea}}</span></ai-info-item>
|
||||
<ai-info-item label="安置详细地址：" v-if="forms.move == '01'"><span >{{forms.place}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<ai-card title="家庭成员">
|
||||
<template slot="content">
|
||||
<ai-search-bar v-if="isEdit">
|
||||
<template #right><el-button type="primary" icon="iconfont iconAdd" @click="showAddFamily=true">添加</el-button></template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="forms.familyList" :colConfigs="colConfigs" :dict="dict" :isShowPagination="false">
|
||||
<el-table-column slot="age" label="年龄" align="center" width="200">
|
||||
<template v-slot="{ row }">
|
||||
<span>{{getAge(row.idNumber)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="200" v-if="isEdit">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-button type="text" @click="editFamily(row, $index)">编辑</el-button>
|
||||
<el-button type="text" @click="delFamily(row, $index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<ai-card title="家庭情况">
|
||||
<template slot="content">
|
||||
<div class="above" v-if="isEdit">
|
||||
<div class="left">
|
||||
<el-form-item label="是否危房" prop="dilapidatedHouse" >
|
||||
<ai-select v-model="forms.dilapidatedHouse" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险类型" prop="riskType" >
|
||||
<ai-select v-model="forms.riskType" placeholder="请选择" clearable :selectList="$dict.getDict('fpRiskType')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="是否饮水安全" prop="waterSecurity" >
|
||||
<ai-select v-model="forms.waterSecurity" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above" v-else>
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="是否危房："><span >{{dict.getLabel('fpYesOrNo', forms.dilapidatedHouse)}}</span></ai-info-item>
|
||||
<ai-info-item label="风险类型："><span >{{dict.getLabel('fpRiskType', forms.riskType)}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="是否饮水安全："><span >{{dict.getLabel('fpYesOrNo', forms.waterSecurity)}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<ai-card title="收入情况（单位：元）">
|
||||
<template slot="content">
|
||||
<div v-if="isEdit">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="工资收入">
|
||||
<el-input v-model.number="forms.income1" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="财产性收入">
|
||||
<el-input v-model.number="forms.income3" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="理赔收入">
|
||||
<el-input v-model.number="forms.income8" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="合规自然支出">
|
||||
<el-input v-model.number="forms.income9" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="生存经营收入">
|
||||
<el-input v-model.number="forms.income2" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="转移性收入">
|
||||
<el-input v-model.number="forms.income4" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="生产经营支出">
|
||||
<el-input v-model.number="forms.income5" placeholder="请输入" maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:14px;">备注：不填写时默认为0元</p>
|
||||
</div>
|
||||
<div class="above" v-else>
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="工资收入："><span >{{forms.income1 || 0}}</span></ai-info-item>
|
||||
<ai-info-item label="财产性收入："><span >{{forms.income3 || 0}}</span></ai-info-item>
|
||||
<ai-info-item label="理赔收入："><span >{{forms.income8 || 0}}</span></ai-info-item>
|
||||
<ai-info-item label="合规自然支出："><span >{{forms.income9 || 0}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="生存经营收入："><span >{{forms.income2 || 0}}</span></ai-info-item>
|
||||
<ai-info-item label="转移性收入："><span >{{forms.income4 || 0}}</span></ai-info-item>
|
||||
<ai-info-item label="生产经营支出："><span >{{forms.income5 || 0}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
|
||||
<ai-card title="帮扶情况">
|
||||
<template slot="content">
|
||||
<div class="above" v-if="isEdit">
|
||||
<div class="left">
|
||||
<el-form-item label="产业帮扶" prop="industrialAssistance" >
|
||||
<ai-select v-model="forms.industrialAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpIndustrialAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="就业帮扶" prop="employmentAssistance" >
|
||||
<ai-select v-model="forms.employmentAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpEmploymentAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="金融帮扶" prop="financialAssistance" >
|
||||
<ai-select v-model="forms.financialAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpFinancialAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公益岗位帮扶" prop="publicWelfarePostAssistance" >
|
||||
<ai-select v-model="forms.publicWelfarePostAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpPublicWelfarePostAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险消除时间" prop="riskEliminationDate" v-if="forms.isRisk == 1">
|
||||
<el-date-picker
|
||||
v-model="forms.riskEliminationDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="健康帮扶" prop="healthAssistance" >
|
||||
<ai-select v-model="forms.healthAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpHealthAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="教育帮扶" prop="educationalAssistance" >
|
||||
<ai-select v-model="forms.educationalAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpEducationalAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="社会帮扶" prop="socialAssistance" >
|
||||
<ai-select v-model="forms.socialAssistance" placeholder="请选择" clearable :selectList="$dict.getDict('fpSocialAssistance')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否风险消除">
|
||||
<ai-select v-model="forms.isRisk" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险消除方式" prop="riskEliminationMethod" v-if="forms.isRisk == 1">
|
||||
<ai-select v-model="forms.riskEliminationMethod" placeholder="请选择" clearable :selectList="$dict.getDict('fpRiskEliminationMethod')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above" v-else>
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="产业帮扶："><span >{{dict.getLabel('fpIndustrialAssistance', forms.industrialAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="就业帮扶："><span >{{dict.getLabel('fpEmploymentAssistance', forms.employmentAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="金融帮扶："><span >{{dict.getLabel('fpFinancialAssistance', forms.financialAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="公益岗位帮扶："><span >{{dict.getLabel('fpPublicWelfarePostAssistance', forms.publicWelfarePostAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="风险消除时间：" v-if="forms.isRisk == 1"><span >{{forms.riskEliminationDate}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="健康帮扶："><span >{{dict.getLabel('fpHealthAssistance', forms.healthAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="教育帮扶："><span >{{dict.getLabel('fpEducationalAssistance', forms.educationalAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="社会帮扶："><span >{{dict.getLabel('fpSocialAssistance', forms.socialAssistance)}}</span></ai-info-item>
|
||||
<ai-info-item label="是否风险消除："><span >{{dict.getLabel('fpYesOrNo', forms.isRisk)}}</span></ai-info-item>
|
||||
<ai-info-item label="风险消除方式：" v-if="forms.isRisk == 1"><span >{{dict.getLabel('fpRiskEliminationMethod', forms.riskEliminationMethod)}}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
</div>
|
||||
<ai-card title="帮扶日志" v-if="navIndex == 1">
|
||||
<template #right>
|
||||
<span class="edit-text" @click="showAddLog=true">新增日志</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="log-list" v-if="logList.length">
|
||||
<div class="log-item" v-for="(item, index) in logList" :key="index">
|
||||
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" alt="">
|
||||
<div class="content">
|
||||
<div class="heade-info">
|
||||
<h2>{{item.createUserName}}</h2>
|
||||
<p>{{item.createTime}}</p>
|
||||
</div>
|
||||
<p class="text">{{item.detail}}</p>
|
||||
<div class="img-list">
|
||||
<ai-uploader :disabled="true" :instance="instance" v-model="item.file" :limit="9"></ai-uploader>
|
||||
</div>
|
||||
<div class="footer-btn">
|
||||
<span class="edit-text" @click="editLog(item)">编辑</span>
|
||||
<span class="edit-text" @click="delLog(item)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-empty v-else></ai-empty>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<ai-dialog title="新增帮扶日志" :visible.sync="showAddLog" :customFooter="true" :destroyOnClose="true" border width="900px">
|
||||
<el-form ref="logrules" :model="logInfo" :rules="formRules" size="small" label-suffix="：" label-width="150px">
|
||||
<el-form-item label="帮扶内容" prop="detail">
|
||||
<el-input v-model="logInfo.detail" type="textarea" placeholder="请输入" maxlength="500" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片（最多9张）" >
|
||||
<ai-uploader
|
||||
:isShowTip="true"
|
||||
:instance="instance"
|
||||
v-model="logInfo.file"
|
||||
fileType="img"
|
||||
acceptType=".png,.jpg,.jpeg"
|
||||
:limit="9">
|
||||
<template slot="tips">最多上传9张图片,单张图片最大10MB<br/>支持.png,.jpg,.jpeg格式</template>
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer" >
|
||||
<el-button size="medium" @click="showAddLog=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="addLog()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
<ai-dialog title="新增家庭成员" :visible.sync="showAddFamily" :customFooter="true" :destroyOnClose="true" border width="900px">
|
||||
<el-form ref="addrules" :model="familyInfo" :rules="formRules" size="small" label-suffix="：" label-width="150px">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="与户主关系" prop="relationship" >
|
||||
<ai-select v-model="familyInfo.relationship" placeholder="请选择" clearable :selectList="$dict.getDict('fpRelationship')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex" >
|
||||
<ai-select v-model="familyInfo.sex" placeholder="请选择" clearable :selectList="$dict.getDict('sex')" disabled></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌" prop="politicalOutlook" >
|
||||
<ai-select v-model="familyInfo.politicalOutlook" placeholder="请选择" clearable :selectList="$dict.getDict('fpPoliticalOutlook')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="在校情况" prop="studentsInSchool" >
|
||||
<ai-select v-model="familyInfo.studentsInSchool" placeholder="请选择" clearable :selectList="$dict.getDict('fpStudentsInSchool')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="劳动技能" prop="laborSkills" >
|
||||
<ai-select v-model="familyInfo.laborSkills" placeholder="请选择" clearable :selectList="$dict.getDict('fpLaborSkills')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="务工时间" prop="workingMonths" >
|
||||
<el-input v-model.number="familyInfo.workingMonths" placeholder="请输入(月数)" maxlength="30" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否参加大病医保" prop="sicknessInsurance" >
|
||||
<ai-select v-model="familyInfo.sicknessInsurance" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="享受最低生活保障" prop="subsistenceAllowance" >
|
||||
<ai-select v-model="familyInfo.subsistenceAllowance" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="姓名" prop="name" >
|
||||
<el-input v-model.number="familyInfo.name" placeholder="请输入" maxlength="11" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idNumber" >
|
||||
<ai-id size="small" v-model="familyInfo.idNumber" @change="getSex(familyInfo.idNumber)"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="nation" >
|
||||
<ai-select v-model="familyInfo.nation" placeholder="请选择" clearable :selectList="$dict.getDict('fpNation')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文化程度" prop="education" >
|
||||
<ai-select v-model="familyInfo.education" placeholder="请选择" clearable :selectList="$dict.getDict('fpEducation')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="健康状况" prop="health" >
|
||||
<ai-select v-model="familyInfo.health" placeholder="请选择" clearable :selectList="$dict.getDict('fpHealth')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="务工区域" prop="workArea" >
|
||||
<el-input v-model="familyInfo.workArea" placeholder="请输入" maxlength="30" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否参加医保" prop="medicalInsurance" >
|
||||
<ai-select v-model="familyInfo.medicalInsurance" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否参加养老保险" prop="endowmentInsurance" >
|
||||
<ai-select v-model="familyInfo.endowmentInsurance" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否特困供养" prop="destitute" >
|
||||
<ai-select v-model="familyInfo.destitute" placeholder="请选择" clearable :selectList="$dict.getDict('fpYesOrNo')"></ai-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer" >
|
||||
<el-button size="medium" @click="showAddFamily=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="addFamily()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
<template #footer v-if="!params.id">
|
||||
<el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
|
||||
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
export default {
|
||||
name: "add",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
params: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
type: '',
|
||||
phone: '',
|
||||
move: '',
|
||||
addressAreaId: '',
|
||||
address: '',
|
||||
placeAreaId: '',
|
||||
dilapidatedHouse: '',
|
||||
riskType: '',
|
||||
waterSecurity: '',
|
||||
income1: '',
|
||||
income2: '',
|
||||
income3: '',
|
||||
income4: '',
|
||||
income5: '',
|
||||
income8: '',
|
||||
income9: '',
|
||||
isRisk: '',
|
||||
riskEliminationDate: '',
|
||||
riskEliminationMethod: '',
|
||||
industrialAssistance: '',
|
||||
employmentAssistance: '',
|
||||
financialAssistance: '',
|
||||
publicWelfarePostAssistance: '',
|
||||
healthAssistance: '',
|
||||
educationalAssistance: '',
|
||||
socialAssistance: '',
|
||||
familyList: []
|
||||
},
|
||||
navIndex: 0,
|
||||
showAddFamily: false,
|
||||
isEdit: false,
|
||||
familyInfo: {
|
||||
relationship: '',
|
||||
sex: '',
|
||||
politicalOutlook: '',
|
||||
studentsInSchool: '',
|
||||
laborSkills: '',
|
||||
workingMonths: '',
|
||||
sicknessInsurance: '',
|
||||
subsistenceAllowance: '',
|
||||
name: '',
|
||||
idNumber: '',
|
||||
nation: '',
|
||||
education: '',
|
||||
health: '',
|
||||
workArea: '',
|
||||
medicalInsurance: '',
|
||||
endowmentInsurance: '',
|
||||
destitute: '',
|
||||
},
|
||||
editFamilyIndex: '',
|
||||
showAddLog: false,
|
||||
logList: [],
|
||||
logInfo: {
|
||||
detail: '',
|
||||
file: [],
|
||||
picture: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dict.load('fpType', 'fpYesOrNo', 'fpRiskType', 'fpRiskEliminationMethod', 'fpIndustrialAssistance', 'fpEmploymentAssistance', 'fpFinancialAssistance',
|
||||
'fpPublicWelfarePostAssistance', 'fpHealthAssistance', 'fpEducationalAssistance', 'fpSocialAssistance', 'fpRelationship', 'sex', 'fpPoliticalOutlook',
|
||||
'fpStudentsInSchool', 'fpLaborSkills', 'fpNation', 'fpEducation', 'fpHealth')
|
||||
if (this.params.id) {
|
||||
this.getDetail()
|
||||
this.isEdit = false
|
||||
} else {
|
||||
this.isEdit = true
|
||||
this.forms.addressAreaId = this.user.info.areaId
|
||||
this.forms.placeAreaId = this.user.info.areaId
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formRules() {
|
||||
return {
|
||||
type: [{ required: true, message: "请选择监测对象类型", trigger: "change" }],
|
||||
move: [{ required: true, message: "请选择是否搬迁", trigger: "change" }],
|
||||
phone: [{ required: true, message: "请输入联系方式", trigger: "change" }],
|
||||
addressAreaId: [
|
||||
{required: true, message: "请选择所属区域"},
|
||||
{trigger:'blur',validator: (r, v, cb) => /0{3}$/g.test(v) ? cb('请选择到村/社区') : cb()}
|
||||
],
|
||||
address: [{ required: true, message: "请输入家庭住址", trigger: "change" }],
|
||||
placeAreaId: [
|
||||
{required: true, message: "请选择安置地区"},
|
||||
{trigger:'blur',validator: (r, v, cb) => /0{3}$/g.test(v) ? cb('请选择到村/社区') : cb()}
|
||||
],
|
||||
place: [{ required: true, message: "请输入安置详细住址", trigger: "change" }],
|
||||
riskEliminationMethod: [{ required: true, message: "请选择风险消除方式", trigger: "change" }],
|
||||
riskEliminationDate: [{ required: true, message: "请选择风险消除时间", trigger: "change" }],
|
||||
|
||||
relationship: [{ required: true, message: "请选择与户主关系", trigger: "change" }],
|
||||
name: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
||||
idNumber: [{ required: true, message: "请输入证件号码", trigger: "change" }],
|
||||
studentsInSchool: [{ required: true, message: "请选择在校情况", trigger: "change" }],
|
||||
health: [{ required: true, message: "请选择健康情况", trigger: "change" }],
|
||||
sicknessInsurance: [{ required: true, message: "请选择是否大病医保", trigger: "change" }],
|
||||
subsistenceAllowance: [{ required: true, message: "请选择享受最低生活保障", trigger: "change" }],
|
||||
medicalInsurance: [{ required: true, message: "请选择是否参加医保", trigger: "change" }],
|
||||
endowmentInsurance: [{ required: true, message: "请选择是否参加养老保险", trigger: "change" }],
|
||||
destitute: [{ required: true, message: "请选择是否特困供养", trigger: "change" }],
|
||||
detail: [{ required: true, message: "请输入帮扶内容", trigger: "change" }],
|
||||
};
|
||||
},
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{label: "与户主关系", prop: "relationship", dict: 'fpRelationship', align: 'center'},
|
||||
{label: "姓名", prop: "name", align: 'center'},
|
||||
{label: "性别", prop: "sex", dict: 'sex', align: 'center'},
|
||||
{slot: 'age'},
|
||||
{
|
||||
label: "身份证号", width: "160px", align: 'center',
|
||||
render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
|
||||
},
|
||||
{slot: "options"},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmSave()
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
confirmSave() {
|
||||
var isHolder = false //家庭成员必须有户主
|
||||
if(this.forms.familyList.length) {
|
||||
this.forms.familyList.map((item) => {
|
||||
if(item.relationship == '01') {
|
||||
isHolder = true
|
||||
}
|
||||
})
|
||||
}
|
||||
if(!isHolder) {
|
||||
return this.$message.error('家庭成员必须添加户主信息');
|
||||
}
|
||||
if(this.forms.isRisk == '01') {
|
||||
this.forms.status = 1
|
||||
}
|
||||
this.instance .post( `/app/apppreventionreturntopoverty/addOrUpdate`, { ...this.forms}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (!this.params.id) {
|
||||
this.cancel(true)
|
||||
} else {
|
||||
this.isEdit = false
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.params.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.forms = { ...this.forms, ...res.data }
|
||||
if(this.forms.riskEliminationDate) {
|
||||
this.forms.isRisk = '01'
|
||||
}else {
|
||||
this.forms.isRisk = '02'
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addFamily() {
|
||||
this.$refs["addrules"].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.editFamilyIndex === '') {
|
||||
this.forms.familyList.push(this.familyInfo)
|
||||
}else {
|
||||
this.$set(this.forms.familyList, this.editFamilyIndex, this.familyInfo)
|
||||
}
|
||||
|
||||
if(this.forms.isRisk == '02') {
|
||||
this.forms.riskEliminationDate = ''
|
||||
this.forms.riskEliminationMethod = ''
|
||||
}
|
||||
|
||||
this.showAddFamily = false
|
||||
this.editFamilyIndex = ''
|
||||
this.familyInfo = Object.assign({},this.$options.data().familyInfo);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editFamily(item, index) {
|
||||
this.showAddFamily = true
|
||||
this.editFamilyIndex = index
|
||||
this.familyInfo = {...item}
|
||||
},
|
||||
delFamily(item, index) {
|
||||
this.$confirm("是否要删除该家庭成员", {
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.$message({message: '家庭成员删除成功', type: 'success'});
|
||||
this.forms.familyList.splice(index, 1)
|
||||
}).catch(() => 0)
|
||||
},
|
||||
getAge(UUserCard) {
|
||||
const myDate = new Date();
|
||||
const month = myDate.getMonth() + 1;
|
||||
const day = myDate.getDate();
|
||||
let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||||
if ( UUserCard.substring(10, 12) < month || (UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day)) {
|
||||
age++;
|
||||
}
|
||||
return age
|
||||
},
|
||||
getSex(UUserCard) {
|
||||
if (UUserCard) {
|
||||
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
|
||||
this.familyInfo.sex = '1'
|
||||
} else {
|
||||
this.familyInfo.sex = '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'List',
|
||||
isRefresh: isRefresh ? true : false,
|
||||
})
|
||||
},
|
||||
getLogList() {
|
||||
this.instance.post(`/app/apppreventionreturntopovertylog/list?pid=${this.params.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.records.map((item) => {
|
||||
item.file = JSON.parse(item.picture)
|
||||
})
|
||||
this.logList = res.data.records
|
||||
}
|
||||
});
|
||||
},
|
||||
addLog() {
|
||||
this.$refs["logrules"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.logInfo.picture = JSON.stringify(this.logInfo.file)
|
||||
this.logInfo.pid = this.params.id
|
||||
this.logInfo.createUserName = this.user.info.name
|
||||
this.instance .post( `/app/apppreventionreturntopovertylog/addOrUpdate`, { ...this.logInfo}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message({message: this.logInfo.id ? '编辑帮扶日志成功' : '新增帮扶日志成功', type: 'success'});
|
||||
this.getLogList()
|
||||
this.logInfo = Object.assign({},this.$options.data().logInfo)
|
||||
this.showAddLog = false
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
delLog(row) {
|
||||
this.$confirm("是否要删除该帮扶日志", {
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.instance.post(`/app/apppreventionreturntopovertylog/delete?ids=${row.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message({message: '帮扶日志删除成功', type: 'success'});
|
||||
this.getLogList()
|
||||
}
|
||||
});
|
||||
}).catch(() => 0)
|
||||
},
|
||||
editLog(row) {
|
||||
this.logInfo = {...row}
|
||||
this.logInfo.file = JSON.parse(row.picture)
|
||||
this.showAddLog = true
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
height: 100%;
|
||||
.log-list{
|
||||
.log-item{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 16px;
|
||||
img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.content{
|
||||
width: calc(100% - 64px);
|
||||
color: #000;
|
||||
.heade-info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
h2{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.img-list{
|
||||
img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
.footer-btn{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.log-item:nth-last-of-type(1) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
// background-color: #fff;
|
||||
// padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-tag {
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
}
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
.above{
|
||||
display: flex;
|
||||
.left, .right{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: -152px;
|
||||
.nav-item{
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
.active{
|
||||
font-weight: 700;
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner{
|
||||
width: 100%;
|
||||
}
|
||||
.edit-text{
|
||||
color:#2266FF;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,296 +0,0 @@
|
||||
<template>
|
||||
<section class="list">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="监测对象" isShowBottomBorder isShowArea v-if="areaId" v-model="areaId" :instance="instance" @change="page.current=1,getTableData()">
|
||||
<template #rightBtn>
|
||||
<el-button size="small" icon="iconfont iconSetting" type="primary" @click="showSet = true">预警规则</el-button>
|
||||
</template>
|
||||
</ai-title>
|
||||
<template #blank>
|
||||
<div class="statistics-top">
|
||||
<div class="statistics-top__item" v-for="(item, index) in dataPanes" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<h2 style="color: #2266FF;">{{ item.v }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainPane">
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select v-model="status" placeholder="请选择" clearable :selectList="$dict.getDict('fpStatus')" @change="page.current=1,getTableData()"></ai-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input placeholder="姓名/身份证/户主联系方式" v-model="search.name" size="small" @clear="page.current = 1,search.name = '', getTableData()" clearable v-throttle="() => {page.current = 1, getTableData()}" suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
|
||||
<el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
||||
:size.sync="page.size" @getList="getTableData" :dict="dict" @selection-change="v=>ids=v.map(e=>e.id)">
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="120">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toAdd(row.id)">详情</el-button>
|
||||
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="状态" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<span :class="{'status1': row.status == 1, 'status0': row.status == 2}">{{dict.getLabel('fpStatus', row.status)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
<ai-dialog title="预警规则设置" :visible.sync="showSet" :customFooter="true" :destroyOnClose="true" border width="900px">
|
||||
<el-form ref="rules" :model="setInfo" :rules="formRules" size="small" label-suffix="：" label-width="200px">
|
||||
<el-form-item label="家庭纯收入标准" prop="type0">
|
||||
<el-input v-model.number="setInfo.type0" placeholder="请输入" maxlength="8" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="家庭人均纯收入标准" prop="type1">
|
||||
<el-input v-model.number="setInfo.type1" placeholder="请输入" maxlength="8" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer" >
|
||||
<el-button size="medium" @click="showSet=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="addSet()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaId: "",
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
search: {inoculationType: "", name: ""},
|
||||
ids: [],
|
||||
tableData: [],
|
||||
staData: {},
|
||||
currIndex: 0,
|
||||
options: [{ value: '0', label: '无风险'},{ value: '2', label: '未解除'}, { value: '1', label: '已解除'}],
|
||||
status: '',
|
||||
showSet: false,
|
||||
setInfo: {
|
||||
type0: '',
|
||||
type1: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
showDetail() {
|
||||
return this.$route.hash == "#add"
|
||||
},
|
||||
dataPanes() {
|
||||
return [
|
||||
{label: "监测家庭户数", v: this.staData.jths || 0},
|
||||
{label: "监测对象总人数", v: this.staData.zrs || 0},
|
||||
{label: "解除风险人数", v: this.staData.fxxcrs || 0},
|
||||
{label: "风险解除率", v: this.staData.jcl || 0},
|
||||
]
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: "selection", align: 'center'},
|
||||
{label: "户主姓名", prop: "name", align: 'center'},
|
||||
{label: "性别", prop: "sex", dict: 'sex', align: 'center'},
|
||||
{
|
||||
label: "身份证号", width: "160px", align: 'center',
|
||||
render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
|
||||
},
|
||||
{label: "户主联系方式", prop: "phone", align: 'center'},
|
||||
{
|
||||
label: "家庭住址", width: "160px", align: 'center',
|
||||
render: (h, {row}) => h('span', null, row.addressArea+row.address)
|
||||
},
|
||||
{label: "风险类型", prop: "riskType", dict: 'fpRiskType', align: 'center'},
|
||||
{label: "最后更新时间", prop: "createTime", align: 'center'},
|
||||
{slot: "status"},
|
||||
{label: "操作人", prop: "createUserName", align: 'center'},
|
||||
{slot: "options"},
|
||||
]
|
||||
},
|
||||
formRules() {
|
||||
return {
|
||||
type0: [{ required: true, message: "请输入家庭纯收入标准", trigger: "change" }],
|
||||
type1: [{ required: true, message: "请输入家庭人均纯收入标准", trigger: "change" }],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
|
||||
this.dict.load('sex', 'fpRiskType', 'fpStatus').then(() => {
|
||||
this.getTableData()
|
||||
this.getSetInfo()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getNum() {
|
||||
this.instance.post(`/app/apppreventionreturntopoverty/statistics-list`).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data
|
||||
this.staData.jcl = !this.staData.jths ? '0%' : ((this.staData.fxxcrs / this.staData.jths) * 100).toFixed(2) + '%'
|
||||
}
|
||||
})
|
||||
},
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
addSet() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/apppreventionreturntopovertyalarmconfig/addOrUpdate`, this.setInfo).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message({message: '预警规则设置成功', type: 'success'});
|
||||
this.getSetInfo()
|
||||
this.showSet = false
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
getSetInfo() {
|
||||
this.instance.post(`/app/apppreventionreturntopovertyalarmconfig/query`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.setInfo = {...res.data}
|
||||
}
|
||||
});
|
||||
},
|
||||
getTableData() {
|
||||
this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
|
||||
params: {...this.search, ...this.page, addressAreaId: this.areaId, status: this.status}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total
|
||||
this.tableData.map((item) => {
|
||||
item.createTime = item.createTime.substring(0, 10)
|
||||
})
|
||||
this.getNum()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(ids) {
|
||||
ids = ids?.toString()
|
||||
this.$confirm("确定要删除该条数据吗?").then(() => {
|
||||
this.instance.post(`/app/apppreventionreturntopoverty/delete`, null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getTableData();
|
||||
}
|
||||
})
|
||||
}).catch(() => 0)
|
||||
},
|
||||
resetSearch() {
|
||||
this.page.current = 1
|
||||
this.search = {}
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
height: 100%;
|
||||
.statistics-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 1;
|
||||
margin-right: 20px;
|
||||
padding: 16px 24px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
border-radius: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
color: #888888;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .dataPane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mainPane {
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
.ai-table__header {
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
.tab-text{
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active-tab{
|
||||
color: #26f;
|
||||
}
|
||||
.status0{
|
||||
color: rgb(255, 136, 34);
|
||||
}
|
||||
.status1{
|
||||
color: rgb(46, 162, 34);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import LocateDialog from "../../../monitor/components/locateDialog";
|
||||
import LocateDialog from "../../monitor/components/locateDialog";
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user