569 lines
15 KiB
Vue
569 lines
15 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
|
|
disabled
|
|
v-model="compeny.company_name"
|
|
placeholder="请输入公司名称"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="社会代码" prop="organization_code" required>
|
|
<el-input
|
|
disabled
|
|
v-model="compeny.organization_code"
|
|
placeholder="请输入社会代码"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="主要联系人" prop="company_name" required>
|
|
<el-input
|
|
disabled
|
|
v-model="compeny.master_name"
|
|
placeholder="请输入主要联系人"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="公司类型" prop="compeny">
|
|
<el-select
|
|
disabled
|
|
v-model="compeny.company_type_name"
|
|
placeholder="请输入公司类型"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
disabled
|
|
v-model="compeny.province_name"
|
|
placeholder="请选择省"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="市" prop="city">
|
|
<el-select disabled v-model="compeny.city_name" placeholder="请选择市">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<el-select disabled v-model="compeny.area_name" placeholder="请选择区">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="镇"
|
|
v-if="compeny.company_type != 30"
|
|
prop="company_type_name"
|
|
>
|
|
<el-select
|
|
disabled
|
|
v-model="compeny.street_name"
|
|
placeholder="请选择镇"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="compeny.company_type != 30"
|
|
label="地址"
|
|
prop="address"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="compeny.address"
|
|
placeholder="请输入公司地址"
|
|
:style="{ width: '32rem' }"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card>
|
|
<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 label="其他资质" prop="contract_no" required>
|
|
<div
|
|
class="company other"
|
|
v-for="(v, i) in compenyimg.bank_account"
|
|
: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
|
|
disabled
|
|
v-model="compenyB.company_name"
|
|
placeholder="请输入公司名称"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="社会代码" prop="organization_code" required>
|
|
<el-input
|
|
disabled
|
|
v-model="compenyB.organization_code"
|
|
placeholder="请输入社会代码"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="公司类型" prop="company_type">
|
|
<el-select
|
|
disabled
|
|
v-model="compenyB.company_type_name"
|
|
placeholder="请输入社会类型"
|
|
>
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="主要联系人" prop="master_name" required>
|
|
<el-input
|
|
disabled
|
|
v-model="compenyB.master_name"
|
|
placeholder="请输入主要联系人"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
disabled
|
|
v-model="compenyB.province_name"
|
|
placeholder="请选择省"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="市" prop="city">
|
|
<el-select disabled v-model="compenyB.city_name" placeholder="请选择市">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<el-select disabled v-model="compenyB.area_name" placeholder="请选择区">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="镇" prop="street">
|
|
<el-select
|
|
disabled
|
|
v-model="compenyB.street_name"
|
|
placeholder="请选择镇"
|
|
>
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="street">
|
|
<el-input
|
|
disabled
|
|
v-model="compenyB.address"
|
|
placeholder="请输入公司地址"
|
|
: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 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 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
|
|
disabled
|
|
v-model="persen.nickname"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-input disabled v-model="persen.sex" placeholder="请输入性别" />
|
|
</el-form-item>
|
|
<el-form-item label="联系电话">
|
|
<el-input
|
|
disabled
|
|
v-model="persen.mobile"
|
|
placeholder="请输入联系电话"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input
|
|
v-model="persen.id_card"
|
|
placeholder="请输入身份证号"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="省" prop="province">
|
|
<el-select
|
|
disabled
|
|
v-model="persen.province_name"
|
|
placeholder="请选择省"
|
|
>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="市" prop="city">
|
|
<el-select disabled v-model="persen.city_name" placeholder="请选择市">
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="区" prop="area">
|
|
<el-select disabled v-model="persen.area_name" placeholder="请选择区">
|
|
<el-option></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="镇" prop="street">
|
|
<el-select
|
|
disabled
|
|
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"
|
|
:disabled="true"
|
|
placeholder="暂无甲方方"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="乙方" prop="contract_no">
|
|
<el-input
|
|
v-model="compenyB.company_name"
|
|
:disabled="true"
|
|
placeholder="暂无乙方"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="合同类型" prop="contract_no">
|
|
<el-input
|
|
v-model="basicdata.contract_type_name"
|
|
:disabled="true"
|
|
placeholder="暂无合同"
|
|
/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="合同编号" prop="contract_no">
|
|
<el-input
|
|
v-model="formData.party_b_name"
|
|
:disabled="true"
|
|
placeholder="暂无签约方"
|
|
/>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</el-card>
|
|
<el-card v-if="isshow">
|
|
<el-form label>
|
|
<el-form-item label="合同上传" label-width="100px" prop="field127">
|
|
<el-upload
|
|
:headers="{ Token: userStore.token }"
|
|
v-model:file-list="fileList"
|
|
class="upload-demo"
|
|
action="https://worker-task.lihaink.cn/adminapi/upload/file"
|
|
:on-success="handleAvatarSuccess_four"
|
|
multiple
|
|
:limit="1"
|
|
>
|
|
<el-button type="primary">上传</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
style="margin-left: 100px"
|
|
type="primary"
|
|
@click="submitContract"
|
|
>确定</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
type FormInstance,
|
|
type UploadProps,
|
|
ElMessage,
|
|
type UploadUserFile,
|
|
} from "element-plus";
|
|
import { apiContractDetail } from "@/api/contract";
|
|
import { ref, reactive, defineExpose, computed } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { dictDataLists } from "@/api/setting/dict";
|
|
import { upContact } from "@/api/consumer";
|
|
const { query } = useRoute();
|
|
import useUserStore from "@/stores/modules/user";
|
|
|
|
const formData = reactive({
|
|
id: "",
|
|
company_id: "",
|
|
contract_type: "",
|
|
contract_type_name: "",
|
|
contract_no: "",
|
|
file: "",
|
|
status: "",
|
|
party_a: "",
|
|
party_a_name: "",
|
|
party_b: "",
|
|
party_b_name: "",
|
|
area_manager: "",
|
|
area_manager_name: "",
|
|
type_name: "",
|
|
url: "",
|
|
status_name: "",
|
|
});
|
|
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(true);
|
|
const isshow = ref(true);
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
|
|
async function render() {
|
|
// 传值赋值
|
|
const res = await apiContractDetail({ id: query.id });
|
|
compeny.value = res.party_a_info;
|
|
basicdata.value = res;
|
|
if (basicdata.value.status == 1) {
|
|
isshow.value = false;
|
|
}
|
|
try {
|
|
res.party_a_info.qualification.bank_account = JSON.parse(
|
|
res.party_a_info.qualification.bank_account
|
|
);
|
|
compenyimg.value = res.party_a_info.qualification;
|
|
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;
|
|
console.log(compenyimg.value);
|
|
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 handleAvatarSuccess_four: UploadProps["onSuccess"] = (
|
|
response,
|
|
uploadFile
|
|
) => {
|
|
if (response.code == 0) {
|
|
ElMessage.error(response.msg);
|
|
return;
|
|
}
|
|
formData.file = response.data.uri;
|
|
};
|
|
|
|
const submitContract = () => {
|
|
if (!formData.file) ElMessage.error("请先上传合同!");
|
|
upContact({ file: formData.file, id: route.query.id });
|
|
};
|
|
|
|
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;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.el-upload-list .el-upload-list__item-thumbnail {
|
|
width: 500px; /* 设置文件缩略图的宽度 */
|
|
}
|
|
|
|
.el-upload-list .el-upload-list__item-name {
|
|
max-width: 450px; /* 设置文件名的最大宽度 */
|
|
}
|
|
</style>
|