bonus-ui/src/views/material/purchase/goodsArrived/component/addTools.vue

815 lines
32 KiB
Vue

<template>
<!-- 新增工机具 -->
<div>
<el-form
:model="maForm"
ref="maForm"
size="small"
:rules="rules"
:inline="true"
label-width="120px"
>
<el-form-item label="到货日期" prop="arrivalTime">
<el-date-picker
v-model="maForm.arrivalTime"
style="width: 240px"
value-format="yyyy-MM-dd hh:mm:ss"
type="date"
placeholder="请选择到货日期"
></el-date-picker>
</el-form-item>
<el-form-item label="物资厂家" prop="supplierId">
<el-select
v-model="maForm.supplierId"
placeholder="物资厂家"
clearable
filterable
style="width: 240px"
>
<el-option
v-for="item in supplierList"
:key="item.supplierId"
:label="item.supplier"
:value="item.supplierId"
/>
</el-select>
</el-form-item>
<el-form-item label="出厂日期" prop="productionTime">
<el-date-picker
v-model="maForm.productionTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择出厂日期"
@change="productionTimeChange"
></el-date-picker>
</el-form-item>
<el-form-item label="税率" prop="taxRate">
<el-input
v-model="maForm.taxRate"
placeholder="请输入税率"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
@input="taxRateChange"
/>
<span>%</span>
</el-form-item>
<el-form-item label="类型规格" prop="deviceType">
<el-cascader
:key="propsKey"
v-model="deviceType"
:show-all-levels="false"
:options="equipmentTypeList"
:props="deviceTypeTreeProps"
filterable
collapse-tags
style="width: 240px"
placeholder="请选择规格型号"
ref="deviceTypeCascader"
popper-class="popper-select"
@change="deviceTypeChange"
></el-cascader>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="maForm.remark"
placeholder="请输入备注"
clearable
maxlength="150"
type="textarea"
style="width: 240px"
rows="1"
/>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleSave" >保存</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="isEdit">导出</el-button>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="equipmentList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column
align="center"
label="序号"
type="index"
width="55"
/>
<el-table-column
align="center"
label="物资名称"
prop="maTypeName"
show-overflow-tooltip
></el-table-column>
<el-table-column
align="center"
label="规格型号"
prop="typeName"
show-overflow-tooltip
/>
<el-table-column align="center" label="单位" prop="unitName" />
<el-table-column label="采购数量" prop="purchaseNum" align="center">
<template v-slot="scope">
<el-input
v-model.number="scope.row.purchaseNum"
controls-position="right" type="number"
style="width: 100%"
:min="0" @input="(v)=>(scope.row.unitValue==1?scope.row.purchaseNum=Number(v.replace(/[^\d.]/g,'')) : scope.row.purchaseNum=Number(v.replace(/[^\d]/g,'')))"
></el-input>
</template>
</el-table-column>
<el-table-column
label="购置单价(元含税)"
prop="purchaseTaxPrice"
align="center" width="200"
>
<template v-slot="scope">
<el-input-number
v-model="scope.row.purchaseTaxPrice"
controls-position="right"
style="width: 100%"
:min="0" :step="1"
@change="purchaseTaxPriceChange(scope.row,scope.$index)"
></el-input-number>
</template>
</el-table-column>
<el-table-column
label="购置单价(元不含税)"
prop="purchasePrice"
align="center" width="200"
>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.purchasePrice"
controls-position="right"
style="width: 100%"
:min="0" :step="1"
@input="purchasePriceChange(scope.row,scope.$index)"
></el-input-number>
</template>
</el-table-column>
<el-table-column
label="是否为固定资产"
prop="fixCode"
align="center"
width="120"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.fixCode"
placeholder="固定资产"
filterable
clearable
>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="出厂日期"
align="center"
prop="productionTime"
width="200"
>
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.productionTime"
style="width: 100%"
value-format="yyyy-MM-dd"
type="date"
placeholder="出厂日期"
clearable
></el-date-picker>
</template>
</el-table-column>
<el-table-column
label="相关配套资料"
align="center" width="120"
prop="bmFileInfos"
>
<template slot-scope="scope">
<div style="color: rgb(2, 167, 240);cursor: pointer;" @click="openFileDialog(scope.row)">报告管理</div>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status"/>
</template>
</el-table-column>
<!-- <el-table-column
align="center"
label="验收结论"
prop="checkResult"
show-overflow-tooltip
></el-table-column> -->
<el-table-column label="操作" align="center">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
style="color: red"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog title="报告管理" :visible.sync="open" width="900px" append-to-body>
<el-table :data="fileDataList" width="100%" height="350px">
<el-table-column label="序号" type="index" width="55" align="center"/>
<el-table-column label="报告类型" align="center" prop="dictLabel" :show-overflow-tooltip="true"/>
<el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true"/>
<el-table-column label="类型名称" align="center" :show-overflow-tooltip="true">
<template>
<div>{{this.rowData.maTypeName}}</div>
</template>
</el-table-column>
<el-table-column label="规格型号" align="center" :show-overflow-tooltip="true">
<template>
<div>{{this.rowData.typeName}}</div>
</template>
</el-table-column>
<!-- <el-table-column label="报告日期" align="center" prop="orgName" :show-overflow-tooltip="true"/>
<el-table-column label="截止有效期" align="center" prop="orgName" :show-overflow-tooltip="true"/> -->
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: space-between;">
<el-upload ref="upload" :limit="3" :headers="upload.headers"
:action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
:on-success="handleFileSuccess" :auto-upload="true"
>
<el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">
上传
</el-button>
</el-upload>
<el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.url" style="margin-left: 20px;">
查看
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 图片查看弹窗 -->
<el-dialog :visible.sync="dialogVisible" width="500px" height="500px" >
<img width="100%" height="500px" :src="dialogImageUrl" />
</el-dialog>
</div>
</template>
<script>
import {
getPurchaseCheckInfo,
equipmentTypeTree,
addPurchaseCheckInfo,
updatePurchaseCheckInfo,
} from '@/api/purchase/goodsArrived';
import { getListFacturer } from '@/api/ma/supplier';
import { getToken } from '@/utils/auth'
import { uploadPurchaseFile,getPurchaseFileList } from "@/api/purchase/goodsAccept";
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'
export default {
name: 'AddTools',
dicts: ['purchase_task_status'],
// components: { Treeselect, HoldingpoleDialog },
props: {
isEdit: {
type: Boolean,
default: () => {
return false
},
},
editTaskId: {
type: [String, Number],
default: () => {
return ''
},
},
editId: {
type: [String, Number],
default: () => {
return ''
},
},
},
data() {
return {
taskId: '',
// isEdit: false,
// 遮罩层
loading: false,
loadingTwo: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//物资厂家
supplierList: [],
//机具类型
equipmentTypeList: [],
// 角色表格数据
equipmentList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
rowData:{},
fileDataList: [
{dictLabel:"合格证",fileType:"0",name:"",url:""},
{dictLabel:"型式试验报告",fileType:"1",name:"",url:""},
{dictLabel:"出厂检测报告",fileType:"2",name:"",url:""},
{dictLabel:"第三方监测报告",fileType:"3",name:"",url:""},
{dictLabel:"其他报告",fileType:"4",name:"",url:""},
],
//图片查看弹窗
dialogImageUrl: '',
dialogVisible: false,
//上传
upload: {
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/file/upload'
},
// 查询参数
queryParams: {
equipmentId: undefined,
productionTime: '',
},
maForm: {
taxRate:13,
arrivalTime: '',
purchaser: '',
remark: '',
purchaseNumber: '',
},
// 表单参数
form: {},
defaultProps: {
children: 'children',
label: 'label',
},
// 表单校验
rules: {
// deviceType: [
// {
// required: true,
// message: '请选择类型规格',
// trigger: 'blur',
// },
// ],
arrivalTime: [
{
required: true,
message: '请选择到货日期',
trigger: 'blur',
},
],
// purchaser: [
// { required: true, message: "采购员不能为空", trigger: "blur" }
// ]
},
deviceTypeTreeProps: {
children: 'children',
label: 'typeName',
// multiple: false,
value: 'typeId',
multiple: true,
},
deviceType: [],
propsKey: 1000,
// taxRate:0,
}
},
computed: {
pickerOptions() {
return {
disabledDate(time) {
const currentDate = new Date()
currentDate.setHours(0, 0, 0, 0)
return time.getTime() < currentDate.getTime()
},
}
},
},
watch: {
},
mounted() {
if (this.isEdit) {
console.log('isEdit',this.isEdit)
this.taskId = this.editTaskId
this.id = this.editId
this.getTaskInfo()
}
this.supplierInfoList()
this.equipmentType()
},
methods: {
// 税率
taxRateChange(val){
this.maForm.taxRate = val.replace(/[^\d.]/g,'')
this.equipmentList.forEach(item=>{
item.purchaseTaxPrice = item.purchasePrice*(1 + val/100)
})
},
// 含税单价
purchaseTaxPriceChange(row,val){
row.purchasePrice = ((row.purchaseTaxPrice/(100 + this.maForm.taxRate))*100).toFixed(10)
},
// 不含税单价
purchasePriceChange(row,val){
row.purchaseTaxPrice = ((row.purchasePrice*(100 + this.maForm.taxRate))/100).toFixed(10)
},
/** 物资厂家-下拉选 */
supplierInfoList() {
let param = {
pageNum: 1,
pageSize: 1000,
keyWord:undefined
}
getListFacturer(param).then((response) => {
this.supplierList = response.rows
})
},
//选择物资厂家
// changeSupplier(supplierId) {
// this.equipmentList.forEach((item) => {
// this.$set(item, 'supplierId', supplierId)
// })
// },
/** 机具类型 */
equipmentType() {
equipmentTypeTree().then((response) => {
this.equipmentTypeList = response.data
this.equipmentTypeList.forEach((item, index) => {
if (item.children && item.children.length > 0) {
item.children.forEach((item2, index2) => {
if (item2.children && item2.children.length > 0) {
item2.children.forEach((item3) => {
if (
item3.children &&
item3.children.length > 0
) {
item3.children.forEach((item4) => {
item4.maTypeName =
item3.typeName
item4.specificationType =
item4.typeName
this.$set(item4, 'purchaseTaxPrice', 0)
this.$set(item4, 'purchasePrice', 0)
})
}
})
}
})
}
})
//反显
let selectList = []
this.equipmentList.forEach((e) => {
selectList.push(
this.getParentsById(this.equipmentTypeList, e.typeId),
)
})
this.deviceType = selectList
})
},
//添加机具类型
deviceTypeChange(val) {
const deviceTypeList =
this.$refs.deviceTypeCascader.getCheckedNodes()
let tempList = []
if (val.length > 0) {
const items = val.map((e) => {
return e[3]
})
for (let i of items) {
for (let z of deviceTypeList) {
if (z.data.typeId === i) {
const obj = JSON.parse(JSON.stringify(z.data))
console.log(z.data)
// obj.supplierId = ''
obj.createTime = null
obj.productionTime = ''
obj.purchaseTaxPrice = 0
obj.purchaseTaxPrice = 0
obj.purchaseNum = 1
obj.fixCode = "0"
obj.bmFileInfos=[]
tempList.push(obj)
break
}
}
}
const newDataListNew = [...this.equipmentList, ...tempList]
const map = new Map()
for (let item of newDataListNew) {
if (!map.has(item.typeId)) {
map.set(item.typeId, item)
}
}
const newArray = [...map.values()]
let newArray_array = []
items.forEach((e) => {
newArray.forEach((j) => {
if (e == j.typeId) {
newArray_array.push(j)
}
})
})
this.equipmentList = newArray_array
console.log(this.equipmentList)
} else {
this.equipmentList = []
}
},
//选择出厂日期
productionTimeChange(val){
this.equipmentList.forEach(item=>{
item.productionTime=val
})
},
//获取任务详情--- 编辑回显数据
getTaskInfo() {
// this.loading = true;
getPurchaseCheckInfo({taskId:this.taskId,id:this.id,statusList:[1]}).then((response) => {
this.maForm = response.data.purchaseCheckInfo
this.maForm.id = response.data.purchaseCheckInfo.id
this.maForm.taskId = response.data.purchaseCheckInfo.taskId
this.maForm.arrivalTime = response.data.purchaseCheckInfo.arrivalTime
this.maForm.supplierId = response.data.purchaseCheckInfo.supplierId
this.maForm.remark = response.data.purchaseCheckInfo.remark
this.maForm.taxRate = response.data.purchaseCheckInfo.taxRate
// this.maForm.purchaseNumber = response.data.purchaseNumber
// this.maForm.productionTime = response.data.purchaseCheckInfo.productionTime
this.equipmentList = response.data.purchaseCheckDetailsList
console.log(this.equipmentList)
// this.loading = false;
})
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.roleId)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 保存按钮操作 */
handleSave() {
// console.log(this.equipmentList)
if (this.equipmentList.length > 0) {
this.$refs['maForm'].validate((valid) => {
if (valid) {
this.maForm.taskId = this.taskId
// this.maForm.checkDetailsList = this.equipmentList
this.$modal
.confirm('是否确认保存当前页面')
.then(function () {})
.then(() => {
if (this.isEdit) {
console.log('编辑')
this.loading = true
updatePurchaseCheckInfo({purchaseCheckDetailsList: this.equipmentList,purchaseCheckInfo:this.maForm}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess(
'编辑成功',
)
// this.$tab.closeOpenPage({
// path: '/store/newBuy/newDevicesList',
// })
this.$emit(
'addToolsSuccess',
)
}
this.loading = false
})
} else if (!this.isEdit) {
console.log('新增')
// console.log(this.equipmentList)
this.loading = true
addPurchaseCheckInfo({purchaseCheckDetailsList: this.equipmentList,purchaseCheckInfo:this.maForm}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess(
'新增成功',
)
// this.$tab.closeOpenPage({
// path: '/store/newBuy/newDevicesList',
// })
this.$emit(
'addToolsSuccess',
)
}
this.loading = false
})
}
})
.catch(() => {})
}
})
} else {
this.$modal.msgError('请先添加机具类型')
}
},
//文件管理
openFileDialog(row){
this.rowData=row;
this.fileDataList = [{dictLabel:"合格证",fileType:"0",name:"",url:""},
{dictLabel:"型式试验报告",fileType:"1",name:"",url:""},
{dictLabel:"出厂检测报告",fileType:"2",name:"",url:""},
{dictLabel:"第三方监测报告",fileType:"3",name:"",url:""},
{dictLabel:"其他报告",fileType:"4",name:"",url:""}]
if(this.taskId==""){
// console.log(this.rowData)
// console.log(this.rowData.bmFileInfos)
if(this.rowData.bmFileInfos.length>0){
this.rowData.bmFileInfos.forEach(item=>{
let index = this.fileDataList.findIndex(v=>v.fileType==item.fileType)
this.fileDataList[index].name = item.name
this.fileDataList[index].url = item.url
})
}
}else{
this.getFileData()
}
this.open=true
},
getFileData(){
let param = {
modelId:this.rowData.typeId,
taskType:0,
taskId:this.rowData.taskId
}
getPurchaseFileList(param).then((response) => {
if(response.rows.length>0){
response.rows.forEach(item=>{
let index = this.fileDataList.findIndex(v=>v.fileType==item.fileType)
this.fileDataList[index].name = item.name
this.fileDataList[index].url = item.url
})
}
}).catch(() => {
})
},
beforeFileUpload(row){
this.rowData.fileType=row.fileType;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if(response.code==200){
if(this.taskId==""){//新增逻辑
// console.log(response)
// console.log(this.rowData)
// console.log(this.rowData.bmFileInfos)
let obj = {
"taskId": this.taskId,
"taskType": "0",
"name": response.data.name,
"url": response.data.url,
"modelId": this.rowData.typeId,
"fileType": this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
}
//根据文件上传返回更新文件管理弹窗内容
let index = this.fileDataList.findIndex(v=>v.fileType==this.rowData.fileType)
this.fileDataList[index].name = response.data.name
this.fileDataList[index].url = response.data.url
//判断当前上传的文件是否已上传过-再往机具类型数据中插入
if(this.rowData.bmFileInfos.length>0){
let index2 = this.rowData.bmFileInfos.findIndex(v=>v.fileType==this.rowData.fileType)
if(index2>-1){//相同类型文件重复上传-替换
this.rowData.bmFileInfos.splice(index2,0,obj)
}else{//不存在相同类型文件-添加
this.rowData.bmFileInfos.push(obj)
}
}else{
this.rowData.bmFileInfos.push(obj)
}
}else{//编辑逻辑
let param = {
"taskId": this.taskId,
"taskType": "0",
"name": response.data.name,
"url": response.data.url,
"modelId": this.rowData.typeId,
"fileType": this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
}
uploadPurchaseFile(param).then((response) => {
this.$modal.msgSuccess('上传成功')
this.getFileData()
}).catch(() => {
this.$modal.msgError('上传失败')
})
}
}
},
//图片查看
picturePreview(file) {
this.dialogImageUrl = file.url;
const parts = file.name.split('.');
const extension = parts.pop();
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
const windowName = file.name;
window.open(file.url,windowName)
}else{
this.dialogVisible = true
}
},
//树结构数据获取父
getParentsById(list, id) {
for (let i in list) {
if (list[i].typeId == id) {
//查询到就返回该数组对象的value
return [list[i].typeId]
}
if (list[i].children) {
let node = this.getParentsById(list[i].children, id)
if (node !== undefined) {
//查询到把父节把父节点加到数组前面
node.unshift(list[i].typeId)
return node
}
}
}
},
/** 删除按钮操作 */
handleDelete(row) {
// console.log(row.id)
this.$modal
.confirm('是否确认删除所选择的数据项?')
.then(() => {
this.deviceType.forEach((e, index) => {
if (e[3] === row.typeId) {
this.deviceType.splice(index, 1)
this.propsKey++
}
})
this.equipmentList.forEach((item, index) => {
if (item.typeId == row.typeId) {
this.equipmentList.splice(index, 1)
}
})
})
.catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download('/material/purchase_check_info/exportDetails',{taskId:this.taskId},`新购到货详情_${new Date().getTime()}.xlsx`)
},
},
}
</script>
<style lang="scss">
.popper-select {
.el-cascader-panel .el-scrollbar .el-checkbox {
display: none;
}
.el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
display: block !important;
}
}
</style>