<template>
|
<div>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '完善信息'"
|
append-to-body
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
v-dialogDrag>
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
|
label-width="140px">
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="年份">-->
|
<!-- <el-date-picker-->
|
<!-- style="width: 100%"-->
|
<!-- v-model="dataForm.year"-->
|
<!-- value-format="yyyy"-->
|
<!-- type="year"-->
|
<!-- placeholder="选择年">-->
|
<!-- </el-date-picker>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="文书号">-->
|
<!-- <el-input v-model="dataForm.number"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!--<el-col :span="12">
|
<el-form-item label="决定书号">
|
<el-input
|
v-model="dataForm.unitName"
|
placeholder="峰综当罚决〔 〕第 号"
|
></el-input>
|
</el-form-item>
|
</el-col>-->
|
|
<el-form-item label="当事人" prop="personName">
|
<el-input v-model="dataForm.personName" placeholder="请输入当事人"></el-input>
|
</el-form-item>
|
|
<el-form-item label="身份证号码" prop="idCard">
|
<el-input v-model="dataForm.idCard" placeholder="请输入身份证号码"></el-input>
|
</el-form-item>
|
|
<el-form-item label="住址" prop="personAddress">
|
<el-input v-model="dataForm.personAddress" placeholder="请输入住址"></el-input>
|
</el-form-item>
|
<!-- -->
|
<!-- <el-form-item label="执行期限" prop="days">-->
|
<!-- <el-input v-model="dataForm.days" placeholder="请输入执行期限"></el-input>-->
|
<!-- </el-form-item>-->
|
|
<!-- <el-row>-->
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="执法人员" prop="zfName1">-->
|
<!-- <el-input v-model="dataForm.zfName1" placeholder="请输入账号"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="执法证号" prop="zfNum1">-->
|
<!-- <el-input v-model="dataForm.zfNum1" placeholder="请输入户名"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="执法人员" prop="zfName2">-->
|
<!-- <el-input v-model="dataForm.zfName2" placeholder="请输入账号"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12">-->
|
<!-- <el-form-item label="执法证号" prop="zfNum2">-->
|
<!-- <el-input v-model="dataForm.zfNum2" placeholder="请输入户名"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()" :loading="loadingSubmit">保存</el-button>
|
<el-button type="primary" @click="viewVord(dataForm)">预览</el-button>
|
<el-button type="success" @click="downloadWord(dataForm)">下载</el-button>
|
</span>
|
</el-dialog>
|
<WordView v-if="WordViewShow" ref="WordView"></WordView>
|
</div>
|
</template>
|
|
<script>
|
import WordView from './word-view/index'
|
import {exportDoc} from '../../../libs/word'
|
|
export default {
|
components: {
|
WordView
|
},
|
data() {
|
return {
|
WordViewShow: false, //word文档是否显示
|
visible: false,
|
loadingSubmit:false,
|
dataForm: {
|
year:'',
|
number:'',
|
personName:'',
|
idCard: '',
|
chufaCheckList:[],
|
fakuanCheckList:[],
|
personAddress:'',
|
zfName1:'',
|
zfName2:'',
|
zfNum1:'',
|
zfNum2:'',
|
id:'',
|
days: '0'
|
|
},
|
dataRule: {
|
|
personName: [
|
{required: true, message: '当事人不能为空', trigger: 'blur'}
|
],
|
personAddress: [
|
{required: true, message: '当事人地址不能为空', trigger: 'blur'}
|
],
|
idCard: [
|
{required: true, message: '身份证号不能为空', trigger: 'blur'}
|
],
|
zfName1: [
|
{required: true, message: '执法人员1不能为空', trigger: 'blur'}
|
],
|
zfName2: [
|
{required: true, message: '执法人员2不能为空', trigger: 'blur'}
|
],
|
}
|
}
|
},
|
methods: {
|
init(id) {
|
this.dataForm.id = id || null;
|
this.visible = true;
|
this.$nextTick(() => {
|
this.$refs['dataForm'].resetFields()
|
if (this.dataForm.id) {
|
this.$byutil.getData(this,this.$systemconfig.basePath+'/ffzf/ticket/'+id,null,res=>{
|
this.dataForm = res.data
|
})
|
}
|
})
|
},
|
viewVord(data) { //word预览
|
if(this.dataForm.number === '' || this.dataForm.number === null){
|
this.$message.error("请先保存再预览")
|
}else {
|
this.WordViewShow = true
|
this.$nextTick(() => {
|
this.$refs.WordView.initWord(data,'/words/administrativeDecisionLetter.docx')
|
})
|
}
|
},
|
downloadWord(data) { //word下载
|
if(this.dataForm.number === '' || this.dataForm.number === null){
|
this.$message.error("请先保存再下载")
|
}else {
|
exportDoc(data,'/words/administrativeDecisionLetter.docx','当场行政处罚决定书')
|
}
|
},
|
// 表单提交
|
dataFormSubmit() {
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
this.loadingSubmit = true;
|
if (this.dataForm.id) {
|
this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/ticket/updateById', this.dataForm, res => {
|
if (res.code === 0) {
|
this.$message.success('修改成功')
|
this.visible = false
|
this.loadingSubmit = false;
|
this.$emit('refreshDataList')
|
} else {
|
this.loadingSubmit = false;
|
}
|
})
|
} else {
|
alert("未选择违章车辆")
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.el-checkbox.flexDate{
|
display: flex;
|
align-items: baseline;
|
.el-checkbox__label{
|
display: flex;
|
flex-wrap: wrap;
|
line-height: 2;
|
white-space: initial;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
::v-deep{
|
|
.el-dialog{
|
max-height: 90%;
|
overflow-y: auto;
|
margin-top: 6vh!important;
|
}
|
}
|
.flexDate{
|
display: flex;
|
span{
|
margin-left: 5px;
|
}
|
}
|
.dialog-footer{
|
display: flex;
|
justify-content: center;
|
.el-button{
|
margin: 0 5px;
|
}
|
}
|
</style>
|
