devicesmgt/sgzb-ui/src/views/store/newBuy/newDevices/newDevicesAccept.vue

837 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container" id="newDevicesAccept">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="80px"
>
<el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="success" plain size="mini" icon="el-icon-back" @click="jumpList">新购验收管理</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain size="mini" v-if="!isView" @click="handleNotice">通知</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
v-if="!isView"
:disabled="multiple"
@click="handleListCheck"
>批量验收</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</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" :selectable="selectable" />
<el-table-column label="序号" align="center" type="index" />
<el-table-column
label="机具类型名称"
align="center"
prop="machineTypeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="specificationType"
:show-overflow-tooltip="true"
/>
<el-table-column label="管理模式" align="center" prop="manageType" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.manageType==0">编码管理</span>
<span v-if="scope.row.manageType==1">数量管理</span>
</template>
</el-table-column>
<el-table-column label="机具厂家" align="center" prop="supplier" :show-overflow-tooltip="true" />
<el-table-column
label="采购数量"
align="center"
prop="purchaseNum"
:show-overflow-tooltip="true"
/>
<el-table-column label="验收数量" align="center" prop="checkNum" :show-overflow-tooltip="true" />
<el-table-column label="验收图片" align="center" prop="checkUrlName">
<template slot-scope="scope">
<div
v-for="(item,index) in scope.row.imgUrlList"
:key="index"
@click="openImg(item)"
style="color: #02A7F0;cursor: pointer;"
>{{scope.row.imgNameList[index]}}</div>
</template>
</el-table-column>
<!-- <el-table-column label="配套资料" align="center" prop="fileName" :show-overflow-tooltip="true" /> -->
<el-table-column label="状态" align="center" prop="status" width="180">
<template slot-scope="scope">
<span v-if="scope.row.status==0">未验收</span>
<span v-if="scope.row.status==1">已验收</span>
<span v-if="scope.row.status==2">待通知</span>
<span v-if="scope.row.status==3">验收不通过</span>
<span v-if="scope.row.status==4">已审核</span>
<span v-if="scope.row.status==5">已审核</span>
<span v-if="scope.row.status==6">入库待审核</span>
<span v-if="scope.row.status==7">已审核</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="150"
v-if="!isView"
>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
v-show="scope.row.checkNum<scope.row.purchaseNum&&(scope.row.status==0||scope.row.status==1)"
@click="handleCheck(scope.row)"
>验收</el-button>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-edit"
>编码管理</el-button>-->
</template>
</el-table-column>
</el-table>
<!-- 验收弹窗 -->
<el-dialog
:title="title"
:visible.sync="open"
width="650px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="机具类型名称:" prop="machineTypeName">
<el-input v-model="form.machineTypeName" placeholder disabled />
</el-form-item>
<el-form-item label="规格型号" prop="specificationType">
<el-input v-model="form.specificationType" placeholder disabled />
</el-form-item>
<el-form-item label="采购数量" prop="purchaseNum">
<el-input v-model="form.purchaseNum" placeholder disabled />
</el-form-item>
<el-form-item label="验收结论" prop="checkResult">
<el-radio v-model="form.checkResult" label="通过">通过</el-radio>
<!-- <el-radio v-model="form.checkResult" label="不通过">不通过</el-radio> -->
</el-form-item>
<el-form-item label="验收通过数量" prop="checkNum">
<el-input-number
v-model="form.checkNum"
style="width:100%;"
controls-position="right"
:min="1"
:max="form.purchaseNum"
/>
</el-form-item>
<el-form-item label="验收图片" prop="checkUrl">
<el-upload
:http-request="(obj) => imgUpLoad(obj,'fileUrl')"
action="#"
:limit="5"
:file-list="fileList"
:show-file-list="true"
list-type="picture-card"
accept=".png, .jpg, .jpeg"
:class="{ disabled: uploadDisabled }"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<!-- <img v-if="imageUrl" :src="uploadUrl+imageUrl" style="width: 140px;height: 140px;" class="avatar"> -->
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 批量验收弹窗 -->
<el-dialog :title="title" :visible.sync="openAll" width="650px" append-to-body>
<el-form ref="aform" :model="aform" :rules="arules" label-width="120px">
<el-form-item label="验收结论" prop="checkResult">
<el-radio v-model="aform.checkResult" label="通过">通过</el-radio>
<!-- <el-radio v-model="aform.checkResult" label="不通过">不通过</el-radio> -->
</el-form-item>
<el-form-item label="验收图片" prop="checkUrl">
<el-upload
:http-request="(obj) => imgUpLoad(obj,'fileUrl')"
action="#"
:limit="5"
:file-list="fileList1"
:show-file-list="true"
list-type="picture-card"
accept=".png, .jpg, .jpeg"
:on-preview="handlePictureCardPreview"
:class="{ disabled: uploadDisabled }"
:on-remove="handleRemove"
>
<!-- <img v-if="imageUrl" :src="uploadUrl+imageUrl" style="width: 140px;height: 140px;" class="avatar"> -->
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="submitListForm">确 定</el-button>
<el-button @click="openAll=false">取 消</el-button>
</div>
</el-dialog>
<!-- 通知弹窗 -->
<el-dialog :title="title" :visible.sync="noticeOpen" width="1000px" append-to-body>
<el-form ref="nform" :model="nform" :rules="nrules" label-width="100px">
<el-form-item label="通知内容:" prop="notice">
<el-input
v-model="nform.notice"
type="textarea"
:autosize="{ minRows: 4, maxRows: 6}"
placeholder="请输入通知内容"
style="width: 80%;"
/>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="noticeUserList"
height="400"
@selection-change="handleSelectionNotice"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" type="index" />
<el-table-column
label="人员账号"
align="center"
key="userName"
prop="userName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="人员名称"
align="center"
key="nickName"
prop="nickName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="所属机构"
align="center"
key="deptName"
prop="deptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="角色"
align="center"
key="roleName"
prop="roleName"
:show-overflow-tooltip="true"
/>
<el-table-column label="联系电话" align="center" key="telphone" prop="telphone" width="120" />
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete" @click="delUser(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="addUserOpen">人员添加</el-button>
<el-button type="primary" @click="configNotice">消息通知</el-button>
</div>
</el-dialog>
<!-- 人员添加 -->
<el-dialog :title="title" :visible.sync="peopleOpen" width="1000px" append-to-body>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionUser"
height="450"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" key="userId" prop="userId" />
<el-table-column
label="人员账号"
align="center"
key="userName"
prop="userName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="人员名称"
align="center"
key="nickName"
prop="nickName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="所属机构"
align="center"
key="deptName"
prop="deptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="角色"
align="center"
key="roleName"
prop="roleName"
:show-overflow-tooltip="true"
/>
<el-table-column label="联系电话" align="center" key="telphone" prop="telphone" width="120" />
<!-- <el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="addUser(scope.row)"
>添加</el-button>
</template>
</el-table-column>-->
</el-table>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="addUser">添加</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" height="650px" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import { listType, getType, delType, addType, updateType, refreshCache } from '@/api/system/dict/type'
import {
getPurchaseCheckInfo,
bmNoticeInfo,
updatePurchaseCheckDetails,
getNoticeUserList,
getAllNotificationList,
addNoticeUser,
delNoticeUser,
} from '@/api/store/newBuy'
import { imgUpLoad, fileUpLoad } from '@/api/system/upload'
export default {
name: 'NewDevicesAccept',
dicts: ['sys_normal_disable'],
data() {
return {
//任务ID
taskId: '',
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//人员添加-列表数据
userList: [],
//通知人员数组
noticeUserList: [],
//选择人员
chosenUserList: [],
//确认消息通知人员-勾选的通知人员
configUserList: [],
//任务数据
taskInfo: {},
// 表格数据
equipmentList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
openAll: false,
isView: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord: undefined,
},
//图片上传参数---
imageUrl: '',
imageName: '',
fileList: [],
checkUrlList: [],
checkUrlNameList: [],
fileList1: [],
checkUrlList1: [],
checkUrlNameList1: [],
//上传地址
// uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
// uploadUrl:'http://112.29.103.165:21624/system',//线上服务器地址+system
uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
dialogImageUrl: '',
dialogVisible: false,
//--------------
// 表单参数
form: {},
// 表单校验
rules: {
checkResult: [{ required: true, message: '验收结论不能为空', trigger: 'blur' }],
checkNum: [{ required: true, message: '验收通过数量不能为空', trigger: 'blur' }],
checkUrl: [{ required: true, message: '验收图片不能为空', trigger: 'blur' }],
},
// 表单参数
aform: {},
// 表单校验
arules: {
checkResult: [{ required: true, message: '验收结论不能为空', trigger: 'blur' }],
checkUrl: [{ required: true, message: '验收图片不能为空', trigger: 'blur' }],
},
peopleOpen: false,
noticeOpen: false,
nform: {
notice: '',
},
nrules: {
notice: [{ required: true, message: '通知内容不能为空', trigger: 'blur' }],
},
deptName: undefined,
}
},
computed: {
//图片上传1张后隐藏上传框
uploadDisabled() {
return this.checkUrlList.length > 4
},
},
mounted() {
const taskId = this.$route.query && this.$route.query.taskId
this.taskId = taskId
console.log(this.taskId)
const isView = this.$route.query && this.$route.query.isView
if (isView && isView == 'true') {
this.isView = true
} else {
this.isView = false
}
this.getTaskInfo()
this.getAllUserList()
this.getNoticeUserList()
},
methods: {
//获取任务详情-列表数据
getTaskInfo() {
this.loading = true
getPurchaseCheckInfo({
taskId: this.taskId,
keyWord: this.queryParams.keyWord,
}).then(response => {
this.taskInfo = response.data
this.equipmentList = response.data.checkDetailsList
this.equipmentList.forEach(item => {
if (item.checkUrl) {
item.imgUrlList = item.checkUrl.split(',')
item.imgNameList = item.checkUrlName.split(',')
}
})
this.loading = false
})
},
// 返回列表页
jumpList() {
const obj = { path: '/store/newBuy/newDevicesList' }
this.$tab.closeOpenPage(obj)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
machineTypeName: undefined,
specificationType: undefined,
checkNum: undefined,
checkResult: '通过',
inputNum: undefined,
checkUrl: undefined,
}
this.imageUrl = ''
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getTaskInfo()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm('queryForm')
this.handleQuery()
},
//----消息通知
getNowTime() {
var today = new Date()
var year = today.getFullYear() //获取年份
var month = today.getMonth() + 1 //获取月份
var day = today.getDate() //获取日期
return year + '-' + month + '-' + day
// console.log(year + "-" + month + "-" + day);
},
//通知按钮
handleNotice() {
this.noticeOpen = true
this.resetForm('nform')
this.$set(
this.nform,
'notice',
'各位同事您好,请于' + this.getNowTime() + '进行机具验收。验收单号:' + this.taskInfo.code
)
},
//查询短信通知人员
getNoticeUserList() {
getNoticeUserList().then(response => {
this.noticeUserList = response.data
})
},
/** 查询所有用户列表--可添加人员 */
getAllUserList() {
getAllNotificationList().then(response => {
this.userList = response.data
})
},
addUserOpen() {
this.getAllUserList()
this.peopleOpen = true
},
// 多选框选中-添加人员
handleSelectionUser(selection) {
// console.log(selection)
this.chosenUserList = selection
},
//添加人员
addUser() {
// console.log(this.chosenUserList,"chosenUserList")
addNoticeUser(this.chosenUserList).then(response => {
if (response.code == 200) {
this.getNoticeUserList()
this.peopleOpen = false
}
})
},
delUser(row) {
delNoticeUser(row.userId).then(response => {
if (response.code == 200) {
this.getNoticeUserList()
}
})
},
// 多选框选中-添加消息通知
handleSelectionNotice(selection) {
this.configUserList = selection
},
//确认消息通知
configNotice() {
this.$refs['nform'].validate(valid => {
if (valid) {
this.configUserList.forEach((item, index) => {
item.noticeUser = item.userId
item.phone = item.telphone
})
let param = {
// message:this.nform.notice,
message: `${this.getNowTime()},${this.taskInfo.code}`,
taskId: this.taskInfo.taskId,
bmNoticeInfoList: this.configUserList,
}
if (this.configUserList.length > 0) {
bmNoticeInfo(param).then(response => {
console.log(response)
if (response.code == 200) {
this.$message({
message: '操作成功',
type: 'success',
})
this.noticeOpen = false
this.getTaskInfo()
}
})
} else {
this.$message({
message: '请选择通知人员!',
type: 'error',
})
}
}
})
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 验收按钮操作 */
handleCheck(row) {
// console.log(row)
this.$set(this.form, 'code', row.code)
this.$set(this.form, 'companyId', row.companyId)
this.$set(this.form, 'createBy', row.createBy)
this.$set(this.form, 'createTime', row.createTime)
this.$set(this.form, 'id', row.id)
this.$set(this.form, 'machineTypeName', row.machineTypeName)
this.$set(this.form, 'manageType', row.manageType)
this.$set(this.form, 'specificationType', row.specificationType)
this.$set(this.form, 'typeName', row.typeName)
this.$set(this.form, 'machineTypeName', row.machineTypeName)
this.$set(this.form, 'taskId', row.taskId)
this.$set(this.form, 'typeId', row.typeId)
this.$set(this.form, 'checkResult', row.checkResult || '通过')
// this.$set(this.form,'machineTypeName',row.machineTypeName)
this.$set(this.form, 'purchaseNum', row.purchaseNum)
this.$set(this.form, 'checkNum', row.purchaseNum)
this.$set(this.form, 'checkUrl', '')
this.$set(this.form, 'checkUrlName', '')
this.fileList = []
this.checkUrlList = []
this.checkUrlNameList = []
this.open = true
this.title = '验收'
},
/** 批量验收按钮操作 */
handleListCheck() {
// console.log(this.ids)
this.fileList1 = []
this.checkUrlList1 = []
this.checkUrlNameList1 = []
this.aform = {
checkResult: '通过',
checkUrl: '',
checkUrlName: '',
}
this.imageUrl = ''
this.openAll = true
this.title = '批量验收'
},
/** 提交按钮 */
submitForm: function() {
// console.log(this.form)
this.form.checkUrl = this.checkUrlList.join(',')
this.form.checkUrlName = this.checkUrlNameList.join(',')
let equipments = [this.form]
console.log(equipments)
this.$refs['form'].validate(valid => {
if (valid) {
updatePurchaseCheckDetails(equipments).then(response => {
if (response.code == 200) {
this.$message({
message: '操作成功',
type: 'success',
})
this.open = false
this.fileList = []
this.checkUrlList = []
this.checkUrlNameList = []
this.getTaskInfo()
}
})
}
})
},
submitListForm: function() {
// console.log(this.aform)
this.aform.checkUrl = this.checkUrlList1.join(',')
this.aform.checkUrlName = this.checkUrlNameList1.join(',')
this.ids.forEach(item => {
item.checkNum = item.purchaseNum
item.checkResult = this.aform.checkResult
item.checkUrl = this.aform.checkUrl
item.checkUrlName = this.aform.checkUrlName
})
// console.log(this.ids)
let equipments = this.ids
console.log(equipments)
this.$refs['aform'].validate(valid => {
if (valid) {
updatePurchaseCheckDetails(equipments).then(response => {
if (response.code == 200) {
this.$message({
message: '验收成功',
type: 'success',
})
this.openAll = false
this.open = false
this.fileList1 = []
this.checkUrlList1 = []
this.checkUrlNameList1 = []
this.getTaskInfo()
}
})
}
})
},
// 图片上传
imgUpLoad(param, name, index) {
param.type = 'ma'
imgUpLoad(param)
.then(res => {
if (res.code == 200) {
// console.log(res.data)
if (this.open) {
this.checkUrlList.push(res.data.fileUrl)
this.checkUrlNameList.push(res.data.fileName)
}
if (this.openAll) {
this.checkUrlList1.push(res.data.fileUrl)
this.checkUrlNameList1.push(res.data.fileName)
// this.aform.checkUrl = res.data.fileUrl;
// this.aform.checkUrlName = res.data.fileName;
}
} else {
// this.$msgError(res.msg)
this.$modal.msgError(res.msg)
}
})
.catch(error => {
// this.$msgError(error)
this.$modal.msgError(error)
})
},
handleAvatarSuccess(res, file) {
// console.log("success")
},
handleRemove(file, fileList) {
if (this.open) {
let sum = 0
this.checkUrlNameList.forEach((item, index) => {
if (item == file.name) {
sum = index
}
})
this.checkUrlNameList.splice(sum, 1)
this.checkUrlList.splice(sum, 1)
}
if (this.openAll) {
let sum1 = 0
this.checkUrlNameList1.forEach((item, index) => {
if (item == file.name) {
sum1 = index
}
})
this.checkUrlNameList1.splice(sum1, 1)
this.checkUrlList1.splice(sum1, 1)
}
},
//图片点击查看
handlePictureCardPreview(file) {
// console.log(file)
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//图片查看
openImg(url) {
this.dialogImageUrl = this.uploadUrl + url
this.dialogVisible = true
},
//验收后禁止勾选
selectable(row, index) {
if (row.status == 0) {
return true
} else {
return false
}
},
/** 导出按钮操作 */
handleExport() {
this.download(
'system/dict/type/export',
{
...this.queryParams,
},
`type_${new Date().getTime()}.xlsx`
)
},
/** 刷新缓存按钮操作 */
handleRefreshCache() {
refreshCache().then(() => {
this.$modal.msgSuccess('刷新成功')
this.$store.dispatch('dict/cleanDict')
})
},
},
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
</style>