From 1a0cc6d8dada4dc038fb12374987a7f013548a91 Mon Sep 17 00:00:00 2001
From: jiangyouyi <763484914@qq.com>
Date: Sat, 5 Aug 2023 18:57:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contract/contractDetil.vue | 528 +++++++++++++++++++++------
 src/views/contract/index.vue         |  16 +-
 2 files changed, 433 insertions(+), 111 deletions(-)

diff --git a/src/views/contract/contractDetil.vue b/src/views/contract/contractDetil.vue
index 68d74d1..52aee7c 100644
--- a/src/views/contract/contractDetil.vue
+++ b/src/views/contract/contractDetil.vue
@@ -1,118 +1,438 @@
 <template>
-    <el-dialog @confirm="handleSubmit" title="合同详情" v-model="show">
-        <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
-            <el-form-item label="合同类型" prop="contract_type">
-                <el-input
-                    v-model="formData.contract_type_name"
-                    :disabled="true"
-                    clearable
-                    placeholder="请输入合同类型"
-                />
-            </el-form-item>
-            <el-form-item label="合同编号" prop="contract_no">
-                <el-input
-                    v-model="formData.contract_no"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无合同编号"
-                />
-            </el-form-item>
-            <el-form-item label="甲方" prop="party_a">
-                <el-input
-                    v-model="formData.party_a_name"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无甲方"
-                />
-            </el-form-item>
-            <el-form-item label="乙方" prop="party_b">
-                <el-input
-                    v-model="formData.party_b_name"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无乙方"
-                />
-            </el-form-item>
-            <el-form-item label="片区经理" prop="area_manager_name">
-                <el-input
-                    v-model="formData.area_manager"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无经理"
-                />
-            </el-form-item>
-            <el-form-item label="类型" prop="type">
-                <el-input
-                    v-model="formData.type_name"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无状态"
-                />
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-                <el-input
-                    v-model="formData.status_name"
-                    :disabled="true"
-                    clearable
-                    placeholder="暂无状态"
-                />
-            </el-form-item>
-            <el-form-item label="合同地址" v-if="formData.status == 1">
-                <el-link type="success" :href="formData.url" target="_blank">在线查看</el-link>
-            </el-form-item>
-        </el-form>
-        <div class="btn_men">
-            <el-button @click="show = false">取消</el-button>
-            <el-button type="primary" @click="show = false">确定</el-button>
-        </div>
-    </el-dialog>
+  <el-card class="box-card">
+    <template #header>
+      <span>公司基本信息</span>
+    </template>
+ <el-form
+      :inline="true"
+      ref="formRef"
+      :model="compeny"
+      label-width="90px"
+      :rules="formRules"
+      class="select"
+    >
+      <el-form-item label="公司名称" prop="company_name" required>
+        <el-input
+          v-model="compeny.company_name"
+          placeholder="请输入公司名称"
+        />
+      </el-form-item>
+      <el-form-item label="社会代码" prop="organization_code" required>
+       <el-input
+          v-model="compeny.organization_code"
+          placeholder="请输入社会代码"
+        />
+      </el-form-item>
+       <el-form-item label="公司类型" prop="compeny" >
+         <el-select
+                v-model="compeny.company_type"
+                placeholder="请输入公司类型"
+         >
+        <el-option></el-option>                      
+        </el-select>
+      </el-form-item>
+        <el-form-item label="省" prop="province" >
+         <el-select
+                v-model="compeny.province"
+                placeholder="请选择省"
+         >
+        <el-option></el-option>                      
+        </el-select>
+      </el-form-item>
+    <el-form-item label="市" prop="city" >
+         <el-select
+                v-model="compeny.city"
+                placeholder="请选择市"
+         >
+        <el-option></el-option>                      
+        </el-select>
+      </el-form-item>
+    <el-form-item label="区" prop="area" >
+         <el-select
+                v-model="compeny.area"
+                placeholder="请选择区"
+         >
+        <el-option></el-option>                      
+        </el-select>
+      </el-form-item>
+    <el-form-item label="镇" prop="company_type_name" >
+         <el-select
+                v-model="compeny.company_type_name"
+                placeholder="请选择镇"
+         >
+        <el-option></el-option>                      
+        </el-select>
+      </el-form-item>
+    <el-form-item label="地址" prop="address" >
+      <el-input
+          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>
 
 <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({
-    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 show = ref(false)
-const shoeEditFn = (flag) => {
-    show.value = flag
-}
+  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 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 setFormData = async (data) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-            if (key == 'type') {
-                formData.type = data.type == 1 ? '公司' : '个人'
-            }
-        }
+apiContractDetail({ id: query.id }).then((res) => {
+    compeny.value=res.party_a_info
+    compenyimg.value=res.party_a_info.qualification
+    if(res.type==2)
+    {
+       persen.value=res.party_b_info
+        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>
 
 <style lang="scss" scoped>
 .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>
diff --git a/src/views/contract/index.vue b/src/views/contract/index.vue
index 09d77f9..bace043 100644
--- a/src/views/contract/index.vue
+++ b/src/views/contract/index.vue
@@ -103,8 +103,8 @@
                                 type="primary"
                                 link
                                 @click="showDetil(row.id)"
-                            >
-                                详情
+                            >                               
+                            <router-link :to="{path:'/contract/detail',query: {id: row.id}}">详情</router-link>
                             </el-button>
 
                             <!-- <el-button v-perms="['contract.contract/delete']" type="danger" link
@@ -117,18 +117,20 @@
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>
-        <contractDetil ref="childDetil"></contractDetil>
+        <!-- <contractDetil ref="childDetil"></contractDetil> -->
     </div>
 </template>
 
 <script lang="ts" setup name="contractLists">
-import contractDetil from './contractDetil.vue'
+// import contractDetil from './contractDetil.vue'
 import { usePaging } from '@/hooks/usePaging'
 import { useDictData } from '@/hooks/useDictOptions'
 import { apiContractLists, apiContractDelete, apiContractDetail } from '@/api/contract'
 import { timeFormat } from '@/utils/util'
 import feedback from '@/utils/feedback'
 
+
+
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 // 是否显示编辑框
 const showEdit = ref(false)
@@ -164,9 +166,9 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
 // 详情
 const childDetil = ref()
 const showDetil = async (id) => {
-    const res = await apiContractDetail({ id })
-    childDetil.value.setFormData(res)
-    childDetil.value.shoeEditFn(true)
+    // const res = await apiContractDetail({ id })
+    // childDetil.value.setFormData(res)
+    // childDetil.value.shoeEditFn(true)
 }
 // 查看合同
 const checkContcat = (id: number) => {