From 80f50bcf8c590b92a0121135a0ef9c58387dafb2 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 8 Aug 2025 16:59:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=8C=85=E5=95=86=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=A1=80=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basic-manage/sub-manage/sub-base-info.js  |  36 +++
 src/components/UploadImg/index.vue            | 222 +++++++++++++++++
 .../sub-base-info/add-or-edit-form.vue        | 231 ++++++++++++++++++
 .../sub-manage/sub-base-info/config.js        |  81 ++++++
 .../sub-manage/sub-base-info/index.vue        | 170 ++++++++++++-
 5 files changed, 739 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UploadImg/index.vue
 create mode 100644 src/views/basic-manage/sub-manage/sub-base-info/add-or-edit-form.vue
 create mode 100644 src/views/basic-manage/sub-manage/sub-base-info/config.js

diff --git a/src/api/basic-manage/sub-manage/sub-base-info.js b/src/api/basic-manage/sub-manage/sub-base-info.js
index e69de29..ec26b4c 100644
--- a/src/api/basic-manage/sub-manage/sub-base-info.js
+++ b/src/api/basic-manage/sub-manage/sub-base-info.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 新增分包商基础信息
+export const addSubBaseInfoAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'POST',
+        data,
+    })
+}
+
+// 修改分包商基础信息
+export const editSubBaseInfoAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'POST',
+        data,
+    })
+}
+
+// 删除分包商基础信息
+export const deleteSubBaseInfoAPI = (id) => {
+    return request({
+        url: `/project/****/${id}`,
+        method: 'DELETE',
+    })
+}
+
+// 获取分包商基础信息列表
+export const getSubBaseInfoListAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'GET',
+        params: data,
+    })
+}
diff --git a/src/components/UploadImg/index.vue b/src/components/UploadImg/index.vue
new file mode 100644
index 0000000..3861159
--- /dev/null
+++ b/src/components/UploadImg/index.vue
@@ -0,0 +1,222 @@
+<template>
+    <div>
+        <el-upload
+            :limit="limit"
+            :multiple="multiple"
+            :action="uploadFileUrl"
+            list-type="picture-card"
+            :file-list="fileListInner"
+            :headers="headers"
+            :on-error="handleError"
+            :on-remove="handleRemove"
+            :on-preview="handlePreview"
+            :on-success="handleSuccess"
+            :before-upload="handleBeforeUpload"
+            :show-file-list="true"
+            :on-exceed="handleExceed"
+            name="files"
+            :class="isDetail || isUploaded ? 'upload-img' : ''"
+        >
+            <i class="el-icon-plus" />
+            <div class="upload-img-box">
+                <slot name="upload-img-box"></slot>
+            </div>
+        </el-upload>
+
+        <el-dialog
+            width="30%"
+            append-to-body
+            :before-close="
+                () => {
+                    dialogInnerVisible = false
+                }
+            "
+            :visible.sync="dialogInnerVisible"
+        >
+            <img
+                :src="previewUrl"
+                style="display: block; max-width: 100%; margin: 0 auto"
+            />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+    props: {
+        // 文件列表
+        fileList: {
+            type: Array,
+            default: () => [],
+        },
+        // 上传地址
+        uploadFileUrl: {
+            type: String,
+            default: '',
+        },
+        // 文件类型
+        fileType: {
+            type: Array,
+            default: ['png', 'jpg', 'jpeg'],
+        },
+        // 文件大小
+        fileSize: {
+            type: Number,
+            default: 10,
+        },
+        // 限制数量
+        limit: {
+            type: Number,
+            default: 1,
+        },
+        // 是否多选
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否为查看详情
+        isDetail: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否上传的数量已经满足
+        isUploaded: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            // addOrEditForm: {
+            //     fileList: [],
+            // },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            deleteFileList: [],
+        }
+    },
+    methods: {
+        // 删除
+        async handleRemove(file, fileList) {
+            if (file.response && file.response.data.length > 0) {
+                this.$emit('deleteFile', {
+                    filePath: file.response.data[0].filePath,
+                    isNew: true,
+                })
+            } else {
+                if (file.isNew) {
+                    this.$emit('deleteFile', {
+                        filePath: file.filePath,
+                        isNew: true,
+                    })
+                } else {
+                    this.$emit('deleteFile', {
+                        filePath: file.filePath,
+                        isNew: false,
+                    })
+                }
+            }
+            this.$emit('update:fileList', fileList)
+        },
+
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+
+        // 上传成功
+        handleSuccess(response, file, fileList) {
+            this.$emit('update:fileList', [])
+            if (response.code === 200) {
+                this.$emit('update:fileList', fileList)
+                this.$emit('uploadSuccess')
+            } else {
+                this.$modal.msgError('上传失败')
+            }
+            this.$modal.closeLoading()
+        },
+
+        // 上传失败
+        handleError() {
+            this.$modal.msgError('上传失败')
+            this.$modal.closeLoading()
+        },
+
+        // 上传前
+        handleBeforeUpload(file) {
+            // 根据file的name的后缀判断是否符合要求
+            console.log(file, 'file')
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                return false
+            }
+
+            this.$modal.loading('图片正在上传，请稍候...')
+            // 替换文件路径中的#号
+            const newFileName = file.name.replace(/#/g, '@')
+            const newFile = new File([file], newFileName, { type: file.type })
+
+            // 修改原始文件的name属性
+            Object.defineProperty(file, 'name', {
+                value: newFileName,
+            })
+
+            return true
+        },
+
+        // 超出限制
+        handleExceed(files, fileList) {
+            this.$modal.msgError(`上传的图片数量不能超过 ${this.limit} 个`)
+        },
+    },
+
+    computed: {
+        fileListInner: {
+            get() {
+                return this.fileList
+            },
+            set(newValue) {
+                this.$emit('update:fileList', newValue)
+            },
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-upload--picture-card {
+    position: relative;
+    margin-right: 10px;
+
+    .upload-img-box {
+        position: absolute;
+        bottom: -15%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+::v-deep .upload-img .el-upload--picture-card {
+    display: none;
+}
+</style>
diff --git a/src/views/basic-manage/sub-manage/sub-base-info/add-or-edit-form.vue b/src/views/basic-manage/sub-manage/sub-base-info/add-or-edit-form.vue
new file mode 100644
index 0000000..f1ca892
--- /dev/null
+++ b/src/views/basic-manage/sub-manage/sub-base-info/add-or-edit-form.vue
@@ -0,0 +1,231 @@
+<template>
+    <!-- 新增或修改标段工程表单 -->
+    <div>
+        <el-form
+            label-width="140px"
+            ref="addOrEditFormRef"
+            :model="addOrEditForm"
+            :rules="addOrEditFormRules"
+        >
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="分包商名称" prop="subName">
+                        <el-input
+                            clearable
+                            placeholder="请输入分包商名称"
+                            v-model="addOrEditForm.subName"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="法定代表人" prop="legalRepresentative">
+                        <el-input
+                            clearable
+                            placeholder="请输入法定代表人"
+                            v-model="addOrEditForm.legalRepresentative"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="法人联系电话" prop="phone">
+                        <el-input
+                            clearable
+                            placeholder="请输入法人联系电话"
+                            v-model="addOrEditForm.phone"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="营业住址" prop="businessAddress">
+                        <el-input
+                            clearable
+                            placeholder="请输入营业住址"
+                            v-model="addOrEditForm.businessAddress"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="营业执照" prop="businessLicense">
+                        <UploadImg
+                            :limit="30"
+                            :file-size="10"
+                            :multiple="true"
+                            :is-detail="formType === 2"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :upload-file-url="uploadFileUrl"
+                            :file-list.sync="addOrEditForm.businessLicense"
+                            :is-uploaded="
+                                addOrEditForm.businessLicense.length >= 2
+                            "
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="电子公章" prop="electronicStamp">
+                        <UploadImg
+                            :limit="30"
+                            :file-size="10"
+                            :multiple="true"
+                            :is-detail="formType === 2"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :upload-file-url="uploadFileUrl"
+                            :file-list.sync="addOrEditForm.electronicStamp"
+                            :is-uploaded="
+                                addOrEditForm.electronicStamp.length >= 2
+                            "
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="身份证正反面" prop="idCard">
+                        <UploadImg
+                            :limit="30"
+                            :file-size="10"
+                            :multiple="true"
+                            :is-detail="formType === 2"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :upload-file-url="uploadFileUrl"
+                            :file-list.sync="addOrEditForm.idCard"
+                            :is-uploaded="addOrEditForm.idCard.length >= 2"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item
+                        label="电子签名/法人印章"
+                        prop="electronicSignature"
+                    >
+                        <UploadImg
+                            :limit="30"
+                            :file-size="10"
+                            :multiple="true"
+                            :is-detail="formType === 2"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :upload-file-url="uploadFileUrl"
+                            :file-list.sync="addOrEditForm.electronicSignature"
+                            :is-uploaded="
+                                addOrEditForm.electronicSignature.length >= 2
+                            "
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import UploadImg from '@/components/UploadImg'
+import {
+    addSubBaseInfoAPI,
+    editSubBaseInfoAPI,
+} from '@/api/basic-manage/sub-manage/sub-base-info'
+export default {
+    name: 'AddOrEditForm',
+    components: {
+        UploadImg,
+    },
+    data() {
+        return {
+            formType: 1,
+            uploadFileUrl:
+                process.env.VUE_APP_BASE_API + '/system/file/uploadFiles',
+            addOrEditForm: {
+                subName: '', // 分包商名称
+                legalRepresentative: '', // 法定代表人
+                phone: '', // 联系电话
+                businessAddress: '', // 营业住址
+
+                businessLicense: [], // 营业执照
+                electronicStamp: [], // 电子公章
+                idCard: [], // 身份证正反面
+                electronicSignature: [], // 电子签名/法人印章
+            },
+            addOrEditFormRules: {
+                subName: [
+                    {
+                        required: true,
+                        message: '请输入分包商名称',
+                        trigger: 'blur',
+                    },
+                ],
+
+                legalRepresentative: [
+                    {
+                        required: true,
+                        message: '请输入法定代表人',
+                        trigger: 'blur',
+                    },
+                ],
+
+                businessLicense: [
+                    {
+                        required: true,
+                        message: '请上传营业执照',
+                        trigger: 'blur',
+                    },
+                ],
+                electronicStamp: [
+                    {
+                        required: true,
+                        message: '请上传电子公章',
+                        trigger: 'blur',
+                    },
+                ],
+                idCard: [
+                    {
+                        required: true,
+                        message: '请上传身份证正反面',
+                        trigger: 'blur',
+                    },
+                ],
+                electronicSignature: [
+                    {
+                        required: true,
+                        message: '请上传电子签名/法人印章',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    methods: {
+        // 确定按钮
+        onHandleConfirmAddOrEditFun() {
+            return new Promise((resolve, reject) => {
+                this.$refs.addOrEditFormRef.validate(async (valid) => {
+                    if (valid) {
+                        console.log(this.addOrEditForm)
+
+                        const API =
+                            this.formType === 1
+                                ? addSubBaseInfoAPI
+                                : editSubBaseInfoAPI
+                        const res = await API(this.addOrEditForm)
+                        console.log(res, '新增或修改结果')
+                        if (res.code === 200) {
+                            resolve()
+                        } else {
+                            reject(new Error(res.message))
+                        }
+                    } else {
+                        reject(new Error('表单验证失败'))
+                    }
+                })
+            })
+        },
+
+        // 重置表单
+        resetForm() {
+            this.$refs.addOrEditFormRef.resetFields()
+        },
+    },
+}
+</script>
diff --git a/src/views/basic-manage/sub-manage/sub-base-info/config.js b/src/views/basic-manage/sub-manage/sub-base-info/config.js
new file mode 100644
index 0000000..219a788
--- /dev/null
+++ b/src/views/basic-manage/sub-manage/sub-base-info/config.js
@@ -0,0 +1,81 @@
+export const formLabel = [
+    {
+        f_label: '关键词',
+        f_model: 'keyword',
+        f_type: 'input',
+        isShow: false, // 是否展示label
+    },
+]
+
+export const columnsList = [
+    { t_props: 'projectName', t_label: '分包商名称' },
+    { t_props: 'xmb', t_label: '法定代表人' },
+    { t_props: 'name', t_label: '联系电话' },
+    { t_props: 'type', t_label: '营业住址' },
+    {
+        t_props: 'businessLicense',
+        t_label: '营业执照',
+        t_slot: 'businessLicense',
+    },
+    { t_props: 'idCard', t_label: '身份证', t_slot: 'idCard' },
+    {
+        t_props: 'electronicStamp',
+        t_label: '电子公章',
+        t_slot: 'electronicStamp',
+    },
+    {
+        t_props: 'electronicSignature',
+        t_label: '电子签名/法人印章',
+        t_slot: 'electronicSignature',
+    },
+]
+
+export const testTableList = [
+    {
+        projectName: '总工程名称',
+        level: '等级3',
+        xmb: 'xxx项目部',
+        name: '110kv工程',
+        type: '基建变电',
+        address: '安徽省合肥市110k工程',
+        status: '在建',
+        businessLicense: '已上传',
+        idCard: '已上传',
+        electronicStamp: '已上传',
+        electronicSignature: '未上传',
+    },
+    {
+        projectName: '总工程名称21',
+        level: '等级3',
+        xmb: 'xxx项目部',
+        name: '110kv工程',
+        type: '基建变电',
+        address: '安徽省合肥市110k工程',
+        status: '在建',
+        businessLicense: '已上传',
+        idCard: '已上传',
+        electronicStamp: '已上传',
+        electronicSignature: '未上传',
+    },
+    {
+        projectName: '总工程名称3',
+        level: '等级3',
+        xmb: 'xxx项目部',
+        name: '110kv工程',
+        type: '基建变电',
+        address: '安徽省合肥市110k工程',
+        status: '在建',
+        businessLicense: '已上传',
+        idCard: '已上传',
+        electronicStamp: '已上传',
+        electronicSignature: '未上传',
+    },
+]
+
+export const dialogConfig = {
+    outerVisible: false,
+    outerTitle: '',
+    outerWidth: '80%',
+    minHeight: '',
+    maxHeight: '',
+}
diff --git a/src/views/basic-manage/sub-manage/sub-base-info/index.vue b/src/views/basic-manage/sub-manage/sub-base-info/index.vue
index ba75c98..7ea1560 100644
--- a/src/views/basic-manage/sub-manage/sub-base-info/index.vue
+++ b/src/views/basic-manage/sub-manage/sub-base-info/index.vue
@@ -1,10 +1,178 @@
 <template>
     <!-- 基础管理 ---- 分包商管理 ---- 基础信息 -->
-    <div class="app-container"> </div>
+    <div class="app-container">
+        <TableModel
+            :formLabel="formLabel"
+            :showOperation="true"
+            :showRightTools="true"
+            ref="allProjectTableRef"
+            :columnsList="columnsList"
+            :testTableList="testTableList"
+            :request-api="getSubBaseInfoListAPI"
+        >
+            <template slot="btn" slot-scope="{ queryParams }">
+                <el-button
+                    plain
+                    size="mini"
+                    type="success"
+                    icon="el-icon-download"
+                    @click="onHandleExportAllProject(queryParams)"
+                >
+                    导出
+                </el-button>
+
+                <el-button
+                    plain
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-plus"
+                    @click="onHandleAddOrEditAllProject(1, null)"
+                >
+                    新增
+                </el-button>
+            </template>
+
+            <!-- 标段工程数量 -->
+            <template :slot="item" slot-scope="{ data }" v-for="item in slots">
+                <span
+                    :style="{
+                        color: data[item] === '已上传' ? '#67C23A' : '#F56C6C',
+                    }"
+                    :key="item"
+                    style="font-size: 12px"
+                    @click="onHandleViewLotProject(data)"
+                >
+                    {{ data[item] }}
+                </span>
+            </template>
+
+            <template slot="handle" slot-scope="{ data }">
+                <el-button
+                    plain
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-edit"
+                    @click="onHandleAddOrEditAllProject(2, data)"
+                >
+                    修改
+                </el-button>
+                <el-button
+                    size="mini"
+                    type="danger"
+                    icon="el-icon-delete"
+                    @click="onHandleDeleteAllProject(data)"
+                >
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="handleCloseDialogOuter"
+        >
+            <template slot="outerContent">
+                <AddOrEditForm ref="addOrEditFormContentRef" />
+
+                <el-row class="dialog-footer-btn">
+                    <el-button size="medium" @click="handleCloseDialogOuter">
+                        取消
+                    </el-button>
+                    <el-button
+                        size="medium"
+                        type="primary"
+                        @click="onHandleConfirmAddOrEdit"
+                    >
+                        确定
+                    </el-button>
+                </el-row>
+            </template>
+        </DialogModel>
+    </div>
 </template>
 
 <script>
+import TableModel from '@/components/TableModel'
+import DialogModel from '@/components/DialogModel'
+import AddOrEditForm from './add-or-edit-form'
+import { formLabel, columnsList, dialogConfig, testTableList } from './config'
+import {
+    deleteSubBaseInfoAPI,
+    getSubBaseInfoListAPI,
+} from '@/api/basic-manage/sub-manage/sub-base-info'
 export default {
     name: 'SubBaseInfo',
+    components: {
+        TableModel,
+        DialogModel,
+        AddOrEditForm,
+    },
+
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+            testTableList,
+            getSubBaseInfoListAPI,
+
+            slots: {
+                businessLicense: 'businessLicense',
+                idCard: 'idCard',
+                electronicStamp: 'electronicStamp',
+                electronicSignature: 'electronicSignature',
+            },
+        }
+    },
+    methods: {
+        // 导出按钮
+        onHandleExportAllProject(queryParams) {
+            console.log(queryParams, '导出')
+        },
+
+        // 新增或修改
+        onHandleAddOrEditAllProject(type, data) {
+            this.dialogConfig.outerTitle =
+                type === 1 ? '新增标段工程' : '修改标段工程'
+            this.dialogConfig.outerVisible = true
+        },
+
+        // 删除
+        onHandleDeleteAllProject(data) {
+            this.$confirm('确定删除该工程吗？', '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    const res = await deleteSubBaseInfoAPI(data.id)
+                    console.log(res, '删除结果')
+                    if (res.code === 200) {
+                        this.$msgSuccess('删除成功')
+                        this.$refs.allProjectTableRef.getTableList() // 更新列表
+                    }
+                })
+                .catch(() => {
+                    console.log('取消')
+                })
+        },
+
+        // 确定按钮
+        async onHandleConfirmAddOrEdit() {
+            this.$refs.addOrEditFormContentRef.formType =
+                this.dialogConfig.outerTitle === '新增标段工程' ? 1 : 2
+            try {
+                await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
+            } catch (error) {
+                console.log('表单提交失败', error)
+            }
+        },
+
+        // 关闭弹框
+        handleCloseDialogOuter() {
+            this.$refs.addOrEditFormContentRef.resetForm()
+            this.dialogConfig.outerVisible = false
+        },
+    },
 }
 </script>