yqyc-system/snowy-admin-web/src/views/yqyc/zero/enterprise-qualification/detail.vue

<template>
  <a-card :bordered="false">
    <a-page-header
      :title="formData.id ? '编辑企业资质备案' : '新增企业资质备案'"
      @back="onClose"
    >
      <template #extra>
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        <a-popconfirm title="请确认是否保存？" @confirm="onTemp" v-if="!isView">
          <a-button style="margin-right: 8px" :loading="submitLoading">保存</a-button>
        </a-popconfirm>
        <a-popconfirm title="请确认是否申报？" @confirm="onSubmit" v-if="!isView">
          <a-button type="primary" :loading="submitLoading">申报</a-button>
        </a-popconfirm>
      </template>
    </a-page-header>
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="inline">
      <a-row :gutter="[0, 16]">
        <a-col :span="24">
          <a-form-item label="资质类型：" name="zzType">
            <a-radio-group v-model:value="formData.zzType" :disabled="isView" placeholder="请选择资质类型"
                           :options="zzTypeOptions"/>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="__cus-title_1">基本信息<span style="color: #d9001b;margin-left: auto">请务必仔细核对企业基本信息</span></div>
      <a-row :gutter="[0, 16]">
        <a-col :span="8">
          <a-form-item label="统一社会信用代码：" name="companyCode">
            <a-input v-model:value="formData.companyCode" :disabled="true" placeholder="请输入统一社会信用代码"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="企业注册名称(全)：" name="companyName">
            <a-input v-model:value="formData.companyName" :disabled="true" placeholder="请输入企业注册名称"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="法定代表人：" name="companyLegal">
            <a-input v-model:value="formData.companyLegal" :disabled="true" placeholder="请输入法定代表人"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="法定代表人联系电话：" name="companyLegalPhone">
            <a-input v-model:value="formData.companyLegalPhone" :disabled="true"
                     placeholder="请输入法定代表人联系电话" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系人：" name="companyLinkMan">
            <a-input v-model:value="formData.companyLinkMan" :disabled="true" placeholder="请输入联系人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系人电话：" name="companyLinkPhone">
            <a-input v-model:value="formData.companyLinkPhone" :disabled="true" placeholder="请输入联系人电话" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="企业类型：" name="companyType">
            <a-select v-model:value="formData.companyType" :disabled="true" placeholder="请选择企业类型"
                      :options="companyTypeOptions" show-search allow-clear option-filter-prop="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="注册资本：" name="companyRegisteredCapital">
            <a-input v-model:value="formData.companyRegisteredCapital" :disabled="true" placeholder="请输入注册资本"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="成立日期：" name="companyRegisterDate">
            <a-date-picker v-model:value="formData.companyRegisterDate" :disabled="true"
                           value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择成立日期" style="width: 100%"
                           allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="企业地址：" name="companyAddress">
            <a-input v-model:value="formData.companyAddress" :disabled="true" placeholder="请输入企业地址"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="营业期限：" name="companyDeadline">
            <a-input v-model:value="formData.companyDeadline" :disabled="true" placeholder="请输入营业期限"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="登记机关：" name="companyRegistration">
            <a-input v-model:value="formData.companyRegistration" :disabled="true" placeholder="请输入登记机关"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申报企业编号：" name="companyApplyCode">
            <a-input v-model:value="formData.companyApplyCode" :disabled="true" placeholder="请输入申报企业编号"
                     allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="监管场所：" name="companySupervisionPlaceType">
            <a-select v-model:value="formData.companySupervisionPlaceType" :disabled="true"
                      placeholder="请选择监管场所" :options="companySupervisionPlaceTypeOptions" show-search allow-clear
                      option-filter-prop="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="主管海关：" name="companyMainHgType">
            <a-select v-model:value="formData.companyMainHgType" :disabled="true" placeholder="请选择主管海关"
                      :options="companyMainHgTypeOptions" show-search allow-clear option-filter-prop="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="经营范围：" name="companyJyFw">
            <a-textarea v-model:value="formData.companyJyFw" :disabled="true" placeholder="请输入经营范围"
                        :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="__cus-title_1">申报信息</div>
      <a-row :gutter="[0, 16]">
        <a-col :span="8">
          <a-form-item label="申报类型：" name="baType">
            <a-select v-model:value="formData.baType" :disabled="true" placeholder="请选择备案类型"
                      :options="baTypeOptions" show-search allow-clear option-filter-prop="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申报时间：" name="applyTime">
            <a-date-picker v-model:value="formData.applyTime" :disabled="true" value-format="YYYY-MM-DD HH:mm:ss"
                           show-time placeholder="请选择申报时间" style="width: 100%" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申报人：" name="applyMan">
            <a-input v-model:value="formData.applyMan" :disabled="true" placeholder="请输入申报人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="享惠类型：" name="applyXhType">
            <a-select v-model:value="formData.applyXhType" :disabled="isView" placeholder="请选择享惠类型"
                      :options="applyXhTypeOptions" show-search allow-clear option-filter-prop="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="16">
          <a-form-item label="上传附件：" name="applyUrl">
            <xn-upload v-model:value="formData.applyUrl" :disabled="isView"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="鼓励类产品目录：" name="applyCatalogue">
            <a-textarea v-model:value="formData.applyCatalogue" :disabled="isView" placeholder="请输入鼓励类产品目录"
                        :rows="4"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注内容：" name="applyRemark">
            <a-textarea v-model:value="formData.applyRemark" :disabled="isView" placeholder="请输入备注内容"
                        :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup name="qyRecordDetail">
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import {required} from '@/utils/formRules'
import qyRecordApi from '@/api/yqyc/qyRecordApi'
const { proxy } = getCurrentInstance()

// 抽屉状态
const emit = defineEmits({successful: null})
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const isView = ref(false)
const zzTypeOptions = ref([])
const baTypeOptions = ref([])
const companyTypeOptions = ref([])
const companySupervisionPlaceTypeOptions = ref([])
const companyMainHgTypeOptions = ref([])
const applyTypeOptions = ref([])
const applyXhTypeOptions = ref([])
const statusOptions = ref([])
const userInfo = tool.data.get('USER_INFO')

// 打开抽屉
const onOpen = (record, view = false) => {
  isView.value = view
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
    if (!isView.value) {
      formData.value.applyTime = proxy.$util.YMDHms(new Date())
    }
  } else {
    formData.value.applyTime = proxy.$util.YMDHms(new Date())
    formData.value.applyMan = userInfo.name
    formData.value.companyCode = userInfo.companyNumber
    formData.value.companyName = userInfo.companyName
    formData.value.companyLegal = userInfo.legalName
    formData.value.companyLegalPhone = userInfo.legalPhone
    formData.value.companyLinkMan = userInfo.contactName
    formData.value.companyLinkPhone = userInfo.contactPhone
    formData.value.companyType = userInfo.companyType
    formData.value.companyRegisteredCapital = userInfo.registeredCapital
    formData.value.companyRegisterDate = userInfo.establishmentData
    formData.value.companyAddress = userInfo.companyAddress
    formData.value.companyDeadline = userInfo.businessTerm
    formData.value.companyRegistration = userInfo.registrationAuthority
    formData.value.companyApplyCode = userInfo.sbqyNumber
    formData.value.companySupervisionPlaceType = userInfo.prisonManagement
    formData.value.companyMainHgType = userInfo.responsibleCustoms
    formData.value.companyJyFw = userInfo.businessScope
    formData.value.baType = 'basq'
  }
  zzTypeOptions.value = tool.dictList('applyzztype')
  baTypeOptions.value = tool.dictList('qybalx')
  companyTypeOptions.value = tool.dictList('qylx')
  companySupervisionPlaceTypeOptions.value = tool.dictList('jtcs')
  companyMainHgTypeOptions.value = tool.dictList('zhhg')
  applyTypeOptions.value = tool.dictList('shenbaoleixing')
  applyXhTypeOptions.value = tool.dictList('xhlx')
  statusOptions.value = tool.dictList('djzt')
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  isView.value = true
  emit('onClose')
}
// 默认要校验的
const formRules = {
  zzType: [required('请选择资质类型')],
  baType: [required('请选择备案类型')],
  companyCode: [required('请输入统一社会信用代码')],
  companyName: [required('请输入企业注册名称')],
  companyLegal: [required('请输入法定代表人')],
  companyLegalPhone: [required('请输入法定代表人联系电话')],
  companyLinkMan: [required('请输入联系人')],
  companyType: [required('请选择企业类型')],
  companyRegisteredCapital: [required('请输入注册资本')],
  companyRegisterDate: [required('请输入成立日期')],
  companyAddress: [required('请输入企业地址')],
  companyDeadline: [required('请输入营业期限')],
  companyRegistration: [required('请选择登记机关')],
  companySupervisionPlaceType: [required('请选择监管场所')],
  companyMainHgType: [required('请选择主管海关')],
  companyJyFw: [required('请输入经营范围')],
  applyType: [required('请选择申报类型')],
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value
  .validate()
  .then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    formDataParam.status = '2'
    qyRecordApi
    .qyRecordSubmitForm(formDataParam, formDataParam.id)
    .then(() => {
      onClose()
      emit('successful')
    })
    .finally(() => {
      submitLoading.value = false
    })
  })
  .catch(() => {
  })
}
// 验证并提交数据
const onTemp = () => {
  formRef.value
  .validate()
  .then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    formDataParam.status = '1'
    qyRecordApi
    .qyRecordSubmitForm(formDataParam, formDataParam.id)
    .then(() => {
      onClose()
      emit('successful')
    })
    .finally(() => {
      submitLoading.value = false
    })
  })
  .catch(() => {
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>

<style lang="less" scoped>
</style>