rq
5 months ago
5 changed files with 604 additions and 1 deletions
-
3src/api/srm/srmSupplier.js
-
4src/assets/scss/rq.scss
-
579src/views/modules/srmSupplier/com_srmSupplier_Contract.vue
-
1src/views/modules/srmSupplier/supplierGroupRequestList.vue
-
18src/views/modules/srmSupplier/supplierList.vue
@ -0,0 +1,579 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<el-form label-position="top" style="margin-top: 1px; margin-left: 0px;"> |
|||
<el-form :inline="true" label-position="top" style="margin-top: 0px"> |
|||
<el-button type="primary" @click="addModal()">新增</el-button> |
|||
</el-form> |
|||
</el-form> |
|||
<el-table |
|||
:data="dataList" |
|||
:height=searchData.height |
|||
border |
|||
v-loading="dataListLoading" |
|||
style="width: 100%; "> |
|||
<el-table-column |
|||
v-for="(item,index) in columnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed==''?false:item.fixed" |
|||
:min-width="item.columnWidth" |
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span> |
|||
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
|||
style="width: 100px; height: 80px"/></span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
header-align="center" |
|||
align="center" |
|||
width="180" |
|||
fixed="right" |
|||
label="操作"> |
|||
<template slot-scope="scope"> |
|||
<a type="text" size="small" @click="updateModel(scope.row)">Renew |</a> |
|||
<a type="text" size="small" @click="editModel(scope.row)">Edit |</a> |
|||
<a type="text" size="small" @click="deleteData(scope.row)"> Delete</a> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-dialog title="Contract" :close-on-click-modal="false" v-drag :visible.sync="contractModelFlag" width="600px"> |
|||
<el-form label-position="top" style="margin-top: -5px;"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Supplier No'" > |
|||
<el-input v-model="contractModelData.supplierNo" disabled style="width: 130px" ></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Supplier Name'" > |
|||
<el-input v-model="contractModelData.supplierName" disabled style="width: 130px"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'contract Date'" > |
|||
<el-date-picker |
|||
style="width: 130px" |
|||
v-model="contractModelData.contractDate" |
|||
type="date" |
|||
format="yyyy-MM-dd" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Valid To'" > |
|||
<el-date-picker |
|||
style="width: 130px" |
|||
v-model="contractModelData.validTo" |
|||
type="date" |
|||
format="yyyy-MM-dd" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Amout'" > |
|||
<el-input v-model="contractModelData.amout" type="number" style="width: 130px"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Currency'" > |
|||
<el-input v-model="contractModelData.currency" style="width: 130px"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Contract No'" > |
|||
<el-input v-model="contractModelData.contractNo" style="width: 130px" ></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :label="'Contract Name'" > |
|||
<el-input v-model="contractModelData.contractName" style="width: 130px" ></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item :label="'Contract Detail'"> |
|||
<el-input type="textarea" :rows="3" v-model="contractModelData.contractDetail" style=""></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" style="margin-top: 50px"> |
|||
<el-button class="customer-bun-min" type="primary" @click="handleUpload" style="">Upload</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-form> |
|||
|
|||
<el-table |
|||
:height="240" |
|||
:data="fileList" |
|||
ref="fileTableRef" |
|||
style="width: 100%;" > |
|||
<el-table-column |
|||
prop="fileName" |
|||
header-align="center" |
|||
align="left" |
|||
min-width="200" |
|||
label="File No"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdBy" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="100" |
|||
label="Upload By"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createDate" |
|||
header-align="center" |
|||
align="center" |
|||
min-width="100" |
|||
label="Upload Time"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
header-align="center" |
|||
align="center" |
|||
width="100" |
|||
fixed="right" |
|||
label="Actions"> |
|||
<template slot-scope="scope"> |
|||
<a type="text" size="small" @click="handleDownload(scope.row)">View |</a> |
|||
<a type="text" size="small" @click="deleteFile(scope.$index)"> delete</a> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-footer style="height:40px;margin-top: 10px;text-align:center"> |
|||
<el-button type="primary" @click="submitData()">Submit</el-button> |
|||
<el-button type="primary" @click="contractModelFlag=false">Cancel & Close</el-button> |
|||
</el-footer> |
|||
</el-dialog> |
|||
|
|||
<el-dialog title="UpLoad" :visible.sync="ossVisible" v-drag width="400px" append-to-body :close-on-click-modal="false"> |
|||
<el-form ref="form" class="rq" label-width="80px" label-position="top"> |
|||
<el-row :gutter="10"> |
|||
<slot></slot> |
|||
<el-col :span="24"> |
|||
<el-form-item label=" " class="auto"> |
|||
<el-upload drag :file-list="fileList2" |
|||
action="#" ref="upload" |
|||
:on-remove="onRemoveFile" |
|||
:on-change="onChangeFile" |
|||
multiple |
|||
:auto-upload="false"> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24" > |
|||
<el-form-item label="备注" class="auto" > |
|||
<el-input type="textarea" v-model="ossForm.remark" resize="none" :autosize="{minRows: 3, maxRows: 3}"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" :loading="uploadLoading" @click="handleUploadFiles">确定</el-button> |
|||
<el-button @click="ossVisible = false">关闭</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
|
|||
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
createNewSupplierContract,getNewSupplierContract,deleteSupplierContract |
|||
} from '@/api/srm/srmSupplier.js' |
|||
import Chooselist from '@/views/modules/common/Chooselist_eam' |
|||
import {ossUploadNoSaveOSS, previewOssFileById, queryOss} from "../../../api/oss/oss"; |
|||
|
|||
export default { |
|||
components: { |
|||
Chooselist |
|||
}, |
|||
data() { |
|||
return { |
|||
dataList: [], |
|||
searchData: { |
|||
site: '', |
|||
username: this.$store.state.user.name, |
|||
supplierNo: '', |
|||
height:'300', |
|||
page: 1, |
|||
limit: 1000 |
|||
}, |
|||
contractModelData:{ |
|||
id:'', |
|||
site:"", |
|||
contractId:'', |
|||
supplierNo:'', |
|||
supplierName:'', |
|||
contractDate:'', |
|||
validTo:'', |
|||
amout:'', |
|||
currency:'', |
|||
contractNo:'', |
|||
contractName:'', |
|||
contractDetail:'', |
|||
createdBy:'', |
|||
}, |
|||
contractModelFlag:false, |
|||
visible:false, |
|||
dataListLoading: false, |
|||
currentRow:'', |
|||
columnList: [ |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5ContractNo', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'contractNo', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '合同编号', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 120 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5ContractName', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'contractName', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '合同名称', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 120 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5ContractDetail', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'contractDetail', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '合同描述', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 240 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5ContractDate', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'contractDate', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '合同日期', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 120 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5CreatedBy', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'createBy', |
|||
headerAlign: 'center', |
|||
align: 'center', |
|||
columnLabel: 'CreatedBy', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 100 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5CreateDate', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'createDate', |
|||
headerAlign: 'center', |
|||
align: 'center', |
|||
columnLabel: 'Created Time', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 120 |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: 811001, |
|||
serialNumber: '811001Table5ValidTo', |
|||
tableId: '811001Table5', |
|||
tableName: '供应商合同', |
|||
columnProp: 'validTo', |
|||
headerAlign: 'center', |
|||
align: 'center', |
|||
columnLabel: 'Valid To', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: '', |
|||
columnWidth: 100 |
|||
}, |
|||
], |
|||
tagNo:'', |
|||
tagNo1:'', |
|||
fileList: [], |
|||
fileList2:[], |
|||
ossVisible:false, |
|||
ossForm:{ |
|||
remark:'', |
|||
}, |
|||
uploadLoading:false, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取基础数据列表S |
|||
getBaseList (val, type) { |
|||
this.tagNo = val |
|||
this.tagNo1 = type |
|||
this.$nextTick(() => { |
|||
let strVal = '' |
|||
// if (val === 1013) { |
|||
// if(type==1) { |
|||
// strVal = this.dataForm.partType |
|||
// } |
|||
// } |
|||
this.$refs.baseList.init(val, strVal) |
|||
}) |
|||
}, |
|||
/* 列表方法的回调 */ |
|||
getBaseData (val) { |
|||
// if (this.tagNo === 1013) { |
|||
// if(this.tagNo1==1) { |
|||
// this.dataForm.partType = val.Base_id |
|||
// this.dataForm.partTypeDesc = val.Base_desc |
|||
// } |
|||
// } |
|||
}, |
|||
//初始化组件的参数 |
|||
init(inData) { |
|||
//初始化参数 |
|||
this.searchData = JSON.parse(JSON.stringify(inData)); |
|||
//刷新表格 |
|||
this.searchTable(); |
|||
|
|||
}, |
|||
searchTable(){ |
|||
getNewSupplierContract(this.searchData).then(({data}) => { |
|||
//区分请求成功和失败的状况 |
|||
if (data && data.code == 0) { |
|||
this.dataList = data.rows |
|||
console.log(this.dataList) |
|||
} else { |
|||
this.dataList = []; |
|||
} |
|||
}); |
|||
}, |
|||
addModal(){ |
|||
this.contractModelData={ |
|||
id:0, |
|||
site:this.$store.state.user.site, |
|||
contractId:'', |
|||
supplierNo:this.searchData.supplierNo, |
|||
supplierName:this.searchData.supplierName, |
|||
contractDate:new Date(), |
|||
validTo:'', |
|||
amout:'', |
|||
currency:'', |
|||
contractNo:'', |
|||
contractName:'', |
|||
contractDetail:'', |
|||
createBy:this.$store.state.user.name, |
|||
} |
|||
this.fileList=[] |
|||
this.contractModelFlag=true; |
|||
}, |
|||
handleUpload(){ |
|||
this.$nextTick(()=>{ |
|||
if (this.$refs.upload){ |
|||
this.$refs.upload.clearFiles(); |
|||
} |
|||
}) |
|||
this.fileList2 = []; |
|||
this.ossForm.remark = ''; |
|||
this.ossVisible = true |
|||
}, |
|||
onRemoveFile(file, fileList){ |
|||
this.fileList2 = fileList |
|||
}, |
|||
onChangeFile(file, fileList){ |
|||
this.fileList2 = fileList |
|||
}, |
|||
handleUploadFiles(){ |
|||
if (this.fileList2.length === 0){ |
|||
this.$message.error('请选择文件'); |
|||
return; |
|||
} |
|||
let formData = new FormData(); |
|||
for (let i = 0; i < this.fileList2.length; i++) { |
|||
formData.append('file', this.fileList2[i].raw); |
|||
} |
|||
formData.append('orderRef1', ''); |
|||
formData.append('orderRef2', ''); |
|||
formData.append('createdBy', this.$store.state.user.name); |
|||
formData.append('fileRemark', this.ossForm.remark); |
|||
formData.append('orderReftype', "SrmSupplierContract"); |
|||
this.uploadLoading = true; |
|||
ossUploadNoSaveOSS(formData).then(({data})=>{ |
|||
if (data && data.code === 0){ |
|||
this.$message.success(data.msg); |
|||
for (let i = 0; i <data.rows.length ; i++) { |
|||
this.fileList.push(data.rows[i]); |
|||
} |
|||
this.ossVisible = false; |
|||
}else { |
|||
this.$message.warning(data.msg); |
|||
} |
|||
this.uploadLoading = false; |
|||
}).catch((error)=>{ |
|||
this.$message.error(error); |
|||
this.uploadLoading = false; |
|||
}) |
|||
}, |
|||
handleDownload(row){ |
|||
|
|||
// 之前代码多选时只能下载一个，因为下载第一个后this.$refs.table.clearSelection()会清空选中项 |
|||
let selectList = []; |
|||
selectList.push(row); |
|||
for (let i = 0; i < selectList.length; i++) { |
|||
let params = { |
|||
id:selectList[i].id, |
|||
} |
|||
previewOssFileById(params).then((response) => { |
|||
const blob = new Blob([response.data], { type: response.headers['content-type'] }); |
|||
const link = document.createElement('a'); |
|||
link.href = URL.createObjectURL(blob); |
|||
link.setAttribute('download', selectList[i].fileName); |
|||
link.target = '_blank'; // 打开新窗口预览 |
|||
link.click(); |
|||
URL.revokeObjectURL(link.href); |
|||
}); |
|||
} |
|||
}, |
|||
deleteFile(index){ |
|||
this.fileList.splice(index, 1); |
|||
}, |
|||
submitData(){ |
|||
if(this.contractModelData.contractDate==''||this.contractModelData.contractDate==null){ |
|||
this.$message.warning('未选择Contract Date！') |
|||
return false |
|||
} |
|||
if(this.contractModelData.contractNo==''||this.contractModelData.contractNo==null){ |
|||
this.$message.warning('未输入Contract No！') |
|||
return false |
|||
} |
|||
if(this.contractModelData.contractName==''||this.contractModelData.contractName==null){ |
|||
this.$message.warning('未输入Contrac tName！') |
|||
return false |
|||
} |
|||
if(this.fileList.length==0){ |
|||
this.$message.warning('请上传合同！') |
|||
return false |
|||
} |
|||
this.contractModelData.fileList= this.fileList |
|||
|
|||
createNewSupplierContract( this.contractModelData).then(({data})=>{ |
|||
if (data && data.code === 0){ |
|||
this.$message.success(data.msg); |
|||
this.searchTable(); |
|||
this.contractModelFlag=false |
|||
}else { |
|||
this.$message.warning(data.msg); |
|||
} |
|||
}).catch((error)=>{ |
|||
this.$message.error(error); |
|||
}) |
|||
|
|||
}, |
|||
editModel(row){ |
|||
this.contractModelData=JSON.parse(JSON.stringify(row)); |
|||
let params={ |
|||
orderRef1:row.site, |
|||
orderRef2:row.contractId, |
|||
orderReftype:'SrmSupplierContract', |
|||
} |
|||
queryOss(params).then(({data})=>{ |
|||
if (data && data.code === 0){ |
|||
this.fileList = data.rows; |
|||
}else { |
|||
this.$message.warning(data.msg); |
|||
} |
|||
this.queryLoading = false; |
|||
}) |
|||
this.contractModelFlag=true; |
|||
}, |
|||
deleteData(row){ |
|||
this.$confirm(`确认删除?`, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(()=>{ |
|||
deleteSupplierContract(row).then(({data})=>{ |
|||
if (data.code===0){ |
|||
this.searchTable() |
|||
this.$message.success("删除成功") |
|||
|
|||
} |
|||
}).catch() |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.rq .auto /deep/ .el-form-item__content{ |
|||
height: auto; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue