335 lines
8.8 KiB
Vue
335 lines
8.8 KiB
Vue
<template>
|
|
<div class="edit-popup">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
label-width="90px"
|
|
:rules="formRules"
|
|
:disabled="true"
|
|
>
|
|
<el-col :span="24" class="el-card pt-6">
|
|
<div class="tit">公司信息</div>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="公司名称" prop="company_name">
|
|
<el-input
|
|
v-model="formData.company_b_name"
|
|
placeholder="请输入公司名称"
|
|
clearable
|
|
:disabled="isDisabled"
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="社会代码" prop="organization_code">
|
|
<el-input
|
|
:disabled="isDisabled"
|
|
v-model="formData.company_b_code"
|
|
placeholder="请输入社会代码"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="24" class="el-card pt-6">
|
|
<div class="tit">主要联系人</div>
|
|
<el-row>
|
|
<div style="display: flex; justify-content: left">
|
|
<!-- <div class="headimg">
|
|
<el-upload
|
|
:disabled="isDisabled"
|
|
v-model="formData.avatar"
|
|
class="avatar-uploader-head"
|
|
:data="{ cid: 1 }"
|
|
action="https://worker-task.lihaink.cn/api/upload/image"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccessAvatar"
|
|
>
|
|
<img
|
|
v-if="formData.avatar"
|
|
:src="formData.avatar"
|
|
class="avatar"
|
|
/>
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</div> -->
|
|
<div class="right">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="姓名" prop="master_name">
|
|
<el-input
|
|
:disabled="isDisabled"
|
|
v-model="formData.company_b_user"
|
|
placeholder="请输入姓名"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="手机" prop="master_phone">
|
|
<el-input
|
|
:disabled="isDisabled"
|
|
v-model="formData.company_b_phone"
|
|
placeholder="请输入手机"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="邮箱">
|
|
<el-input
|
|
:disabled="isDisabled"
|
|
v-model="formData.company_b_email"
|
|
placeholder="请输入邮箱"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="10">
|
|
<el-form-item label="片区经理" prop="area_manager_name">
|
|
<el-input
|
|
:disabled="isDisabled"
|
|
v-model="formData.area_manager_name"
|
|
placeholder="选择片区经理"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
@click="isAreaManager = true"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
</el-col>
|
|
|
|
<!-- <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div> -->
|
|
|
|
<el-col :span="24" class="el-card pt-6">
|
|
<div class="tit">租赁信息</div>
|
|
<el-row v-for="(item, index) in formData.cars_info">
|
|
<el-col :span="4">
|
|
<el-form-item label-width="120px" label="车牌号"
|
|
><el-input
|
|
v-model="item.license"
|
|
placeholder="请输入车牌号"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<el-form-item label-width="120px" label="使用公司"
|
|
><el-input
|
|
v-model="formData.company_b_name"
|
|
placeholder="请输入使用公司"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label-width="120px" label="签约时间">
|
|
<el-input
|
|
v-model="formData.update_time"
|
|
placeholder="请输入签约时间"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input
|
|
></el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-form>
|
|
|
|
<!-- <el-button @click="create">完成</el-button> -->
|
|
<el-button
|
|
v-if="formData.status == 1"
|
|
type="primary"
|
|
:disabled="isDisabled"
|
|
size="medium"
|
|
@click="create"
|
|
>发送合同</el-button
|
|
><el-button
|
|
v-if="formData.status == 2"
|
|
type="primary"
|
|
:disabled="num"
|
|
size="medium"
|
|
@click="sendAgain"
|
|
>重新发送{{ num ? num + "s" : "" }}</el-button
|
|
>
|
|
|
|
<el-button type="primary" @click="checkContract" v-if="formData.file"
|
|
>查看合同</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref } from "vue";
|
|
import { contractDetail, sendContract, sendMsg } from "@/api/contract";
|
|
import feedback from "@/utils/feedback";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const formData = reactive({
|
|
id: 8,
|
|
contract_no: "",
|
|
company_a_name: "",
|
|
company_a_code: "",
|
|
company_a_user: "",
|
|
company_a_phone: "",
|
|
company_a_email: "",
|
|
company_b_id: 165,
|
|
company_b_name: "",
|
|
company_b_user: "",
|
|
company_b_phone: "",
|
|
company_b_code: "",
|
|
company_b_email: "",
|
|
num: 1,
|
|
cars_info: [
|
|
{
|
|
id: 20,
|
|
license: "",
|
|
},
|
|
],
|
|
status: 0,
|
|
file: "",
|
|
contract_url: "",
|
|
signing_timer: 0,
|
|
url: null,
|
|
create_time: "",
|
|
update_time: "",
|
|
});
|
|
const num = ref(0);
|
|
// route.query.flag
|
|
|
|
contractDetail({ id: route.query.id }).then((res) => {
|
|
for (let key in formData) {
|
|
formData[key] = res[key];
|
|
}
|
|
console.log(formData);
|
|
});
|
|
const checkContract = () => {
|
|
window.open(formData.contract_url, "_blank");
|
|
};
|
|
const timeFn = () => {
|
|
const timers = setInterval(() => {
|
|
num.value--;
|
|
if (num.value <= 0) {
|
|
clearInterval(timeFn);
|
|
}
|
|
}, 1000);
|
|
};
|
|
const create = () => {
|
|
sendContract({
|
|
id: route.query.id,
|
|
}).then((res) => {
|
|
formData.status = 2;
|
|
feedback.msgSuccess("发送成功");
|
|
num.value = 10;
|
|
timeFn();
|
|
});
|
|
};
|
|
const sendAgain = () => {
|
|
sendMsg({ id: route.query.id }).then((res) => {
|
|
feedback.msgSuccess("发送成功");
|
|
num.value = 10;
|
|
timeFn();
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tit {
|
|
font-size: 1.2rem;
|
|
translate: 1vw -1vw;
|
|
}
|
|
|
|
.avatar-uploader .el-upload {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
background-color: #fff;
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.headimg {
|
|
margin-left: 18px;
|
|
margin-bottom: 18px;
|
|
width: 120px;
|
|
height: 140px;
|
|
overflow: hidden;
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-uploader-head .el-upload {
|
|
width: 120px;
|
|
height: 140px;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.otherimg {
|
|
img {
|
|
width: 10vw;
|
|
height: 6.3vw;
|
|
border-radius: 5px;
|
|
margin-left: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.el-card {
|
|
margin-bottom: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tit {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.others {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|