合同见证页面完善接口调试

src/api/construction-person/red-green-light-mange/contract-witness.js

@@ -18,10 +18,11 @@ export const getContractDetailAPI = (id) => {
 }
 
 // 合同见证 获取合同详情列表接口(历史合同信息)
-export const getContractDetailListAPI = () => {
+export const getContractDetailListAPI = (data) => {
     return request({
         url: `/bmw/workerContract/workerList`,
         method: 'get',
+        params: data,
     })
 }
 

src/views/construction-person/red-green-light-mange/contract-witness/contract-details-list.vue

@@ -72,12 +72,44 @@
                 </template>
             </el-table-column>
         </el-table>
+
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="handleCloseDialogOuter"
+        >
+            <template slot="outerContent">
+                <el-image
+                    :src="contractImgList[0]"
+                    :preview-src-list="contractImgList"
+                    style="width: 454px; height: 390px"
+                    v-if="dialogConfig.outerTitle === '合同图片详情'"
+                />
+
+                <!-- <AddOrEditForm
+                    :workerId="workerId"
+                    :contractId="contractId"
+                    v-if="dialogConfig.outerTitle === '合同见证详情'"
+                /> -->
+
+                <ContractDetails
+                    ref="contractDetailsRef"
+                    :contractId="contractId"
+                    v-if="dialogConfig.outerTitle === '合同见证详情'"
+                />
+            </template>
+        </DialogModel>
     </div>
 </template>
 
 <script>
+import DialogModel from '@/components/DialogModel'
+import ContractDetails from './contract-details.vue' // 合同上传
 import { getContractDetailListAPI } from '@/api/construction-person/red-green-light-mange/contract-witness'
 export default {
+    components: {
+        DialogModel,
+        ContractDetails,
+    },
     props: {
         workerId: {
             type: [String, Number],
@@ -86,7 +118,19 @@ export default {
     },
     data() {
         return {
+            contractId: '',
             detailsList: [],
+            dialogConfig: {
+                outerVisible: false,
+                outerTitle: '合同图片详情',
+                outerWidth: '',
+                minHeight: '',
+                maxHeight: '',
+            },
+            contractImgList: [
+                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+            ], // 合同图片列表
         }
     },
     mounted() {
@@ -99,18 +143,35 @@ export default {
             const { rows: res } = await getContractDetailListAPI({
                 workerId: this.workerId,
             })
-            console.log(res, 'res 合同详情列表')
             this.detailsList = res
         },
 
         // 查看合同
         onHandleViewContract(row) {
-            console.log(row, 'row 合同')
+            this.dialogConfig.outerTitle = '合同图片详情'
+            this.dialogConfig.outerWidth = '500px'
+            this.dialogConfig.minHeight = '500px'
+            this.dialogConfig.maxHeight = '500px'
+            this.dialogConfig.outerVisible = true
         },
 
         // 查看历史合同详情
         onHandleViewContractDetails(row) {
             console.log(row, 'row 合同详情')
+            this.contractId = row.id
+            this.dialogConfig.outerTitle = '合同见证详情'
+            this.dialogConfig.outerWidth = '80%'
+            this.dialogConfig.minHeight = ''
+            this.dialogConfig.maxHeight = ''
+            this.dialogConfig.outerVisible = true
+            this.$nextTick(() => {
+                this.$refs.contractDetailsRef.getContractInfo()
+            })
+        },
+
+        // 关闭弹窗
+        handleCloseDialogOuter() {
+            this.dialogConfig.outerVisible = false
         },
     },
 }

src/views/construction-person/red-green-light-mange/contract-witness/contract-details.vue

@@ -0,0 +1,118 @@
+<template>
+    <!-- 合同见证详情 -->
+    <div>
+        <el-descriptions border :column="2" :labelStyle="{ width: '200px' }">
+            <el-descriptions-item label="合同见证照片为：" :span="2">
+                <div class="contract-content">
+                    <div :key="item" v-for="item in 5" class="contract-item">
+                        <el-image
+                            fit="cover"
+                            style="width: 140px; height: 200px"
+                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                        />
+
+                        <span class="tip-text" style="margin-top: 20px">
+                            人员手持合同照片
+                        </span>
+                    </div>
+                </div>
+            </el-descriptions-item>
+            <el-descriptions-item label="合同编号">
+                {{ contractInfo.contractCode }}
+            </el-descriptions-item>
+            <el-descriptions-item label="合同期限类型">
+                <el-tag size="small">{{
+                    contractInfo.contractTermType
+                }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="合同签订日期">
+                {{ contractInfo.contractStartDate }}
+            </el-descriptions-item>
+            <el-descriptions-item label="合同终止日期">
+                {{ contractInfo.contractStopDate }}
+            </el-descriptions-item>
+            <el-descriptions-item label="工资核定方式">
+                <el-tag size="small">{{ contractInfo.wageApprovedWay }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="工资核定标准">
+                {{ contractInfo.wageCriterion }}
+            </el-descriptions-item>
+            <el-descriptions-item label="附件">
+                <el-tag size="small" style="margin-right: 10px">附件1</el-tag>
+                <el-tag size="small" style="margin-right: 10px">附件2</el-tag>
+                <el-tag size="small" style="margin-right: 10px">附件3</el-tag>
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+
+<script>
+import { getContractDetailAPI } from '@/api/construction-person/red-green-light-mange/contract-witness'
+
+export default {
+    props: {
+        contractId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    name: 'ContractDetails',
+
+    data() {
+        return {
+            contractInfo: {
+                contractCode: '',
+                contractTermType: '',
+                contractStartDate: '',
+                contractStopDate: '',
+                wageApprovedWay: '',
+                wageCriterion: '',
+            },
+        }
+    },
+
+    methods: {
+        // 获取合同信息
+        async getContractInfo() {
+            const { data: res } = await getContractDetailAPI(this.contractId)
+            // this.contractInfo = res
+            console.log(res, 'res 合同信息')
+            if (res.length > 0) {
+                const {
+                    contractCode,
+                    contractTermType,
+                    contractStartDate,
+                    contractStopDate,
+                    wageApprovedWay,
+                    wageCriterion,
+                } = res[0]
+
+                this.contractInfo = {
+                    contractCode,
+                    contractTermType,
+                    contractStartDate,
+                    contractStopDate,
+                    wageApprovedWay,
+                    wageCriterion,
+                }
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-content {
+    display: flex;
+    width: 100%;
+    padding: 20px;
+}
+
+.contract-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+}
+</style>

src/views/construction-person/red-green-light-mange/contract-witness/index.vue

@@ -15,7 +15,7 @@
                     size="mini"
                     type="success"
                     icon="el-icon-download"
-                    @click="onHandleExportPersonEntry(queryParams)"
+                    @click="onHandleExportContract(queryParams)"
                 >
                     导出
                 </el-button>
@@ -65,15 +65,6 @@
                 >
                     上传
                 </el-button>
-                <el-button
-                    size="mini"
-                    type="danger"
-                    icon="el-icon-delete"
-                    v-if="data.einStatus != 0"
-                    @click="onHandleDeleteContract(data)"
-                >
-                    删除
-                </el-button>
             </template>
         </TableModel>
 
@@ -171,14 +162,14 @@ export default {
     },
     methods: {
         // 导出按钮
-        onHandleExportPersonEntry(queryParams) {
+        onHandleExportContract(queryParams) {
             console.log(queryParams, '导出参数')
             // this.download(
             //     '/xxx/xxx',
             //     {
             //         ...queryParams,
             //     },
-            //     '在场人员信息.xlsx',
+            //     '合同信息.xlsx',
             // )
         },
 
@@ -270,8 +261,6 @@ export default {
 
         // 查看合同图片详情
         onHandleViewContractImgDetails(data) {
-            console.log(data, '查看合同图片详情')
-
             this.dialogConfig.outerTitle = '合同图片详情'
             this.dialogConfig.minHeight = '500px'
             this.dialogConfig.maxHeight = '500px'