72 changed files with 12519 additions and 2917 deletions
@ -1,7 +1,7 @@ |
|||
NODE_ENV=production |
|||
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.140/api |
|||
VUE_APP_API_SERVER = http://219.146.91.110:30801/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.60:8080/api |
|||
VUE_APP_BIPASS_API_SERVER = http://dcommunity-dev.elinkservice.cn:30801/linkdata/linkdata-gateway/route |
|||
VUE_APP_NODE_ENV=prod:sit |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
|||
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
@ -0,0 +1,55 @@ |
|||
.div_form { |
|||
height: 100%; |
|||
padding:16px; |
|||
.item_width_1{ |
|||
width: 514px; |
|||
} |
|||
.form{ |
|||
background-color: #fff; |
|||
padding:16px; |
|||
} |
|||
} |
|||
h5 { |
|||
position: relative; |
|||
font-size: 16px; |
|||
margin: 22px 0; |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-block; |
|||
left: -15px; |
|||
top: -0px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #0056d6; |
|||
} |
|||
} |
|||
.basicInfo, .house, .expand { |
|||
::v-deep .el-form-item{ |
|||
margin-bottom: 24px; |
|||
} |
|||
} |
|||
.font-color-orange{ |
|||
::v-deep .el-form-item__label{ |
|||
color:#ff5107 ; |
|||
} |
|||
} |
|||
.font-color-blue{ |
|||
::v-deep .el-form-item__label{ |
|||
color:#3876f2; |
|||
position: relative; |
|||
&::before{ |
|||
content: '*'; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 16px; |
|||
} |
|||
} |
|||
} |
|||
.font-color-blue2{ |
|||
::v-deep .el-form-item__label{ |
|||
&::before{ |
|||
left: 2px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,143 @@ |
|||
.g-main{ |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
height:auto; |
|||
padding: 24px 16px 0; |
|||
.left{ |
|||
min-width: 184px; |
|||
margin-right: 16px; |
|||
background: #ffffff; |
|||
.user{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 120px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 16px; |
|||
width: 152px; |
|||
height: 1px; |
|||
background: #EBEDF0; |
|||
} |
|||
img{ |
|||
width: 50px; |
|||
height: 56px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
} |
|||
.menu{ |
|||
.progress{ |
|||
padding: 0 16px; |
|||
box-sizing: border-box; |
|||
.text{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin:9px 0px 11px 0px; |
|||
font-size: 12px; |
|||
>:nth-child(2){ |
|||
color: #0056D6; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
.list{ |
|||
margin-top:14px ; |
|||
.item{ |
|||
margin-bottom: 8px; |
|||
height: 38px; |
|||
color: #333333; |
|||
padding-left: 16px; |
|||
cursor: pointer; |
|||
line-height: 38px; |
|||
.full{ |
|||
color: #0056d6; |
|||
} |
|||
.incomplete{ |
|||
color: #ff5107; |
|||
} |
|||
} |
|||
|
|||
.active{ |
|||
background: #F7FAFF; |
|||
color: #0056D6 !important; |
|||
position: relative; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
right: 0; |
|||
width: 4px; |
|||
height: 37px; |
|||
background: #0056D6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
flex: 1; |
|||
height: 100%; |
|||
background: #ffffff; |
|||
position: relative; |
|||
padding-bottom: 16px; |
|||
.editBtn{ |
|||
z-index: 10; |
|||
position: absolute; |
|||
right: 16px; |
|||
top: 16px; |
|||
} |
|||
.title-small{ |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
position: relative; |
|||
padding-left: 11px; |
|||
margin-left: 0px; |
|||
margin-top: 22px; |
|||
} |
|||
.f-label { |
|||
width: 100px; |
|||
text-align: right; |
|||
color: rgba(51, 51, 51, .85) ; |
|||
>b{ |
|||
font-weight: 400; |
|||
position: relative; |
|||
color: rgba(51, 51, 51, .85) ; |
|||
|
|||
&::after{ |
|||
content: '*'; |
|||
position: absolute; |
|||
top: 0px; |
|||
color: #ff5107; |
|||
left: -7px; |
|||
} |
|||
} |
|||
} |
|||
.f-labels{ |
|||
width: 155px; |
|||
text-align: right; |
|||
} |
|||
.f-flex{ |
|||
align-items: center; |
|||
} |
|||
.f-m-top23{ |
|||
margin-top: 23px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-button--text{ |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-row{ |
|||
padding-left: 37px; |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,950 @@ |
|||
<template> |
|||
<div :id="formId" |
|||
class="resi-container"> |
|||
<el-form :ref="formId" |
|||
class="resi-form" |
|||
:model="form" |
|||
:rules="rulesForm" |
|||
:label-width="labelWidth"> |
|||
<template v-if="supportAdd"> |
|||
<el-row style="margin-bottom: 10px;"> |
|||
<el-col :span="24"> |
|||
<el-button icon="el-icon-plus" |
|||
size="small" |
|||
@click="handleAddRow"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<edit-form v-for="(item, index) in addList" |
|||
:key="index" |
|||
:ref="'baseForms' + index" |
|||
:columns="3" |
|||
:form-list="item.itemList || formList" |
|||
:form-id="'baseForms' + item.row" /> |
|||
</template> |
|||
<template v-else> |
|||
<el-row v-if="fixed" |
|||
class="resi-row"> |
|||
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> --> |
|||
<el-col :span="6"> |
|||
<el-form-item prop="GRID_ID" |
|||
label="所属网格"> |
|||
<!-- <div class="resi-cell"> --> |
|||
<!-- <div class="resi-cell-label">{{n.label}}</div> --> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model.trim="form.GRID_ID" |
|||
:disabled="disabled" |
|||
placeholder="请选择网格" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
@change="handleChangeGrid"> |
|||
<el-option v-for="item in optionsG" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<!-- </div> --> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="18"> |
|||
<el-form-item label="所属房屋" |
|||
required> |
|||
<div class="resi-cell-value"> |
|||
<div class="resi-cell-col"> |
|||
<el-form-item prop="VILLAGE_ID"> |
|||
<el-select v-model.trim="form.VILLAGE_ID" |
|||
placeholder="请选择小区" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
:disabled="disabled" |
|||
@change="handleChangeV"> |
|||
<el-option v-for="item in optionsV" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="BUILD_ID"> |
|||
<el-select v-model.trim="form.BUILD_ID" |
|||
placeholder="请选择楼号" |
|||
size="small" |
|||
clearable |
|||
:disabled="disabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeB"> |
|||
<el-option v-for="item in optionsB" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="UNIT_ID"> |
|||
<el-select v-model.trim="form.UNIT_ID" |
|||
placeholder="请选择单元" |
|||
size="small" |
|||
clearable |
|||
:disabled="disabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeD"> |
|||
<el-option v-for="item in optionsD" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="HOME_ID"> |
|||
<el-select v-model.trim="form.HOME_ID" |
|||
placeholder="请选择房号" |
|||
size="small" |
|||
clearable |
|||
:disabled="disabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeH"> |
|||
<el-option v-for="item in optionsH" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<!-- <el-col :span="6"> |
|||
|
|||
</el-col> |
|||
<el-col :span="6"> |
|||
|
|||
</el-col> |
|||
<el-col :span="6"> |
|||
|
|||
</el-col> |
|||
<el-col :span="6"> |
|||
|
|||
</el-col> --> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<!-- <el-col :span="6"> |
|||
<el-form-item :prop="form.BUILD_ID" label="所属楼宇"> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small" |
|||
clearable class="resi-cell-select" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsB" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :prop="form.HOME_ID" label="所属家庭"> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择" size="small" |
|||
clearable class="resi-cell-select" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsH" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
</el-row> |
|||
<el-row v-for="(item, index) in sliceList(formList, columns)" |
|||
:key="index" |
|||
class="resi-row" :class="{'width-40':index==3||index==2||index==4||index==5}"> |
|||
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> --> |
|||
<el-col v-for="n in item" |
|||
:key="n.itemId" |
|||
:span="item.length === 1 ? 24 : (24/columns) " |
|||
:style="n.itemType === 'divider' && 'display: none;'"> |
|||
<el-form-item :prop="n.columnName" |
|||
:label="n.itemType != 'radio'?n.label:''"> |
|||
<!-- <div class="resi-cell"> --> |
|||
<!-- <div class="resi-cell-label">{{n.label}}</div> --> |
|||
<div class="resi-cell-value"> |
|||
|
|||
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'"> |
|||
<!-- <span v-if="n.columnName==='MOBILE'||n.columnName==='ID_CARD'">{{ form[n.columnName]||'--'}}</span> --> |
|||
<el-input v-if="n.columnName==='MOBILE'||n.columnName==='ID_CARD'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
<el-input v-else-if="n.validType" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
<el-input v-else |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
</template> |
|||
<!-- <template v-if="n.itemType === 'textarea'"> |
|||
<el-input |
|||
v-model.trim="form[n.columnName]" |
|||
class="resi-cell-textarea" |
|||
size="small" |
|||
type="textarea" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
> |
|||
</el-input> |
|||
</template> --> |
|||
<el-date-picker v-else-if="n.itemType === 'datepicker'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
type="date" |
|||
size="small" |
|||
clearable |
|||
placeholder="选择日期" |
|||
format="yyyy 年 MM 月 dd 日" |
|||
value-format="yyyy-MM-dd"> |
|||
</el-date-picker> |
|||
<el-date-picker v-else-if="n.itemType === 'daterange'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
type="daterange" |
|||
align="right" |
|||
unlink-panels |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
<el-time-picker v-else-if="n.itemType === 'timepicker'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
placeholder="任意时间点"> |
|||
</el-time-picker> |
|||
<el-time-picker v-else-if="n.itemType === 'timerange'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
is-range |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
placeholder="选择时间范围"> |
|||
</el-time-picker> |
|||
<el-select v-else-if="n.itemType === 'select'" |
|||
v-model.trim="form[n.columnName]" |
|||
:multiple="n.multiSelect" |
|||
:disabled="disabled" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select"> |
|||
<el-option v-for="item in n.options || options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- <el-cascader |
|||
:options="options" |
|||
:props="{ checkStrictly: true }" |
|||
clearable></el-cascader> --> |
|||
<el-cascader v-else-if="n.itemType === 'cascader'" |
|||
v-model.trim="form[n.columnName]" |
|||
:options="n.options" |
|||
:disabled="disabled" |
|||
:props="{ emitPath: false }" |
|||
clearable |
|||
size="small" |
|||
class="resi-cell-select"> |
|||
</el-cascader> |
|||
<template v-else-if="n.itemType === 'radio'"> |
|||
<!-- <el-radio v-for="ns in n.options" |
|||
:key="ns.value" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
:label="ns.value"> |
|||
{{ ns.label }} |
|||
</el-radio> --> |
|||
<el-checkbox-group v-model.trim="form[n.columnName]"> |
|||
<el-checkbox |
|||
:key="n.value" |
|||
:label="n.value" |
|||
:disabled="disabled">{{n.label}}</el-checkbox> |
|||
<!-- <el-checkbox label="n.la"></el-checkbox> --> |
|||
</el-checkbox-group> |
|||
<!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> --> |
|||
</template> |
|||
<template v-else-if="n.itemType === 'checkbox'"> |
|||
<el-checkbox-group v-model.trim="form[n.columnName]"> |
|||
<el-checkbox v-for="ns in n.options" |
|||
:key="ns.value" |
|||
:label="ns.value" |
|||
:disabled="disabled">{{ns.label}}</el-checkbox> |
|||
<!-- <el-checkbox label="n.la"></el-checkbox> --> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</div> |
|||
<!-- </div> --> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isCard, isMobile, isPhone } from '@/utils/validate' |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
|
|||
export default { |
|||
name: 'editForm', |
|||
props: { |
|||
editUserId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
fixed: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
labelWidth: { |
|||
type: String, |
|||
default: '100px' |
|||
}, |
|||
formId: { |
|||
type: String, |
|||
default: 'resiForm' |
|||
}, |
|||
agencyId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
formList: { |
|||
type: Array, |
|||
default: function () { |
|||
return [] |
|||
} |
|||
}, |
|||
formInfo: { |
|||
type: Object, |
|||
default: function () { |
|||
return {} |
|||
} |
|||
}, |
|||
mutiList: { |
|||
type: Array, |
|||
default: function () { |
|||
return [] |
|||
} |
|||
}, |
|||
// 渲染一行几列 |
|||
columns: { |
|||
type: Number, |
|||
default: 3 |
|||
}, |
|||
supportAdd: { // 单表多条数据 |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
disabled: { // 单表多条数据 |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data () { |
|||
// let form = {} |
|||
// let rules = {} |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入联系电话')) |
|||
} else { |
|||
if (!isMobile(value) && !isPhone(value)) { |
|||
callback(new Error('联系电话格式不正确')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
let checkIdCard = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入证件号')) |
|||
} else { |
|||
if (!isCard(value)) { |
|||
callback(new Error('请输入正确的证件号或护照号')) |
|||
} |
|||
callback() |
|||
} |
|||
} |
|||
let initForm = (obj, arr) => { |
|||
let _form = {} |
|||
// console.log('formInfo', obj) |
|||
if (Object.keys(obj).length > 0) { |
|||
_form = { ...obj } |
|||
// return _form |
|||
} |
|||
const itemTypes = ['daterange', 'timerange'] |
|||
arr.forEach(item => { |
|||
if (item.multiSelect || itemTypes.includes(item.itemType)) { |
|||
if (item.columnValue && item.columnValue.indexOf(',') > -1) _form[item.columnName] = item.columnValue.split(',') |
|||
else _form[item.columnName] = (item.columnValue && [item.columnValue]) || [] |
|||
} else _form[item.columnName] = item.columnValue || '' |
|||
}) |
|||
// console.log('_from0000---', arr) |
|||
return _form |
|||
} |
|||
let initRules = (arr) => { |
|||
let rules = {} |
|||
arr.forEach(item => { |
|||
if (item.required) { |
|||
if (item.validType === 'mobile') { |
|||
rules[item.columnName] = [ |
|||
{ required: true, validator: checkMObile, trigger: 'blur' } |
|||
] |
|||
} else if (item.validType === 'id_card') { |
|||
rules[item.columnName] = [ |
|||
{ required: true, validator: checkIdCard, trigger: 'blur' } |
|||
] |
|||
} else { |
|||
rules[item.columnName] = [ |
|||
{ required: true, message: `请输入${item.label}`, trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
return rules |
|||
} |
|||
let form = initForm(this.formInfo, this.formList) |
|||
let rules = initRules(this.formList) |
|||
let tempFormList = [...this.formList] |
|||
let constForm = { |
|||
...form |
|||
} |
|||
console.log('-----------------哈哈哈哈哈哈rules', rules) |
|||
return { |
|||
openSearch: false, |
|||
fixedForm: { |
|||
GRID_ID: '', |
|||
VILLAGE_ID: '', |
|||
BUILD_ID: '', |
|||
UNIT_ID: '', |
|||
HOME_ID: '' |
|||
}, |
|||
fixedList: {}, |
|||
form: { |
|||
...form |
|||
}, |
|||
constForm, |
|||
tempFormList, |
|||
addCount: 0, |
|||
addList: [], |
|||
rulesForm: { |
|||
...rules, |
|||
VILLAGE_ID: [{ required: true, message: `请选择小区`, trigger: 'blur' }], |
|||
GRID_ID: [{ required: true, message: `请选择网格`, trigger: 'blur' }], |
|||
BUILD_ID: [{ required: true, message: `请选择楼号`, trigger: 'blur' }], |
|||
UNIT_ID: [{ required: true, message: `请选择单元`, trigger: 'blur' }], |
|||
HOME_ID: [{ required: true, message: `请选择房号`, trigger: 'blur' }] |
|||
}, |
|||
// rules, |
|||
value: '', |
|||
optionsV: [], |
|||
optionsB: [], |
|||
optionsH: [], |
|||
optionsG: [], |
|||
optionsD: [], |
|||
pickerOptions: { |
|||
shortcuts: [{ |
|||
text: '最近一周', |
|||
onClick (picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}, { |
|||
text: '最近一个月', |
|||
onClick (picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}, { |
|||
text: '最近三个月', |
|||
onClick (picker) { |
|||
const end = new Date() |
|||
const start = new Date() |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|||
picker.$emit('pick', [start, end]) |
|||
} |
|||
}] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
sliceList () { |
|||
return function (data, count) { |
|||
if (data !== undefined) { |
|||
let index = 0 |
|||
let arrTemp = [] |
|||
let arrTemp1 = [] |
|||
let arr1 = [] |
|||
let arr2 = [] |
|||
let _i = 0 |
|||
let _index = 0 |
|||
for (let i = 0; i < data.length; i++) { |
|||
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') { |
|||
_i = i + 1 |
|||
} |
|||
} |
|||
arr1 = data.slice(0, _i) |
|||
arr2 = data.slice(_i, data.length) |
|||
for (let i = 0; i < arr1.length; i++) { |
|||
index = parseInt(i / count) |
|||
if (arrTemp.length <= index) { |
|||
arrTemp.push([]) |
|||
} |
|||
arrTemp[index].push(arr1[i]) |
|||
} |
|||
for (let i = 0; i < arr2.length; i++) { |
|||
_index = parseInt(i / count) |
|||
if (arrTemp1.length <= _index) { |
|||
arrTemp1.push([]) |
|||
} |
|||
arrTemp1[_index].push(arr2[i]) |
|||
} |
|||
arrTemp = arrTemp.concat(arrTemp1) |
|||
return arrTemp |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
form: { |
|||
handler (val, val2) { |
|||
console.log('valpppp----', val, val2) |
|||
for (let n in val) { |
|||
if (this.constForm[n] !== val[n]) { |
|||
this.handleChangeForm(n) |
|||
console.log('nnnnnn', n) |
|||
this.handleChangeGroup(n, val[n]) |
|||
} |
|||
} |
|||
this.constForm = { ...val } |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
created () { |
|||
this.initForm() |
|||
console.log('formInfo---gggreg', this.rulesForm) |
|||
console.log('formList', this.formList) |
|||
if (this.supportAdd) { |
|||
this.addList = [...this.mutiList] |
|||
// console.log('addList----111', this.addList) |
|||
} |
|||
if (this.fixed) { |
|||
this.getGridList() |
|||
this.getValiheList() |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
} |
|||
|
|||
}, |
|||
mounted () { |
|||
console.log('this.editUserId', this.editUserId) |
|||
if (this.editUserId) { |
|||
this.handleTuomin() |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
async handleTuomin () { |
|||
|
|||
const url = "/data/aggregator/epmetuser/detailByType"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
id: this.editUserId, |
|||
type: "checkIcResiUser", |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.$set(this.form, 'MOBILE', data.mobile) |
|||
this.$set(this.form, 'ID_CARD', data.idCard) |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
|
|||
|
|||
}, |
|||
initForm () { |
|||
this.formList.forEach(async item => { |
|||
if (item.optionSourceType === 'remote') { |
|||
await this.getOptionsLists(item.optionSourceValue).then(res => { |
|||
item.options = this.getTreeData(res) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
getTreeData (data) { |
|||
if (!Array.isArray(data)) return [] |
|||
let arr = data.map(item => { |
|||
let _item = {} |
|||
if (item.children) { |
|||
if (item.children.length === 0) _item = { ...item, children: undefined } |
|||
else _item = { ...item, children: this.getTreeData(item.children) } |
|||
} else { |
|||
_item = { ...item } |
|||
} |
|||
return _item |
|||
}) |
|||
return arr |
|||
}, |
|||
handleOpenSearch () { |
|||
this.openSearch = !this.openSearch |
|||
}, |
|||
handleAddRow () { |
|||
this.addList.push({ |
|||
row: this.addList.length, |
|||
itemList: this.formList |
|||
}) |
|||
}, |
|||
// 监听固定四列 |
|||
handleFiexedForm (val) { |
|||
let item = { |
|||
[val]: this.fixedForm[val] |
|||
} |
|||
this.fixedList.push(item) |
|||
this.$set(this.fixedList, val, this.fixedForm[val]) |
|||
}, |
|||
// 监听分组 |
|||
handleChangeGroup (columnName, value) { |
|||
this.tempFormList.forEach(item => { |
|||
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) { |
|||
console.log('columnName', item.columnName, columnName) |
|||
this.$emit('changegroup', { value, childGroup: item.childGroup }) |
|||
} |
|||
}) |
|||
}, |
|||
// 监听基础form |
|||
handleChangeForm (val) { |
|||
if (this.fixed) { |
|||
for (let n in this.fixedForm) { |
|||
if (n === val) { |
|||
this.$set(this.fixedList, val, this.form[val]) |
|||
} |
|||
} |
|||
} |
|||
this.tempFormList.forEach(item => { |
|||
if (item.columnName === val) item.isChange = true |
|||
}) |
|||
}, |
|||
handleChange () { |
|||
// this.handleForm() |
|||
}, |
|||
handleChangeGrid (val) { |
|||
console.log('val', val) |
|||
this.form.VILLAGE_ID = '' |
|||
this.form.BUILD_ID = '' |
|||
this.form.UNIT_ID = '' |
|||
this.form.HOME_ID = '' |
|||
this.getValiheList() |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
}, |
|||
handleChangeV (val) { |
|||
console.log('val', val) |
|||
this.form.BUILD_ID = '' |
|||
this.form.UNIT_ID = '' |
|||
this.form.HOME_ID = '' |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
}, |
|||
handleChangeB (val) { |
|||
console.log('val', val) |
|||
this.form.UNIT_ID = '' |
|||
this.form.HOME_ID = '' |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
}, |
|||
handleChangeD () { |
|||
this.form.HOME_ID = '' |
|||
this.getHouseList() |
|||
}, |
|||
// 为了实现根据房屋类型改版是否租户的需求 |
|||
handleChangeH (val) { |
|||
let item = this.optionsH.find(item => item.value === val); |
|||
if (item && item.type == '1') { |
|||
this.form.IS_TENANT = '1' |
|||
console.log('item-----', item) |
|||
} else this.form.IS_TENANT = '0' |
|||
}, |
|||
handlerMuscForm () { |
|||
let arr = [] |
|||
this.addList.forEach(item => { |
|||
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item.row || item][0].handleForm()) |
|||
arr.push([...this.$refs['baseForms' + item.row][0].handleForm()]) |
|||
}) |
|||
if (arr.length === 0) return arr |
|||
let arr2 = arr.reduce(function (a, b) { return a.concat(b) }) |
|||
let hash = {} |
|||
let i = 0 |
|||
let res = [] |
|||
// let finalArr = [] |
|||
arr2.forEach((item) => { |
|||
let name = item.tableName |
|||
if (hash[name]) { |
|||
res[hash[name] - 1].list.push(...item.list) |
|||
} else { |
|||
hash[name] = ++i |
|||
res.push({ |
|||
list: [...item.list], |
|||
supportAdd: this.supportAdd, |
|||
tableName: name |
|||
}) |
|||
} |
|||
}) |
|||
return res |
|||
}, |
|||
resetForm () { |
|||
this.$refs[this.formId].resetFields() |
|||
}, |
|||
handleForm () { |
|||
let newForm = [] |
|||
this.$refs[this.formId].validate((valid) => { |
|||
if (valid) { |
|||
var hash = {} |
|||
var i = 0 |
|||
var res = [] |
|||
let ID = this.tempFormList[0].ID |
|||
this.tempFormList.forEach(function (item) { |
|||
var name = item.tableName |
|||
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({ |
|||
list: [item], |
|||
ID: item.ID, |
|||
tableName: name |
|||
}) |
|||
}) |
|||
// console.log('resssssss', res) |
|||
const itemTypes = ['cascader', 'daterange', 'timerange'] |
|||
res.forEach(item => { |
|||
let _form = {} |
|||
item.list.filter(n => n.isChange).forEach(r => { |
|||
_form[r.columnName] = r.multiSelect || itemTypes.includes(r.itemType) ? this.form[r.columnName].toString() : this.form[r.columnName] |
|||
if (r.ID) { |
|||
_form.ID = r.ID |
|||
} |
|||
// return _form |
|||
}) |
|||
if (this.fixed) { |
|||
for (let n in this.fixedList) { |
|||
_form[n] = this.fixedList[n] |
|||
} |
|||
if (Object.keys(_form).length > 0) { |
|||
if (!_form.AGENCY_ID) _form.AGENCY_ID = this.agencyId |
|||
} |
|||
if (!_form.ID) _form.ID = ID |
|||
} |
|||
console.log('objeckeyssss', Object.keys(_form), _form) |
|||
newForm.push({ |
|||
tableName: item.tableName, |
|||
supportAdd: this.supportAdd, |
|||
ID: item.ID, |
|||
list: Object.keys(_form).length > 0 ? [{ ..._form }] : [] |
|||
}) |
|||
}) |
|||
console.log('newFormhhhhh', newForm) |
|||
return newForm |
|||
} else { |
|||
console.log('error submit!!') |
|||
return false |
|||
} |
|||
}) |
|||
if (this.supportAdd) newForm = this.handlerMuscForm() |
|||
return newForm |
|||
}, |
|||
async getOptionsLists (url) { |
|||
let options = [] |
|||
// console.log('getOptionsList----', url) |
|||
await this.$http |
|||
.post(url, { formCode: 'resi_base_info' }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
options = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
return options |
|||
}, |
|||
getGridList () { |
|||
const { user } = this.$store.state |
|||
let purpose = 'query' |
|||
if (this.disabled) purpose = 'query' |
|||
else purpose = 'addorupdate' |
|||
this.$http |
|||
.post('/gov/org/customergrid/gridoption', { agencyId: this.agencyId, purpose }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsG = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getValiheList () { |
|||
const { user } = this.$store.state |
|||
this.$http |
|||
.post('/actual/base/communityQuarters/listQuartersOptions', { gridId: this.form.GRID_ID, agencyId: this.agencyId }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsV = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getBuildList () { |
|||
this.$http |
|||
.post('/actual/base/communityBuilding/buildingoption', { quartersId: this.form.VILLAGE_ID }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsB = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getUniList () { |
|||
this.$http |
|||
.post('/actual/base/communityBuildingUnit/unitoption', { buildingId: this.form.BUILD_ID }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsD = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getHouseList () { |
|||
this.$http |
|||
.post('/actual/base/communityHouse/houseoption', { unitId: this.form.UNIT_ID }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsH = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resi-form { |
|||
:deep .el-date-editor.el-input, |
|||
.el-date-editor.el-input__inner { |
|||
width: 100% !important; |
|||
} |
|||
} |
|||
.resi-cell-value .resi-cell-input { |
|||
width: 168px; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.resi-form .resi-row { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
// .resi-form .resi-cell { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// .resi-cell-label { |
|||
// width: 70px; |
|||
// box-sizing: border-box; |
|||
// margin-right: 15px; |
|||
// text-align: right; |
|||
// } |
|||
// .resi-cell-value-radio { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// min-height: 36px; |
|||
// } |
|||
// .resi-cell-value .resi-cell-input { |
|||
// width: 180px; |
|||
// } |
|||
|
|||
.resi-cell-value .resi-cell-textarea { |
|||
width: 300px; |
|||
} |
|||
.resi-cell-col { |
|||
display: flex; |
|||
.el-form-item { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.resi-cell-select { |
|||
width: 190px; |
|||
box-sizing: border-box; |
|||
margin-right: 10px; |
|||
&-middle { |
|||
width: 130px; |
|||
} |
|||
&-small { |
|||
width: 88px; |
|||
} |
|||
} |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,360 @@ |
|||
<template> |
|||
<div class='g-main'> |
|||
<el-form :model="form"> |
|||
<div v-for="itemH in formList"> |
|||
<h5>{{ itemH.title }}</h5> |
|||
<template v-for="itemj in itemH.form"> |
|||
<section class="f-flex" style="flex-wrap: wrap;"> |
|||
<el-form-item v-for="(itemk, index) in itemj.children" :key="index" label-width="160px" |
|||
:label="itemk.label" :class="itemk.itemType == 'textarea' ? 'textareaDidth' : ''"> |
|||
<template v-if="itemk.itemType == 'radio1'"> |
|||
<section class="list_item_width_1"> |
|||
<el-radio v-for="ns in itemk.opction" :key="ns.value" size="small" |
|||
v-model.trim="form[itemj.id][itemk.formName]" :label="ns.value" |
|||
@click.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
{{ ns.label }} |
|||
</el-radio> |
|||
</section> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'select1' && itemk.showFlag !== '0'"> |
|||
<el-select v-model="form[itemj.id][itemk.formName]" :placeholder="`请选择${itemk.label}`" |
|||
size="small" :multiple="itemk.multiple" :collapse-tags="itemk.collapseTags" |
|||
clearable |
|||
:style="{ 'width': itemk.formName == 'specialCategoryCode' ? '183px' : '' }" |
|||
class="list_item_width_1"> |
|||
<el-option v-for="items in itemk.opction" :key="items.value" :label="items.label" |
|||
:value="items.value" @click.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'textarea1'"> |
|||
<el-input type="textarea" :placeholder="`请输入${itemk.label}`" class="item-width-textarea" |
|||
maxlength="120" size="small" show-word-limit resize="none" rows="3" |
|||
v-model.trim="form[itemj.id][itemk.formName]" @change.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
</el-input> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'input1'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" class="list_item_width_1" size="small" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable @change.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
</el-input> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'inputNum'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" size="small" class="list_item_width_1-text" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable |
|||
@blur="checkNumberInput(itemj.id, itemk.formName)" @change.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
</el-input><span class="u-data-tag">元</span> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'checkbox'"> |
|||
<el-checkbox-group size="small" v-model="form[itemj.id][itemk.formName]"> |
|||
<el-checkbox v-for="items in itemk.opction" :label="items.value" |
|||
:style="{ 'margin-right': items.label != itemk.label ? '' : '19px' }" |
|||
:key="items.value" :value="items.value" @click.native="handleFormChange(itemj.id,itemk.formName,itemk.itemType)">{{ items.label }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'datepicker1' && itemk.showFlag !== '0'"> |
|||
<el-date-picker v-model.trim="form[itemj.id][itemk.formName]" class="list_item_width_1" |
|||
type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" |
|||
value-format="yyyy-MM-dd" @change="handleFormChange(itemj.id,itemk.formName,itemk.itemType)"> |
|||
</el-date-picker> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'cascader1'"> |
|||
<el-cascader v-model="form[itemj.id].partyOrgId" :props="casProps" |
|||
:options="itemk.opction" class="list_item_width_1" clearable size="small" |
|||
@change="handlePartyOrgCascadarChange" ></el-cascader> |
|||
</template> |
|||
|
|||
<template v-else-if="itemk.itemType == 'number'"> |
|||
<el-input-number class="list_item_width_1" size="small" :min="1" :max="10" |
|||
v-model.trim="form[itemj.id][itemk.formName]"></el-input-number> |
|||
</template> |
|||
|
|||
</el-form-item> |
|||
</section> |
|||
</template> |
|||
</div> |
|||
|
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
formType: null, |
|||
formList: [], |
|||
form: { |
|||
// 党员信息 |
|||
parymemberInfoDto: { |
|||
joinTime: null, |
|||
positiveTime: null, |
|||
partyOrgId: null, |
|||
flowFlag: null, |
|||
flowActNum: null, |
|||
partyJob: null, |
|||
duty: null, |
|||
retiredFlag: null, |
|||
centerFlag: null, |
|||
studyNotNeed: null, |
|||
joinBranchName: null, |
|||
joinCommunityTime: null |
|||
}, |
|||
// 残疾信息 |
|||
healthDto: { |
|||
disabilityCategoryCode: null, |
|||
disabilityLevel: null, |
|||
disabilityNum: null, |
|||
disabilityDesc: null, |
|||
guardianFlag: null, |
|||
guardianName: null, |
|||
specialSkillFlag: null, |
|||
workCapacityFlag: null |
|||
}, |
|||
// 大病信息 |
|||
seriousIllnessDto: { |
|||
illnessCodes: [] |
|||
}, |
|||
// 慢病信息 |
|||
chronicDiseaseDto: { |
|||
chronicDiseaseCodes: [] |
|||
}, |
|||
// 死亡信息 |
|||
deathDto: { |
|||
deathTime: null |
|||
}, |
|||
// 老年人 |
|||
oldPeopleDto: { |
|||
oldPeopleCategories: [], |
|||
resideSituation: null, |
|||
oldSubsidy: null |
|||
}, |
|||
// 低保人员 |
|||
subsistenceAllowanceDto: { |
|||
reasons: null, |
|||
category: [] |
|||
}, |
|||
// 退役军人 |
|||
veteranDto: { |
|||
joinArmyTime: null, |
|||
leaveArmyTime: null, |
|||
serviceUnit: null, |
|||
receiveUnit: null, |
|||
settlementAmount: null, |
|||
trainDesc: null, |
|||
employmentSituation: null, |
|||
pubWelfareJobFlag: null |
|||
}, |
|||
|
|||
// 保障房人员 |
|||
ensureHouseDto: { |
|||
liveCommunity: null, |
|||
housingNature: null |
|||
}, |
|||
// 统战人员 |
|||
unitedFrontDto: { |
|||
unitedFrontType: null |
|||
}, |
|||
//特扶人员 |
|||
specialSupportDto: { |
|||
specialSupportType: null,//特扶类别 |
|||
childName: null,//子女姓名 |
|||
childGender: null,//子女性别 |
|||
childDeathDate: null,//子女死亡日期 |
|||
childDisabilityCategoryCode: null,//伤残类别 |
|||
childDisabilityLevel: null,//伤残等级 |
|||
}, |
|||
// 志愿者 |
|||
volunteerDto: { |
|||
volunteerCategory: [] |
|||
}, |
|||
|
|||
}, |
|||
casProps: { |
|||
value: 'id', |
|||
label: 'partyOrgName', |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
this.handleNextOrgTreeClick(node, resolve) |
|||
}, |
|||
isLeaf: (data, node) => { |
|||
console.log(data); |
|||
//根据后台返回的数据判断是否还有下级 是否显示箭头图标 |
|||
//el-tree懒加载无子级数据时去掉下拉箭头 |
|||
if (data.partyOrgLevel == 7 || data.childrenQty == 0) { |
|||
return true |
|||
} |
|||
}, |
|||
checkStrictly: true, |
|||
multiple: false, |
|||
}, |
|||
changId:null, |
|||
changPid:null, |
|||
changType:null, |
|||
partyOrgIdPath:null |
|||
}; |
|||
}, |
|||
props: { |
|||
}, |
|||
created() { }, |
|||
activated() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
handleFormChange(pid,id,type){ |
|||
this.changPid = pid; |
|||
this.changId = id; |
|||
this.changType = type; |
|||
nextTick(1000) |
|||
this.$emit('submitExpand', this.form,{changId:this.changId,changPid:this.changPid,changType:this.changType}) |
|||
}, |
|||
checkNumberInput(itemj, itemk) { |
|||
if (this.form[itemj][itemk]) { |
|||
if (isNaN(this.form[itemj][itemk])) { |
|||
this.$message.error("请输入数字"); |
|||
this.form[itemj][itemk] = ""; |
|||
} else { |
|||
this.form[itemj][itemk] = parseFloat( |
|||
this.form[itemj][itemk] |
|||
); |
|||
} |
|||
} |
|||
}, |
|||
showForm() { |
|||
this.$nextTick(() => { |
|||
// console.log(this.formList,'拓展组件formList'); |
|||
// console.log(this.form,'拓展组件form'); |
|||
const promises = this.formList.forEach((item) => { |
|||
item.form.map(async (group) => { |
|||
return group.children.reduce(async (accPromise, item) => { |
|||
const acc = await accPromise; |
|||
acc[item.formName] = null; |
|||
this.form[item.pformName].id = item.id |
|||
if (item.itemType == 'checkbox') { |
|||
this.form[item.pformName][item.formName] = item.value || [] |
|||
} else if (item.itemType == 'cascader1' && item.orgPath) { |
|||
this.partyOrgIdPath = item.orgPath.split(':')[0] |
|||
await this.getOrgTree() |
|||
this.form[item.pformName][item.formName] = item.value || null |
|||
} else { |
|||
this.form[item.pformName][item.formName] = item.value || null |
|||
} |
|||
if (item.opctionUrl) { |
|||
try { |
|||
item.opction = await this.getDictDataForm(item.opctionUrl, item.opctionParams); |
|||
} catch (error) { |
|||
console.error('Error fetching options:', error); |
|||
} |
|||
} |
|||
return acc; |
|||
}, Promise.resolve({})); |
|||
}) |
|||
}) |
|||
Promise.all(promises).then((results) => { |
|||
|
|||
}).catch((error) => { |
|||
console.error('Error fetching options:', error); |
|||
}); |
|||
}) |
|||
}, |
|||
async getDictDataForm(url, params) { |
|||
try { |
|||
const { data } = await this.$http.post(url, params); |
|||
return data.data; |
|||
} catch (error) { |
|||
console.log(error, `获取 ${opctionParams.dictType} 字典`); |
|||
} |
|||
}, |
|||
|
|||
handlePartyOrgCascadarChange(selectedNode) { |
|||
this.form.parymemberInfoDto.partyOrgId = selectedNode[selectedNode.length - 1]; |
|||
this.handleFormChange('parymemberInfoDto','partyOrgId','cascader1') |
|||
}, |
|||
async handleNextOrgTreeClick(node, resolve) { |
|||
await this.getTreeChildenList(node, resolve) |
|||
}, |
|||
async getTreeChildenList(node, resolve) { |
|||
if (node.data.partyOrgLevel <= 8) { |
|||
resolve(null); |
|||
return; |
|||
} |
|||
const url = "/actual/base/party/org/listNextLevelPartyOrgTreeNodesByPid" |
|||
let params = { |
|||
partyOrgPid: node.data.id |
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code === 0) { |
|||
data.forEach(item => { |
|||
item.children = null; |
|||
item.leaf = item.partyOrgLevel === 7 || item.childrenQty === 0 |
|||
}); |
|||
resolve(data) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getOrgTree() { |
|||
try { |
|||
const { data } = await requestGet('/actual/base/party/org/listPartyOrgTreeRoot4Select', { partyOrgId:this.partyOrgIdPath,depth:8 }) |
|||
this.formList.forEach(c => { |
|||
if (c.formId == "parymemberInfoDto") { |
|||
for (let i of c.form[0].children) { |
|||
if (i.formName == 'partyOrgId') { |
|||
i.opction = [data]; |
|||
} |
|||
} |
|||
} |
|||
|
|||
}) |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: { |
|||
'form': { |
|||
handler(newVal, oldVal) { |
|||
this.$emit('submitExpand', this.form,{changId:this.changId,changPid:this.changPid,changType:this.changType}) |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
h5 { |
|||
position: relative; |
|||
font-size: 16px; |
|||
margin: 22px 0; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-block; |
|||
left: -15px; |
|||
top: -0px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #0056d6; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,311 @@ |
|||
<template> |
|||
<div class='g-main'> |
|||
<el-form :model="form"> |
|||
<template v-for="itemj in formList"> |
|||
<section class="f-flex" style="flex-wrap: wrap;"> |
|||
<el-form-item v-for="(itemk, index) in itemj.children" :key="index" label-width="160px" |
|||
:label="itemk.label" :class="itemk.itemType == 'textarea' ? 'textareaDidth' : ''"> |
|||
<template v-if="itemk.itemType == 'radio1'"> |
|||
<section class="list_item_width_1"> |
|||
<el-radio v-for="ns in itemk.opction" :key="ns.value" size="small" |
|||
v-model.trim="form[itemj.id][itemk.formName]" :label="ns.value"> |
|||
{{ ns.label }} |
|||
</el-radio> |
|||
</section> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'select1' && itemk.showFlag !== '0'"> |
|||
<el-select v-model="form[itemj.id][itemk.formName]" :placeholder="`请选择${itemk.label}`" |
|||
size="small" :multiple="itemk.multiple" :collapse-tags="itemk.collapseTags" clearable |
|||
:style="{ 'width': itemk.formName == 'specialCategoryCode' ? '183px' : '' }" |
|||
class="list_item_width_1"> |
|||
<el-option v-for="items in itemk.opction" :key="items.value" :label="items.label" |
|||
:value="items.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'textarea1'"> |
|||
<el-input type="textarea" :placeholder="`请输入${itemk.label}`" class="item-width-textarea" |
|||
maxlength="120" size="small" show-word-limit resize="none" rows="3" |
|||
v-model.trim="form[itemj.id][itemk.formName]"> |
|||
</el-input> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'input1'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" class="list_item_width_1" size="small" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable> |
|||
</el-input> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'inputNum'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" size="small" class="list_item_width_1-text" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable |
|||
@blur="checkNumberInput(itemj.id, itemk.formName)"> |
|||
</el-input><span class="u-data-tag">元</span> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'checkbox'"> |
|||
<el-checkbox-group size="small" v-model="form[itemj.id][itemk.formName]"> |
|||
<el-checkbox v-for="items in itemk.opction" :label="items.value" |
|||
:style="{ 'margin-right': items.label != itemk.label ? '' : '19px' }" :key="items.value" |
|||
:value="items.value">{{ items.label }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'datepicker1' && itemk.showFlag !== '0'"> |
|||
<el-date-picker v-model.trim="form[itemj.id][itemk.formName]" class="list_item_width_1" |
|||
type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" |
|||
value-format="yyyy-MM-dd"> |
|||
</el-date-picker> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'cascader1'"> |
|||
<el-cascader v-model="form[itemj.id].partyOrgId" :props="casProps" :options="itemk.opction" |
|||
class="list_item_width_1" clearable size="small" |
|||
@change="handlePartyOrgCascadarChange"></el-cascader> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'number'"> |
|||
<el-input-number class="list_item_width_1" size="small" :min="1" :max="10" |
|||
v-model.trim="form[itemj.id][itemk.formName]"></el-input-number> |
|||
</template> |
|||
|
|||
</el-form-item> |
|||
</section> |
|||
</template> |
|||
</el-form> |
|||
<el-row style="margin:24px" v-if="operationType == 'add'"> |
|||
<el-col :span="24" align="center"> |
|||
<el-button size="small" class="diy-button--white" @click="handlerCancle" plain>取消</el-button> |
|||
<el-button type="primary" size="small" @click="handleClickSUbmitExpand">保存</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
formType: null, |
|||
formList: [], |
|||
form: { |
|||
// 党员信息 |
|||
parymemberInfoDto: { |
|||
joinTime: null, |
|||
positiveTime: null, |
|||
partyOrgId: null, |
|||
flowFlag: null, |
|||
flowActNum: null, |
|||
partyJob: null, |
|||
duty: null, |
|||
retiredFlag: null, |
|||
centerFlag: null, |
|||
studyNotNeed: null, |
|||
joinBranchName: null, |
|||
joinCommunityTime: null |
|||
}, |
|||
// 残疾信息 |
|||
healthDto: { |
|||
disabilityCategoryCode: null, |
|||
disabilityLevel: null, |
|||
disabilityNum: null, |
|||
disabilityDesc: null, |
|||
guardianFlag: null, |
|||
guardianName: null, |
|||
specialSkillFlag: null, |
|||
workCapacityFlag: null |
|||
}, |
|||
// 大病信息 |
|||
seriousIllnessDto: { |
|||
illnessCodes: [] |
|||
}, |
|||
// 慢病信息 |
|||
chronicDiseaseDto: { |
|||
chronicDiseaseCodes: [] |
|||
}, |
|||
// 死亡信息 |
|||
deathDto: { |
|||
deathTime: null |
|||
}, |
|||
// 老年人 |
|||
oldPeopleDto: { |
|||
oldPeopleCategories:[], |
|||
resideSituation: null, |
|||
oldSubsidy:null |
|||
}, |
|||
// 低保人员 |
|||
subsistenceAllowanceDto: { |
|||
reasons: [], |
|||
category: null |
|||
}, |
|||
// 退役军人 |
|||
veteranDto: { |
|||
joinArmyTime: null, |
|||
leaveArmyTime: null, |
|||
serviceUnit: null, |
|||
receiveUnit: null, |
|||
settlementAmount: null, |
|||
trainDesc: null, |
|||
employmentSituation: null, |
|||
pubWelfareJobFlag: null |
|||
}, |
|||
|
|||
// 保障房人员 |
|||
ensureHouseDto: { |
|||
liveCommunity: null, |
|||
housingNature: null |
|||
}, |
|||
// 统战人员 |
|||
unitedFrontDto: { |
|||
unitedFrontType: null |
|||
}, |
|||
//特扶人员 |
|||
specialSupportDto: { |
|||
specialSupportType: null,//特扶类别 |
|||
childName: null,//子女姓名 |
|||
childGender: null,//子女性别 |
|||
childDeathDate: null,//子女死亡日期 |
|||
childDisabilityCategoryCode: null,//伤残类别 |
|||
childDisabilityLevel: null,//伤残等级 |
|||
}, |
|||
// 志愿者 |
|||
volunteerDto: { |
|||
volunteerCategory: [] |
|||
}, |
|||
|
|||
}, |
|||
casProps: { |
|||
value: 'id', |
|||
label: 'partyOrgName', |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
this.handleNextOrgTreeClick(node, resolve) |
|||
}, |
|||
isLeaf: (data, node) => { |
|||
console.log(data); |
|||
//根据后台返回的数据判断是否还有下级 是否显示箭头图标 |
|||
//el-tree懒加载无子级数据时去掉下拉箭头 |
|||
if (data.partyOrgLevel == 7 || data.childrenQty == 0) { |
|||
return true |
|||
} |
|||
}, |
|||
checkStrictly: true, |
|||
multiple: false, |
|||
}, |
|||
}; |
|||
}, |
|||
props: { |
|||
operationType:{ |
|||
type:String, |
|||
default:'' |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
activated() { |
|||
this.getOrgTree() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
checkNumberInput(itemj, itemk) { |
|||
if (this.form[itemj][itemk]) { |
|||
if (isNaN(this.form[itemj][itemk])) { |
|||
this.$message.error("请输入数字"); |
|||
this.form[itemj][itemk] = ""; |
|||
} else { |
|||
this.form[itemj][itemk] = parseFloat( |
|||
this.form[itemj][itemk] |
|||
); |
|||
} |
|||
} |
|||
}, |
|||
showForm() { |
|||
this.$nextTick(() => { |
|||
const promises = this.formList.map(async (group) => { |
|||
return group.children.reduce(async (accPromise, item) => { |
|||
const acc = await accPromise; |
|||
acc[item.formName] = null; |
|||
if (item.opctionUrl) { |
|||
try { |
|||
item.opction = await this.getDictDataForm(item.opctionUrl, item.opctionParams); |
|||
} catch (error) { |
|||
console.error('Error fetching options:', error); |
|||
} |
|||
} |
|||
return acc; |
|||
}, Promise.resolve({})); |
|||
}); |
|||
|
|||
Promise.all(promises).then((results) => { |
|||
}).catch((error) => { |
|||
console.error('Error fetching options:', error); |
|||
}); |
|||
this.getOrgTree() |
|||
console.log(this.form, '子组件form'); |
|||
console.log(this.formList, '子组件formList'); |
|||
}) |
|||
}, |
|||
async getDictDataForm(url, params) { |
|||
try { |
|||
const { data } = await this.$http.post(url, params); |
|||
return data.data; |
|||
} catch (error) { |
|||
console.log(error, `获取 ${opctionParams.dictType} 字典`); |
|||
} |
|||
}, |
|||
handlerCancle() { |
|||
this.$emit('hideExpand', this.formType) |
|||
}, |
|||
handleClickSUbmitExpand() { |
|||
this.$emit('submitExpand', this.form, this.formType) |
|||
}, |
|||
handlePartyOrgCascadarChange(selectedNode) { |
|||
this.form.parymemberInfoDto.partyOrgId = selectedNode[selectedNode.length - 1]; |
|||
}, |
|||
async handleNextOrgTreeClick(node, resolve) { |
|||
await this.getTreeChildenList(node, resolve) |
|||
}, |
|||
async getTreeChildenList(node, resolve) { |
|||
if (node.data.partyOrgLevel === 7) { |
|||
resolve(null); |
|||
return; |
|||
} |
|||
const url = "/actual/base/party/org/listNextLevelPartyOrgTreeNodesByPid" |
|||
let params = { |
|||
partyOrgPid: node.data.id |
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code === 0) { |
|||
data.forEach(item => { |
|||
item.children = null; |
|||
item.leaf = item.partyOrgLevel === 7 || item.childrenQty === 0 |
|||
}); |
|||
resolve(data) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getOrgTree() { |
|||
try { |
|||
const { data } = await requestGet('/actual/base/party/org/listPartyOrgTreeRoot4Select', { depth: 8 }) |
|||
this.formList.forEach(c => { |
|||
for (let i of c.children) { |
|||
if (i.formName == 'partyOrgId') { |
|||
i.opction = [data]; |
|||
} |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>保障房</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>老年人</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>党员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>公益岗</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>特扶人员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>统战人员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>退役军人</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>志愿者</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<div style="padding:0 16px;margin-top: 7px;"> |
|||
<el-tabs v-model="topTabs" @tab-click="tabClick"> |
|||
<el-tab-pane :label="complainLabel" name="12345"> |
|||
<complain :tableData="complainList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shengLabel" name="sheng"> |
|||
<sheng :tableData="shengList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shequLabel" name="shequ"> |
|||
<shequ :tableData="shequList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shijianLabel" name="shijian"> |
|||
<shijian :tableData="shijianList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="xuqiuLabel" name="xuqiu"> |
|||
<xuqiu :tableData="xuqiuList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="fuwuLabel" name="fuwu"> |
|||
<div style="display: flex; flex-direction: column; height: 100%"> |
|||
<fuwu |
|||
:tableData="fuwuList" |
|||
style="flex: 1; overflow: auto" |
|||
/> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import complain from "./table/complain"; |
|||
import sheng from "./table/sheng"; |
|||
import shequ from "./table/shequ"; |
|||
import shijian from "./table/shijian"; |
|||
import xuqiu from "./table/xuqiu"; |
|||
import fuwu from "./table/fuwu"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
topTabs: "12345", |
|||
|
|||
complainTotal: 0, |
|||
complainList: [], |
|||
complainLabel: "", |
|||
|
|||
shengLabel: "", |
|||
shengList: [], |
|||
shengTotal: 0, |
|||
|
|||
shequLabel: "", |
|||
shequList: [], |
|||
shequTotal: 0, |
|||
|
|||
shijianLabel: "", |
|||
shijianList: [], |
|||
shijianTotal: 0, |
|||
|
|||
xuqiuLabel: "", |
|||
xuqiuList: [], |
|||
xuqiuTotal: 0, |
|||
|
|||
fuwuLabel: "", |
|||
fuwuList: [], |
|||
fuwuTotal: 0, |
|||
|
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
}, |
|||
async mounted() { |
|||
// 获取家庭所有成员 |
|||
await this.getHouseRelationShip(); |
|||
|
|||
await this.getComplainList(); |
|||
await this.getShengList(); |
|||
await this.getShequList(); |
|||
await this.getshijianList(); |
|||
await this.getxuqiuList(); |
|||
await this.getfuwuList(); |
|||
}, |
|||
props: { |
|||
houseId: { |
|||
type: String, |
|||
default: () => {}, |
|||
}, |
|||
familyResiList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
|
|||
}, |
|||
//方法 |
|||
methods: { |
|||
tabClick(index) {}, |
|||
handleSizeChange() {}, |
|||
handleCurrentChange() {}, |
|||
getComplainList() { |
|||
|
|||
if (this.resiId.length == 0) { |
|||
this.complainList = []; |
|||
this.complainLabel = `12345投诉（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
eventType: "3", |
|||
}; |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
|
|||
// 省满意度列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.complainList = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status ? statusArr[item.status] : null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.complainTotal = res.data.total; |
|||
|
|||
this.complainLabel = `12345投诉（${this.complainTotal}）`; |
|||
}); |
|||
}, |
|||
getShengList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shengList = []; |
|||
this.shengLabel = `省满意度调查（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/provincialSatisfactionPageList", |
|||
parm |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.shengList = res.data; |
|||
this.shengTotal = res.data.length; |
|||
this.shengLabel = `省满意度调查（${this.shengTotal}）`; |
|||
}); |
|||
}, |
|||
getShequList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shequList = []; |
|||
this.shequLabel = `社区满意度自查（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/communitySatisfactionPageList", |
|||
parm |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.shequList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
completeFlag: completeFlags[item.completeFlag], |
|||
}; |
|||
}); |
|||
this.shequTotal = this.shequList.length; |
|||
this.shequLabel = `社区满意度自查（${this.shequTotal}）`; |
|||
}); |
|||
}, |
|||
getshijianList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shijianList = []; |
|||
this.shijianLabel = `上报事件（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.shijianList = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status ? statusArr[item.status] : null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.shijianTotal = this.shijianList.length; |
|||
this.shijianLabel = `上报事件（${this.shijianTotal}）`; |
|||
}); |
|||
}, |
|||
getxuqiuList() { |
|||
if (this.resiId.length == 0) { |
|||
this.xuqiuList = []; |
|||
this.xuqiuLabel = `居民需求（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/demandOfResidentsPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.xuqiuList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.xuqiuTotal = this.xuqiuList.length; |
|||
this.xuqiuLabel = `居民需求（${this.xuqiuTotal}）`; |
|||
}); |
|||
}, |
|||
getfuwuList() { |
|||
if (this.resiId.length == 0) { |
|||
this.fuwuList = []; |
|||
this.fuwuLabel = `社区服务（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/communityServicePageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.fuwuList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.fuwuTotal = this.fuwuList.length; |
|||
this.fuwuLabel = `社区服务（${this.fuwuTotal}）`; |
|||
}); |
|||
}, |
|||
|
|||
// 业务记录 |
|||
async getHouseRelationShip() { |
|||
try { |
|||
var resiIds = []; |
|||
await this.$http.post("/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid="+this.houseId).then(({ data: res }) => { |
|||
res.data.forEach(function(item) { |
|||
// 将每个元素中的"id"放入houseResiIds数组中 |
|||
resiIds.push(item.id); |
|||
},this); |
|||
}); |
|||
|
|||
this.resiId = resiIds; |
|||
|
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: { complain, sheng, fuwu, shijian, xuqiu, shequ }, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="服务详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="23" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务类型：</span> |
|||
<span>{{ |
|||
formData.customerId && getFwType(formData.customerId) |
|||
}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务事项：</span> |
|||
<span>{{ formData.serviceName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务时间：</span> |
|||
<span>{{ formData.serviceTimeStart || '--' }} ~ |
|||
{{ formData.serviceTimeEnd || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务内容：</span> |
|||
<span style="margin-top: 20px">{{ formData.remark || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>经办人：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span> {{ $sensitive(formData.principalContact, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务组织：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>政策依据：</span> |
|||
<span>{{ formData.policyTitle || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: {}, |
|||
loading: false, |
|||
activities: [], |
|||
|
|||
|
|||
// 服务类型。 |
|||
serviceTypesLevel1: [], |
|||
formData: {} |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel1 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getFwType(value) { |
|||
if (this.serviceTypesLevel1.length > 0 && value) { |
|||
return this.serviceTypesLevel1.filter( |
|||
(item) => item.customerId == value |
|||
)[0].name; |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/icServiceRecordV2/detail", { |
|||
serviceRecordId: id, |
|||
}) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.formData = data; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
// this.$http |
|||
// .post("/governance/icEvent/process", { icEventId: id }) |
|||
// .then((res) => { |
|||
// const { code, data, msg } = res.data; |
|||
// if (code === 0) { |
|||
// this.activities = data; |
|||
// } else { |
|||
// this.$message.error(msg); |
|||
// } |
|||
// }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
|
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="省满意度调查不满意事项详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="23" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.agencyName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项来源：</span> |
|||
<span>省满意度调查</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项类型：</span> |
|||
<span>{{ item.scopeId && getSxType(item.scopeId) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>所属月份：</span> |
|||
<span>{{ |
|||
item.createdTime && getMonthData(item.createdTime) |
|||
}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<div>不满意事项描述：</div> |
|||
<div style="margin-top: 20px">{{ item.problemDesc || '--' }}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人姓名：</span> |
|||
<span>{{ item.name || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人电话：</span> |
|||
<span> {{ $sensitive(item.mobile, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.completeTime || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
// 不满意类型列表 |
|||
satisfactionCategoryOptions: [], |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { }, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getSxType(value) { |
|||
if (this.satisfactionCategoryOptions.length > 0 && value) { |
|||
return this.satisfactionCategoryOptions.filter( |
|||
(item) => item.value == value |
|||
)[0].label; |
|||
} |
|||
return ""; |
|||
}, |
|||
getMonthData(time) { |
|||
if (time) { |
|||
return this.$moment(time).format("YYYY年MM月"); |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/provinceEvaluationRecord/" + id) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" |
|||
) |
|||
.then(({ data: { data } }) => { |
|||
this.satisfactionCategoryOptions = data.map((item) => { |
|||
return { |
|||
label: item.categoryName, |
|||
value: item.categoryCode, |
|||
}; |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,306 @@ |
|||
<template> |
|||
<el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="事件详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="13" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
|
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.gridName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报渠道：</span> |
|||
<span>{{ item.sourceTypeName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>事件类型：</span> |
|||
<span>{{ item.categoryName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>接受时间：</span> |
|||
<span>{{ item.happenTime || '--' }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>工单号：</span> |
|||
<span>{{ item.workOrderNum }}</span> |
|||
</div>--> |
|||
<div class="eventItem"> |
|||
<div>问题描述：</div> |
|||
<div style="margin-top: 20px">{{ item.eventContent || '--' }}</div> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<div>图片：</div> |
|||
<div style="margin-top: 20px; display: flex"> |
|||
<img |
|||
style="width: 100px; height: 100px; margin-right: 5px" |
|||
v-for="src in item.imageList" |
|||
:key="src" |
|||
:src="src" |
|||
alt="/" |
|||
@click="openImg(src)" |
|||
/> |
|||
</div> |
|||
</div>--> |
|||
<div class="eventItem"> |
|||
<span>联系人：</span> |
|||
<span>{{ item.name || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span>{{ item.mobile || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>详细地址：</span> |
|||
<span>{{ item.address || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>办结时限：</span> |
|||
<span>{{ item.latestOperatedTime || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>满意度评价：</span> |
|||
<span>{{ item.satisfactionName || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<div class="rightEvent m-info"> |
|||
<!-- <div class="eventDetails"> |
|||
<img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展 |
|||
</div> --> |
|||
<!-- <el-timeline class="timeline" :reverse="true"> |
|||
<el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''"> |
|||
<div class="status-box"> |
|||
<div class="status1" v-if="index == activities.length - 1">回复</div> |
|||
<div class="status2" v-else>完成并回复</div> |
|||
<div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="field">回复人：</div> |
|||
<div class="value">{{ item.departmentName }}</div> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="field">回复内容：</div> |
|||
<div class="value">{{ item.publicReply }}</div> |
|||
</div> |
|||
</el-timeline-item> |
|||
</el-timeline> --> |
|||
<div v-if="activities.length > 0"> |
|||
<!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> --> |
|||
<div class="m-process"> |
|||
<div class="list"> |
|||
<div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId" |
|||
v-for="(item, index) in activities"> |
|||
<div class="item-row"> |
|||
<template v-if="item.agencyId"> |
|||
<div class="name">指派</div> |
|||
</template> |
|||
<template v-if="!item.timeLimit"> |
|||
<div class="name">完成并回复</div> |
|||
</template> |
|||
<template v-if="!item.agencyId && item.timeLimit"> |
|||
<div class="name">{{ item.processName || '--' }}</div> |
|||
</template> |
|||
<div class="date"> |
|||
{{ |
|||
item.processTime ? getTrueTime(item.processTime) : "" |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div v-if="item.type === 'event'"> |
|||
<template v-if="item.agencyId"> |
|||
<div class="detail"> |
|||
<div class="detail-field">指派人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.departmentName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">指派部门：</div> |
|||
<div class="detail-value"> |
|||
{{ item.agencyName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">转办意见：</div> |
|||
<div class="detail-value"> |
|||
{{ item.publicReply || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">办结时限：</div> |
|||
<div class="detail-value"> |
|||
{{ item.timeLimit || '--' }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="detail"> |
|||
<div class="detail-field">回复人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.departmentName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">回复内容：</div> |
|||
<div class="detail-value"> |
|||
{{ item.publicReply || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail" v-if="item.timeLimit"> |
|||
<div class="detail-field">办结时限：</div> |
|||
<div class="detail-value"> |
|||
{{ getTrueTime(item.timeLimit) }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </el-card> --> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: {}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
this.getProcessData(this.id); |
|||
} else { |
|||
this.item = {} |
|||
this.activities = [] |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/icEvent/detail", { icEventId: id }) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getProcessData(id) { |
|||
this.$http |
|||
.post("/governance/icEvent/process", { icEventId: id }) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.activities = data; |
|||
this.loading1 = false; |
|||
} else { |
|||
this.loading1 = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
|
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
span:first-child {} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="818px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
title="社区满意度自查不满意事项详情" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="24" style="padding-left: 40px"> |
|||
</el-col> |
|||
<el-col |
|||
:span="23" |
|||
style="padding-left: 40px" |
|||
> |
|||
<div class="leftEvent"> |
|||
|
|||
<!-- <div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.agencyName }}</span> |
|||
</div> --> |
|||
<div class="eventItem"> |
|||
<span>不满意事项来源：</span> |
|||
<span>社区意度自查</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项类型：</span> |
|||
<span>{{ getSxType(item) }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>所属月份：</span> |
|||
<span>{{ |
|||
item.createdTime && getMonthData(item.createdTime) |
|||
}}</span> |
|||
</div> --> |
|||
<div class="eventItem"> |
|||
<div>不满意事项描述：</div> |
|||
<div style="margin-top: 20px">{{ getSxReason(item) }}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人姓名：</span> |
|||
<span>{{ item.reporterName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人电话：</span> |
|||
<span> {{ $sensitive(item.reporterMobile, 3, 7) }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.completeTime }}</span> |
|||
</div> --> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
// 不满意类型列表 |
|||
satisfactionCategoryOptions: [ |
|||
{ |
|||
key: "evaCulturalFacility", |
|||
value: "文化设施", |
|||
}, |
|||
{ |
|||
key: "evaSportsFacility", |
|||
value: "体育设施", |
|||
}, |
|||
{ |
|||
key: "evaEcologicalEnv", |
|||
value: "生态环境", |
|||
}, |
|||
{ |
|||
key: "evaSocialSecurity", |
|||
value: "社会治安", |
|||
}, |
|||
{ |
|||
key: "evaocialAssistance", |
|||
value: "社会救助", |
|||
}, |
|||
{ |
|||
key: "evaOldPeopleProvide", |
|||
value: "老有所养", |
|||
}, |
|||
{ |
|||
key: "evaBasicEducation", |
|||
value: "基础教育", |
|||
}, |
|||
{ |
|||
key: "evaMedical", |
|||
value: "病有所医", |
|||
}, |
|||
], |
|||
reason: [ |
|||
"basicEducationReason", |
|||
"culturalFacilityReason", |
|||
"ecologicalEnvReason", |
|||
"medicalReason", |
|||
"oldPeopleProvideReason", |
|||
"socialAssistanceReason", |
|||
"socialSecurityReason", |
|||
"sportsFacilityReason", |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getSxType(row) { |
|||
let arr = []; |
|||
let text = ""; |
|||
for (let k in row) { |
|||
if (row[k] == "bad") { |
|||
arr.push(k); |
|||
} |
|||
} |
|||
this.satisfactionCategoryOptions.forEach((item) => { |
|||
arr.forEach((item1) => { |
|||
if (item1 == item.key) { |
|||
if (text == "") { |
|||
text = item.value; |
|||
} else { |
|||
text = text + "， " + item.value; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
return text; |
|||
}, |
|||
getSxReason(row) { |
|||
let text = ""; |
|||
this.reason.forEach((item) => { |
|||
for (let key in row) { |
|||
if (item == key && row[key]) { |
|||
if (text == "") { |
|||
text = row[key]; |
|||
} else { |
|||
text = text + "；" + row[key]; |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
return text; |
|||
}, |
|||
getMonthData(time) { |
|||
if (time) { |
|||
return this.$moment(time).format("YYYY年MM月"); |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfaction/communitySelfInsp/inspResult/detail/" + id |
|||
) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = { ...data.reporter, ...data.satisfaction }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
// this.$http |
|||
// .post("/governance/provinceEvaluationRecord/" + id) |
|||
// .then((res) => { |
|||
// this.loading = false; |
|||
// const { code, data, msg } = res.data; |
|||
// if (code === 0) { |
|||
// this.item = data; |
|||
// } else { |
|||
// this.$message.error(msg); |
|||
// } |
|||
// }); |
|||
// this.$http |
|||
// .get( |
|||
// "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" |
|||
// ) |
|||
// .then(({ data: { data } }) => { |
|||
// console.log('data::', data); |
|||
// this.satisfactionCategoryOptions = data.map((item) => { |
|||
// return { |
|||
// label: item.categoryName, |
|||
// value: item.categoryCode, |
|||
// }; |
|||
// }); |
|||
// }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
.eventWrap { |
|||
width: 1094px; |
|||
// max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
|
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="818px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
title="需求详情" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
|
|||
<el-col |
|||
:span="23" |
|||
style="padding-left: 40px" |
|||
> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.gridName||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报渠道：</span> |
|||
<span>{{ item.reportTypeName||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求类型：</span> |
|||
<span>{{ item.categoryName ||'--'}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报时间：</span> |
|||
<span>{{ item.reportTime||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<div>需求描述：</div> |
|||
<div style="margin-top: 20px">{{ item.content ||'--'}}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人姓名：</span> |
|||
<span>{{ item.demandUserName ||'--'}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人电话：</span> |
|||
<span> {{ $sensitive(item.demandUserMobile, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.wantServiceTime||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人住址：</span> |
|||
<span>{{ item.serviceAddress||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报人：</span> |
|||
<span>{{ item.reportUserName||'--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
|
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
|
|||
let params = { |
|||
demandRecId: id, |
|||
}; |
|||
this.$http |
|||
.post("/governance/userdemand/demandDetail", params) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
.eventWrap { |
|||
width: 1094px; |
|||
height: 610px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
span:first-child { |
|||
} |
|||
|
|||
span:last-child { |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,187 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<div style="height:300px; width: 500px;"> |
|||
<RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" |
|||
:on-line-click="onLineClick" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
export default { |
|||
name: 'RelationGraphDemo3', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
graphOptions: { |
|||
disableDragNode: true, |
|||
defaultNodeBorderWidth: 0, |
|||
defaultNodeColor: 'rgba(238, 178, 94, 0)', |
|||
allowSwitchLineShape: true, |
|||
allowSwitchJunctionPoint: true, |
|||
defaultLineShape: 1, |
|||
allowShowMiniToolBar: false, |
|||
layouts: [ |
|||
{ |
|||
label: '中心', |
|||
layoutName: 'center', |
|||
layoutClassName: 'seeks-layout-center', |
|||
distance_coefficient: 1.5 |
|||
} |
|||
], |
|||
defaultJunctionPoint: 'border', |
|||
// 这里可以参考"Graph 图谱"中的参数进行设置 |
|||
} |
|||
}; |
|||
}, |
|||
props: { |
|||
houseInfo: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.getFamilyRelationshipList() |
|||
}) |
|||
}, |
|||
watch: { |
|||
houseInfo: { |
|||
handler(newVal, oldVal) { |
|||
this.getFamilyRelationshipList() |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
methods: { |
|||
async getFamilyRelationshipList() { |
|||
let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=` + this.houseInfo.id; |
|||
let { code, data, msg } = await requestPost(url) |
|||
if (code == 0) { |
|||
|
|||
// 将房屋本身的信息放到数组元素的第一个 |
|||
const rootNode = {}; |
|||
rootNode["id"] = this.houseInfo.id; |
|||
rootNode["name"] = this.houseInfo.fullName; |
|||
rootNode["type"] = 1; |
|||
data.unshift(rootNode); |
|||
|
|||
let familyList = data.map((item, index) => ({ |
|||
'id': `N${index + 1}`, |
|||
'text': item.name, |
|||
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${item.type == 1?'home':index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ? item.gender == 1 ? 'grandpa' : 'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : item.gender == 1 ? 'father' : 'mother' }"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ? |
|||
item.name.substring(0, 1) + '*' : |
|||
item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>` |
|||
})) |
|||
|
|||
|
|||
let lineList = data.map((item, index) => ({ |
|||
'from': 'N1', |
|||
'to': `N${index + 1}`, |
|||
'text':item.type ==1?'未知':data[index].houseHolderRel || '自住', |
|||
'isHideArrow': true, |
|||
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')), |
|||
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')) |
|||
})); |
|||
lineList = lineList.slice(1) |
|||
const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList } |
|||
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|||
// 这些写上当图谱初始化完成后需要执行的代码 |
|||
}); |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
onNodeClick(nodeObject, $event) { |
|||
console.log('onNodeClick:', nodeObject); |
|||
}, |
|||
onLineClick(lineObject, $event) { |
|||
console.log('onLineClick:', lineObject); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.c-my-node2 { |
|||
border: none; |
|||
background-position: center center; |
|||
background-size: 100%; |
|||
height: 74px; |
|||
width: 74px; |
|||
border-radius: 40px; |
|||
} |
|||
|
|||
.c-node-name2 { |
|||
margin-left: -5px; |
|||
text-align: center; |
|||
margin-top: 63px; |
|||
line-height: 20px; |
|||
position: absolute; |
|||
width: 96px; |
|||
height: 20px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.c-my-node1 { |
|||
border: none; |
|||
background-size: 100%; |
|||
height: 100px; |
|||
width: 100px; |
|||
border-radius: 50px; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
|
|||
.c-my-node-son { |
|||
background-image: url(~@/assets/images/index/son.png) !important; |
|||
} |
|||
|
|||
.c-my-node-girl { |
|||
background-image: url(~@/assets/images/index/girl.png) !important; |
|||
} |
|||
|
|||
.c-my-node-father { |
|||
background-image: url(~@/assets/images/index/father.png) !important; |
|||
} |
|||
|
|||
.c-my-node-mother { |
|||
background-image: url(~@/assets/images/index/mother.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandpa { |
|||
background-image: url(~@/assets/images/index/grandpa.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandma { |
|||
background-image: url(~@/assets/images/index/grandma.png) !important; |
|||
} |
|||
|
|||
.c-my-node-home { |
|||
background-image: url(~@/assets/images/index/home.png) !important; |
|||
} |
|||
|
|||
.c-node-name1 { |
|||
margin-left: -5px; |
|||
text-align: center; |
|||
margin-top: 63px; |
|||
line-height: 20px; |
|||
position: absolute; |
|||
width: 96px; |
|||
height: 20px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.rel-node-checked { |
|||
box-shadow: none !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<div class="table" style="padding:0 16px;"> |
|||
|
|||
<el-table class="m-table-item" :data="tableData" border style="width: 100%; margin-top:23px"> |
|||
<el-table-column label="序号" type="index" fixed="left" align="left" width="50"> |
|||
</el-table-column> |
|||
<el-table-column v-for="item in tableHeader" :key="item.columnName" :prop="item.columnName" :label="item.label" |
|||
align="left" :show-overflow-tooltip="true" :width="item.width || ''"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
tableHeader: [ |
|||
{ columnName: "resiName", label: "变更人", width: 150 }, |
|||
{ columnName: "typeName", label: "变更类型", width: 80 }, |
|||
{ columnName: "beforeChange", label: "变更前", }, |
|||
{ columnName: "afterChange", label: "变更后", }, |
|||
{ columnName: "operatorName", label: "操作人", width: 80 }, |
|||
{ columnName: "changeTime", label: "调整时间", width: 200 } |
|||
], |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData" > |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="事件类型" prop="categorycode" width="" /> |
|||
<el-table-column label="事件描述" prop="eventcontent" width="" /> |
|||
<el-table-column label="办理状态" prop="status" width="" /> |
|||
<el-table-column label="接收时间" prop="happentime" width="180" /> |
|||
<el-table-column label="标记" prop="marktype" width="" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sjdetails :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sjdetails from "../details/sjdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
sjdetails |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
pageNo: 1, |
|||
pageSize: 20 |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let parm = { |
|||
residList: [this.resiId], |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
} |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", parm).then(({ data: res }) => { |
|||
this.list = [] |
|||
// this.list = res.data.list.map((item) => { |
|||
// return { |
|||
// ...item, |
|||
// status: item.status ? statusArr[item.status] : null, |
|||
// marktype: marktypes[item.marktype], |
|||
// }; |
|||
// }); |
|||
this.total = this.list.length; |
|||
this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="需求类型" prop="serviceCategoryKey" width="" /> |
|||
<el-table-column label="事件描述" prop="serviceName" width="" /> |
|||
<el-table-column label="服务情况" prop="state" width="" /> |
|||
<el-table-column label="创建时间" prop="serviceTimeStart" width="180" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<fwdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import fwdetail from "../details/fwdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
fwdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="不满意事项类型" prop="scope" width="190" /> |
|||
<el-table-column label="不满意事项描述" prop="problemDesc" width="" /> |
|||
<el-table-column label="办理状态" prop="completeFlag" width="120" /> |
|||
<el-table-column label="是否回访" prop="isReturn" width="120" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<shengdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import shengdetail from "../details/shengdetail"; |
|||
|
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
shengdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="不满意事项类型" prop="scope" width="190" /> |
|||
<el-table-column label="不满意事项描述" prop="problemDesc" width="" /> |
|||
<el-table-column label="办理状态" prop="completeFlag" width="120" /> |
|||
<el-table-column label="是否回访" prop="isReturn" width="120" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sqdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sqdetail from "../details/sqdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
sqdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="事件类型" prop="categorycode" width="" /> |
|||
<el-table-column label="事件描述" prop="eventcontent" width="" /> |
|||
<el-table-column label="办理状态" prop="status" width="" /> |
|||
<el-table-column label="接收时间" prop="happentime" width="180" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sjdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sjdetail from "../details/sjdetail"; |
|||
export default { |
|||
components: { |
|||
sjdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let residList = [this.resiId] |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => { |
|||
this.list = [{ |
|||
scope: "服务态度", |
|||
problemDesc: "服务人员态度不好", |
|||
completeFlag: "未办理", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "处理速度", |
|||
problemDesc: "等待时间过长", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}, |
|||
{ |
|||
scope: "设备问题", |
|||
problemDesc: "使用的机器经常故障", |
|||
completeFlag: "办理中", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "其他", |
|||
problemDesc: "场地不够干净", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}] |
|||
this.total = res.data.length; |
|||
// this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="需求类型" prop="categoryName" width="" /> |
|||
<el-table-column label="需求描述" prop="content" width="" /> |
|||
<el-table-column label="办理情况" prop="status" width="" /> |
|||
<el-table-column label="上报时间" prop="reportTime" width="180" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<xqdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import xqdetail from "../details/xqdetail"; |
|||
|
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
xqdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
|
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let residList = [this.resiId] |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => { |
|||
this.list = [{ |
|||
scope: "服务态度", |
|||
problemDesc: "服务人员态度不好", |
|||
completeFlag: "未办理", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "处理速度", |
|||
problemDesc: "等待时间过长", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}, |
|||
{ |
|||
scope: "设备问题", |
|||
problemDesc: "使用的机器经常故障", |
|||
completeFlag: "办理中", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "其他", |
|||
problemDesc: "场地不够干净", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}] |
|||
this.total = res.data.length; |
|||
// this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,346 @@ |
|||
<template> |
|||
<div class="g-main" v-loading="loading"> |
|||
<div class="right"> |
|||
<!-- <div class="editBtn"> |
|||
<el-button |
|||
class="diy-button--add" |
|||
type="primary" |
|||
size="small" |
|||
@click.native="handelClickHouseEdit" |
|||
>编辑</el-button |
|||
> |
|||
</div> --> |
|||
<div class="title-small" id="base">房屋信息</div> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋编码：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.houseCode || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋类型：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.houseTypeName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋用途：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.purposeName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋状态：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.rentName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">家庭标签：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.familyTags || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房主姓名：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.ownerName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label"><b>证件号：</b></div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
houseDetailObj.ownerIdCard |
|||
? houseDetailObj.ownerIdCard |
|||
: "--" |
|||
}} |
|||
</div> |
|||
<img |
|||
v-show="showFlagIdCardBtn" |
|||
src="@/assets/img/yanjing1.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<img |
|||
v-show="!showFlagIdCardBtn" |
|||
src="@/assets/img/yanjing2.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<el-button |
|||
type="text" |
|||
class="div-table-button--blue" |
|||
size="small" |
|||
@click="handelCLickShowCheckPassword('idCard')" |
|||
>{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button |
|||
> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label"><b>联系电话：</b></div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
houseDetailObj.ownerPhone |
|||
? houseDetailObj.ownerPhone |
|||
: "--" |
|||
}} |
|||
</div> |
|||
<img |
|||
v-show="showFlagMobileBtn" |
|||
src="@/assets/img/yanjing1.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<img |
|||
v-show="!showFlagMobileBtn" |
|||
src="@/assets/img/yanjing2.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<el-button |
|||
type="text" |
|||
class="div-table-button--blue" |
|||
size="small" |
|||
@click="handelCLickShowCheckPassword('mobile')" |
|||
>{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">备注：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.remark || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">创建时间：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.createdTime || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">更新时间：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.updatedTime || "--" }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
<div class="title-small">关系图谱 |
|||
<el-button type="primary" style="margin-left: 20px;" size="small" |
|||
@click="addResident()">新增居民</el-button> |
|||
</div> |
|||
|
|||
<graph |
|||
:houseInfo="houseDetailObj" |
|||
v-if="houseDetailObj" |
|||
/> |
|||
|
|||
<div class="title-small" id="businessRecord">业务记录</div> |
|||
<business-record :houseId="houseId"></business-record> |
|||
<div class="title-small" id="updateRecord">更新记录</div> |
|||
<change-record :tableData="houseChangeRecordList"></change-record> |
|||
</div> |
|||
<el-dialog title="密码验证" :visible.sync="showCheckPassword"> |
|||
<el-form :model="form" :rules="rules" ref="form"> |
|||
<el-form-item label="密码" prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
autocomplete="off" |
|||
type="password" |
|||
placeholder="请输入当前账号密码" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="showCheckPassword = false">取 消</el-button> |
|||
<el-button type="primary" @click="handelClickCheckPassword" |
|||
>确 定</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import graph from "./cpts/graph.vue"; |
|||
import businessRecord from "./cpts/businessRecord.vue"; |
|||
import changeRecord from "./cpts/table/changeRecord.vue"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
checkType: "edit", //edit或者view |
|||
houseChangeRecordList: [], //更新记录 |
|||
houseDetailObj: {}, //房屋详情 |
|||
showFlagIdCardBtn: true, |
|||
showFlagMobileBtn: true, |
|||
|
|||
showCheckPassword: false, |
|||
houseId:"", |
|||
|
|||
form: { |
|||
password: "", //脱敏确认密码 |
|||
}, |
|||
rules: { |
|||
password: [{ required: true, message: "请输入密码", trigger: "blur" }], |
|||
}, |
|||
}; |
|||
}, |
|||
components: { graph, businessRecord, changeRecord }, |
|||
created() { |
|||
}, |
|||
mounted() {}, |
|||
activated() {}, |
|||
methods: { |
|||
// 更新记录 |
|||
async getChangeRecordDetailById() { |
|||
try { |
|||
const { data } = await this.$http.get( |
|||
`/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=${this.houseId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.houseChangeRecordList = []; |
|||
} else { |
|||
this.houseChangeRecordList = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
getHouseDetail() { |
|||
this.$http |
|||
.post(`/actual/base/communityHouse/getMaskedHouseDeatilById/${this.houseId}`) |
|||
.then(async (res) => { |
|||
if (res.data.code === 0) { |
|||
this.houseDetailObj = res.data.data || {}; |
|||
|
|||
} else if (res.data.code >= 8000) { |
|||
this.houseDetailObj = {}; |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
this.loading = false; |
|||
}, |
|||
handelClickHouseEdit() { |
|||
this.checkType = "edit"; |
|||
this.showCheckPassword = true; |
|||
}, |
|||
|
|||
handelCLickShowCheckPassword(type) { |
|||
this.form.password = ""; |
|||
this.checkType = "view"; |
|||
if (type === "idCard") { |
|||
if (this.showFlagIdCardBtn) { |
|||
this.showCheckPassword = true; |
|||
} else { |
|||
this.showFlagIdCardBtn = true; |
|||
this.$set( |
|||
this.houseDetailObj, |
|||
"ownerIdCard", |
|||
this.houseDetailObj.ownerIdCard.substr(0, 11) + |
|||
"****" + |
|||
this.houseDetailObj.ownerIdCard.substr(16, 2) |
|||
); |
|||
} |
|||
} else if (type === "mobile") { |
|||
if (this.showFlagMobileBtn) { |
|||
this.showCheckPassword = true; |
|||
} else { |
|||
this.showFlagMobileBtn = true; |
|||
this.$set( |
|||
this.houseDetailObj, |
|||
"ownerPhone", |
|||
this.houseDetailObj.ownerPhone.substr(0, 3) + |
|||
"****" + |
|||
this.houseDetailObj.ownerPhone.substr(7, 4) |
|||
); |
|||
} |
|||
} |
|||
this.tuominType = type; |
|||
}, |
|||
|
|||
handelClickCheckPassword() { |
|||
this.$refs.form.validate((vali) => { |
|||
if (vali) { |
|||
this.handleSaveTuomin(this.form.password); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
addResident(){ |
|||
// this.$router.push({ name: 'add-resi' }); |
|||
this.$router.push({ |
|||
name: "add-resi", |
|||
params: { agencyId: "1673584241869238273",gridId: "1673585475279826946",villageId:"1673600667388780545",buildId:"1673600667527192577",unitId:"1673600667577524226",homeId:"1673600737530126338"}, |
|||
}); |
|||
}, |
|||
|
|||
async handleSaveTuomin(password) { |
|||
const url = `/actual/base/communityHouse/getClearHouseDeatilById/${this.houseId}`; |
|||
let parm = { |
|||
password, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, parm); |
|||
if (code === 0) { |
|||
if (this.tuominType === "mobile") { |
|||
this.$set(this.houseDetailObj, "ownerPhone", data.ownerPhone); |
|||
this.showFlagMobileBtn = !this.showFlagMobileBtn; |
|||
} |
|||
if (this.tuominType === "idCard") { |
|||
this.$set(this.houseDetailObj, "ownerIdCard", data.ownerIdCard); |
|||
this.showFlagIdCardBtn = !this.showFlagIdCardBtn; |
|||
} |
|||
this.showCheckPassword = false; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
computed: {}, |
|||
watch: { |
|||
"$store.state.huaXiang.houseInfo.houseId": { |
|||
handler(newValue, oldValue) { |
|||
this.houseId = newValue; |
|||
this.houseDetailObj = {}; |
|||
this.houseGraphObj = {}; |
|||
|
|||
this.getHouseDetail(); |
|||
this.getChangeRecordDetailById(); |
|||
|
|||
this.loading = false; |
|||
}, |
|||
deep: true, // 开启深度监听 |
|||
immediate: true, // 立即触发一次handler |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/pages/resiInfo.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
@ -0,0 +1,277 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<div style="height:300px; width: 500px;"> |
|||
<RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" |
|||
:on-line-click="onLineClick" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
export default { |
|||
name: 'RelationGraphDemo3', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
graphOptions: { |
|||
disableDragNode: true, |
|||
defaultNodeBorderWidth: 0, |
|||
defaultNodeColor: 'rgba(238, 178, 94, 0)', |
|||
allowSwitchLineShape: true, |
|||
allowSwitchJunctionPoint: true, |
|||
defaultLineShape: 1, |
|||
allowShowMiniToolBar: false, |
|||
layouts: [ |
|||
{ |
|||
label: '中心', |
|||
layoutName: 'center', |
|||
layoutClassName: 'seeks-layout-center', |
|||
distance_coefficient: 1.5 |
|||
} |
|||
], |
|||
defaultJunctionPoint: 'border', |
|||
// 这里可以参考"Graph 图谱"中的参数进行设置 |
|||
} |
|||
}; |
|||
}, |
|||
props: { |
|||
userInfo: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
// this.showSeeksGraph(); |
|||
this.getFamilyRelationshipList() |
|||
}) |
|||
}, |
|||
watch: { |
|||
userInfo: { |
|||
handler(newVal, oldVal) { |
|||
this.getFamilyRelationshipList() |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
methods: { |
|||
async getFamilyRelationshipList() { |
|||
let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=0&resid=` + this.userInfo.resiId; |
|||
let { code, data, msg } = await requestPost(url) |
|||
if (code == 0) { |
|||
// 找到符合条件的对象的索引 |
|||
let index = data.findIndex(item => item.name == this.userInfo.name); |
|||
if (index !== -1) { |
|||
// 移除这个对象并将其放到数组的第一个位置 |
|||
const [item] = data.splice(index, 1); |
|||
data.unshift(item); |
|||
} |
|||
let familyList = data.map((item, index) => ({ |
|||
'id': `N${index + 1}`, |
|||
'text': item.name, |
|||
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${item.type == 1?'home':index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ? item.gender == 1 ? 'grandpa' : 'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ? |
|||
item.name.substring(0, 1) + '*' : |
|||
item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>` |
|||
})) |
|||
let lineList = data.map((item, index) => ({ |
|||
'from': 'N1', |
|||
'to': `N${index + 1}`, |
|||
'text':item.type ==1?'房屋':data[index].houseHolderRel || '未知', |
|||
'isHideArrow': true, |
|||
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')), |
|||
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')) |
|||
})); |
|||
lineList = lineList.slice(1) |
|||
const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList } |
|||
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|||
// 这些写上当图谱初始化完成后需要执行的代码 |
|||
}); |
|||
this.familyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
showSeeksGraph() { |
|||
const __graph_json_data = { |
|||
'rootId': 'N13', 'nodes': [ |
|||
{ 'id': 'N1', 'text': '', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node1 c-my-node-father"><div class="c-node-name1" style="color:#6cc0ff"></div></div>' }, { 'id': 'N2', 'text': '李*康', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-girl" ><div class="c-node-name2" style="color:#ff875e">李*康</div></div>' }, { 'id': 'N3', 'text': '祁*伟', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-son" ><div class="c-node-name2" style="color:#6cc0ff">祁*伟</div></div>' }, { 'id': 'N4', 'text': '陈*石', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-mother" ><div class="c-node-name2" style="color:#ff875e">陈*石</div></div>' }, { 'id': 'N5', 'text': '陆*可', 'data': { 'isGoodMan': true, 'sexType': '女' }, 'innerHTML': '<div class="c-my-node2 c-my-node-grandpa" ><div class="c-node-name2" style="color:#ff875e">陆*可（25岁）</div></div>' }, { 'id': 'N6', 'text': '高*良', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-grandma" ><div class="c-node-name2" style="color:#6cc0ff">高*良</div></div>' }, { 'id': 'N7', 'text': '沙*金', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-home" ><div class="c-node-name2" style="color:#ff875e">沙*金</div></div>' }, { 'id': 'N9', 'text': '沙*金2', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-home" ><div class="c-node-name2" style="color:#ff875e">沙*金2</div></div>' },], 'lines': [ |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N6', |
|||
'text': '', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '父亲' |
|||
}, |
|||
|
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N7', |
|||
'text': '父亲', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '母亲' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N8', |
|||
'text': '母亲', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '儿子' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N2', |
|||
'text': '儿子', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '女儿' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N3', |
|||
'text': '女儿', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '配偶' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N4', |
|||
'text': '配偶', |
|||
'color': '#d7e5ff', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '岳父' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N5', |
|||
'text': '岳父', |
|||
'color': '#3b3b3b', |
|||
'fontColor': '#3b3b3b', |
|||
'isHideArrow': true, |
|||
'data': { |
|||
'type': '岳母' |
|||
} |
|||
}, |
|||
{ |
|||
'from': 'N1', |
|||
'to': 'N9', |
|||
'text': '岳母', |
|||
'isHideArrow': true, |
|||
'color': '#ffe4e4', |
|||
'fontColor': '#3b3b3b', |
|||
'data': { |
|||
'type': '岳母' |
|||
} |
|||
}, |
|||
|
|||
] |
|||
}; |
|||
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|||
// 这些写上当图谱初始化完成后需要执行的代码 |
|||
}); |
|||
}, |
|||
|
|||
onNodeClick(nodeObject, $event) { |
|||
console.log('onNodeClick:', nodeObject); |
|||
}, |
|||
onLineClick(lineObject, $event) { |
|||
console.log('onLineClick:', lineObject); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.c-my-node2 { |
|||
border: none; |
|||
background-position: center center; |
|||
background-size: 100%; |
|||
height: 74px; |
|||
width: 74px; |
|||
border-radius: 40px; |
|||
} |
|||
|
|||
.c-node-name2 { |
|||
margin-left: -5px; |
|||
text-align: center; |
|||
margin-top: 63px; |
|||
line-height: 20px; |
|||
position: absolute; |
|||
width: 96px; |
|||
height: 20px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.c-my-node1 { |
|||
border: none; |
|||
background-size: 100%; |
|||
height: 100px; |
|||
width: 100px; |
|||
border-radius: 50px; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
|
|||
.c-my-node-son { |
|||
background-image: url(~@/assets/images/index/son.png) !important; |
|||
} |
|||
|
|||
.c-my-node-girl { |
|||
background-image: url(~@/assets/images/index/girl.png) !important; |
|||
} |
|||
|
|||
.c-my-node-father { |
|||
background-image: url(~@/assets/images/index/father.png) !important; |
|||
} |
|||
|
|||
.c-my-node-mother { |
|||
background-image: url(~@/assets/images/index/mother.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandpa { |
|||
background-image: url(~@/assets/images/index/grandpa.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandma { |
|||
background-image: url(~@/assets/images/index/grandma.png) !important; |
|||
} |
|||
|
|||
.c-my-node-home { |
|||
background-image: url(~@/assets/images/index/home.png) !important; |
|||
} |
|||
|
|||
.c-node-name1 { |
|||
display: none; |
|||
} |
|||
|
|||
.rel-node-checked { |
|||
box-shadow: none !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,104 +0,0 @@ |
|||
<template> |
|||
<div class="enjoy-service"> |
|||
<div class="enjoy-service-item" v-for="(item, index) in data"> |
|||
<div class="num">+{{ item.classificationNum }}</div> |
|||
<div class="info"> |
|||
<div class="title">{{ item.classification }}</div> |
|||
<div class="time">{{ item.recordTime }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
data: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.data = []; |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/recorHistory") |
|||
.then(({ data: res }) => { |
|||
if (res.code == 0) { |
|||
this.data = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.enjoy-service { |
|||
padding-left: 26px; |
|||
margin-top: 12px; |
|||
height: 100%; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.enjoy-service-item { |
|||
color: #333333; |
|||
display: flex; |
|||
padding: 14px 16px 14px; |
|||
margin-bottom: 8px; |
|||
background: #fff; |
|||
|
|||
&:hover { |
|||
background: #f5f7fa !important; |
|||
color: #0056D6 !important; |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
// 这将会选择所有子元素和伪元素 |
|||
color: #0056D6 !important; |
|||
} |
|||
} |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.info { |
|||
font-size: 14px; |
|||
margin-left: 40px; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.time { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
opacity: 0.65; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<div style="padding-left: 16px;margin-top: 24px;"> |
|||
<el-form ref="formRef" :model="formData"> |
|||
<el-table border ref="tableBox" :data="formData.tableData" :row-style="{ height: '50px' }" |
|||
:cell-style="{ padding: '0px' }"> |
|||
<el-table-column prop="province" label="标签" width="120" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="city" label="内容" min-width="70" align="left"> |
|||
<template slot-scope="scope"> |
|||
<el-form-item v-if="scope.row.type == 'radio'"> |
|||
<el-radio-group v-model="scope.row.value" v-for="(item, index) in scope.row.option" |
|||
:key="index" @change="handeleClickRadio(item.value)"> |
|||
<el-radio :label="item.value" :disabled="formType == 'detail'"><span |
|||
style="margin-right: 50px;">{{ item.label |
|||
}}</span></el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item :prop="'tableData.' + scope.$index + '.value'" |
|||
v-if="scope.row.type == 'checkbox'"> |
|||
<el-checkbox-group v-model="scope.row.value"> |
|||
<el-checkbox @change="handeleClickchckbox(item, $event, scope.$index)" |
|||
:disabled="formType == 'detail'" v-for="(item, index) in scope.row.option" |
|||
:key="index" :label="item.value">{{ item.label |
|||
}}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
formData: { |
|||
name: '', |
|||
age: '', |
|||
tableData: [ |
|||
{ |
|||
index: 0, |
|||
province: '政治面貌', |
|||
value: 0, |
|||
type: 'radio', |
|||
option: [ |
|||
{ label: '群众', value: 0 }, |
|||
{ label: '党员', value: 1 }, |
|||
{ label: '共青团员', value: 2 }, |
|||
] |
|||
}, |
|||
{ |
|||
index: 1, |
|||
province: '健康状态', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '残疾', |
|||
value: 'disabilityFlag' |
|||
}, |
|||
{ |
|||
label: '大病', |
|||
value: 'seriousIllnessFlag' |
|||
}, |
|||
{ |
|||
label: '慢病', |
|||
value: 'chronicDiseaseFlag' |
|||
}, |
|||
{ |
|||
label: '死亡', |
|||
value: 'deathFlag' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 2, |
|||
province: '关注人群', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '老年人', |
|||
value: 'oldPeopleFlag' |
|||
}, |
|||
{ |
|||
label: '低保', |
|||
value: 'subsistenceAllowanceFlag' |
|||
}, |
|||
{ |
|||
label: '退役军人', |
|||
value: 'veteranFlag' |
|||
}, |
|||
{ |
|||
label: '保障房人员', |
|||
value: 'ensureHouseFlag' |
|||
}, |
|||
{ |
|||
label: '育龄妇女', |
|||
value: 'fertileWomanFlag' |
|||
}, |
|||
{ |
|||
label: '特扶人员', |
|||
value: 'specialSupportFlag' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 3, |
|||
province: '特殊人群', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [] |
|||
}, |
|||
{ |
|||
index: 4, |
|||
province: '身份', |
|||
value: [], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '志愿者', |
|||
value: 'volunteerFlag' |
|||
}, |
|||
{ |
|||
label: '楼长', |
|||
value: 'buildingChiefFlag' |
|||
}, |
|||
{ |
|||
label: '单元长', |
|||
value: 'unitChiefFlag' |
|||
}, |
|||
{ |
|||
label: '公益岗', |
|||
value: 'publicWelfareFlag' |
|||
} |
|||
] |
|||
}, |
|||
] |
|||
}, |
|||
}; |
|||
}, |
|||
props: { |
|||
userInfo: { |
|||
type: Object, |
|||
default: () => { } |
|||
}, |
|||
formType: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
created() { |
|||
this.getDictData(); |
|||
}, |
|||
methods: { |
|||
async getDictData() { |
|||
try { |
|||
const { data } = await this.$http.post('sys/dict/data/dictlist', { dictType: 'special_resident_category' }); |
|||
this.formData.tableData[3].option = data.data |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
updatedForm() { |
|||
if (this.formType == 'add' || !this.userInfo.baseInfoDto.categoryInfo) return; |
|||
const updateValue = (flag, dataIndex) => { |
|||
const { tableData } = this.formData; |
|||
const valueArray = tableData[dataIndex].value; |
|||
if (this.userInfo.baseInfoDto.categoryInfo[flag] === 1) { |
|||
valueArray.push(flag); |
|||
} else { |
|||
this.formData.tableData[dataIndex].value = valueArray.filter(item => item !== flag); |
|||
} |
|||
}; |
|||
if (this.userInfo.baseInfoDto.categoryInfo.specialCrowdFlag == 1) { |
|||
this.formData.tableData[3].value.push(...this.userInfo.specialDto.specialCategoryCodes); |
|||
} |
|||
this.formData.tableData[0].value = this.userInfo.baseInfoDto.categoryInfo.partyFlag; |
|||
//添加回填需要在这里加上key与对应的index(在formData.tableData中对应的下标) |
|||
updateValue('disabilityFlag', 1); |
|||
updateValue('deathFlag', 1); |
|||
updateValue('seriousIllnessFlag', 1); |
|||
updateValue('chronicDiseaseFlag', 1); |
|||
updateValue('emptyNesterFlag', 2); |
|||
updateValue('liveAloneFlag', 2); |
|||
updateValue('oldPeopleFlag', 2); |
|||
updateValue('subsistenceAllowanceFlag', 2); |
|||
updateValue('veteranFlag', 2); |
|||
updateValue('ensureHouseFlag', 2); |
|||
updateValue('specialSupportFlag', 2); |
|||
updateValue('fertileWomanFlag', 2); |
|||
updateValue('bereavedPersonFlag', 2); |
|||
updateValue('volunteerFlag', 4); |
|||
updateValue('buildingChiefFlag', 4); |
|||
updateValue('unitChiefFlag', 4); |
|||
updateValue('publicWelfareFlag', 4); |
|||
}, |
|||
handeleClickRadio(val) { |
|||
if (val === 1) { |
|||
this.$emit('showDialog', { value: val }, val === 1) |
|||
this.formData.tableData[0].value= 1 |
|||
}else if(this.formType != 'add'){ |
|||
this.$confirm(`确认取消党员标签`, '确认信息', { |
|||
confirmButtonText: '确认取消', |
|||
cancelButtonText: '暂不取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$emit('showDialog', { value: val }, val === 1) |
|||
}).catch(() => { |
|||
this.formData.tableData[0].value= 1 |
|||
}); |
|||
} |
|||
}, |
|||
handeleClickchckbox(item, event, index) { |
|||
item.index = index |
|||
if (event) { |
|||
this.$emit('showDialog', item, event) |
|||
} else { |
|||
this.$confirm(`确认取消${item.label}标签`, '确认信息', { |
|||
confirmButtonText: '确认取消', |
|||
cancelButtonText: '暂不取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$emit('showDialog', item, event) |
|||
|
|||
}).catch(() => { |
|||
this.formData.tableData[index].value.push(item.value) |
|||
}); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: { |
|||
userInfo: { |
|||
handler(newVal, oldVal) { |
|||
this.formData.tableData.forEach((item, index) => { |
|||
if (index != 0) { |
|||
item.value = [] |
|||
} else { |
|||
item.value = '' |
|||
} |
|||
}) |
|||
this.updatedForm() |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
|
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
::v-deep .el-form-item { |
|||
margin-bottom: 0px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="table" style="padding:0 16px;"> |
|||
|
|||
<el-table class="m-table-item" :data="tableData" border style="width: 100%; margin-top:23px"> |
|||
<el-table-column label="序号" type="index" fixed="left" align="left" width="50"> |
|||
</el-table-column> |
|||
<el-table-column v-for="item in tableHeader" :key="item.columnName" :prop="item.columnName" :label="item.label" |
|||
align="left" :show-overflow-tooltip="true" :width="item.width || ''"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
tableHeader: [ |
|||
{ columnName: "typeName", label: "变更类型", width: 80 }, |
|||
{ columnName: "fieldName", label: "变更信息", width: 150 }, |
|||
{ columnName: "beforeChangeName", label: "变更前", width: 200 }, |
|||
{ columnName: "afterChangeName", label: "变更后", width: 200 }, |
|||
{ columnName: "operatorName", label: "操作人", width: 80 }, |
|||
{ columnName: "changeTime", label: "调整时间", width: 150 }, |
|||
{ columnName: "remark", label: "备注", width: '' }, |
|||
], |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -1,137 +0,0 @@ |
|||
<template> |
|||
<div class="cnt-right"> |
|||
<div class="list"> |
|||
<div class="item f-hflex" :key="index" v-for="(item, index) in list"> |
|||
<el-row type="flex" class="row"> |
|||
<el-col :span="12" align="left">{{item.classification}}</el-col> |
|||
<el-col :span="12" align="right">{{item.classificationNum || 0}}</el-col> |
|||
</el-row> |
|||
<div class="item-progress"> |
|||
<b :style="{ |
|||
width: (item.per == 'NaN'?0:item.per) + '%', |
|||
}"></b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
list: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/serviceNumber?resid=" + this.resiId) |
|||
.then(({ data: res }) => { |
|||
// res.data = [ |
|||
// { |
|||
// "classification": "服务找人", |
|||
// "classificationNum": '12' |
|||
// }, |
|||
// { |
|||
// "classification": "温暖找人", |
|||
// "classificationNum": '15' |
|||
// }, |
|||
// { |
|||
// "classification": "技能找人", |
|||
// "classificationNum": '20' |
|||
// }, |
|||
// { |
|||
// "classification": "岗位找人", |
|||
// "classificationNum": '40' |
|||
// } |
|||
// ] |
|||
let total = res.data.reduce((sum, item) => sum + Number(item.classificationNum), 0); |
|||
res.data = res.data.map(item => ({ |
|||
...item, |
|||
per: (Number(item.classificationNum) / total * 100).toFixed(2) // 保留两位小数 |
|||
})); |
|||
this.list = res.data |
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.cnt-right { |
|||
.list { |
|||
.item { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(44, 53, 66, 0.85); |
|||
line-height: 24px; |
|||
cursor: pointer; |
|||
.row{ |
|||
width: 100%; |
|||
margin: 0 0 10px; |
|||
padding: 0 10px 0 0; |
|||
} |
|||
.item-name { |
|||
margin-left: 5px; |
|||
width: 80px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-div { |
|||
width: 1px; |
|||
height: 12px; |
|||
background: #d8d8d8; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.item-count { |
|||
width: 90px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-per { |
|||
min-width: 70px; |
|||
} |
|||
|
|||
.item-progress { |
|||
margin-right: 15px; |
|||
width: 100%; |
|||
height: 24px; |
|||
background: #e6f0ff; |
|||
border-radius: 1px; |
|||
overflow: hidden; |
|||
|
|||
b { |
|||
display: block; |
|||
height: 24px; |
|||
background: #7ba6e6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue