<template>
|
<div class="inquirycause-box">
|
<el-dialog title="询问笔录" :visible.sync="visible">
|
<div class="inquirycause-form-box">
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
|
<el-form-item label="案件：" prop="name">
|
<div class="anjian-box">
|
<el-select v-model="dataForm.name" placeholder="请选择" @change="causeChange">
|
<el-option
|
v-for="item in processAjApprovalList"
|
:key="item.id"
|
:label="item.processAjCoverName"
|
:value="item">
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item label="案由：" prop="causeAction">
|
<el-input v-model="dataForm.causeAction"></el-input>
|
</el-form-item>
|
<el-form-item label="开始时间：" prop="startTime">
|
<!--<el-input disabled v-model="inputVal"></el-input>-->
|
<!--<el-date-picker
|
v-model="dataForm.startTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>-->
|
<el-date-picker
|
v-model="dataForm.startTime"
|
type="datetime"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间：" prop="endTime">
|
<el-date-picker
|
v-model="dataForm.endTime"
|
type="datetime"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="地点：" prop="site">
|
<el-input v-model="dataForm.site"></el-input>
|
</el-form-item>
|
<div class="inquirycause-line">
|
<el-form-item label="被询问人：" label-width="100px" prop="interrogeeName">
|
<el-input v-model="dataForm.interrogeeName"></el-input>
|
</el-form-item>
|
<el-form-item label="性别：" prop='interrogeeSex'>
|
<!--<el-input v-model="dataForm.interrogeeSex"></el-input>-->
|
<el-select v-model="dataForm.interrogeeSex" placeholder="请选择">
|
<el-option label="男" :value="0">男</el-option>
|
<el-option label="女" :value="1">女</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="年龄：" prop='interrogeeAge'>
|
<el-input v-model.number="dataForm.interrogeeAge"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号码：" label-width="100px" prop='interrogeeCardNo'>
|
<el-input v-model="dataForm.interrogeeCardNo"></el-input>
|
</el-form-item>
|
</div>
|
<div class="inquirycause-line">
|
<el-form-item label="工作单位：" label-width="100px" prop='interrogeeUnit'>
|
<el-input v-model="dataForm.interrogeeUnit"></el-input>
|
</el-form-item>
|
<el-form-item label="职务：" prop='interrogeeDuty'>
|
<el-input v-model="dataForm.interrogeeDuty"></el-input>
|
</el-form-item>
|
<el-form-item label="电话：" prop='interrogeePhone'>
|
<el-input v-model="dataForm.interrogeePhone"></el-input>
|
</el-form-item>
|
</div>
|
<div class="inquirycause-line">
|
<el-form-item label="住址：" label-width="100px" prop='interrogeeAddress'>
|
<el-input v-model="dataForm.interrogeeAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="邮编：" prop='interrogeePostcode'>
|
<el-input v-model="dataForm.interrogeePostcode"></el-input>
|
</el-form-item>
|
</div>
|
<!--<div class="inquirycause-line">
|
<el-form-item label="询问人：" label-width="100px" prop="recorderName">
|
<el-input v-model="dataForm.recorderName"></el-input>
|
</el-form-item>
|
<el-form-item label="工作单位：" label-width="100px" prop="recorderUnit">
|
<el-input v-model="dataForm.recorderUnit"></el-input>
|
</el-form-item>
|
</div>-->
|
<div class="inquirycause-line">
|
<el-form-item label="记录人：" label-width="100px" prop="recorderName">
|
<el-input v-model="dataForm.recorderName"></el-input>
|
</el-form-item>
|
<el-form-item label="工作单位：" label-width="100px" prop="recorderUnit">
|
<el-input v-model="dataForm.recorderUnit"></el-input>
|
</el-form-item>
|
</div>
|
|
<!--<el-form-item label="问：" label-width="100px">
|
<div class="ask-box">
|
<h1>我们是</h1>
|
<el-input v-model="inputVal"></el-input>
|
<h1>（馆陶县综合行政执法局）的行政执法人员，这是执法证件（出示执法证件）请你过目确认，如无异议请在此签字：</h1>
|
<el-input v-model="inputVal"></el-input>
|
</div>
|
</el-form-item>-->
|
<!--<div class="ask-box">
|
<h1>现在就</h1>
|
<el-input v-model="inputVal"></el-input>
|
<h1>一案，依法对你进行询问，</h1>
|
<h1>请你如实回答问题，如说假话或作伪证是要负法律责任的，对与本案无关的问题，你有拒绝回答的权利；你有陈述和申辩的权利；你认为办案人员与本案有利害关系，可能影响公正处理案件的，有提出回避的权利，清楚了吗？ </h1>
|
</div>-->
|
<div>
|
<el-form-item label="问：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="wenda.wen" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="答：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="wenda.da" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
<div id="mount-point"></div>
|
<div class="addLawBtn">
|
<img @click="addLawClick" src="../../../assets/lawImg/addIcon.png" alt="">
|
<el-button @click="dataFormSubmit()" class="submitBtn" size="medium" type="primary">确 定</el-button>
|
</div>
|
<!--<el-form-item label="问：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="inputVal" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="答：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="inputVal" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>-->
|
<!--<el-form-item label-width="0">
|
<div class="footer-box">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</div>
|
</el-form-item>-->
|
</el-form>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getObj, addObj, putObj} from '@/api/inquirycause'
|
import {findAll} from '@/api/process/processajapproval'
|
import Vue from 'vue'
|
|
|
export default {
|
name: "inquirycause-form.vue",
|
data() {
|
return {
|
inputVal:'',
|
visible: false,
|
processAjApprovalList: [],//案件列表
|
|
dataForm: {
|
id: 0,
|
name: '',
|
causeAction: '',
|
startTime: '',
|
endTime: '',
|
site: '',
|
interrogeeName: '',
|
interrogeeSex: '',
|
interrogeeAge: null,
|
interrogeeCardNo: '',
|
interrogeeUnit: '',
|
interrogeeDuty: '',
|
interrogeePhone: '',
|
interrogeeAddress: '',
|
interrogeePostcode: '',
|
inquisitorial: '',
|
recorderName: '',
|
recorderUnit: '',
|
processAjApprovalId: '',
|
// causeCourseList: [],
|
},
|
wenda: {
|
wen: '我们是 ** （馆陶县综合行政执法局）的行政执法人员，这是执法证件（出示执法证件）请你过目确认，如无异议请在此签字： ** 。\n' +
|
'现在就 ** 一案，依法对你进行询问，请你如实回答问题，如说假话或作伪证是要负法律责任的，对与本案无关的问题，你有拒绝回答的权利；你有陈述和申辩的权利；你认为办案人员与本案有利害关系，可能影响公正处理案件的，有提出回避的权利，清楚了吗？',
|
da: '',
|
},
|
wendaDomArr:[], //动态追加的dom
|
lastWendaDomArr:[], //最终的问答Arr
|
dataRule: {
|
// name: [
|
// {required: true, message: '案件名称不能为空', trigger: 'blur'}
|
// ],
|
// causeAction: [
|
// {required: true, message: '案由不能为空', trigger: 'blur'}
|
// ],
|
// startTime: [
|
// {required: true, message: '开始时间不能为空', trigger: 'blur'}
|
// ],
|
// endTime: [
|
// {required: true, message: '结束时间不能为空', trigger: 'blur'}
|
// ],
|
// site: [
|
// {required: true, message: '地点不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeName: [
|
// {required: true, message: '被询问人姓名不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeSex: [
|
// {required: true, message: '被询问人性别（0男 1女）不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeAge: [
|
// {required: true, message: 'integer不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeCardNo: [
|
// {required: true, message: '被询问人身份证号码不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeUnit: [
|
// {required: true, message: '被询问人工作单位不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeDuty: [
|
// {required: true, message: '被询问人职务不能为空', trigger: 'blur'}
|
// ],
|
// interrogeePhone: [
|
// {required: true, message: '被询问人电话不能为空', trigger: 'blur'}
|
// ],
|
// interrogeeAddress: [
|
// {required: true, message: '被询问人住址不能为空', trigger: 'blur'}
|
// ],
|
// interrogeePostcode: [
|
// {required: true, message: '被询问人邮编不能为空', trigger: 'blur'}
|
// ],
|
// inquisitorial: [
|
// {required: true, message: '询问人姓名工作单位：字符串类型json数组不能为空', trigger: 'blur'}
|
// ],
|
// recorderName: [
|
// {required: true, message: '记录人姓名不能为空', trigger: 'blur'}
|
// ],
|
// recorderUnit: [
|
// {required: true, message: '记录人工作单位不能为空', trigger: 'blur'}
|
// ],
|
// delFlag: [
|
// {required: true, message: '删除类别:0未删除 1已删除不能为空', trigger: 'blur'}
|
// ],
|
// processAjApprovalId: [
|
// {required: true, message: '立案审批表id不能为空', trigger: 'blur'}
|
// ]
|
},
|
option1: {
|
labelWidth: 110,
|
column: [
|
{
|
label: '子表单',
|
prop: 'wenda',
|
type: 'dynamic',
|
span: 24,
|
children: {
|
align: 'center',
|
type: 'form',
|
headerAlign: 'center',
|
rowAdd: (done) => {
|
this.$message.success('新增回调');
|
done({
|
input: '默认值'
|
});
|
},
|
rowDel: (row, done) => {
|
this.$message.success('删除回调' + JSON.stringify(row));
|
done();
|
},
|
column: [{
|
label: '提问',
|
prop: "wen",
|
span: 12,
|
row: true
|
}, {
|
width: 200,
|
label: '回答',
|
prop: "da",
|
type: 'textarea'
|
}]
|
}
|
},
|
|
]
|
},
|
pickerOptions: {
|
shortcuts: [{
|
text: '今天',
|
onClick(picker) {
|
picker.$emit('pick', new Date());
|
}
|
}, {
|
text: '昨天',
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
picker.$emit('pick', date);
|
}
|
}, {
|
text: '一周前',
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', date);
|
}
|
}]
|
},
|
|
object: {
|
inquisitorial: [{
|
xunWenpersonName: 1,
|
xunWenpersonUnit: 1,
|
}, {
|
xunWenpersonName: 2,
|
xunWenpersonUnit: 2,
|
}]
|
},
|
option2: {
|
labelWidth: 110,
|
column: [
|
{
|
label: '子表单',
|
prop: 'inquisitorial',
|
type: 'dynamic',
|
span: 24,
|
children: {
|
align: 'center',
|
type: 'form',
|
headerAlign: 'center',
|
rowAdd: (done) => {
|
this.$message.success('新增回调');
|
done({
|
input: '默认值'
|
});
|
},
|
rowDel: (row, done) => {
|
this.$message.success('删除回调' + JSON.stringify(row));
|
done();
|
},
|
column: [{
|
label: '姓名',
|
prop: "xunWenpersonName",
|
span: 12,
|
row: true
|
}, {
|
label: '工作单位',
|
prop: "xunWenpersonUnit",
|
span: 12,
|
row: true
|
}]
|
}
|
},
|
|
]
|
}
|
|
}
|
},
|
methods: {
|
addLawClick() { //增加问答
|
let periodDiv = Vue.extend({
|
template:`
|
<el-form :model="wendaObj">
|
<div>
|
<el-form-item label="问：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="wendaObj.wen" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="答：" label-width="100px">
|
<div class="ask-box">
|
<el-input v-model="wendaObj.da" type="textarea" :autosize="{ minRows: 2}"></el-input>
|
</div>
|
</el-form-item>
|
</div>
|
</el-form>
|
`,
|
data() {
|
return {
|
wendaObj: {
|
wen:'',
|
da:''
|
}
|
}
|
},
|
})
|
let component = new periodDiv().$mount(); // 每次添加需要重新new一个periodDiv
|
let $dom = $(component.$el); // 获取动态元素的jquery对象
|
$("#mount-point").append($dom); // 添加元素至相应位置
|
this.wendaDomArr.push(component)
|
},
|
init(id) {
|
this.dataForm.id = id || 0
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].resetFields()
|
if (this.dataForm.id) {
|
getObj(this.dataForm.id).then(response => {
|
this.dataForm = response.data.data
|
})
|
}
|
})
|
//获取所有案件
|
this.findAllProcessAj();
|
},
|
|
//查询所有案件
|
findAllProcessAj() {
|
findAll().then(res => {
|
this.processAjApprovalList = res.data.data
|
});
|
},
|
|
|
//选择案件改变
|
causeChange(item) {
|
this.dataForm.processAjApprovalId = item.id
|
this.dataForm.name = item.processAjCoverName
|
this.dataForm.causeAction = item.caseReason
|
/* this.dataForm.subjectType = item.subjectType*/
|
/*this.dataForm.interrogeeName = item.subjectName*/
|
},
|
|
// 表单提交
|
dataFormSubmit() {
|
/*zhuanhuan*/
|
this.dataForm.inquisitorial = JSON.stringify(this.object.inquisitorial);
|
this.lastWendaDomArr = []
|
this.lastWendaDomArr.push(this.wenda)
|
this.wendaDomArr.forEach(item => {
|
this.lastWendaDomArr.push(item.$data.wendaObj)
|
})
|
this.dataForm.endTime = this.moment(this.dataForm.endTime).format('YYYY-MM-DD hh:mm:ss')
|
this.dataForm.startTime = this.moment(this.dataForm.startTime).format('YYYY-MM-DD hh:mm:ss')
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
if (this.dataForm.id) {
|
putObj(Object.assign(this.dataForm,{causeCourseList:this.lastWendaDomArr})).then(data => {
|
this.$message.success('修改成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
});
|
} else {
|
addObj(Object.assign(this.dataForm,{causeCourseList:this.lastWendaDomArr})).then(data => {
|
this.$message.success('添加成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
})
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
|
|
<style>
|
.inquirycause-box .el-dialog__header{
|
text-align: center;
|
font-weight: 700;
|
}
|
|
.inquirycause-form-box .el-input__inner{
|
border:none;
|
border-bottom:1px solid #E4E7ED;
|
background-color: transparent!important;
|
border-radius:0px;
|
}
|
.anjian-box .el-select{
|
width: 60%;
|
}
|
.inquirycause-form-box .el-form-item__label{
|
font-weight: 700;
|
}
|
.inquirycause-form-box .el-textarea__inner{
|
border:none;
|
border-bottom:1px solid #DCDFE6;
|
}
|
.ask-box .el-input{
|
width: 150px;
|
}
|
.el-scrollbar .el-select-dropdown__item{
|
padding:0 20px!important;
|
}
|
|
</style>
|
|
<style scoped>
|
.inquirycause-form-box{
|
padding:0 20px;
|
}
|
.inquirycause-line{
|
display: flex;
|
}
|
.ask-box{
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.ask-box h1:first-child{
|
text-indent: 2em;
|
}
|
.footer-box{
|
display: flex;
|
justify-content: center;
|
}
|
.addLawBtn{
|
display: flex;
|
justify-content: center;
|
margin-top: 20px;
|
cursor: pointer;
|
position: relative;
|
}
|
.addLawBtn img{
|
width: 40px;
|
height: 40px;
|
}
|
</style>
|
