<template>
|
<div class="cr-contianer">
|
<el-form
|
ref="dialogRef"
|
:model="formInline"
|
:rules="formRules"
|
label-position="left"
|
label-width="auto"
|
class="crm-create-box">
|
<el-form-item
|
v-for="(item, index) in tableList"
|
:key="index"
|
:prop="item.field"
|
class="crm-create-block-item">
|
<div
|
slot="label"
|
style="display: inline-block;">
|
<div style="margin:5px 0;font-size:16px;word-wrap:break-word;word-break:break-all;">
|
{{ item.value }}：
|
</div>
|
</div>
|
<template v-if="item.type === 'select'">
|
<el-select
|
v-model="formInline[item.field]"
|
filterable
|
placeholder="请选择"
|
style='width: 100%;'
|
@change='getSelectVal(item.field)'>
|
<el-option
|
v-for="optionItem in optionsList[item.field].list"
|
:key="optionItem.value"
|
:label="optionItem.name"
|
:value="optionItem.value"/>
|
</el-select>
|
</template>
|
<template v-else-if="item.type === 'text'">
|
<span class="showText">{{formInline[item.field] || '暂无'}}</span>
|
</template>
|
<el-tooltip effect="light" :disabled='!item.tips' :content="item.tips" placement="right" v-else>
|
<el-input
|
class='disInput'
|
placeholder="请输入"
|
v-model="formInline[item.field]"
|
:disabled="item.disabled"/>
|
</el-tooltip>
|
</el-form-item>
|
<div class="btm" :style="crmType==='contract'?'margin-left: 80px;':'margin-left: 100px;'">
|
<section
|
v-if="files.length > 0"
|
class="file-cont">
|
<flexbox class="f-header">
|
<img
|
class="f-logo"
|
src="@/assets/img/send_file.png">
|
<div class="f-name">附件</div>
|
</flexbox>
|
<div class="f-body">
|
<flexbox
|
v-for="(item, index) in files"
|
:key="index"
|
class="f-item">
|
<img
|
:src="item.icon"
|
class="f-img">
|
<div class="f-name">{{ item.name +(item.size?'('+item.size+')':'') }}</div>
|
<!--{{ item.name+'('+item.size+')' }}-->
|
<div
|
class="close-button"
|
@click="deleteImgOrFile('file', item, index)">×</div>
|
</flexbox>
|
</div>
|
<!--<div
|
class="img-bar"
|
@click="files=[]">全部删除</div>-->
|
</section>
|
<flexbox
|
class="bar-item"
|
@click="barClick">
|
<input
|
accept="*.*"
|
type="file"
|
class="bar-input"
|
multiple
|
@change="uploadFile">
|
<img
|
src="@/assets/img/update_files.png"
|
class="bar-img">
|
<div class="bar-title">{{ addTitle }}</div>
|
</flexbox>
|
<div class="handle-bar" :style="crmType==='offers'?'margin-left: 42px;':(crmType==='contract'?'margin-left: 58px;':'margin-left: 92px;')">
|
<el-button @click="closeView">取消</el-button>
|
<el-button
|
v-if="crmType === 'sealContract' || crmType === 'sealOffers'"
|
:disabled="isClicked"
|
type="primary"
|
@click="confirmClick(false)">上传</el-button>
|
<el-button
|
v-if="crmType !== 'sealContract' && crmType !== 'sealOffers'"
|
:disabled="isClicked"
|
type="primary"
|
@click="confirmClick(false)">保存</el-button>
|
<el-button
|
v-if="crmType !== 'sealContract' && crmType !== 'sealOffers'"
|
:disabled="isClicked || !isUpload"
|
class="handle-button"
|
type="primary"
|
@click.native="confirmClick(true)">保存并申报</el-button>
|
</div>
|
</div>
|
</el-form>
|
<!--保存并申报 -->
|
<el-dialog
|
title="提交申报"
|
:visible.sync="isCommited"
|
width="24%"
|
append-to-body
|
:before-close="handleClose">
|
<div class='pushBody'>
|
<div class='hintWord'>
|
<i class="el-icon-warning" style="color: #e6a23c;"></i>
|
<span>提交申报后，不能撤回修改。请确保提交信息准确有效!</span>
|
</div>
|
<div class='hintSelect'>
|
<span>审批人：</span>
|
<el-select v-model="pushStatus" placeholder="请选择">
|
<el-option
|
v-for="item in pushOptions"
|
:key="item.UserId"
|
:label="item.Name"
|
:value="item.UserId">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose" class='closePushBtn'>取 消</el-button>
|
<el-button type="primary" @click="confirmClick(false)" class='surePushBtn'>提交</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
// import { objDeepCopy } from '@/utils'
|
import { fileSize, getFileTypeIcon, getTypeIcon } from '@/utils/index'
|
import { UploadImageAsync, UploadFileAsync, GetAgreementNumber, GetQuotationNumber, GetWxSpUserList, GetQuotationName, GetAgreenmentName } from '@/api/common'
|
import { AddAgreement, AgreementToSeal, UpdateAgreement } from '@/api/customermanagement/contract'
|
import { AddQuatotationSheet, QuotationSheetToSeal, UpdateQuotationSheet } from '@/api/customermanagement/offer'
|
export default {
|
name: 'CRMCreateFileView', // 新建合同 报价
|
components: {
|
},
|
props: {
|
/** 没有值就是全部类型 有值就是当个类型 */
|
id: [String, Number],
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** true 的时候 发请求 */
|
show: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* default 默认 condition 固定条件筛选 moduleType 下的
|
* relative: 相关 添加
|
*/
|
action: {
|
type: Object,
|
default: () => {
|
return {
|
type: 'default',
|
data: {}
|
}
|
}
|
}
|
},
|
data () {
|
return {
|
formInline: {},
|
formRules: {
|
CustomerId: [
|
{ required: true, message: '请选择客户', trigger: 'blur' }
|
]
|
},
|
optionsList: {
|
SealType: {
|
field: 'SealType',
|
list: [{value: 1, name: '合同章'}, {value: 2, name: '公章'}]
|
}
|
},
|
/** 图片信息 */
|
files: [],
|
saveAndCreate: false,
|
isCommited: false,
|
pushStatus: '',
|
pushOptions: [],
|
isUpload: false,
|
isClicked: false
|
}
|
},
|
computed: {
|
addTitle: function () {
|
if (this.crmType === 'offers' || this.crmType === 'sealOffers') {
|
return '上传报价单'
|
} else if (this.crmType === 'contract' || this.crmType === 'sealContract') {
|
return '上传合同'
|
}
|
},
|
tableList: function () {
|
// if (this.action.type === 'save') {
|
// this.getId()
|
// }
|
if (this.crmType === 'offers') {
|
return [
|
{ field: 'QuotationNumber', value: '编号', disabled: true },
|
{ field: 'QuotationName', value: '报价单名称', disabled: true },
|
{ field: 'Comment', value: '备注信息' }
|
]
|
} else if (this.crmType === 'contract') {
|
return [
|
{ field: 'AgreementNumber', value: '编号', disabled: true },
|
{ field: 'AgreeName', value: '合同名称', disabled: true },
|
{ field: 'Comment', value: '合同备注' },
|
{ field: 'SealType', value: '合同类型', type: 'select' }
|
]
|
} else if (this.crmType === 'sealContract') {
|
return [
|
{ field: 'CustomerName', value: '客户名称', type: 'text' },
|
{ field: 'AgreeName', value: '合同名称', type: 'text' },
|
{ field: 'CreateUserName', value: '销售负责人', type: 'text' },
|
{ field: 'SealTypeString', value: '合同类型', type: 'text' },
|
{ field: 'Comment', value: '备注信息', type: 'text' },
|
{ field: 'ExpressComment', value: '快递备注' },
|
{ field: 'ExpressNumber', value: '快递单号' }
|
]
|
} else if (this.crmType === 'sealOffers') {
|
return [
|
{ field: 'CustomerName', value: '客户名称', type: 'text' },
|
{ field: 'QuotationName', value: '报价单名称', type: 'text' },
|
{ field: 'CreateUserName', value: '销售负责人', type: 'text' },
|
{ field: 'Comment', value: '备注信息', type: 'text' }
|
]
|
}
|
}
|
},
|
watch: {
|
},
|
created () {
|
|
},
|
mounted () {
|
this.getUserOpt()
|
this.getField()
|
},
|
methods: {
|
handleClose () {
|
this.pushStatus = ''
|
this.isCommited = false
|
},
|
getId () {
|
this.getName()
|
if (this.crmType === 'contract') {
|
GetAgreementNumber().then(res => {
|
// this.formInline['AgreementNumber'] = res.data.Result
|
this.$set(this.formInline, 'AgreementNumber', res.data.Result)
|
})
|
} else if (this.crmType === 'offers') {
|
GetQuotationNumber().then(res => {
|
this.$set(this.formInline, 'QuotationNumber', res.data.Result)
|
// this.formInline['QuotationNumber'] = res.data.Result
|
})
|
}
|
console.log(this.formInline)
|
},
|
getName () {
|
let params = {
|
salesChanceId: this.id
|
}
|
console.log(this.formInline)
|
if (this.crmType === 'contract') {
|
GetAgreenmentName(params).then(res => {
|
this.$set(this.formInline, 'AgreeName', res.data.Result)
|
})
|
} else if (this.crmType === 'offers') {
|
GetQuotationName(params).then(res => {
|
this.$set(this.formInline, 'QuotationName', res.data.Result)
|
})
|
}
|
},
|
// 获取自定义字段
|
getField () {
|
console.log(this.action)
|
if (this.action.type === 'update') {
|
this.formInline = {...this.action.data}
|
if (this.crmType === 'contract') {
|
// this.isUpload = this.action.data.UploadStatus === 1
|
this.isUpload = this.action.data.IsCanReport
|
this.formInline['AgreementNumber'] = this.action.data.AgreeNumber
|
if (this.action.data.BeforeSealFile) {
|
let list = []
|
list['icon'] = getTypeIcon(this.action.data.BeforeSealFile)
|
list['name'] = this.action.data.BeforeSealFile
|
list['path'] = this.action.data.BeforeSealFile
|
this.files.push(list)
|
} else {
|
this.files = []
|
}
|
} else if (this.crmType === 'offers') {
|
// this.isUpload = this.action.data.UploadStatus === 1
|
this.isUpload = this.action.data.IsCanReport
|
this.formInline['QuotationNumber'] = this.action.data.QuotationNumber
|
if (this.action.data.BeforeSealFile) {
|
let list = []
|
list['icon'] = getTypeIcon(this.action.data.BeforeSealFile)
|
list['name'] = this.action.data.BeforeSealFile
|
list['path'] = this.action.data.BeforeSealFile
|
this.files.push(list)
|
} else {
|
this.files = []
|
}
|
} else if (this.crmType === 'sealContract' || this.crmType === 'sealOffers') {
|
if (this.action.data.SealFile) {
|
let list = []
|
list['icon'] = getTypeIcon(this.action.data.SealFile)
|
list['name'] = this.action.data.SealFile
|
list['path'] = this.action.data.SealFile
|
this.files.push(list)
|
} else {
|
this.files = []
|
}
|
}
|
} else if (this.action.type === 'save') {
|
this.getId()
|
}
|
},
|
getSelectVal (type) {
|
if (type === 'SealType') {
|
console.log(this.formInline['SealType'])
|
}
|
},
|
barClick (item) {},
|
/** 图片选择出发 */
|
uploadFile (event) {
|
var files = event.target.files
|
if (files.length) {
|
for (let index = 0; index < files.length; index++) {
|
const file = files[index]
|
if (
|
file.type.indexOf('image') === -1 &&
|
this.showRelativeType === 'img'
|
) {
|
this.$message.error('请上传正确的文件类型')
|
return
|
}
|
}
|
|
var type = event.target.accept === 'image/*' ? 'img' : 'file'
|
var firstFile = files[0]
|
this.sendFileRequest(firstFile, type, () => {
|
for (let index = 1; index < files.length; index++) {
|
const file = files[index]
|
this.sendFileRequest(file, type)
|
}
|
event.target.value = ''
|
})
|
}
|
},
|
// 发送请求
|
sendFileRequest (file, type, result) {
|
var params = { file: file, type: type }
|
let request = {
|
'img': UploadImageAsync,
|
'file': UploadFileAsync
|
}[type]
|
request(params)
|
.then(res => {
|
// if (this.batchId === '') {
|
// this.batchId = res.batchId
|
// }
|
if (res.data.ErrorCode === 200) {
|
let list = []
|
list['size'] = fileSize(file.size)
|
if (type === 'img') {
|
list['name'] = res.data.Message
|
list['path'] = res.data.Result
|
console.log(list)
|
// this.imgFiles.push(list)
|
} else {
|
list['icon'] = getFileTypeIcon(file)
|
list['name'] = res.data.Message
|
list['path'] = res.data.Result
|
this.files.push(list)
|
}
|
this.$message.success('上传成功')
|
} else {
|
this.$message.fail('res.data.Message')
|
}
|
|
if (result) {
|
result()
|
}
|
})
|
.catch(() => {})
|
},
|
deleteImgOrFile (type, item, index) {
|
if (type === 'image') {
|
this.imgFiles.splice(index, 1)
|
} else {
|
this.files.splice(index, 1)
|
}
|
this.$message.success('操作成功')
|
},
|
/** 获取列表请求 */
|
getIndexRequest () {
|
if (this.action.type === 'save') {
|
if (this.crmType === 'contract') {
|
return AddAgreement
|
} else if (this.crmType === 'offers') {
|
return AddQuatotationSheet
|
} else if (this.crmType === 'sealContract') {
|
return AgreementToSeal
|
} else if (this.crmType === 'sealOffers') {
|
return QuotationSheetToSeal
|
}
|
} else if (this.action.type === 'update') {
|
if (this.crmType === 'contract') {
|
return UpdateAgreement
|
} else if (this.crmType === 'offers') {
|
return UpdateQuotationSheet
|
} else if (this.crmType === 'sealContract') {
|
return AgreementToSeal
|
} else if (this.crmType === 'sealOffers') {
|
return QuotationSheetToSeal
|
}
|
}
|
},
|
// 获取审批人员列表
|
getUserOpt () {
|
GetWxSpUserList().then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.pushOptions = res.data.Result
|
}
|
})
|
},
|
// 确定选择
|
confirmClick (saveAndCreate) {
|
this.saveAndCreate = saveAndCreate
|
this.isClicked = true
|
if (saveAndCreate) {
|
this.isCommited = true
|
} else {
|
this.sendQuery()
|
}
|
},
|
sendQuery () {
|
this.formInline['files'] = this.files && this.files.length > 0 ? this.files[0].path : ''
|
console.log(this.formInline)
|
let crmIndexRequest = this.getIndexRequest()
|
let params = {}
|
if (this.action.type === 'save') {
|
if (this.crmType === 'contract') {
|
params = {
|
'AuditUserId': this.pushStatus,
|
'IsSubmitReport': this.isCommited,
|
'AgreementNumber': this.formInline['AgreementNumber'],
|
'SalesChanceId': this.id,
|
'AgreeName': this.formInline['AgreeName'],
|
'Comment': this.formInline['Comment'],
|
'BeforeSealFile': this.formInline['files'],
|
'SealType': this.formInline['SealType'],
|
'QuotationSheetId': ''
|
}
|
} else if (this.crmType === 'offers') {
|
params = {
|
'AuditUserId': this.pushStatus,
|
'IsSubmitReport': this.isCommited,
|
'QuotationNumber': this.formInline['QuotationNumber'],
|
'SalesChanceId': this.id,
|
'QuotationName': this.formInline['QuotationName'],
|
'Comment': this.formInline['Comment'],
|
'BeforeSealFile': this.formInline['files']
|
}
|
} else if (this.crmType === 'sealContract') {
|
params = {
|
'Id': this.action.data.Id,
|
'SealFile': this.formInline['files'],
|
'ExpressComment': this.formInline['ExpressComment'],
|
'ExpressNumber': this.formInline['ExpressNumber']
|
}
|
} else if (this.crmType === 'sealOffers') {
|
params = {
|
'Id': this.action.data.Id,
|
'SealFile': this.formInline['files']
|
}
|
}
|
} else if (this.action.type === 'update') {
|
if (this.crmType === 'contract') {
|
params = {
|
'Id': this.formInline['Id'],
|
'Comment': this.formInline['Comment'],
|
'BeforeSealFile': this.formInline['files'],
|
'SealType': this.formInline['SealType'],
|
'FinalFile': '',
|
'IsSubmitReport': this.isCommited,
|
'AuditUserId': this.pushStatus
|
}
|
} else if (this.crmType === 'offers') {
|
params = {
|
'Id': this.formInline['Id'],
|
'Comment': this.formInline['Comment'],
|
'BeforeSealFile': this.formInline['files'],
|
'IsSubmitReport': this.isCommited,
|
'AuditUserId': this.pushStatus
|
}
|
} else if (this.crmType === 'sealContract') {
|
params = {
|
'Id': this.action.data.Id,
|
'SealFile': this.formInline['files'],
|
'ExpressComment': this.formInline['ExpressComment'],
|
'ExpressNumber': this.formInline['ExpressNumber']
|
}
|
if (this.formInline['ExpressComment'] !== '' && this.formInline['ExpressNumber'] === '') {
|
return this.$message.error('请填写快递单号')
|
} else if (this.formInline['ExpressNumber'] !== '' && this.formInline['ExpressComment'] === '') {
|
return this.$message.error('请填写快递备注')
|
}
|
} else if (this.crmType === 'sealOffers') {
|
params = {
|
'Id': this.action.data.Id,
|
'SealFile': this.formInline['files']
|
}
|
}
|
}
|
crmIndexRequest(params)
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(
|
this.action.type === 'update' ? '编辑成功' : '添加成功'
|
)
|
this.$emit('save-success')
|
this.isClicked = false
|
} else {
|
this.$message.error(res.data.Message)
|
this.isClicked = false
|
}
|
}).catch(() => {
|
this.isClicked = false
|
})
|
},
|
// 关闭操作
|
closeView () {
|
this.$emit('hiden-view')
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.cr-contianer {
|
position: relative;
|
// padding: 50px 0 50px 0;
|
}
|
/** 将其改变为flex布局 */
|
.crm-create-box {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 10px;
|
}
|
.crm-create-block-item {
|
flex: 0 0 90%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
margin-bottom: 0;
|
}
|
.bar-item {
|
width: auto;
|
padding-right: 20px;
|
position: relative;
|
cursor: pointer;
|
left: 10px;
|
.bar-input {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 15px;
|
width: 100px;
|
opacity: 0;
|
font-size: 0;
|
cursor: pointer;
|
}
|
.bar-img {
|
display: block;
|
margin-right: 6px;
|
}
|
.bar-title {
|
color: #4D88FF;
|
font-size: 12px;
|
}
|
}
|
/** 附件 */
|
.file-cont {
|
padding: 0 10px;
|
margin: 0 10px 15px;
|
border: 1px dashed #dfdfdf;
|
.f-header {
|
padding: 8px 0 15px;
|
.f-logo {
|
position: block;
|
width: 15px;
|
height: 15px;
|
margin-right: 8px;
|
}
|
.f-name {
|
color: #777;
|
font-size: 12px;
|
}
|
}
|
|
.f-body {
|
.f-item {
|
padding: 3px 0;
|
.f-img {
|
position: block;
|
width: 15px;
|
height: 15px;
|
margin-right: 8px;
|
}
|
.f-name {
|
color: #666;
|
font-size: 12px;
|
}
|
}
|
}
|
|
.img-bar {
|
color: #5a8ae2;
|
font-size: 12px;
|
padding: 5px 0;
|
cursor: pointer;
|
}
|
}
|
/** 关闭按钮 */
|
.close-button {
|
width: 30px;
|
line-height: 16px;
|
cursor: pointer;
|
color: #ccc;
|
height: 16px;
|
font-size: 17px;
|
text-align: center;
|
}
|
.btm{
|
display: flex;
|
flex-direction: column;
|
}
|
.handle-bar {
|
display: flex;
|
flex-direction: row;
|
margin-top: 30px;
|
z-index: 2;
|
button {
|
float: right;
|
margin-top: 10px;
|
margin-right: 10px;
|
}
|
}
|
.pushBody{
|
margin: 0 60px;
|
.hintWord{
|
margin-top: 10px;
|
}
|
.hintSelect{
|
margin-top: 20px;
|
.el-select{
|
width: 224px;
|
}
|
}
|
}
|
.closePushBtn{
|
margin-right: 16px;
|
}
|
.showText{
|
color: #333;
|
font-size: 16px;
|
font-weight: 400;
|
display: inline-block;
|
margin: 5px 0px;
|
font-size: 16px;
|
overflow-wrap: break-word;
|
word-break: break-all;
|
}
|
.disInput.el-input.is-disabled /deep/ .el-input__inner{
|
color: #333 !important;
|
}
|
</style>
|
