organization-manage/src/views/organization/components/businessLicense.vue

<!-- 营业执照信息 -->
<template>
    <el-form ref="formRef" :model="form" label-width="120" label-position="left">
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="法人姓名">
                    <el-input v-model="form.license.principalperson" placeholder="请输入法人姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="法人身份证号">
                    <el-input v-model="form.idCard.certno" placeholder="请输入法人身份证号" @input="e => form.idCard.certno = removeSpaces(e)" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="身份证发放日期">
                    <el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certstarttime"
                        type="date" placeholder="请选择身份证发放日期" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="身份证截止日期">
                    <el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certendtime"
                        type="date" placeholder="请选择身份证截止日期" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="执照名称">
                    <el-input v-model="form.license.bussauthname" placeholder="请输入执照名称" @input="e => form.license.bussauthname = removeSpaces(e)"  />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="工商注册号">
                    <el-input v-model="form.license.bussauthnum" placeholder="请输入工商注册号" @input="e => form.license.bussauthnum = removeSpaces(e)" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="开始时间">
                    <el-date-picker style="width: 100%;" value-format="YYYY年MM月DD日" v-model="form.license.bussauthstarttime"
                        type="date" placeholder="营业执照开始时间" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="结束时间">
                    <el-date-picker style="width: 100%;" value-format="YYYY年MM月DD日" v-model="form.license.bussauthendtime"
                        type="date" placeholder="营业执照失效时间" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="注册地址">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="form.license.bussauthaddress"
                        placeholder="请输入执照注册地址" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="营业执照照片">
                    <upload-card ref="uploadRef1" @selectFile="file => form.license.licenseimage = file"
                        @removeFile="form.license.licenseimage = ''" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="法人身份证正面">
                    <upload-card ref="uploadRef2" @selectFile="file => form.idCard.imgpositive = file"
                        @removeFile="form.idCard.imgpositive = ''" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item label="法人身份证反面">
                    <upload-card ref="uploadRef3" @selectFile="file => form.idCard.imgnegative = file"
                        @removeFile="form.idCard.imgnegative = ''" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submitHandel">立即提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { removeSpaces } from '@/utils/index.js'
import { merchLicense, updatemerchLicense } from '@/api/shop.js'

import uploadCard from './uploadCard.vue'
import { ElMessage } from 'element-plus'

import { useRoute } from 'vue-router'
const route = useRoute()

const span = ref(8)
const gutter = ref(50)

const uploadRef1 = ref(null)
const uploadRef2 = ref(null)
const uploadRef3 = ref(null)

const loading = ref(false)

const formRef = ref(null)
const form = reactive({
    license: {},
    idCard: {}
})

// 立即提交
async function submitHandel() {
    try {
        loading.value = true
        if (form.license.licenseimage.uid) {
            form.license.licenseimage = await uploadOSS(form.license.licenseimage.raw)
        }
        if (form.idCard.imgpositive.uid) {
            form.idCard.imgpositive = await uploadOSS(form.idCard.imgpositive.raw)
        }
        if (form.idCard.imgnegative.uid) {
            form.idCard.imgnegative = await uploadOSS(form.idCard.imgnegative.raw)
        }
        await updatemerchLicense(form)
        ElMessage.success('修改成功')
        loading.value = false
    } catch (error) {
        loading.value = false
        console.log('更改营业执照信息===', error)
    }
}

// 营业执照信息
async function merchLicenseAjax() {
    try {
        const res = await merchLicense(route.query.id)
        form.license = res.license
        form.idCard = res.idCard
        uploadRef1.value.pselectFile({ url: form.license.licenseimage })
        uploadRef2.value.pselectFile({ url: form.idCard.imgpositive })
        uploadRef3.value.pselectFile({ url: form.idCard.imgnegative })
    } catch (error) {
        console.error('营业执照信息===', error)
    }
}

onMounted(() => {
    merchLicenseAjax()
})

</script>