zhzf/client/src/views/xzzfgl/caseMan/jaspbForm.vue

<template>
  <div class="main">
    <el-input v-show="false" v-model="documentData.documentNo" />
    <el-row>
      <el-col :span="12">
        <el-form-item label="文书号" prop="documentCode">
          <el-input v-model="documentData.documentCode" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="案件名称" prop="ajmc">
          <el-input v-model="documentData.documenContent.ajmc" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="当事人" prop="dsr">
          <el-radio v-model="documentData.documenContent.dsr" label="1">公民</el-radio>
          <el-radio v-model="documentData.documenContent.dsr" label="2">法人或其他组织</el-radio>
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="被处罚人（个人）" prop="xm">
          <el-input v-model="documentData.documenContent.xm" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="年龄" prop="nl">
          <el-input v-model="documentData.documenContent.nl" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="性别" prop="xb">
          <el-input v-model="documentData.documenContent.xb" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="12">
        <el-form-item label="所在单位" prop="szdw">
          <el-input v-model="documentData.documenContent.szdw" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="12">
        <el-form-item label="单位地址" prop="dwdz">
          <el-input v-model="documentData.documenContent.dwdz" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="家庭住址" prop="jtzz">
          <el-input v-model="documentData.documenContent.jtzz" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="documentData.documenContent.phone" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='1'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="邮编" prop="yb">
          <el-input v-model="documentData.documenContent.yb" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='2'||documentData.documenContent.dsr===''" :span="12">
        <el-form-item label="被处罚人（单位）" prop="qymc">
          <el-input v-model="documentData.documenContent.qymc" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='2'||documentData.documenContent.dsr===''" :span="12">
        <el-form-item label="地址" prop="dz">
          <el-input v-model="documentData.documenContent.dz" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='2'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="法定代表人" prop="fddbr">
          <el-input v-model="documentData.documenContent.fddbr" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='2'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="职务" prop="zw">
          <el-input v-model="documentData.documenContent.zw" />
        </el-form-item>
      </el-col>
      <el-col v-if="documentData.documenContent.dsr==='2'||documentData.documenContent.dsr===''" :span="8">
        <el-form-item label="邮编" prop="yzbm">
          <el-input v-model="documentData.documenContent.yzbm" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="处理结果" prop="cljg">
          <el-input type="textarea" :rows="5" v-model="documentData.documenContent.cljg" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="执行情况" prop="zxqk">
          <el-input type="textarea" :rows="3" v-model="documentData.documenContent.zxqk" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审核意见" prop="shyj">
          <el-input v-model="documentData.documenContent.shyj" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审核人电子签名" prop="shrqm">
          <el-button type="primary" size="small" @click="openSignatureShr">审核人电子签名</el-button>
          <div v-if="documentData.documenContent.shrqm" style="border: 1px solid #ccc; margin-left: 10px; display: inline-block; position: relative;">
            <img :src="documentData.documenContent.shrqm" alt="签名" style="height: 100px;"/>
            <el-button type="danger" size="small"
                       style="position: absolute; top: 5px; right: 5px; transform: translate(50%, -50%); border-radius: 50%; width: 20px; height: 20px; padding: 0;"
                       @click="saveSignatureShr('')">×
            </el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审批意见" prop="spyj">
          <el-input v-model="documentData.documenContent.spyj" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审批人电子签名" prop="sprqm">
          <el-button type="primary" size="small" @click="openSignatureSpr">审批人电子签名</el-button>
          <div v-if="documentData.documenContent.sprqm" style="border: 1px solid #ccc; margin-left: 10px; display: inline-block; position: relative;">
            <img :src="documentData.documenContent.sprqm" alt="签名" style="height: 100px;"/>
            <el-button type="danger" size="small"
                       style="position: absolute; top: 5px; right: 5px; transform: translate(50%, -50%); border-radius: 50%; width: 20px; height: 20px; padding: 0;"
                       @click="saveSignatureSpr('')">×
            </el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
  <SignatureComponent v-model="showSignatureShr" @save="saveSignatureShr"/>
  <SignatureComponent v-model="showSignatureSpr" @save="saveSignatureSpr"/>
  <div  style="margin-bottom: 10px;text-align: center">
    <el-button type="success" :disabled="saving" @click="updatedocumentData">保存</el-button>
  </div>
</template>
<script setup>
import {reactive, toRefs, getCurrentInstance, watch, computed, ref, defineProps,} from 'vue'
import {ElButton, ElMessage} from "element-plus";
import documentApi from '@/api/lawenforcement/Document.js'
import SignatureComponent from "@pages/common/SignatureComponent.vue";
const props = defineProps({
  caseData: {
    type: Object,
    default: () => ({}),
  },
  documentData: {
    type: Object,
    default: () => ({}),
  },
})

const documentData =  ref({
  ...props.documentData,
  caseId:props.documentData.caseId ||props.caseData.caseId,
  documenContent:{
    ...props.documentData.documenContent,
    ajmc:props.documentData.documenContent.ajmc || props.caseData.caseName,
    cljg:props.documentData.documenContent.cljg || props.caseData.disposition,
    dsr: props.caseData.enterprise!==null ? '2' : '',
    qymc:props.documentData.documenContent.qymc || props.caseData.enterprise.unitName,
    zw:props.documentData.documenContent.zw || props.caseData.enterprise.legalDuty,
    yzbm:props.documentData.documenContent.yzbm || props.caseData.enterprise.postalCode,
    fddbr:props.documentData.documenContent.fddbr || props.caseData.enterprise.legalRepresentative,
    dz:props.documentData.documenContent.dz || props.caseData.enterprise.detailedAddress
  }
});
const saving = ref(false)
const emit = defineEmits(['update-document'])


const updatedocumentData = () => {
  documentData.value.status='afoot'
  saving.value=true
  if(documentData.value.documentId!==undefined){
    // 修改
    documentApi.modify(documentData.value.documentId,documentData.value).then(res=>{
      if (res.success) {
        ElMessage.success('保存成功')
        saving.value=false
      }
    })
  }else{
    // 新增
    documentApi.add(documentData.value).then(res=>{
      if (res.success) {
        documentData.value.documentId = res.data.documentId
        ElMessage.success('保存成功')
        saving.value=false
       }
     })
  }
  emit('update-document', documentData) // 触发事件
}

const showSignatureShr = ref(false)
const showSignatureSpr = ref(false)

const openSignatureShr = () => {
  showSignatureShr.value = true
}
const openSignatureSpr = () => {
  showSignatureSpr.value = true
}
const saveSignatureShr = (data) => {
  documentData.value.documenContent.shrqm = data
}

const saveSignatureSpr = (data) => {
  documentData.value.documenContent.sprqm = data
}

</script>
<style lang="scss">
.main{
  margin-top: 10px;
}
</style>