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

2025-08-13 18:56:08 +08:00 · 2025-08-13 18:56:08 +08:00 · 54d5513d31
parent de9d85d545
commit 54d5513d31
4 changed files with 186 additions and 17 deletions
--- a/src/api/construction-person/red-green-light-mange/contract-witness.js
+++ b/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,
    })
 }

--- a/src/views/construction-person/red-green-light-mange/contract-witness/contract-details-list.vue
+++ b/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
        },
    },
 }
--- a/src/views/construction-person/red-green-light-mange/contract-witness/contract-details.vue
+++ b/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>
--- a/src/views/construction-person/red-green-light-mange/contract-witness/index.vue
+++ b/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'