You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
680 lines
20 KiB
680 lines
20 KiB
<template> |
|
<basic-container> |
|
<div class="title_box"> |
|
<div class="left"> |
|
<!-- <div class="img_box"><img src="~@/assets/image/time.png" alt="" /></div> --> |
|
<div class="left_txt">{{ title }}</div> |
|
</div> |
|
<div class="right" @click="handleCancel">X</div> |
|
</div> |
|
<el-table |
|
:data="formData" |
|
:key="index" |
|
border |
|
style=" |
|
margin-bottom: 30px; |
|
width: 100%; |
|
margin: 0 auto; |
|
border-radius: 4px; |
|
" |
|
header-cell-style="background-color:#fafafa;font-size:12px;color:black" |
|
> |
|
<el-table-column width="57px"> |
|
<template slot="header"> |
|
<el-button |
|
circle |
|
size="small" |
|
type="primary" |
|
icon="el-icon-plus" |
|
@click="addDomain()" |
|
/> |
|
</template> |
|
<template slot-scope="scope"> |
|
<el-button |
|
circle |
|
size="small" |
|
type="danger" |
|
icon="el-icon-delete" |
|
@click="removeSpecimen(scope.$index, scope.row, scope)" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
align="center" |
|
prop="username" |
|
label="来访人姓名" |
|
width="200" |
|
> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.username" |
|
@change="changeNumber" |
|
controls-position="right" |
|
style="width: 90%; margin-left: 5%" |
|
size="medium" |
|
placeholder="来访人姓名" |
|
> |
|
</el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" prop="gender" label="性别"> |
|
<template slot-scope="scope"> |
|
<el-select |
|
v-model="scope.row.gender" |
|
placeholder="性别" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
> |
|
<el-option label="男" value="1"></el-option> |
|
<el-option label="女" value="2"></el-option> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" prop="age" label="年龄"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.age" |
|
clearable |
|
placeholder="年龄" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> </el-table-column |
|
><el-table-column align="center" prop="cardno" label="身份证号码"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.cardno" |
|
clearable |
|
onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" |
|
maxlength="18" |
|
placeholder="身份证号码" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column align="center" prop="address" label="住址"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.address" |
|
clearable |
|
placeholder="住址" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> </el-table-column |
|
><el-table-column align="center" prop="addressNow" label="现住址"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.addressNow" |
|
clearable |
|
placeholder="现住址" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> </el-table-column |
|
><el-table-column align="center" prop="phone" label="联系人电话"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.phone" |
|
clearable |
|
onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" |
|
maxlength="11" |
|
placeholder="联系人电话" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<el-form |
|
class="form_box" |
|
:inline="true" |
|
ref="registerForm" |
|
:model="form" |
|
:rules="rules" |
|
label-position="top" |
|
> |
|
<el-row :model="form" :rules="rules" :gutter="20"> |
|
<el-col style="width: 31%; margin-left: 1%"> |
|
<div class="grid-content bg-purple"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 来访人数 |
|
<figcaption> |
|
<el-input |
|
v-model="form.personNum" |
|
size="medium" |
|
placeholder="请输入来访人数" |
|
clearable |
|
style="width: 90%" |
|
:readonly="true" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</div> |
|
</el-col> |
|
<el-col :span="6" style="width: 31%; margin-left: -2.1%"> |
|
<el-form-item style="width: 100%" prop="streetId"> |
|
<figure> |
|
<i></i>所属镇街 |
|
<figcaption> |
|
<el-select |
|
v-model="form.streetId" |
|
:disabled="isappend" |
|
:filter-method="dataFilter" |
|
clearable |
|
filterable |
|
ref="searchSelect" |
|
placeholder="请选择所属镇街" |
|
size="medium" |
|
style="width: 90%" |
|
> |
|
<el-option |
|
v-for="item in streetData" |
|
:key="item.id" |
|
:label="item.dictValue" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6" style="width: 31%; margin-left: -1.58%"> |
|
<el-form-item prop="disputeId" style="width: 100%"> |
|
<figure> |
|
<i></i>诉求类型 |
|
<figcaption> |
|
<el-select |
|
v-model="form.disputeId" |
|
:disabled="isappend" |
|
:filter-method="dataFilter" |
|
clearable |
|
filterable |
|
allow-create |
|
ref="searchSelect" |
|
placeholder="请选择诉求类型" |
|
size="medium" |
|
style="width: 90%" |
|
> |
|
<el-option |
|
v-for="item in typeData" |
|
:key="item.id" |
|
:label="item.dictValue" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row :model="form" :rules="rules" :gutter="20"> |
|
<el-col style="width: 31%; margin-left: 1%"> |
|
<div class="grid-content bg-purple"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 何单位处理过 |
|
<figcaption> |
|
<el-select |
|
v-model="form.disposeDept" |
|
:disabled="isappend" |
|
:filter-method="dataFilter" |
|
clearable |
|
filterable |
|
allow-create |
|
ref="searchSelect" |
|
placeholder="请选择单位" |
|
size="medium" |
|
style="width: 90%" |
|
> |
|
<el-option |
|
v-for="item in winData" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</div> |
|
</el-col> |
|
<el-col :span="6" style="width: 31%; margin-left: -2.1%"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 基层有无协议书 |
|
<figcaption> |
|
<el-input |
|
v-model="form.protocol" |
|
size="medium" |
|
placeholder="请输入基层有无协议书" |
|
clearable |
|
style="width: 90%" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6" style="width: 31%; margin-left: -1.58%"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 基层有无处理意见 |
|
<figcaption> |
|
<el-input |
|
v-model="form.opinion" |
|
size="medium" |
|
placeholder="请输入基层有无处理意见" |
|
clearable |
|
style="width: 90%" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row :model="form" :rules="rules" :gutter="20"> |
|
<el-col style="width: 31%; margin-left: 1%"> |
|
<div class="grid-content bg-purple"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 部门有无复查意见 |
|
<figcaption> |
|
<el-input |
|
v-model="form.reviewOpinion" |
|
size="medium" |
|
placeholder="请输入部门有无复查意见" |
|
clearable |
|
style="width: 90%" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</div> |
|
</el-col> |
|
<el-col :span="6" style="width: 31%; margin-left: -2.1%"> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 有何法律文书 |
|
<figcaption> |
|
<el-input |
|
v-model="form.legalPaper" |
|
size="medium" |
|
placeholder="请输入法律文书" |
|
clearable |
|
style="width: 90%" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
<el-col |
|
:span="6" |
|
style="width: 31%; margin-left: -2.1%" |
|
v-show="pageType == 'edit'" |
|
> |
|
<el-form-item style="width: 100%"> |
|
<figure> |
|
 诉求初登时间 |
|
<figcaption> |
|
<el-input |
|
v-model="form.firstRegTime" |
|
size="medium" |
|
placeholder="请输入诉求初登时间" |
|
clearable |
|
style="width: 90%" |
|
:readonly="true" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row :model="form" :rules="rules" :gutter="20"> |
|
<el-col style="width: 100%; margin-left: 1%"> |
|
<div class="grid-content bg-purple"> |
|
<el-form-item style="width: 100%" prop="problemDesc"> |
|
<figure> |
|
<i></i>反应主要问题 |
|
<figcaption> |
|
<el-input |
|
type="textarea" |
|
:autosize="{ minRows: 2 }" |
|
v-model="form.problemDesc" |
|
size="medium" |
|
placeholder="请输入部门有无复查意见" |
|
clearable |
|
style="width: 90%" |
|
/> |
|
</figcaption> |
|
</figure> |
|
</el-form-item> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-form-item class="btn_box"> |
|
<el-button class="can_btn" @click="handleCancel">取消</el-button> |
|
<el-button class="sub_btn" type="primary" @click="submitForm" |
|
>提交</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from "vuex"; |
|
import {addRegister,getStreetList,againResolve} from "@/api/register/register" |
|
import {getBaseList,getTypeList} from "@/api/base" |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
personNum: "", |
|
}, |
|
pageType: "", |
|
title: "", |
|
rules: { |
|
streetId: [ |
|
{ required: true, message: "请选择所属镇街", trigger: "change" }, |
|
], |
|
disputeId: [ |
|
{ required: true, message: "请选择诉求类型", trigger: "change" }, |
|
], |
|
problemDesc:[ |
|
{ required: true, message: "请填写反应主要问题", trigger: "change" }, |
|
] |
|
}, |
|
formData: [ |
|
{ |
|
username: "", |
|
gender: "", |
|
age: "", |
|
cardno: "", |
|
address: "", |
|
addressNow: "", |
|
phone: "", |
|
}, |
|
], |
|
streetData:[], |
|
winData:[], |
|
typeData:[] |
|
}; |
|
}, |
|
watch: {}, |
|
created() { |
|
this.getStreet(); |
|
this.getTypeData(); |
|
this.getWinData() |
|
if (this.$route.query.type == "add") { |
|
this.pageType = "add"; |
|
this.title = "诉求登记"; |
|
} else if (this.$route.query.type == "edit") { |
|
this.title = "再次调解登记"; |
|
this.pageType = "edit"; |
|
this.getAgainDetail() |
|
// this.formData = [ |
|
// { |
|
// username: "张三", |
|
// gender: "1", |
|
// age: 20, |
|
// cardno: "3708821548488178", |
|
// address: "洋河镇", |
|
// addressNow: "洋河镇", |
|
// phone: "13564854126", |
|
// }, |
|
// { |
|
// username: "李四", |
|
// gender: "1", |
|
// age: 20, |
|
// cardno: "3708821548488178", |
|
// address: "洋河镇", |
|
// addressNow: "洋河镇", |
|
// phone: "13564854126", |
|
// }, |
|
// { |
|
// username: "王二狗", |
|
// gender: "1", |
|
// age: 20, |
|
// cardno: "3708821548488178", |
|
// address: "洋河镇", |
|
// addressNow: "洋河镇", |
|
// phone: "13564854126", |
|
// }, |
|
// { |
|
// username: "王五", |
|
// gender: "1", |
|
// age: 20, |
|
// cardno: "3708821548488178", |
|
// address: "洋河镇", |
|
// addressNow: "洋河镇", |
|
// phone: "13564854126", |
|
// }, |
|
// ]; |
|
// // this.form.number = this.formData.length |
|
// this.form = { |
|
// number: this.formData.length, |
|
// id: "122555646684684", |
|
// streetId: "胶州市", |
|
// disputeId: "土地纠纷", |
|
// disposeDept: "市住建局", |
|
// hasProtocol: "无协议书", |
|
// hasOpinion: "无处理意见", |
|
// hasReviewOpinion: "无复查意见", |
|
// legalPaper: "无法律文书", |
|
// regTime: "2012-05-15 12:30", |
|
// problemDesc: "矛盾描述...........", |
|
// }; |
|
} |
|
}, |
|
computed: { |
|
...mapGetters(["tagWel", "tagList", "tag", "website"]), |
|
}, |
|
methods: { |
|
getStreet(){ |
|
getStreetList().then(res =>{ |
|
this.streetData = res.data.data |
|
}) |
|
}, |
|
getAgainDetail(){ |
|
againResolve({appealId:this.$route.query.appealId}).then(res =>{ |
|
console.log('再次调解',res); |
|
this.formData = res.data.data.visitors; |
|
this.form = res.data.data; |
|
this.form.personNum = this.formData.length |
|
}) |
|
}, |
|
getWinData(){ |
|
getBaseList().then(res =>{ |
|
this.winData = res.data.data |
|
}) |
|
}, |
|
getTypeData(){ |
|
getTypeList().then(res =>{ |
|
this.typeData = res.data.data |
|
}) |
|
}, |
|
findTag(value) { |
|
let tag, key; |
|
this.tagList.map((item, index) => { |
|
if (item.value === value) { |
|
tag = item; |
|
key = index; |
|
} |
|
}); |
|
return { tag: tag, key: key }; |
|
}, |
|
changeNumber() { |
|
let tmp = this.formData.filter((item) => item.name !== ""); |
|
this.form.personNum = tmp.length; |
|
}, |
|
handleCancel() { |
|
let { tag, key } = this.findTag(this.$route.fullPath); |
|
this.$store.commit("DEL_TAG", tag); |
|
if (tag.value === this.tag.value) { |
|
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个 |
|
this.$router.push({ |
|
path: "/register/index", |
|
}); |
|
} |
|
}, |
|
addDomain() { |
|
let obj = { |
|
username: "", |
|
gender: "", |
|
age: "", |
|
cardno: "", |
|
address: "", |
|
addressNow: "", |
|
phone: "", |
|
}; |
|
let isName = this.formData.find((item) => item.username == ""); |
|
let isSex = this.formData.find((item) => item.gender == ""); |
|
let isAge = this.formData.find((item) => item.age == ""); |
|
let isNumber = this.formData.find((item) => item.cardno == ""); |
|
let isAddress = this.formData.find((item) => item.address == ""); |
|
let isPhone = this.formData.find((item) => item.phone == ""); |
|
if ( |
|
this.formData.length == 0 || |
|
(!isName && !isSex && !isAge && !isNumber && !isAddress && !isPhone) |
|
) { |
|
this.formData.push(obj); |
|
} else { |
|
this.$message.error("请填写登记人员相关信息后新增人员"); |
|
} |
|
}, |
|
removeSpecimen(index, row) { |
|
this.formData.splice(index, 1); |
|
let tmp = this.formData.filter((item) => item.name !== ""); |
|
this.form.personNum = tmp.length; |
|
}, |
|
submitForm() { |
|
this.$refs["registerForm"].validate((valid) => { |
|
if(valid){ |
|
let params = {} |
|
if(this.formData.length !== 0){ |
|
let tmp = this.formData.filter(item => item.username !== '') |
|
if(this.pageType == 'add'){ |
|
params={ |
|
visitors:tmp, |
|
...this.form |
|
} |
|
// console.log(params) |
|
addRegister(params).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('提交成功！') |
|
let { tag, key } = this.findTag(this.$route.fullPath); |
|
this.$store.commit("DEL_TAG", tag); |
|
if (tag.value === this.tag.value) { |
|
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个 |
|
this.$router.push({ |
|
path: "/register/index", |
|
}); |
|
} |
|
} |
|
}) |
|
}else if(this.pageType == 'edit'){ |
|
params={ |
|
...this.form, |
|
visitors:tmp, |
|
} |
|
addRegister(params).then(res =>{ |
|
if(res.data.code == 200){ |
|
this.$message.success('提交成功！') |
|
let { tag, key } = this.findTag(this.$route.fullPath); |
|
this.$store.commit("DEL_TAG", tag); |
|
if (tag.value === this.tag.value) { |
|
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个 |
|
this.$router.push({ |
|
path: "/register/index", |
|
}); |
|
} |
|
} |
|
}) |
|
} |
|
}else{ |
|
this.$message.error('登记人员列表不可为空') |
|
} |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.title_box { |
|
width: 96%; |
|
height: 80px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin: 0 auto; |
|
|
|
.left { |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
|
|
.img_box { |
|
width: 30px; |
|
height: 30px; |
|
margin: 0px 18px 0px 0px; |
|
} |
|
|
|
.left_txt { |
|
font-size: 20px; |
|
font-weight: 800; |
|
color: #333333; |
|
} |
|
} |
|
.right { |
|
cursor: pointer; |
|
} |
|
} |
|
.el-table{ |
|
width: 96% !important; |
|
} |
|
/deep/ .btn_box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 100% !important; |
|
margin-top: 60px; |
|
|
|
.can_btn { |
|
width: 118px; |
|
height: 48px; |
|
// background: #E2E2E2; |
|
// box-shadow: inset 3px 4px 5px 1px rgba(0,0,0,0.07); |
|
border-radius: 2px 2px 2px 2px; |
|
border: 1px solid #dcdfe6; |
|
// border: none; |
|
color: #999999; |
|
} |
|
|
|
.sub_btn { |
|
width: 120px; |
|
height: 50px; |
|
// background: url("~@/assets/image/btn.png") no-repeat; |
|
// background-size: 100% 100%; |
|
// background: blue; |
|
color: #fff; |
|
border: none; |
|
margin-left: 30px; |
|
} |
|
} |
|
.form_box { |
|
width: 96%; |
|
margin: 0 auto; |
|
margin-top: 30px; |
|
|
|
i::before { |
|
content: "*"; |
|
color: #f56c6c; |
|
margin-right: 6px; |
|
} |
|
} |
|
</style>
|
|
|