You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udi-spms-vue/src/views/purchase/manufacturer/supManufacturerEditDialog.vue

771 lines
23 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<el-form
:model="inputQuery"
:rules="rules"
ref="inputQuery"
label-width="100px"
style="margin-top: -30px"
>
<el-card class="el-card">
<div style="float:right ">
<el-button
type="primary"
size="mini"
icon="search"
v-if="inputQuery.auditStatus == 0"
@click="addOrModifyCompany(0)"
>草稿保存
</el-button
>
<el-button
type="primary"
size="mini"
icon="search"
v-if="inputQuery.auditStatus == 0|| inputQuery.auditStatus == 6"
@click="onModifySubmit(6)"
>提交审核
</el-button
>
<el-button
type="primary"
size="mini"
icon="search"
v-if="inputQuery.auditStatus == 3|| inputQuery.auditStatus == 1|| inputQuery.auditStatus == 2"
@click="onModifySubmit(3)"
>提交审核
</el-button
>
</div>
<el-row :gutter="20" class="el-row" type="flex" style="margin-top: 40px">
<el-col :span="10" class="el-col" v-if="fromType==2">
<el-form-item label="所属供应商:" label-width="150px" prop="customerId">
<el-select
v-model="inputQuery.customerId"
filterable
remote
clearable="true"
:disabled="editType!=0"
reserve-keyword
placeholder="请输入供应商名称"
:remote-method="findMethod"
:loading="loading"
style="width: 100%;"
@change="unitChange"
>
<el-option
v-for="item in fromOptions"
:key="item.customerId"
:label="item.companyName"
:value="item.customerId"
>
<span style="float: left">{{ item.companyName }}</span>
</el-option>
</el-select>
</el-form-item
>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col">
<el-form-item label="生产企业:" label-width="150px" prop="companyName">
<el-input
size="small"
placeholder="请输入生产企业"
v-model="inputQuery.companyName"
@input="change()"
></el-input>
</el-form-item>
</el-col>
<el-col :span="10" class="el-col">
<el-form-item label="社会信用号:" label-width="150px" prop="creditCode">
<el-input
size="small"
placeholder="请输入社会信用号"
v-model="inputQuery.creditCode"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col">
<el-form-item label="境内境外企业:" label-width="150px" prop="companyType">
<el-select
size="small"
v-model="inputQuery.companyType"
placeholder="请选择境内境外企业"
style="width: 100%;"
@input="companyTypeChange()"
>
<el-option label="境内企业" value="1"></el-option>
<el-option label="境外企业" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" class="el-col">
<el-form-item label="登记状态:" label-width="150px" prop="registerStatus">
<el-select
size="small"
v-model="inputQuery.registerStatus"
placeholder="请选择登记状态"
style="width: 100%;"
>
<el-option label="续存(在营,开业,在册)" value="1"></el-option>
<el-option label="吊销" value="2"></el-option>
<el-option label="注销" value="3"></el-option>
<el-option label="迁出" value="4"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col">
<el-form-item label="所在地区:" label-width="150px" prop="placeArea">
<el-cascader
size="small"
:options="options"
v-model="selectedOptions"
placeholder="请选择所在地区"
style="width: 100%"
@change="handleChange"
>
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="10" class="el-col">
<el-form-item label="生产地区:" label-width="150px" prop="productionArea">
<el-cascader
size="small"
:options="options"
v-model="selectedOptions2"
placeholder="请选择生产地区"
style="width: 100%"
@change="handleChange2"
>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col">
<el-form-item label="所在地址:" label-width="150px" prop="placeAddress">
<el-input
size="small"
placeholder="请输入内容"
v-model="inputQuery.placeAddress"
></el-input>
</el-form-item>
</el-col>
<el-col :span="10" class="el-col">
<el-form-item label="生产地址:" label-width="150px" prop="productionAddress">
<el-input
size="small"
placeholder="请输入内容"
v-model="inputQuery.productionAddress"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col">
<el-form-item label="代理商名称:" label-width="150px" prop="agentName">
<el-input
size="small"
placeholder="请输入代理商名称"
v-model="inputQuery.agentName"
:disabled="inputQuery.companyType==1"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="20" class="el-col">
<el-form-item label="备注:" label-width="150px" prop="remark">
<el-input
type="textarea"
size="small"
placeholder="请输入内容"
v-model="inputQuery.remark"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="el-card">
<div style="float:right ">
<el-button type="primary" size="mini" icon="search" @click="selectCert"
>选入资质证书
</el-button
>
<el-button
type="primary"
size="mini"
icon="search"
@click="addCert()"
>添加资质证书
</el-button
>
</div>
<el-table v-loading="certLoading" :data="certList" style="width: 100%;margin-top: 40px" border
highlight-current-row
>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column label="证书名称" prop="name"></el-table-column>
<el-table-column label="证书编号" prop="code"></el-table-column>
<el-table-column label="生效期" prop="vailDate"></el-table-column>
<el-table-column label="失效期" prop="expireDate"></el-table-column>
<el-table-column label="审核状态" prop="auditStatus" width="100">
<template slot-scope="scope">
<el-tag :type="(scope.row.auditStatus) | statusFilterType">
{{ checkFlag[scope.row.auditStatus] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="审核说明" prop="auditComment"></el-table-column>
<el-table-column label="状态" prop="status" width="120">
<template slot-scope="scope">
<el-tag :type="(scope.row.status) | statusType">
{{ statusFlag[scope.row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button>
<el-button type="text" size="mini" @click.native="showImgViewer(scope.row)"></el-button>
<el-button type="text" size="small"
v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6"
@click.native="deleteCompanyCert(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>
<pagination
v-show="certTotal>0"
:total="certTotal"
:page.sync="certQuery.page"
:limit.sync="certQuery.limit"
@pagination="certHandleCurrentChange"
></pagination>
</el-card>
<el-dialog
title="添加资质证书"
:visible.sync="addCertVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="70%"
v-if="addCertVisible"
append-to-body
@close="closeLocalDialog"
>
<companyAddCert
:closeDialog="closeLocalDialog"
:inputQuery="inputQuery"
:addType="addType"
:editTye="editTye"
></companyAddCert>
</el-dialog>
<el-dialog
title="选入资质证书"
:visible.sync="selectCertVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="70%"
v-if="selectCertVisible"
append-to-body
@close="closeLocalDialog"
>
<supCertSetSelectDialog
:certType="certType"
:manufacturerId="manufacturerId"
:customerId="customerId"
:closeDialog="closeLocalDialog"
></supCertSetSelectDialog>
</el-dialog>
</el-form>
</div>
</template>
<script>
import { getCompanyInfo, addOrModifyCompany } from '../../../api/purchase/supManufacturer'
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode
} from 'element-china-area-data'
import { filterCompanyCert, deleteCompanyCert, updateCompanyCert } from '../../../api/purchase/companyCert'
import companyAddCert from '@/views/purchase/cert/supCertAddDialog'
import draggable from 'vuedraggable'
import { getSupComapnys, previewImage } from '@/api/purchase/supCompany'
import { getUUID } from '@/utils/strUtil'
import supCertSetSelectDialog from '@/views/purchase/cert/supCertSetSelectDialog'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: 'supManufacturerEdit',
props: {
addCloseDialog: {
type: Function,
required: true
},
inputQuery: {
type: Object,
required: true
},
editType: {
type: Object,
required: true
},
fromType: {
type: Object,
required: true
}
},
data() {
return {
BASE_URL: process.env.VUE_APP_BASE_API,
loading: false,
classesDisplay: false,
selectedOptions: [],
selectedOptions2: [],
imgViewerVisible: false,
imgList: [],
options: regionData,
rules: {
customerId: [
{
required: true,
message: '请选择所属供应商',
trigger: 'blur'
}
],
companyName: [
{
required: true,
message: '请输入企业名称',
trigger: 'blur'
}
],
creditCode: [
{
required: true,
message: '请输入统一社会信用代码',
trigger: 'blur'
}
],
companyType: [
{
required: true,
message: '请选择企业类型',
trigger: 'change'
}
],
registerStatus: [
{
required: true,
message: '请选择登记状态',
trigger: 'change'
}
],
placeArea: [
{
required: true,
message: '请选择所在地区',
trigger: 'change'
}
],
placeAddress: [
{
required: true,
message: '请输入所在地址',
trigger: 'change'
}
],
legalPersonName: [
{
required: true,
message: '请输入法人姓名',
trigger: 'change'
}
],
legalPersonPapersType: [
{
required: true,
message: '请选择法人证件类型',
trigger: 'change'
}
],
legalPersonPapersCode: [
{
required: true,
message: '请输入法人证件号码',
trigger: 'change'
}
]
},
uploadUrl: '',
fileList: [],
fileUrl: '',
certFileUrl: '',
url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
certQuery: {
customerId: null,
manufacturerIdFk: null,
page: 1,
limit: 20,
type: 2
},
certList: [],
certTotal: 0,
certLoading: false,
addCertVisible: false,
fromOptions: [],
idQuery: {
id: ''
},
addType: '2', //证书类型1:供应商2.生产企业3.产品品种
checkFlag: {
0: '草稿',
1: '已通过',
2: '已拒绝',
3: '变更未审核',
6: '未审核'
},
statusFlag: {
0: '有效',
1: '失效'
},
editTye: 1,
formName: 1,
formMap: {
1: '新增生产企业资质证书',
2: '编辑生产企业资质证书'
},
manufacturerId: null,
customerId: null,
selectCertVisible: false,
certType: 2
}
},
created() {
if (this.editType == 0) {
this.inputQuery.manufacturerId = getUUID('')
} else {
this.certQuery.customerId = this.inputQuery.customerId
this.selectedOptions = this.inputQuery.placeAreaCode.split(',')
if (this.inputQuery.productionAreaCode != '' && this.inputQuery.productionAreaCode != null && this.inputQuery.productionAreaCode != undefined) {
this.selectedOptions2 = this.inputQuery.productionAreaCode.split(',')
}
}
this.certQuery.manufacturerIdFk = this.inputQuery.manufacturerId
this.manufacturerId = this.inputQuery.manufacturerId
this.customerId = this.inputQuery.customerId
// this.getData();
this.getCompanyCertList()
this.findMethod()
this.uploadUrl = this.BASE_URL + '/udiwms/upload/register/file'
this.fileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
},
components: {
draggable,
companyAddCert, supCertSetSelectDialog, ElImageViewer
},
methods: {
onModifySubmit(type) {
this.addOrModifyCompany(type)
},
addOrModifyCompany(type) {
this.$refs['inputQuery'].validate(valid => {
if (valid) {
let formData = JSON.parse(JSON.stringify(this.inputQuery))
formData.auditStatus = type
this.loading = true
let urlName = this.editType == 0 ? 'add' : 'update'
addOrModifyCompany(formData, urlName).then(response => {
this.loading = false
if (response.code === 20000) {
this.addCloseDialog(true)
this.$message.success('保存成功')
} else {
this.$message.error(response.message)
}
})
} else {
console.log('error submit!!')
return false
}
})
},
certHandleCurrentChange(val) {
this.certQuery.page = val.page
this.getCompanyCertList()
},
companyTypeChange(val) {
if (this.inputQuery.companyType == 1 && this.inputQuery.agentName!=null) {
this.inputQuery.agentName = null
}
},
getCompanyCertList() {
this.certLoading = true
filterCompanyCert(this.certQuery)
.then((response) => {
this.certLoading = false
this.certList = response.data.list || []
this.certTotal = response.data.total
})
.catch(() => {
this.certLoading = false
this.certList = []
})
},
addCert(row) {
if (this.$isNotBlank(row)) {
this.formName = 2
this.inputQuery.formData = row
this.editTye = 2
} else {
this.formName = 1
this.inputQuery.formData = {}
this.editTye = 1
}
this.addCertVisible = true
},
selectCert() {
this.customerId = this.inputQuery.customerId
this.selectCertVisible = true
},
toViewCompanyCert(row) {
window.open(this.certFileUrl + row.filePath)
},
deleteCompanyCert(row) {
this.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.certLoading = true
let tquery = {
id: row.id,
filePath: row.filePath
}
deleteCompanyCert(tquery)
.then((response) => {
this.certLoading = false
if (response.code === 20000) {
this.getCompanyCertList()
this.$message({
type: 'success',
message: '删除成功!'
})
} else {
this.$message.error(response.message)
}
})
.catch(() => {
this.certLoading = false
})
}).catch(() => {
})
},
isAssetTypeAnImage(ext) {
return [
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
},
showImgViewer(row) {
this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
this.imgList = []
previewImage({ imageUrl: row.filePath, certFileUrl: this.certFileUrl }).then(response => {
if (response.code === 20000) {
this.imgList = response.data
}
})
this.imgViewerVisible = true
const m = (e) => {
e.preventDefault()
}
document.body.style.overflow = 'hidden'
document.addEventListener('touchmove', m, false) // 禁止页面滑动
},
closeImgViewer() {
this.imgViewerVisible = false
const m = (e) => {
e.preventDefault()
}
document.body.style.overflow = 'auto'
document.removeEventListener('touchmove', m, true)
},
disableCert(row, status) {
row.status = status
updateCompanyCert(row).then(response => {
this.loading = false
if (response.code === 20000) {
this.$message.success('更新成功!')
this.getCompanyCertList()
} else {
this.$message.error(response.message)
}
})
},
closeLocalDialog() {
this.addCertVisible = false
this.selectCertVisible = false
this.getCompanyCertList()
},
findMethod(query) {
this.fromOptions = []
let cQuery = {
companyName: query
}
getSupComapnys(cQuery)
.then((response) => {
this.loading = false
this.fromOptions = response.data.list || []
})
.catch(() => {
this.loading = false
})
}
,
unitChange(val) {
this.certQuery.customerId = val
},
handleChange(value) {
this.inputQuery.placeArea =
CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
console.log(this.inputQuery.placeArea)
this.inputQuery.placeAreaCode = value.toString()
},
handleChange2(value) {
this.inputQuery.productionArea =
CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
this.inputQuery.productionAreaCode = value.toString()
},
uploadHandleRemove(file, fileList) {
console.log(file, fileList)
},
uploadHandlePreview(file) {
console.log(file)
console.log(this.fileList)
},
uploadHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
},
uploadOnchange(file, fileList) {
let fileName = file.name
let uid = file.uid
let pos = fileName.lastIndexOf('.')
let lastName = fileName.substring(pos, fileName.length)
if (lastName.toLowerCase() !== '.jpg' && lastName.toLowerCase() !== '.png') {
this.$message.error('上传文件只能是 .jpg,.png 格式')
for (let i = 0; i < fileList.length; i++) {//从list删除
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
return
}
// 限制上传文件的大小
const isLt = file.size / 1024 / 1024 / 30 <= 1
if (!isLt) {
this.$message.error('上传文件大小不能超过 30MB')
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
}
return isLt
},
uploadHandleSuccess(response, file, fileList) {
console.log(response)
if (response.code === 20000) {
this.inputQuery.newFilePath = response.data.name
this.onModifySubmit('inputQuery')
} else {
this.$message.error('文件上传失败:' + response.message)
}
},
uploadHandleError() {
}
},
filters: {
statusFilterType(status) {
const statusMap = {
0: 'warning',
1: 'success',
2: 'danger',
6: 'warning'
}
return statusMap[status]
}
}
}
</script>
<style>
.itemTag {
float: left;
text-align: left;
margin-top: 10px;
width: 120px;
}
.text {
width: 100%;
font-size: 13px;
font-family: "Microsoft YaHei";
}
.el-card {
margin-right: 20px;
margin-top: 15px;
/*transition: all .5s;*/
}
.el-row {
display: flex;
flex-wrap: wrap;
}
.el-col {
border-radius: 4px;
flex-wrap: wrap;
}
</style>