<script lang="ts" setup name="ListSourceAdd">
import { reactive, ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
import type { IformInline } from './list_interface'
import { exportFile } from '@/utils/exportUtils'
import { UploadFile } from '@/api/measure/file'
import { getSoucreLisListExport, getSoucreLisUpdate, getSoucreListAdd, getSoucreListDetail, getSoucreListlevelType } from '@/api/system/source'
const props = defineProps({
infoId: {
type: String,
default: '0',
},
buttonType: {
type: String,
default: '',
},
buttonArray: {
type: Array,
default: () => [],
},
})
const emit = defineEmits(['close'])
const formInline = ref({
businessContent: null,
supplierName: null,
supplierNo: null,
bankAccount: null,
bankAccountNumber: null,
bankName: null,
briefName: null,
businessScope: null,
companyAddress: null,
companyArea: null,
companyCity: null,
companyCountry: null,
companyProvince: null,
createTime: null,
director: null,
fax: null,
invoiceAddress: null,
invoiceArea: null,
invoiceCity: null,
invoiceCountry: null,
invoiceProvince: null,
mailbox: null,
minioFileName: null,
mobile: null,
phone: null,
postalCode: null,
remark: null,
taxNumber: null,
website: null,
traceSupplierPersonList: [],
})
const ruleFormRef = ref<FormInstance>()
const columns = [
{ text: '人员编号', value: 'personNo' },
{ text: '姓名', value: 'name' },
{ text: '工作部门', value: 'department' },
{ text: '职务', value: 'job' },
{ text: '联系方式', value: 'phone' },
]
const rules = ref({
supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
}) // 表单验证规则
const provinceList = ref([])
const fileList = ref<UploadUserFile[]>([])
const cityList = ref([])
const areaList = ref([])
const invoiceProvince = ref([])
const invoiceCityList = ref([])
const areaInvoiceList = ref([])
const dialogVisible = ref(false)
const addPersonList = ref({
personNo: '',
name: '',
department: '',
job: '',
phone: '',
})
const SelectionList = ref([])
const upload = ref<UploadInstance>()
const close = () => {
emit('close')
}
const getInfo = () => {
getSoucreListDetail({ id: props.infoId }).then((res) => {
// formInline.value = res.data
})
}
// 表格选中
const handleSelectionChange = (e: any) => {
SelectionList.value = e
}
// 获取公司地址省级
const getCompanyAddress = (type: string) => {
getSoucreListlevelType(type).then((res) => {
provinceList.value = res.data
})
}
// 公司地址省级的值发生改变
const changeProvince = (e: any) => {
cityList.value = []
areaList.value = []
formInline.value.companyCity = ''
formInline.value.companyArea = ''
getSoucreListlevelType(e).then((res) => {
cityList.value = res.data
})
}
// 公司地址市级发生改变
const cityChange = (e: any) => {
areaList.value = []
formInline.value.companyArea = ''
getSoucreListlevelType(e).then((res) => {
areaList.value = res.data
})
}
// 获取到开票地址省级
const getinvoiceProvinceList = (type: string) => {
getSoucreListlevelType(type).then((res) => {
invoiceProvince.value = res.data
})
}
// 开票地址省级发生改变
const changeInvoice = (e: any) => {
formInline.value.invoiceCity = ''
formInline.value.invoiceArea = ''
getSoucreListlevelType(e).then((res) => {
invoiceCityList.value = res.data
})
}
// 开票地址市级发生改变
const invoiceCityChange = (e: string) => {
formInline.value.invoiceArea = ''
getSoucreListlevelType(e).then((res) => {
areaInvoiceList.value = res.data
})
}
// 点击增加行
const addRoow = () => {
Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
dialogVisible.value = true
}
// 点击关闭
const handleClose = () => {
dialogVisible.value = false
}
// 点击弹窗的完成追加到表格数组中
const addPushList = () => {
formInline.value.traceSupplierPersonList.push(JSON.parse(JSON.stringify(addPersonList.value)))
handleClose()
}
// 删除行
const deleteList = () => {
formInline.value.traceSupplierPersonList = formInline.value.traceSupplierPersonList.filter((item) => {
return !SelectionList.value.includes(item)
})
}
// 点击提交/导出按钮
const getAddList = async (formEl: FormInstance | undefined, type: string) => {
if (type === '提交' && props.buttonType === '编辑') {
if (!formEl) { return }
await formEl.validate((valid, fields) => {
if (valid) {
ElMessageBox.confirm(
`确认${type}吗？`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
getSoucreListAdd(formInline.value).then((res) => {
if (res.code === 200) {
close()
}
})
})
}
})
}
else if (type === '提交' && props.buttonType !== '编辑') {
formInline.value.id = props.infoId
getSoucreLisUpdate(formInline.value).then((res) => {
if (res.code === 200) {
close()
}
})
}
else {
const params = {
businessContent: formInline.value.businessContent,
supplierName: formInline.value.supplierName,
supplierNo: formInline.value.supplierNo,
}
getSoucreLisListExport(params).then((res) => {
exportFile(res.data, '溯源供方详情')
})
}
}
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
ElMessage.warning('只能上传一个文件')
}
// 移除时触发
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
return ElMessageBox.confirm(
`确认移除${uploadFile.name}文件吗 ?`,
).then(
() => true,
() => false,
)
}
const isShow = ref(false)
const testForm = ref({
fileList: [],
fileContent: '',
})
const handleFileChange = (files: any, fileList: any) => {
testForm.value.fileList = fileList
const reader = new FileReader()
reader.readAsText(files.raw)
reader.onload = (e) => {
testForm.value.fileContent = e.target!.result?.replace(
/\n|\r\n/g,
'<br/>',
)
}
}
// 点击文件预览
const uploadShow = (e: any) => {
const URL = window.URL || window.webkitURL
window.open(URL.createObjectURL(e.raw))
}
// 上传请求
const uploadQuarterlyEvaluateFile = (file: File) => {
UploadFile(file).then((res) => {
if (res.code === 200) {
formInline.value.minioFileName = res.data.fileName
// fileList.value.push({
// name: res.data.fileName,
// url: res.data.fileId,
// // type: file.file.type,
// })
// 重置当前验证
ElMessage.success('文件上传成功')
}
})
}
if (props.buttonType !== '') {
getInfo()
}
</script>
<template>
<app-container>
<detail-page :title="`培训计划审批-${buttonType}`">
<template #btns>
<el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
{{ item }}
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<el-form
ref="ruleFormRef"
:model="formInline"
class="demo-form-inline"
label-width="auto"
label-position="right"
:rules="rules"
>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="溯源供方编号:" prop="supplierNo">
<el-input
v-model="formInline.supplierNo"
:placeholder="
buttonType === '详情' ? '无' : '请输入溯源供方编号'
"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="税号:" prop="taxNumber">
<el-input
v-model="formInline.taxNumber"
:placeholder="buttonType === '详情' ? '无' : '请输入税号'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邮编:">
<el-input
v-model="formInline.postalCode"
:placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="手机:">
<el-input
v-model="formInline.mobile"
:placeholder="buttonType === '详情' ? '无' : '请输入手机'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="公司名称:" prop="supplierName">
<el-input
v-model="formInline.supplierName"
:placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行账户名:">
<el-input
v-model="formInline.bankAccount"
:placeholder="buttonType === '详情' ? '无' : '请输入银行账户名'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人:">
<el-input
v-model="formInline.director"
:placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邮箱:">
<el-input
v-model="formInline.mailbox"
:placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="公司简称:">
<el-input
v-model="formInline.briefName"
:placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行名称:">
<el-input
v-model="formInline.bankName"
:placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="电话:">
<el-input
v-model="formInline.phone"
:placeholder="buttonType === '详情' ? '无' : '请输入电话'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="网址:">
<el-input
v-model="formInline.website"
:placeholder="buttonType === '详情' ? '无' : '请输入网址'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="业务内容:" prop="businessContent">
<el-input
v-model="formInline.businessContent"
:placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行账号:">
<el-input
v-model="formInline.bankAccountNumber"
:placeholder="buttonType === '详情' ? '无' : '请输入银行账号'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="传真:">
<el-input
v-model="formInline.fax"
:placeholder="buttonType === '详情' ? '无' : '请输入传真'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-form-item label="公司地址:">
<el-col :span="4">
<el-select
v-model="formInline.companyCountry"
placeholder="国别"
:disabled="buttonType === '详情'"
>
<el-option label="中国" value="中国" />
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.companyProvince"
placeholder="省"
:disabled="buttonType === '详情'"
@click="getCompanyAddress('0')"
@change="changeProvince"
>
<el-option
v-for="province in provinceList"
:key="province.id"
:label="province.areaName"
:value="province.id"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.companyCity"
placeholder="市"
:disabled="buttonType === '详情'"
@change="cityChange"
>
<el-option
v-for="city in cityList"
:key="city.id"
:label="city.areaName"
:value="city.id"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.companyArea"
placeholder="区/县"
:disabled="buttonType === '详情'"
>
<el-option
v-for="area in areaList"
:key="area.id"
:label="area.areaName"
:value="area.id"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-input
v-model="formInline.companyAddress"
placeholder="公司详细地址"
:disabled="buttonType === '详情'"
/>
</el-col>
</el-form-item>
</el-row>
<el-row :gutter="24" class="marg">
<el-form-item label="开票地址:">
<el-col :span="4">
<el-select
v-model="formInline.invoiceCountry"
placeholder="国别"
:disabled="buttonType === '详情'"
>
<el-option label="中国" value="中国" />
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.invoiceProvince"
placeholder="省"
:disabled="buttonType === '详情'"
@click="getinvoiceProvinceList('0')"
@change="changeInvoice"
>
<el-option
v-for="province in invoiceProvince"
:key="province.id"
:label="province.areaName"
:value="province.id"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.invoiceCity"
placeholder="市"
:disabled="buttonType === '详情'"
@change="invoiceCityChange"
>
<el-option
v-for="city in invoiceCityList"
:key="city.id"
:label="city.areaName"
:value="city.id"
/>
</el-select>
</el-col>
<el-col :span="4">
<el-select
v-model="formInline.invoiceArea"
placeholder="区/县"
:disabled="buttonType === '详情'"
>
<el-option
v-for="area in areaInvoiceList"
:key="area.id"
:label="area.areaName"
:value="area.id"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-input
v-model="formInline.invoiceAddress"
placeholder="开票详细地址"
:disabled="buttonType === '详情'"
/>
</el-col>
</el-form-item>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="14">
<el-form-item label="公司业务范围:">
<el-input
v-model="formInline.businessScope"
:placeholder="
buttonType === '详情' ? '无' : '请输入公司业务范围'
"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="14">
<el-form-item label="备注:">
<el-input
v-model="formInline.remark"
:placeholder="buttonType === '详情' ? '无' : '请输入备注'"
:disabled="buttonType === '详情'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="14">
<el-form-item label="附件:">
<el-upload
v-model:file-list="fileList"
enctype="multipart/form-data"
:http-request="uploadQuarterlyEvaluateFile"
:before-remove="beforeRemove"
:on-exceed="handleExceed"
:on-preview="uploadShow"
:on-change="handleFileChange"
:limit="1"
>
<el-button type="primary" :disabled="buttonType === '详情'">
上传
</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
<detail-block title="人员信息">
<template #btns>
<el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
删除行
</el-button>
<el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
增加行
</el-button>
</template>
<el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
</el-table>
</detail-block>
</app-container>
<el-dialog
v-model="dialogVisible"
title="添加人员信息"
width="30%"
:before-close="handleClose"
center
>
<el-form
ref="addPersonListForm"
label-position="left"
label-width="100px"
:model="addPersonList"
style="max-width: 460px;"
>
<el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
<el-input v-model="addPersonList[column.value]" />
</el-form-item>
</el-form>
<el-button type="primary" class="dialog-button" @click="addPushList">
完成
</el-button>
</el-dialog>
</template>
<style lang="scss" scoped>
.top-info {
width: 100%;
height: 50px;
padding-right: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
background-color: #fff;
.title {
width: 75%;
text-align: center;
}
}
.info-content {
margin-top: 10px;
padding: 30px;
border-radius: 10px;
background-color: #fff;
.content-top {
display: flex;
justify-content: space-around;
}
.info-dizhi {
margin-right: 155px;
}
}
.el-select {
width: 9vw;
margin-right: 15px;
}
.info-dizhi .el-input {
width: 20vw;
}
.input-width .el-input {
width: 30vw;
}
.info-appendix span {
margin-right: 25px;
}
.table-top {
margin-top: 10px;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 10px;
background-color: #fff;
.table-top-title {
width: 60vw;
text-align: center;
}
}
.dialog-button {
margin-left: 50%;
transform: translateX(-50%);
}
</style>
