656 lines
18 KiB
Vue
656 lines
18 KiB
Vue
<template>
|
|
<el-card class="box-card">
|
|
<template #header>
|
|
<span>甲方基本信息</span>
|
|
</template>
|
|
<el-form
|
|
:inline="true"
|
|
ref="formRef"
|
|
:model="compeny"
|
|
label-width="91.5px"
|
|
:rules="formRules"
|
|
class="select"
|
|
>
|
|
<el-form-item label="公司名称" prop="company_name" required>
|
|
<el-input readonly v-model="compeny.company_name" />
|
|
</el-form-item>
|
|
<el-form-item label="社会代码" prop="organization_code" required>
|
|
<el-input readonly v-model="compeny.organization_code" />
|
|
</el-form-item>
|
|
<el-form-item label="主要联系人" prop="company_name" required>
|
|
<el-input readonly v-model="compeny.master_name" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="master_phone" required>
|
|
<el-input readonly v-model="compeny.master_phone" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="公司类型" prop="compeny">
|
|
<el-select
|
|
readonly
|
|
v-model="compeny.company_type_name"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
readonly
|
|
v-model="compeny.province_name"
|
|
>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="市" prop="city">
|
|
<!-- <el-select readonly v-model="compeny.city_name">
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.city_name" />
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<!-- <el-select readonly v-model="compeny.area_name">
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.area_name" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="镇"
|
|
v-if="compeny.company_type != 30"
|
|
prop="company_type_name"
|
|
>
|
|
<!-- <el-select
|
|
readonly
|
|
v-model="compeny.street_name"
|
|
>
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.street_name" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="compeny.company_type != 30"
|
|
label="地址"
|
|
prop="address"
|
|
>
|
|
<el-input
|
|
readonly
|
|
v-model="compeny.address"
|
|
:style="{ width: '32rem' }"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card v-if="false">
|
|
<template #header>
|
|
<span>甲方资质信息</span>
|
|
</template>
|
|
<el-form
|
|
:inline="true"
|
|
ref="formRef"
|
|
:model="compeny"
|
|
label-width="90px"
|
|
:rules="formRules"
|
|
class="company_z"
|
|
>
|
|
<el-form-item label="公司资质" prop="contract_type" required>
|
|
<div class="company">
|
|
<img :src="compenyimg?.business_license" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="开户许可证"
|
|
prop="contract_no"
|
|
required
|
|
>
|
|
<div class="company">
|
|
<img :src="compenyimg?.business_licenseB" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="compenyimg?.other_qualifications?.length > 0"
|
|
class="other"
|
|
label="其他资质"
|
|
prop="contract_no"
|
|
required
|
|
>
|
|
<div
|
|
class="company"
|
|
v-for="(v, i) in compenyimg?.other_qualifications"
|
|
:key="i"
|
|
>
|
|
<img :src="v" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card v-if="show">
|
|
<template #header>
|
|
<span>乙方基本信息</span>
|
|
</template>
|
|
<el-form
|
|
:inline="true"
|
|
ref="formRef"
|
|
:model="compenyB"
|
|
label-width="91.5px"
|
|
:rules="formRules"
|
|
class="select"
|
|
>
|
|
<el-form-item label="商户名称" prop="company_name" required>
|
|
<el-input readonly v-model="compenyB.company_name" />
|
|
</el-form-item>
|
|
<el-form-item label="社会代码" prop="organization_code" required>
|
|
<el-input readonly v-model="compenyB.organization_code" />
|
|
</el-form-item>
|
|
<el-form-item label="主要联系人" prop="master_name" required>
|
|
<el-input readonly v-model="compenyB.master_name" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="master_phone" required>
|
|
<el-input readonly v-model="compenyB.master_phone" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="公司类型" prop="company_type">
|
|
<el-select
|
|
readonly
|
|
v-model="compenyB.company_type_name"
|
|
>
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
readonly
|
|
v-model="compenyB.province_name"
|
|
>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="市" prop="city">
|
|
<!-- <el-select readonly v-model="compenyB.city_name">
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.city_name" />
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<!-- <el-select readonly v-model="compenyB.area_name">
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.area_name" />
|
|
</el-form-item>
|
|
<el-form-item label="镇" prop="street">
|
|
<!-- <el-select
|
|
readonly
|
|
v-model="compenyB.street_name"
|
|
>
|
|
<el-option></el-option>
|
|
</el-select> -->
|
|
<el-input readonly v-model="compeny.street_name" />
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="street">
|
|
<el-input
|
|
readonly
|
|
v-model="compenyB.address"
|
|
:style="{ width: '31.5rem' }"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card v-if="show">
|
|
<template #header>
|
|
<span>乙方资质信息</span>
|
|
</template>
|
|
<el-form
|
|
:inline="true"
|
|
ref="formRef"
|
|
:model="formData"
|
|
label-width="90px"
|
|
:rules="formRules"
|
|
class="company_z"
|
|
>
|
|
<el-form-item class="other" label="资质信息" prop="contract_no" required>
|
|
<div class="company" v-for="(v, i) in compenyBimg" :key="i">
|
|
<el-image
|
|
:src="v"
|
|
:preview-src-list="compenyBimg"
|
|
:initial-index="i"
|
|
fit="cover"
|
|
/>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="公司资质" prop="contract_type" required>
|
|
<div class="company">
|
|
<img :src="compenyBimg?.business_license" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="开户许可证"
|
|
prop="contract_no"
|
|
required
|
|
>
|
|
<div class="company">
|
|
<img :src="compenyBimg?.business_licenseB" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="compenyBimg?.other_qualifications?.length > 0"
|
|
class="other"
|
|
label="其他资质"
|
|
prop="contract_no"
|
|
required
|
|
>
|
|
<div
|
|
class="company"
|
|
v-for="(v, i) in compenyBimg?.other_qualifications"
|
|
:key="i"
|
|
>
|
|
<img :src="v" />
|
|
</div>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</el-card>
|
|
<el-card v-if="flag">
|
|
<template #header>
|
|
<span>个人基本信息</span>
|
|
</template>
|
|
<div class="persenal">
|
|
<img :src="persen.avatar" />
|
|
<el-form
|
|
:inline="true"
|
|
ref="formRef"
|
|
:model="persen"
|
|
label-width="90px"
|
|
:rules="formRules"
|
|
class="person_select"
|
|
>
|
|
<el-form-item label="姓名">
|
|
<el-input
|
|
readonly
|
|
v-model="persen.nickname"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-input readonly v-model="persen.sex" placeholder="请输入性别" />
|
|
</el-form-item>
|
|
<el-form-item label="联系电话">
|
|
<el-input
|
|
readonly
|
|
v-model="persen.mobile"
|
|
placeholder="请输入联系电话"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input
|
|
v-model="persen.id_card"
|
|
placeholder="请输入身份证号"
|
|
readonly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
readonly
|
|
v-model="persen.province_name"
|
|
placeholder="请选择省"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="市" prop="city">
|
|
<el-select readonly v-model="persen.city_name" placeholder="请选择市">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<el-select readonly v-model="persen.area_name" placeholder="请选择区">
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="镇" prop="street">
|
|
<el-select
|
|
readonly
|
|
v-model="persen.street_name"
|
|
placeholder="请选择镇"
|
|
>
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
<el-card v-if="flag">
|
|
<template #header>
|
|
<span>个人资质信息</span>
|
|
</template>
|
|
<el-form class="idcard" :model="persenimg" :inline="true">
|
|
<el-form-item label="身份证">
|
|
<img :src="persenimg.id_card" />
|
|
<img :src="persenimg.id_card_b" />
|
|
</el-form-item>
|
|
<el-form-item label="银行卡">
|
|
<img :src="persenimg.bank_account" />
|
|
<img :src="persenimg.bank_account_b" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="persenimg.car_card || persenimg.car_card_b"
|
|
label="行驶证"
|
|
>
|
|
<img v-if="persenimg.car_card" :src="persenimg.car_card" />
|
|
<img v-if="persenimg.car_card_b" :src="persenimg.car_card_b" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card>
|
|
<template #header>
|
|
<span>电子合同</span>
|
|
</template>
|
|
<el-form
|
|
:inline="true"
|
|
class="frame"
|
|
ref="formRef"
|
|
:model="formData"
|
|
label-width="90px"
|
|
:rules="formRules"
|
|
>
|
|
<el-form-item label="甲方" prop="contract_type">
|
|
<el-input
|
|
v-model="compeny.company_name"
|
|
:readonly="true"
|
|
placeholder="暂无甲方方"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="乙方" prop="contract_no">
|
|
<el-input
|
|
v-model="compenyB.company_name"
|
|
:readonly="true"
|
|
placeholder="暂无乙方"
|
|
/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="合同类型" prop="contract_no">
|
|
<el-input
|
|
v-model="basicdata.contract_type_name"
|
|
:readonly="true"
|
|
placeholder="暂无合同"
|
|
/>
|
|
</el-form-item> -->
|
|
<el-form-item label="合同类型">
|
|
<el-input
|
|
value="商户入驻合同"
|
|
:readonly="true"
|
|
placeholder="商户入驻合同"
|
|
/>
|
|
</el-form-item>
|
|
<br />
|
|
<el-form-item v-if="formData.notes" label="备注">
|
|
<el-input v-model="formData.notes" :readonly="true" type="textarea" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="合同编号" prop="contract_no">
|
|
<el-input
|
|
v-model="formData.party_b_name"
|
|
:readonly="true"
|
|
placeholder="暂无签约方"
|
|
/>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</el-card>
|
|
<el-card>
|
|
<el-form label-width="100px">
|
|
<el-form-item
|
|
v-if="isshow || formData?.status == 0"
|
|
label="合同上传"
|
|
prop="field127"
|
|
>
|
|
<el-upload
|
|
accept=".pdf"
|
|
:headers="{ Token: userStore.token }"
|
|
class="upload-demo"
|
|
:action="base_url + '/upload/file'"
|
|
:on-success="handleAvatarSuccess_four"
|
|
:before-upload="handleBeforeUpload"
|
|
:limit="1"
|
|
v-if="formData?.status == 0"
|
|
:on-exceed="handleExceed"
|
|
ref="upload"
|
|
v-perms="['shop_contract/upload']"
|
|
>
|
|
<el-button type="primary">{{
|
|
formData.file ? "重新上传" : "上传"
|
|
}}</el-button>
|
|
</el-upload>
|
|
<a
|
|
v-perms="['shop_contract/file']"
|
|
v-if="formData.file"
|
|
style="margin-left: 10px; color: #4a5dff; align-self: flex-start"
|
|
:href="formData.file"
|
|
target="_blank"
|
|
>合同已上传,点击查看</a
|
|
>
|
|
</el-form-item>
|
|
<el-form-item v-if="isshow || formData.status == 0">
|
|
<el-button
|
|
v-perms="['shop_contract/upload']"
|
|
type="primary"
|
|
@click="submitContract"
|
|
>确定</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item v-else-if="formData.file && formData.status">
|
|
<a
|
|
v-perms="['shop_contract/file']"
|
|
v-if="formData.file"
|
|
style="margin-left: 10px; color: #4a5dff"
|
|
:href="
|
|
formData.signed_contract_url
|
|
? formData.signed_contract_url
|
|
: formData.file
|
|
"
|
|
target="_blank"
|
|
>查看合同</a
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
type FormInstance,
|
|
type UploadProps,
|
|
ElMessage,
|
|
type UploadUserFile,
|
|
} from "element-plus";
|
|
import { apiShopContractDetail, apiShopWindControl } from "@/api/shop_contract";
|
|
import { ref, reactive, defineExpose, computed, inject } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { dictDataLists } from "@/api/setting/dict";
|
|
// import { upContact } from "@/api/consumer";
|
|
import { genFileId } from "element-plus";
|
|
const { query } = useRoute();
|
|
import useUserStore from "@/stores/modules/user";
|
|
import useMultipleTabs from "@/hooks/useMultipleTabs";
|
|
const { removeTab } = useMultipleTabs();
|
|
const base_url: any = inject("base_url");
|
|
|
|
const formData = reactive({
|
|
id: "",
|
|
company_id: "",
|
|
contract_type: "",
|
|
contract_type_name: "",
|
|
contract_no: "",
|
|
file: "",
|
|
status: "",
|
|
check_status: "",
|
|
party_a: "",
|
|
party_a_name: "",
|
|
party_b: "",
|
|
party_b_name: "",
|
|
area_manager: "",
|
|
area_manager_name: "",
|
|
type_name: "",
|
|
url: "",
|
|
status_name: "",
|
|
signed_contract_url: "",
|
|
notes: "",
|
|
});
|
|
const fileList = ref<UploadUserFile[]>([]);
|
|
const basicdata = ref({});
|
|
const compeny = ref({});
|
|
const compenyimg = ref([]);
|
|
const compenyB = ref([]);
|
|
const compenyBimg = ref([]);
|
|
const persen = ref([]);
|
|
const persenimg = ref([]);
|
|
const show = ref(true);
|
|
const flag = ref(false);
|
|
const isshow = ref(true);
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
|
|
async function render() {
|
|
// 传值赋值
|
|
const res = await apiShopContractDetail({ id: query.id });
|
|
Object.keys(formData).forEach((key: any) => {
|
|
if (res[key] != null && res[key] != undefined) formData[key] = res[key];
|
|
});
|
|
compeny.value = res.party_a_info;
|
|
basicdata.value = res;
|
|
if (basicdata.value.status == 1 || res.check_status == 3 || res.status == 1) {
|
|
isshow.value = false;
|
|
}
|
|
try {
|
|
if (res.party_a_info.qualification.bank_account) {
|
|
res.party_a_info.qualification.bank_account = JSON.parse(
|
|
res.party_a_info.qualification.bank_account
|
|
);
|
|
compenyimg.value = res.party_a_info.qualification;
|
|
}
|
|
if (res.party_b_info.qualification.other_qualifications) {
|
|
res.party_b_info.qualification.other_qualifications = JSON.parse(
|
|
res.party_b_info.qualification.other_qualifications
|
|
);
|
|
compenyBimg.value = res.party_b_info.qualification;
|
|
}
|
|
} catch (error) {}
|
|
compenyimg.value = res.party_a_info.qualification;
|
|
compenyB.value = res.party_b_info;
|
|
compenyBimg.value = res.party_b_info.qualification;
|
|
flag.value = false;
|
|
// if (res.type == 2) {
|
|
// show.value = false;
|
|
// res.party_b_info.sex == 1
|
|
// ? (res.party_b_info.sex = "男")
|
|
// : (res.party_b_info.sex = "女");
|
|
// persen.value = res.party_b_info;
|
|
// persenimg.value = res.party_b_info.qualification;
|
|
// }
|
|
// if (res.type == 1) {
|
|
// compenyB.value = res.party_b_info;
|
|
// compenyBimg.value = res.party_b_info.qualification;
|
|
// flag.value = false;
|
|
// } else {
|
|
// compenyB.value.company_name = res.party_b_info.nickname;
|
|
// }
|
|
}
|
|
|
|
const handleBeforeUpload = (e: any) => {
|
|
if (e?.name?.substring(e.name.length - 4, e.name.length) != ".pdf") {
|
|
ElMessage.error("仅支持上传.pdf文件");
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const upload = ref(null);
|
|
const handleExceed = (files: any) => {
|
|
upload.value!.clearFiles();
|
|
const file = files[0] as UploadRawFile;
|
|
file.uid = genFileId();
|
|
upload.value!.handleStart(file);
|
|
upload.value!.submit();
|
|
};
|
|
|
|
const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
|
|
response,
|
|
uploadFile
|
|
) => {
|
|
if (response.code == 0) {
|
|
ElMessage.error(response.msg);
|
|
return;
|
|
}
|
|
formData.file = response.data.uri;
|
|
};
|
|
|
|
const router = useRouter();
|
|
const submitContract = () => {
|
|
if (!formData.file) return ElMessage.error("请先上传合同!");
|
|
apiShopWindControl({ file: formData.file, id: route.query.id });
|
|
removeTab();
|
|
router.back();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await render();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.frame {
|
|
.el-form-item {
|
|
width: 40%;
|
|
.el-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.select {
|
|
.el-form-item {
|
|
.el-select {
|
|
width: 12rem;
|
|
}
|
|
}
|
|
}
|
|
.person_select {
|
|
.el-form-item {
|
|
width: 30%;
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.company {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
img {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
margin-right: 10px;
|
|
}
|
|
.el-image {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.persenal {
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
}
|
|
}
|
|
.idcard {
|
|
img {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
.company_z {
|
|
.el-form-item {
|
|
width: 40%;
|
|
}
|
|
.other {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
.el-card {
|
|
margin-top: 10px;
|
|
pointer-event: none;
|
|
}
|
|
|
|
.el-upload-list .el-upload-list__item-thumbnail {
|
|
width: 500px; /* 设置文件缩略图的宽度 */
|
|
}
|
|
|
|
.el-upload-list .el-upload-list__item-name {
|
|
max-width: 450px; /* 设置文件名的最大宽度 */
|
|
}
|
|
</style>
|
|
|