更新
This commit is contained in:
jiangyouyi
parent
f1d480f117
commit
1a0cc6d8da
@ -1,118 +1,438 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog @confirm="handleSubmit" title="合同详情" v-model="show">
|
<el-card class="box-card">
|
||||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
<template #header>
|
||||||
<el-form-item label="合同类型" prop="contract_type">
|
<span>公司基本信息</span>
|
||||||
<el-input
|
</template>
|
||||||
v-model="formData.contract_type_name"
|
<el-form
|
||||||
:disabled="true"
|
:inline="true"
|
||||||
clearable
|
ref="formRef"
|
||||||
placeholder="请输入合同类型"
|
:model="compeny"
|
||||||
/>
|
label-width="90px"
|
||||||
</el-form-item>
|
:rules="formRules"
|
||||||
<el-form-item label="合同编号" prop="contract_no">
|
class="select"
|
||||||
<el-input
|
>
|
||||||
v-model="formData.contract_no"
|
<el-form-item label="公司名称" prop="company_name" required>
|
||||||
:disabled="true"
|
<el-input
|
||||||
clearable
|
v-model="compeny.company_name"
|
||||||
placeholder="暂无合同编号"
|
placeholder="请输入公司名称"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="甲方" prop="party_a">
|
<el-form-item label="社会代码" prop="organization_code" required>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="formData.party_a_name"
|
v-model="compeny.organization_code"
|
||||||
:disabled="true"
|
placeholder="请输入社会代码"
|
||||||
clearable
|
/>
|
||||||
placeholder="暂无甲方"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="公司类型" prop="compeny" >
|
||||||
</el-form-item>
|
<el-select
|
||||||
<el-form-item label="乙方" prop="party_b">
|
v-model="compeny.company_type"
|
||||||
<el-input
|
placeholder="请输入公司类型"
|
||||||
v-model="formData.party_b_name"
|
>
|
||||||
:disabled="true"
|
<el-option></el-option>
|
||||||
clearable
|
</el-select>
|
||||||
placeholder="暂无乙方"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="省" prop="province" >
|
||||||
</el-form-item>
|
<el-select
|
||||||
<el-form-item label="片区经理" prop="area_manager_name">
|
v-model="compeny.province"
|
||||||
<el-input
|
placeholder="请选择省"
|
||||||
v-model="formData.area_manager"
|
>
|
||||||
:disabled="true"
|
<el-option></el-option>
|
||||||
clearable
|
</el-select>
|
||||||
placeholder="暂无经理"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="市" prop="city" >
|
||||||
</el-form-item>
|
<el-select
|
||||||
<el-form-item label="类型" prop="type">
|
v-model="compeny.city"
|
||||||
<el-input
|
placeholder="请选择市"
|
||||||
v-model="formData.type_name"
|
>
|
||||||
:disabled="true"
|
<el-option></el-option>
|
||||||
clearable
|
</el-select>
|
||||||
placeholder="暂无状态"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="区" prop="area" >
|
||||||
</el-form-item>
|
<el-select
|
||||||
<el-form-item label="状态" prop="status">
|
v-model="compeny.area"
|
||||||
<el-input
|
placeholder="请选择区"
|
||||||
v-model="formData.status_name"
|
>
|
||||||
:disabled="true"
|
<el-option></el-option>
|
||||||
clearable
|
</el-select>
|
||||||
placeholder="暂无状态"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="镇" prop="company_type_name" >
|
||||||
</el-form-item>
|
<el-select
|
||||||
<el-form-item label="合同地址" v-if="formData.status == 1">
|
v-model="compeny.company_type_name"
|
||||||
<el-link type="success" :href="formData.url" target="_blank">在线查看</el-link>
|
placeholder="请选择镇"
|
||||||
</el-form-item>
|
>
|
||||||
</el-form>
|
<el-option></el-option>
|
||||||
<div class="btn_men">
|
</el-select>
|
||||||
<el-button @click="show = false">取消</el-button>
|
</el-form-item>
|
||||||
<el-button type="primary" @click="show = false">确定</el-button>
|
<el-form-item label="地址" prop="address" >
|
||||||
</div>
|
<el-input
|
||||||
</el-dialog>
|
v-model="compeny.address"
|
||||||
|
placeholder="请输入公司地址"
|
||||||
|
:style="{ width: '31.5rem' }"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<el-form-item label="公司资质" prop="contract_type" required>
|
||||||
|
<div class="company">
|
||||||
|
<img :src="compenyimg.bank_account"/>
|
||||||
|
<img :src="compenyimg.bank_accountB"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="其他资质" prop="contract_no" required>
|
||||||
|
<div class="company">
|
||||||
|
<img :src="compenyimg.business_license"/>
|
||||||
|
<img :src="compenyimg.business_licenseB"/>
|
||||||
|
</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="90px"
|
||||||
|
:rules="formRules"
|
||||||
|
class="select"
|
||||||
|
>
|
||||||
|
<el-form-item label="公司名称" prop="company_name" required>
|
||||||
|
<el-input
|
||||||
|
v-model="compenyB.company_name"
|
||||||
|
placeholder="请输入公司名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="社会代码" prop="organization_code" required>
|
||||||
|
<el-input
|
||||||
|
v-model="compenyB.organization_code"
|
||||||
|
placeholder="请输入社会代码"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="公司类型" prop="company_type" >
|
||||||
|
<el-select
|
||||||
|
v-model="compenyB.company_type"
|
||||||
|
placeholder="请输入社会类型"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="省" prop="province" >
|
||||||
|
<el-select
|
||||||
|
v-model="compenyB.province"
|
||||||
|
placeholder="请选择省"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="市" prop="city" >
|
||||||
|
<el-select
|
||||||
|
v-model="compenyB.city"
|
||||||
|
placeholder="请选择市"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="区" prop="area" >
|
||||||
|
<el-select
|
||||||
|
v-model="compenyB.area"
|
||||||
|
placeholder="请选择区"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="镇" prop="street" >
|
||||||
|
<el-select
|
||||||
|
v-model="compenyB.street"
|
||||||
|
placeholder="请选择镇"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地址" prop="street" >
|
||||||
|
<el-input
|
||||||
|
v-model="compenyB.street"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<el-form-item label="公司资质" prop="contract_type" required>
|
||||||
|
<div class="company">
|
||||||
|
<img :src="compenyimg.bank_account"/>
|
||||||
|
<img :src="compenyimg.bank_accountB"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="其他资质" prop="contract_no" required>
|
||||||
|
<div class="company">
|
||||||
|
<img :src="compenyimg.business_license"/>
|
||||||
|
<img :src="compenyimg.business_licenseB"/>
|
||||||
|
</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="select"
|
||||||
|
>
|
||||||
|
<el-form-item label="姓名">
|
||||||
|
<el-input
|
||||||
|
v-model="persen.nickname"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="性别">
|
||||||
|
<el-input
|
||||||
|
v-model="persen.sex"
|
||||||
|
placeholder="请输入性别"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系电话">
|
||||||
|
<el-input
|
||||||
|
v-model="persen.mobile"
|
||||||
|
placeholder="请输入联系电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="身份证号">
|
||||||
|
<el-input
|
||||||
|
v-model="persen.id"
|
||||||
|
placeholder="请输入身份证号"
|
||||||
|
:style="{ width: '22rem' }"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="省" prop="province" >
|
||||||
|
<el-select
|
||||||
|
v-model="persen.province"
|
||||||
|
placeholder="请选择省"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="市" prop="city" >
|
||||||
|
<el-select
|
||||||
|
v-model="persen.city"
|
||||||
|
placeholder="请选择市"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="区" prop="area" >
|
||||||
|
<el-select
|
||||||
|
v-model="persen.area"
|
||||||
|
placeholder="请选择区"
|
||||||
|
>
|
||||||
|
<el-option></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="镇" prop="street" >
|
||||||
|
<el-select
|
||||||
|
v-model="persen.street"
|
||||||
|
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.car_card" >
|
||||||
|
<img :src="persenimg.car_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>
|
||||||
|
</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="formData.party_b_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-item label="合同类型" prop="contract_no">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.party_b_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>
|
||||||
|
<el-form>
|
||||||
|
<el-form-item required label="合同上传">
|
||||||
|
<el-button type="primary">上传</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, defineExpose } from 'vue'
|
import { apiContractDetail } from "@/api/contract";
|
||||||
|
import { ref, reactive, defineExpose } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
const { query } = useRoute();
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
id: '',
|
id: "",
|
||||||
company_id: '',
|
company_id: "",
|
||||||
contract_type: '',
|
contract_type: "",
|
||||||
contract_type_name: '',
|
contract_type_name: "",
|
||||||
contract_no: '',
|
contract_no: "",
|
||||||
file: '',
|
file: "",
|
||||||
status: '',
|
status: "",
|
||||||
party_a: '',
|
party_a: "",
|
||||||
party_a_name: '',
|
party_a_name: "",
|
||||||
party_b: '',
|
party_b: "",
|
||||||
party_b_name: '',
|
party_b_name: "",
|
||||||
area_manager: '',
|
area_manager: "",
|
||||||
area_manager_name: '',
|
area_manager_name: "",
|
||||||
type_name: '',
|
type_name: "",
|
||||||
url: '',
|
url: "",
|
||||||
status_name: ''
|
status_name: "",
|
||||||
})
|
});
|
||||||
const show = ref(false)
|
const compeny=ref([])
|
||||||
const shoeEditFn = (flag) => {
|
const compenyimg=ref([])
|
||||||
show.value = flag
|
const compenyB=ref([])
|
||||||
}
|
const compenyBimg=ref([])
|
||||||
|
const persen=ref([])
|
||||||
|
const persenimg=ref([])
|
||||||
|
const show = ref(true);
|
||||||
|
const flag = ref(true);
|
||||||
// 传值赋值
|
// 传值赋值
|
||||||
const setFormData = async (data) => {
|
apiContractDetail({ id: query.id }).then((res) => {
|
||||||
for (const key in formData) {
|
compeny.value=res.party_a_info
|
||||||
if (data[key] != null && data[key] != undefined) {
|
compenyimg.value=res.party_a_info.qualification
|
||||||
//@ts-ignore
|
if(res.type==2)
|
||||||
formData[key] = data[key]
|
{
|
||||||
if (key == 'type') {
|
persen.value=res.party_b_info
|
||||||
formData.type = data.type == 1 ? '公司' : '个人'
|
persenimg.value=res.party_b_info.qualification
|
||||||
}
|
show.value=false
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
else if(res.type==1)
|
||||||
|
{
|
||||||
|
compenyB.value=res.party_b_info
|
||||||
|
compenyBimg.value=res.party_b_info.qualification
|
||||||
|
flag.value=false
|
||||||
|
}
|
||||||
|
console.log(res)
|
||||||
|
|
||||||
defineExpose({
|
});
|
||||||
shoeEditFn,
|
|
||||||
setFormData
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.btn_men {
|
.btn_men {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
}
|
||||||
|
.frame {
|
||||||
|
.el-form-item {
|
||||||
|
.el-input {
|
||||||
|
width: 43rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select{
|
||||||
|
.el-form-item {
|
||||||
|
.el-select {
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
img{
|
||||||
|
width: 20rem;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.persenal{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 8rem;
|
||||||
|
height:10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.idcard{
|
||||||
|
img{
|
||||||
|
width: 12rem;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -103,8 +103,8 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
link
|
link
|
||||||
@click="showDetil(row.id)"
|
@click="showDetil(row.id)"
|
||||||
>
|
>
|
||||||
详情
|
<router-link :to="{path:'/contract/detail',query: {id: row.id}}">详情</router-link>
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<!-- <el-button v-perms="['contract.contract/delete']" type="danger" link
|
<!-- <el-button v-perms="['contract.contract/delete']" type="danger" link
|
||||||
@ -117,18 +117,20 @@
|
|||||||
<pagination v-model="pager" @change="getLists" />
|
<pagination v-model="pager" @change="getLists" />
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<contractDetil ref="childDetil"></contractDetil>
|
<!-- <contractDetil ref="childDetil"></contractDetil> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="contractLists">
|
<script lang="ts" setup name="contractLists">
|
||||||
import contractDetil from './contractDetil.vue'
|
// import contractDetil from './contractDetil.vue'
|
||||||
import { usePaging } from '@/hooks/usePaging'
|
import { usePaging } from '@/hooks/usePaging'
|
||||||
import { useDictData } from '@/hooks/useDictOptions'
|
import { useDictData } from '@/hooks/useDictOptions'
|
||||||
import { apiContractLists, apiContractDelete, apiContractDetail } from '@/api/contract'
|
import { apiContractLists, apiContractDelete, apiContractDetail } from '@/api/contract'
|
||||||
import { timeFormat } from '@/utils/util'
|
import { timeFormat } from '@/utils/util'
|
||||||
import feedback from '@/utils/feedback'
|
import feedback from '@/utils/feedback'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||||
// 是否显示编辑框
|
// 是否显示编辑框
|
||||||
const showEdit = ref(false)
|
const showEdit = ref(false)
|
||||||
@ -164,9 +166,9 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
|
|||||||
// 详情
|
// 详情
|
||||||
const childDetil = ref()
|
const childDetil = ref()
|
||||||
const showDetil = async (id) => {
|
const showDetil = async (id) => {
|
||||||
const res = await apiContractDetail({ id })
|
// const res = await apiContractDetail({ id })
|
||||||
childDetil.value.setFormData(res)
|
// childDetil.value.setFormData(res)
|
||||||
childDetil.value.shoeEditFn(true)
|
// childDetil.value.shoeEditFn(true)
|
||||||
}
|
}
|
||||||
// 查看合同
|
// 查看合同
|
||||||
const checkContcat = (id: number) => {
|
const checkContcat = (id: number) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user