@ -1,18 +1,26 @@
< template >
< div class = "p-2" >
<!-- 搜索区域 -- >
< transition :enter-active-class = "proxy?.animate.searchAnimate.enter" :leave-active-class = "proxy?.animate.searchAnimate.leave" >
< div v-show = "showSearch" class="mb-[10px]" >
< el -card shadow = "hover" >
< el-form ref = "queryFormRef" :model = "queryParams" :inline = "true" >
<!-- 新增 ： 搜索表单字段 （ 可选 ， 支持按新字段搜索 ） --
< el-form-item label = "供应商名称" prop = "supplierName" >
< el-input v-model = "queryParams.supplierName" placeholder="请输入供应商名称" maxlength="50" / >
< el-form-item label = "企业登记注册类型" prop = "supplierType"
< el-select v-model = "queryParams.supplierType" placeholder="请选择类型" clearable >
< el-option label = "劳务" value = "劳务" > < / el-option >
< el-option label = "技术服务" value = "技术服务" > < / el-option >
< el-option label = "物资设备" value = "物资设备" > < / el-option >
< / el-select >
< / el-form-item >
< el-form-item label = "供应商负责人 " prop = "supplierPerson " >
< el-input v-model = "queryParams.supplierPerson " placeholder="请输入负责人" maxlength="20 " / >
< el-form-item label = "企业名称 " prop = "supplierName " >
< el-input v-model = "queryParams.supplierName " placeholder="请输入企业名称" clearable style="width: 200px " / >
< / el-form-item >
< el-form-item label = "负责人电话 " prop = "personPhon e" >
< el-inpu t v-model = "queryParams.personPhon e" placeholder="请输入负责人电话" maxlength="11" / >
< el-form-item label = "审核状态 " prop = "stat e" >
< el-selec t v-model = "queryParams.stat e" placeholder="请选择状态" clearable >
< el-option label = "待审核" value = "0" > < / el-option >
< el-option label = "已通过" value = "1" > < / el-option >
< el-option label = "未通过" value = "2" > < / el-option >
< / el-select >
< / el-form-item >
< el-form-item >
< el-button type = "primary" icon = "Search" @click ="handleQuery" > 搜索 < / el -button >
@ -23,6 +31,7 @@
< / div >
< / transition >
<!-- 列表及操作区域 -- >
< el-card shadow = "never" >
< template # header >
< el-row :gutter = "10" class = "mb8" >
@ -52,27 +61,31 @@
< / el-row >
< / template >
<!-- 表格： 新增3个字段列 -- >
< el-table v-loading = "loading" :data="supplierInputList" @selection-change="handleSelectionChange" >
<!-- 数据 表格-- >
< el-table v-loading = "loading" :data="supplierInputList" @selection-change="handleSelectionChange" border
< el-table-column type = "selection" width = "55" align = "center" / >
< el-table-column label = "供应商名称 " align = "center" prop = "supplierNam e" width = "18 0" / >
< el-table-column label = "供应商负责人 " align = "center" prop = "supplierPerson " width = "15 0" / >
< el-table-column label = "负责人电话 " align = "center" prop = "personPhone " width = "15 0" / >
< el-table-column label = "供应商类型 " align = "center" prop = "supplierTyp e" width = "15 0" / >
< el-table-column label = "状态 " align = "center" prop = "stat e" width = "15 0" >
< el-table-column label = "ID" align = "center" prop = "id" width = "80" / >
< el-table-column label = "企业登记注册类型 " align = "center" prop = "supplierTyp e" width = "14 0" / >
< el-table-column label = "企业名称 " align = "center" prop = "supplierName " width = "18 0" / >
< el-table-column label = "法定代表人 " align = "center" prop = "supplierPerson " width = "12 0" / >
< el-table-column label = "统一社会信用代码 " align = "center" prop = "supplierCod e" width = "18 0" / >
< el-table-column label = "负责人 " align = "center" prop = "personNam e" width = "10 0" / >
< el-table-column label = "负责人电话" align = "center" prop = "personPhone" width = "120" / >
< el-table-column label = "纳税规模" align = "center" prop = "taxScale" width = "120" / >
< el-table-column label = "资质等级" align = "center" prop = "supplierLivel" width = "120" / >
< el-table-column label = "审核状态" align = "center" prop = "state" width = "120" >
< template # default = "scope" >
< dict -tag:options = "wf_business_status" :value = "scope.row.state" > < / dict-tag >
< el -tag: type = "scope.row.state === '1' ? 'success' : scope.row.state === '2' ? 'danger' : 'warning'" >
{ { scope . row . state === '1' ? '已通过' : scope . row . state === '2' ? '未通过' : '待审核' } }
< / el-tag >
< / template >
< / el-table-column >
< el-table-column label = "入库资料" align = "center" prop = "inputFile" width = "20 0" >
< el-table-column label = "入库资料" align = "center" prop = "inputFile" width = "1 20" >
< template # default = "scope" >
< el-link :hre f= "scope.row.inputFile":underline = "false" = v-if = "scope.row.inputFile" >
< el -button size = "mini" class = "el-icon-document" > 查看文件 < / el-button >
< / el-link >
< el-link v-i f= "scope.row.inputFile" :href="scope.row.inputFile" target= "_blank" underline > 查看文件 < / el-link >
< / template >
< / el-table-column >
< el-table-column label = "操作" align = "center" class -name = " small -padding fixed -width " >
< el-table-column label = "操作" align = "center" class -name = " small -padding fixed -width " width = "120" >
< template # default = "scope" >
< el-tooltip content = "修改" placement = "top" >
< el-button
@ -96,67 +109,256 @@
< / el-table-column >
< / el-table >
<!-- 分页 -- >
< pagination v-show = "total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" / >
< / el-card >
<!-- 新增 / 修改对话框 ： 添加3个字段表单 -- >
< el-dialog :title = "dialog.title" v-model = "dialog.visible" width="5 00px" append -to -body >
< el-form ref = "supplierInputFormRef" :model = "form" :rules = "rules" label -width = " 10 0px " >
< el-form-item label = "供应商名称" prop = "supplierName"
< el-input v-model = "form.supplierName" placeholder="请输入供应商名称" maxlength="50" / >
< / el-form-item >
< el-form-item label = "供应商负责人 " prop = "supplierPerson " >
< el-inpu t v-model = "form.supplierPerson " placeholder="请输入 供应商负责人" maxlength="20" / >
< / el-form-item >
< el-form-item label = "负责人电话" prop = "personPhone" >
< el-input v-model = "form.personPhone" placeholder="请输入负责人电话" maxlength="11" / >
< / el-form-item >
< el-form-item label = "供应商类型" prop = "supplierType" >
< el-select v-model = "form.supplierType" placeholder="请选择供应商类型" >
< el-option label = "劳务" value = "劳务 " > < / el-option >
< el-option label = "技术服务" value = "技术服务" > < / el-option >
< el-option label = "物资设备" value = "物资设备" > < / el-option >
< / el-select >
< / el-form-item >
< el-form-item label = "入库资料" prop = "inputFile" >
< file-upload
v-model = "form.inputFile"
:fileType = "['pdf']"
:autoUpload = "false"
ref = "fileUploadRef"
: method = "form.id ? 'put' : 'post'"
: data = "{
supplierType: form.supplierType,
supplierName: form.supplierName,
supplierPerson: form.supplierPerson,
personPhone: form.personPhone,
id: form.id
}"
uploadUrl = "/supplierInput/supplierInput"
:limit = "1"
:onUploadSuccess = "handleUploadSuccess"
@handleChange ="change"
showFileList
>
< div >
< el-button type = "primary" > 上传文件 < / el-button > < br / >
< transition-group
class = "upload-file-list el-upload-list el-upload-list--text"
name = "el-fade-in-linear"
tag = "ul"
@click.stop
v-if = "fileUrl"
<!-- 新增 / 修改对话框 -- >
< el-dialog :title = "dialog.title" v-model = "dialog.visible" width="8 00px" append -to -body >
< el-form ref = "supplierInputFormRef" :model = "form" :rules = "rules" label -width = " 14 0px " >
<!-- 第一行 ： 基础信息 （ 2 列布局 ） --
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "企业登记注册类型 " prop = "supplierType " >
< el-selec t v-model = "form.supplierType " placeholder="请选择 供应商类型" @change="handleTypeChange" >
< el -option label = "劳务" value = "劳务" > < / el-option >
< el-option label = "技术服务" value = "技术服务" > < / el-option >
< el-option label = "物资设备" value = "物资设备" > < / el-option >
< / el-select >
< / el-form-item >
< / el-col >
< el-col :span = "12 " >
< el-form-item label = "企业名称" prop = "supplierName" >
< el-input v-model = "form.supplierName" placeholder="请输入企业名称" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第二行 ： 企业信息 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "企业法定代表人" prop = "supplierPerson" >
< el-input v-model = "form.supplierPerson" placeholder="请输入法定代表人" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "统一社会信用代码" prop = "supplierCode" >
< el-input v-model = "form.supplierCode" placeholder="请输入统一社会信用代码" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第三行 ： 地址与联系人 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "企业注册地址" prop = "supplierAddres" >
< el-input v-model = "form.supplierAddres" placeholder="请输入注册地址" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "负责人姓名" prop = "personName" >
< el-input v-model = "form.personName" placeholder="请输入负责人姓名" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第四行 ： 联系电话与纳税规模 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "负责人联系电话" prop = "personPhone" >
< el-input v-model = "form.personPhone" placeholder="请输入联系电话" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "纳税规模" prop = "taxScale" >
< el-select v-model = "form.taxScale" placeholder="请选择纳税规模" >
< el -option label = "一般纳税人" value = "一般纳税人" > < / el-option >
< el-option label = "小规模纳税人" value = "小规模纳税人" > < / el-option >
< / el-select >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第五行 ： 银行信息 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "开户行户名" prop = "bankPersonName" >
< el-input v-model = "form.bankPersonName" placeholder="请输入开户行户名" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "开户银行" prop = "bankName" >
< el-input v-model = "form.bankName" placeholder="请输入开户银行" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第六行 ： 银行账号与经营范围 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "开户行账号" prop = "bankAccount" >
< el-input v-model = "form.bankAccount" placeholder="请输入开户行账号" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "经营范围" prop = "scope" >
< el-input v-model = "form.scope" placeholder="请输入经营范围" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第七行 ： 企业资质 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "企业资质等级" prop = "supplierLivel" >
< el-input v-model = "form.supplierLivel" placeholder="请输入资质等级" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "发证日期" prop = "issueDate" >
< el-date-picker v-model = "form.issueDate" type="date" placeholder="请选择发证日期" / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第八行 ： 证书有效期与营业额 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
< el-form-item label = "证书有效期" prop = "certificateValidity" >
< el-date-picker v-model = "form.certificateValidity" type="date" placeholder="请选择证书有效期" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "近三年营业额" prop = "pastThreeYears" >
< el-input v-model = "form.pastThreeYears" placeholder="请输入近三年营业额" clearable / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第九行 ： 安全生产许可证 （ 仅劳务类型显示 ） -- >
< el-row :gutter = "20" class = "mb-4" v-if = "form.supplierType === '劳务'" >
< el -col :span = "12" >
< el-form-item label = "安全生产许可证编号" prop = "safeCode" >
< el-input v-model = "form.safeCode" placeholder="请输入许可证编号" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "安全生产许可证发证日期" prop = "safeCodeData" >
< el-date-picker v-model = "form.safeCodeData" type="date" placeholder="请选择发证日期" / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第十行 ： 安全生产许可证有效期 （ 仅劳务类型显示 ） -- >
< el-row :gutter = "20" class = "mb-4" v-if = "form.supplierType === '劳务'" >
< el -col :span = "12" >
< el-form-item label = "安全生产许可证有效期" prop = "safeCertificateValidity" >
< el-input v-model = "form.safeCertificateValidity" placeholder="请输入有效期" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
<!-- 空列占位 -- >
< / el-col >
< / el-row >
<!-- 第十一行 ： 注册人员数量 （ 仅劳务类型显示 ） -- >
< el-row :gutter = "20" class = "mb-4" v-if = "form.supplierType === '劳务'" >
< el -col :span = "12" >
< el-form-item label = "一建建造师" prop = "build1" >
< el-input v-model = "form.build1" placeholder="请输入一建建造师数量" clearable / >
< / el-form-item >
< el-form-item label = "二建建造师" prop = "build2" >
< el-input v-model = "form.build2" placeholder="请输入二建建造师数量" clearable / >
< / el-form-item >
< el-form-item label = "注册造价工程师" prop = "build3" >
< el-input v-model = "form.build3" placeholder="请输入注册造价工程师数量" clearable / >
< / el-form-item >
< el-form-item label = "其他（分别写）" prop = "build4" >
< el-input v-model = "form.build4" placeholder="请输入其他人员数量" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
<!-- 空列占位 -- >
< / el-col >
< / el-row >
<!-- 第十二行 ： 职称人员数量 （ 仅劳务类型显示 ） -- >
< el-row :gutter = "20" class = "mb-4" v-if = "form.supplierType === '劳务'" >
< el -col :span = "12" >
< el-form-item label = "职称人员数量" prop = "personnelNumber1" >
< el-input v-model = "form.personnelNumber1" placeholder="请输入职称人员数量" clearable / >
< / el-form-item >
< el-form-item label = "职称人员数量" prop = "personnelNumber2" >
< el-input v-model = "form.personnelNumber2" placeholder="请输入职称人员数量" clearable / >
< / el-form-item >
< el-form-item label = "职称人员数量" prop = "personnelNumber3" >
< el-input v-model = "form.personnelNumber3" placeholder="请输入职称人员数量" clearable / >
< / el-form-item >
< el-form-item label = "职称人员数量" prop = "personnelNumber4" >
< el-input v-model = "form.personnelNumber4" placeholder="请输入职称人员数量" clearable / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
<!-- 空列占位 -- >
< / el-col >
< / el-row >
<!-- 第十三行 ： 审核状态 -- >
< el-row :gutter = "20" class = "mb-4" >
< el-col :span = "12" >
<!-- 空列占位 ， 保持布局对称 -- >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "审核状态" prop = "state" v-if = "dialog.title === '修改供应商入库'" >
< el -select v-model = "form.state" disabled >
< el-option label = "待审核" value = "0" > < / el-option >
< el-option label = "已通过" value = "1" > < / el-option >
< el-option label = "未通过" value = "2" > < / el-option >
< / el-select >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 第十四行 ： 入库资料上传 -- >
< el-row class = "mb-4" >
< el-col :span = "24" >
< el-form-item label = "入库资料" prop = "inputFile" >
< file-upload
v-model = "form.inputFile"
: fileType = "['doc', 'docx', 'pdf']"
:autoUpload = "false"
ref = "fileUploadRef"
: method = "form.id ? 'put' : 'post'"
:data = "form"
uploadUrl = "/supplierInput/supplierInput"
:limit = "1"
:onUploadSuccess = "handleUploadSuccess"
@handleChange ="change"
showFileList
>
< li style = "margin-top: 10px" class = "el-upload-list__item ele-upload-list__item-content" >
< el-link :href = "`${fileUrl}`" :underline = "false" target = "_blank" >
< el-button class = "el-icon-document" > 下载文件 < / el-button >
< / el-link >
< / li >
< / transition-group >
< / div >
< / file-upload >
< / el-form-item >
< div >
< el-button type = "primary" > 上传文件 < / el-button > < br / >
< transition-group
class = "upload-file-list el-upload-list el-upload-list--text"
name = "el-fade-in-linear"
tag = "ul"
@click.stop
v-if = "fileUrl"
>
< li style = "margin-top: 10px" class = "el-upload-list__item ele-upload-list__item-content" >
< el-link :href = "`${fileUrl}`" :underline = "false" target = "_blank" >
< el-button class = "el-icon-document" > 下载文件 < / el-button >
< / el-link >
< / li >
< / transition-group >
< / div >
< / file-upload >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
<!-- 对话框底部按钮 -- >
< template # footer >
< div class = "dialog-footer" >
< el-button :loading = "buttonLoading" type = "primary" @click ="submitForm" > 确 定 < / el -button >
@ -168,22 +370,23 @@
< / template >
< script setup name = "SupplierInput" lang = "ts" >
import { ComponentInternalInstance , getCurrentInstance , onMounted , ref , reactive , toRefs , computed } from 'vue' ;
import { ElFormInstance } from 'element-plus' ;
import { listSupplierInput , getSupplierInput , delSupplierInput , addSupplierInput , updateSupplierInput } from '@/api/supplierInput/supplierInput' ;
import { SupplierInputVO , SupplierInputQuery , SupplierInputForm } from '@/api/supplierInput/supplierInput/types' ;
// 补充类型定义（ ， ）
interface DialogOption {
visible : boolean ;
title : string ;
}
interface PageData < F , Q > {
form : F ;
queryParams : Q ;
rules : Record < string , any [ ] > ;
}
import { SupplierInputVO , SupplierInputQuery , SupplierInputForm , PageData , DialogOption } from '@/api/supplierInput/supplierInput/types' ;
import Pagination from '@/components/Pagination/index.vue' ;
import RightToolbar from '@/components/RightToolbar/index.vue' ;
import FileUpload from '@/components/FileUpload/index.vue' ;
// 实例代理
const { proxy } = getCurrentInstance ( ) as ComponentInternalInstance ;
const fileUploadRef = ref ( null ) ;
// 组件引用
const fileUploadRef = ref < InstanceType < typeof FileUpload > | null > ( null ) ;
const queryFormRef = ref < ElFormInstance > ( ) ;
const supplierInputFormRef = ref < ElFormInstance > ( ) ;
// 基础数据
const supplierInputList = ref < SupplierInputVO [ ] > ( [ ] ) ;
const buttonLoading = ref ( false ) ;
const loading = ref ( true ) ;
@ -192,180 +395,269 @@ const ids = ref<Array<string | number>>([]);
const single = ref ( true ) ;
const multiple = ref ( true ) ;
const total = ref ( 0 ) ;
const queryFormRef = ref < ElFormInstance > ( ) ;
const supplierInputFormRef = ref < ElFormInstance > ( ) ;
const fileUrl = ref ( '' ) ;
// 对话框配置
const dialog = reactive < DialogOption > ( {
visible : false ,
title : ''
} ) ;
const { wf _business _status } = toRefs ( proxy . useDict ( 'wf_business_status' ) ) ;
// 初始化表单：
const initFormData : SupplierInputForm = {
// 初始化表单数据
const initFormData : any = {
id : undefined ,
supplierName : undefined , // 新增
supplierPerson : undefined , // 新增
personPhone : undefined , // 新增
supplierType : undefined ,
inputFil e: undefined
supplierNam e: undefined ,
supplierPerson : undefined ,
supplierCode : undefined ,
supplierAddres : undefined ,
personName : undefined ,
personPhone : undefined ,
bankPersonName : undefined ,
bankName : undefined ,
bankAccount : undefined ,
taxScale : undefined ,
scope : undefined ,
supplierLivel : undefined ,
issueDate : undefined ,
certificateValidity : undefined ,
pastThreeYears : undefined ,
safeCode : undefined ,
safeCodeData : undefined ,
safeCertificateValidity : undefined ,
registeredNumber : undefined ,
personnelNumber : undefined ,
fileId : undefined ,
inputFile : undefined ,
state : '0' // 新增默认待审核
} ;
// 核心数据（表单+查询参数）
const data = reactive < PageData < SupplierInputForm , SupplierInputQuery > > ( {
form : { ... initFormData } ,
queryParams : {
pageNum : 1 ,
pageSize : 10 ,
supplierName : undefined , // 新增：搜索参数
supplierPerson : undefined , // 新增：搜索参数
personPhone : undefined , // 新增：搜索参数
supplierType : undefined ,
supplierName : undefined ,
state : undefined ,
inputFile : undefined ,
params : { }
} ,
rules : {
// 新增：
supplierName : [ { required : true , message : '请输入供应商名称' , trigger : 'blur' } ] ,
supplierPerson : [ { required : true , message : '请输入供应商负责人' , trigger : 'blur' } ] ,
personPhone : [
{ required : true , message : '请输入负责人电话' , trigger : 'blur' } ,
{ pattern : /^1[3-9]\d{9}$/ , message : '请输入正确的手机号格式' , trigger : 'blur' }
] ,
supplierType : [ { required : true , message : '请选择供应商类型' , trigger : 'change' } ] ,
id : [ { required : true , message : '不能为空' , trigger : 'blur' } ]
}
} ) ;
const { queryParams , form , rules } = toRefs ( data ) ;
// 解构响应式数据
const { queryParams , form } = toRefs ( data ) ;
// 动态验证规则：仅劳务类型需要校验【安全生产许可证+人员数量】字段
const rules = computed ( ( ) => {
const baseRules = {
supplierType : [ { required : true , message : '请选择企业登记注册类型' , trigger : 'change' } ] ,
supplierName : [ { required : true , message : '请输入企业名称' , trigger : 'blur' } ] ,
supplierPerson : [ { required : true , message : '请输入法定代表人' , trigger : 'blur' } ] ,
supplierCode : [ { required : true , message : '请输入统一社会信用代码' , trigger : 'blur' } ] ,
personName : [ { required : true , message : '请输入负责人姓名' , trigger : 'blur' } ] ,
personPhone : [
{ required : true , message : '请输入负责人联系电话' , trigger : 'blur' } ,
{ pattern : /^1[3-9]\d{9}$/ , message : '请输入正确的手机号格式' , trigger : 'blur' }
] ,
id : [ { required : true , message : 'ID不能为空' , trigger : 'blur' } ] ,
build1 : [ { required : true , message : '请输入一建建造师数量' , trigger : 'change' } ]
} ;
// 仅当类型为"劳务"时，添加安全生产许可证+人员数量校验
if ( form . value . supplierType === '劳务' ) {
return {
... baseRules ,
// 安全生产许可证相关校验
safeCode : [ { required : true , message : '请输入安全生产许可证编号' , trigger : 'blur' } ] ,
safeCodeData : [ { required : true , message : '请选择安全生产许可证发证日期' , trigger : 'change' } ] ,
safeCertificateValidity : [ { required : true , message : '请输入安全生产许可证有效期' , trigger : 'blur' } ] ,
// 人员数量相关校验
registeredNumber : [ { required : true , message : '请输入注册人员数量' , trigger : 'blur' } ]
// personnelNumber: [{ required: true, message: '请输入职称人员数量', trigger: 'blur' }]
} ;
}
return baseRules ;
} ) ;
/** 企业类型变更时的处理：清空隐藏字段数据+重置校验 */
const handleTypeChange = ( ) => {
// 非劳务类型：清空安全生产许可证+人员数量字段
if ( form . value . supplierType !== '劳务' ) {
form . value . safeCode = undefined ;
form . value . safeCodeData = undefined ;
form . value . safeCertificateValidity = undefined ;
form . value . registeredNumber = undefined ;
form . value . personnelNumber = undefined ;
}
// 重置隐藏字段的校验状态，避免错误提示残留
supplierInputFormRef . value ? . clearValidate ( [ 'safeCode' , 'safeCodeData' , 'safeCertificateValidity' , 'registeredNumber' , 'personnelNumber' ] ) ;
} ;
/** 查询供应商入库列表 */
const getList = async ( ) => {
loading . value = true ;
const res = await listSupplierInput ( queryParams . value ) ;
s upplierInputList . value = res . rows ;
total . value = res . total ;
loading . value = false ;
try {
const res = await listS upplierInput ( queryParams . value ) ;
supplierInputList . value = res . rows ;
total . value = res . total ;
} catch ( error ) {
proxy ? . $modal . msgError ( '查询失败，请重试' ) ;
} finally {
loading . value = false ;
}
} ;
/** 取消按钮 */
/** 取消操作 */
const cancel = ( ) => {
reset ( ) ;
dialog . visible = false ;
} ;
/** 表单重置 */
/** 表单重置：清空所有字段 */
const reset = ( ) => {
form . value = { ... initFormData } ;
fileUrl . value = '' ;
form . value . inputFile = '' ;
supplierInputFormRef . value ? . resetFields ( ) ;
} ;
/** 搜索按钮 操作 */
/** 搜索操作 */
const handleQuery = ( ) => {
queryParams . value . pageNum = 1 ;
getList ( ) ;
} ;
/** 重置按钮操作 */
/** 重置搜索 */
const resetQuery = ( ) => {
queryFormRef . value ? . resetFields ( ) ;
handleQuery ( ) ;
} ;
/** 文件上传成功回调 */
= ( ) => {
? . . ( ) ;
. = ;
. value = ;
( ) ;
} ;
// const handleUploadSuccess = () => {
// proxy?. $modal. msgSuccess( '操作成功');
// dialog. visible = false;
// buttonLoading.value = false;
// getList();
// };
/** 文件选择变更回调 */
const change = ( fileList ) => {
/** 文件选择变更 */
const change = ( ) => {
fileUrl . value = '' ;
} ;
/** 多选框选中数据 */
/** 表格多选回调 */
const handleSelectionChange = ( selection : SupplierInputVO [ ] ) => {
ids . value = selection . map ( ( item ) => item . id ) ;
single . value = selection . length !== 1 ;
multiple . value = selection . length === 0 ;
} ;
/** 新增按钮 操作 */
/** 新增操作 */
const handleAdd = ( ) => {
reset ( ) ;
dialog . visible = true ;
dialog . title = '添加供应商入库' ;
} ;
/** 修改按钮操作： */
/** 修改操作 */
const handleUpdate = async ( row ? : SupplierInputVO ) => {
reset ( ) ;
const _id = row ? . id || ids . value [ 0 ] ;
const res = await getSupplierInput ( _id ) ;
form . value = {
... form . value ,
... res . data ,
inputFile : '' // 清空文件上传绑定值（保持原有逻辑）
} ;
fileUrl . valu e = res . data . inputFil e;
// 确保新字段回显（若接口返回字段名一致，可省略此步；若不一致需手动映射）
form . value . supplierName = res . data . supplierName ;
form . value . supplierPerson = res . data . supplierPerson ;
form . value . personPhone = res . data . personPhone ;
dialog . visible = true ;
dialog . title = '修改供应商入库' ;
if ( ! _id ) return proxy ? . $modal . msgWarning ( '请选择需要修改的数据' ) ;
try {
const res = await getSupplierInput ( _id ) ;
form . value = { ... form . value , ... res . data , inputFile : '' } ;
fileUrl . value = res . data . inputFile ;
dialog . visibl e = tru e;
dialog . title = '修改供应商入库' ;
} catch ( error ) {
proxy ? . $modal . msgError ( '获取数据失败，请重试' ) ;
}
} ;
/** 提交按钮：文件上传携带新字段参数 */
/** 提交表单 */
const submitForm = ( ) => {
console . log ( 1 ) ;
supplierInputFormRef . value ? . validate ( async ( valid : boolean ) => {
if ( valid ) {
buttonLoading . value = true ;
// 提交文件时携带所有表单参数（含新字段）
fileUploadRef . value
. submitUpload ( )
. then ( ( ) => {
if ( ! valid ) return ;
form . value . registeredNumber = ` ${ form . value . build1 } , ${ form . value . build2 } , ${ form . value . build3 } , ${ form . value . build4 } ` ;
form . value . personnelNumber = ` ${ form . value . personnelNumber1 } , ${ form . value . personnelNumber2 } , ${ form . value . personnelNumber3 } , ${ form . value . personnelNumber4 } ` ;
buttonLoading . value = true ;
try {
if ( fileUploadRef . value ) {
await fileUploadRef . value . submitUpload ( ) . then ( ( res ) => {
console . log ( res ) ;
if ( res == 'noFile' ) {
proxy ? . $modal . msgError ( '请上传文件' ) ;
return ;
}
proxy ? . $modal . msgSuccess ( '操作成功' ) ;
dialog . visible = false ;
buttonLoading . value = false ;
getList ( ) ;
} )
. catch ( ( ) => {
buttonLoading . value = false ; // 上传失败重置加载状态
} ) ;
}
} catch ( error ) {
proxy ? . $modal . msgError ( '提交失败，请重试' ) ;
} finally {
buttonLoading . value = false ;
}
} ) ;
} ;
/** 删除按钮 操作 */
/** 删除操作 */
const handleDelete = async ( row ? : SupplierInputVO ) => {
const _ids = row ? . id || ids . value ;
if ( ! _ids || ( Array . isArray ( _ids ) && _ids . length === 0 ) ) {
return proxy ? . $modal . msgWarning ( '请选择需要删除的数据' ) ;
}
try {
await proxy ? . $modal . confirm ( ` 是否确认删除供应商入库编号为" ${ _ids } "的数据项？ ` ) ;
await delSupplierInput ( _ids ) ;
proxy ? . $modal . msgSuccess ( '删除成功' ) ;
await ( ) ;
getList ( ) ;
} catch ( error ) {
// 取消删除不处理
} finally {
loading . value = false ;
proxy ? . $modal . msgError ( '删除失败，请重试' ) ;
}
} ;
/** 导出按钮操作：携带新字段搜索参数 */
/** 导出操作 */
const handleExport = ( ) => {
proxy ? . download ( 'supplierInput/supplierInput/export' , { ... queryParams . value } , ` supplierInput_ ${ new Date ( ) . getTime ( ) } .xlsx ` ) ;
} ;
/** 页面挂载时加载 列表 */
/** 页面挂载时查询 列表 */
onMounted ( ( ) => {
getList ( ) ;
} ) ;
< / script >
< style scoped lang = "scss" >
/* 文件上传样式 */
. upload - file - list {
margin : 0 ;
. el - upload - list _ _item {
border : 1 px solid # e4e7ed ;
line - height : 2 ;
margin - bottom : 0 ;
position : relative ;
}
}
. upload - file - list . ele - upload - list _ _item - content {
display : flex ;
justify - content : space - between ;
align - items : center ;
color : inherit ;
}
/* PDF预览样式（ ）
. pdf {
display : flex ;
justify - content : center ;
@ -387,23 +679,6 @@ onMounted(() => {
}
}
. upload - file - list {
margin : 0 ;
. el - upload - list _ _item {
border : 1 px solid # e4e7ed ;
line - height : 2 ;
margin - bottom : 0 ;
position : relative ;
}
}
. upload - file - list . ele - upload - list _ _item - content {
display : flex ;
justify - content : space - between ;
align - items : center ;
color : inherit ;
}
. Shadow {
align - items : center ;
background - color : rgba ( 0 , 0 , 0 , 0.5 ) ;
@ -422,10 +697,7 @@ onMounted(() => {
z - index : 1 ;
}
. ele - upload - list _ _item - content - action . el - link {
margin - right : 10 px ;
}
/* 头像上传样式（备用） */
. el - icon . avatar - uploader - icon {
border : 1 px dashed # cdd0d6 ;
border - radius : 6 px ;
@ -433,17 +705,31 @@ onMounted(() => {
position : relative ;
overflow : hidden ;
transition : 0.3 s ;
}
. el - icon . avatar - uploader - icon : hover {
border - color : # 409 eff ;
}
. el - icon . avatar - uploader - icon {
font - size : 28 px ;
color : # 8 c939d ;
width : 200 px ;
height : 178 px ;
text - align : center ;
& : hover {
border - color : # 409 eff ;
}
}
/* 表格操作列样式 */
. small - padding {
padding : 0 5 px ;
}
. fixed - width {
width : 120 px ;
}
/* 行间距调整 */
. mb8 {
margin - bottom : 8 px ;
}
. mb - 4 {
margin - bottom : 16 px ;
}
< / style >
