devicesmgt/sgzb-ui/src/views/claimAndRefund/receiveByCq/receiveApplyAddByCq.vue

730 lines
22 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="receiveApplyAdd">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:rules="queryRules"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-row>
<el-form-item label="领用类型" prop="leaseType">
<el-select
v-model="queryParams.leaseType"
filterable
placeholder="请选择领用类型"
clearable
style="width: 240px"
>
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="领料单位" prop="unitId">
<el-select
v-model="queryParams.unitId"
filterable
clearable
@change="GetProData"
style="width: 240px"
placeholder="请选择"
>
<el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="领料工程" prop="proId">
<el-select
v-model="queryParams.proId"
filterable
clearable
@change="GetUnitData"
style="width: 240px"
placeholder="请选择"
>
<el-option v-for="item in proList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="协议号" prop="agreementCode">
<el-input maxlength="50" v-model="queryParams.agreementCode" disabled style="width: 240px"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="物品类型" prop="status">
<el-cascader
placeholder="请输入物品类型"
:options="deviceTypeTree"
:props="deviceTypeTreeProps"
v-model="deviceType"
@change="deviceTypeChange"
ref="deviceTypeCascader"
filterable
style="width: 240px"
></el-cascader>
</el-form-item>
<el-form-item label="预计领料时间" prop="estimateLeaseTime">
<el-date-picker
v-model="queryParams.estimateLeaseTime"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="预计领料时间"
></el-date-picker>
</el-form-item>
<el-form-item label="领料人" prop="leasePerson">
<el-input
maxlength="50"
v-model="queryParams.leaseApplyInfo.leasePerson"
placeholder="请输入领料人"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="领料人电话" prop="phone">
<el-input
v-model="queryParams.leaseApplyInfo.phone"
placeholder="请输入领料人电话"
clearable
style="width: 240px"
maxlength="11" onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
/>
</el-form-item>
<el-form-item label="备注" prop="roleName">
<el-input
maxlength="100"
v-model="queryParams.leaseApplyInfo.remark"
placeholder="请输入备注"
clearable
rows="1"
type="textarea"
style="width: 240px"
/>
</el-form-item>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-back" size="mini" @click="handleBack">领料申请</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" v-if="isEdit == 'true'" @click="handleAdd">
保存
</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="leaseApplyDetails" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" type="index" width="80" />
<el-table-column label="类型名称" prop="typeCn" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" prop="guigeCn" :show-overflow-tooltip="true" />
<el-table-column label="计量单位" prop="unitCn" />
<el-table-column label="库存数量" prop="num" />
<el-table-column label="预领数量" align="center">
<template slot-scope="scope">
<el-input
v-model.number="scope.row.preNum"
placeholder="请输入预领数量"
type="number"
min="1"
@input="checkNum(scope.row)"
clearable
style="width: 100%"
/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="createTime">
<template slot-scope="scope">
<el-input maxlength="100" v-model="scope.row.remark" placeholder="请输入备注" clearable style="width: 100%" />
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
v-if="isEdit == 'true'"
>
<template slot-scope="scope">
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleBack(scope.row)"-->
<!-- v-hasPermi="['system:role:edit']"-->
<!-- >修改</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete({ ...scope.row, index: scope.$index })"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from '@/api/system/role'
import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
import {
getProData,
getUnitData,
getDeviceTypeTree,
getAgreementInfoById,
submitLeaseApply,
getTaskDetail,
editLeaseApply,
getLeaseApplyListAll,
getLeaseApplyAuditListAll,
} from '@/api/claimAndRefund/receive'
import { getInfo } from '@/api/login'
export default {
name: 'ReceiveApplyAdd',
data() {
const validatePhone = (rule, value, callback) => {
if (!value) {
callback(new Error('退料人电话不能为空'))
// this.$message.error("手机号不为空");
} else if (value.length < 11) {
callback(new Error('电话号码格式不正确'))
// this.$message.error("手机号格式不正确");
} else {
callback()
}
}
return {
user: null, // 用户信息
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 角色表格数据
roleList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 是否显示弹出层(数据权限)
openDataScope: false,
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
isEdit: 'true',
// 日期范围
dateRange: [],
// 数据范围选项
dataScopeOptions: [
{
value: '1',
label: '全部数据权限',
},
{
value: '2',
label: '自定数据权限',
},
{
value: '3',
label: '本部门数据权限',
},
{
value: '4',
label: '本部门及以下数据权限',
},
{
value: '5',
label: '仅本人数据权限',
},
],
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: [],
// 查询参数
queryParams: {
types: 2,
unitId: null,
proId: null,
agreementId: null, //协议id
agreementCode: null, //协议code
companyId: '', //登录信息中取
createBy: '', //用户名
estimateLeaseTime: '',
leaseType: '',
taskType: 29,
taskStatus: 31,
//领料人信息
leaseApplyInfo: {
leasePerson: '',
phone: '',
remark: '',
},
//领料详情集合
leaseApplyDetails: [],
},
typeList: [
{ id: '0', name: '工程租赁' },
{ id: '1', name: '长期领用' },
], //集合
leaseApplyDetails: [],
leaseApplyInfoList: [],
//领料详情单条模板
leaseApplyDetailsItem: {
parenntId: null,
createBy: null,
companyId: null,
status: 0,
typeId: null, // 树结构第4级 规格id
typeCn: '', //显示的设备类型
guigeCn: '', //显示的设备规格
unitCn: '', //显示的设备 单位
remark: '', //单条备注
preNum: 1, //预领数量
},
//
queryRules: {
leaseType: [
{
required: true,
message: '请选择领用类型',
trigger: 'change',
},
],
unitId: [
{
required: true,
message: '请选择领料单位',
trigger: 'change',
},
],
proId: [
{
required: true,
message: '请选择领料工程',
trigger: 'change',
},
],
// leasePerson: [
// {
// required: true, message: '请输入领料人', trigger: 'blur',
// }
// ],
// phone: [
// {required: true, message: '请输入领料人手机号', trigger: 'change'},
// { validator: validatePhone, trigger: "blur" },
// { min: 11, message: "手机号不足11位", trigger: "blur" },
// ],
},
unitList: [], //单位 集合
proList: [], // 工程 集合
deviceTypeTree: [], // 设备 树结构数据
taskId: null, // 是否编辑
// 设备 树显示 配置
deviceTypeTreeProps: {
multiple: false,
value: 'id',
},
// 选中的设备类型
deviceType: null,
// 表单参数
form: {},
defaultProps: {
children: 'children',
label: 'label',
},
// 表单校验
rules: {
roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }],
},
}
},
mounted() {
this.GetUserInfo()
this.GetUnitData()
this.GetProData()
this.GetDeviceTypeTree()
// this.getList();
if (this.$route.query.taskId && !this.$route.query.isBack) {
console.log('查看')
this.GetTaskDetail(this.$route.query.taskId)
}
if (this.$route.query.taskId && this.$route.query.isBack) {
console.log('驳回提交查看')
this.GetTaskDetail2(this.$route.query.taskId)
}
this.taskId = this.$route.query.taskId
this.isEdit = this.$route.query.isEdit
// console.log(typeof(this.isEdit))
// this.$set('isEdit',this.$route.query.isEdit)
},
methods: {
// 获取用户信息
async GetUserInfo() {
const res = await getInfo()
this.user = res.user
},
// 获取 来往单位 列表数据
async GetUnitData() {
const params = {
id: this.queryParams.proId,
}
const res = await getUnitData(params)
this.unitList = res.data
this.GetAgreementInfoById()
},
// 获取 工程名称 列表数据
async GetProData() {
const params = {
id: this.queryParams.unitId,
}
const res = await getProData(params)
this.proList = res.data
this.GetAgreementInfoById()
},
// 获取 设备树结构数据
async GetDeviceTypeTree() {
const params = {
level: 4,
}
const res = await getDeviceTypeTree(params)
this.deviceTypeTree = res.data
},
// 获取 协议id
async GetAgreementInfoById() {
if (this.queryParams.unitId && this.queryParams.proId) {
const params = {
unitId: this.queryParams.unitId,
projectId: this.queryParams.proId,
}
const res = await getAgreementInfoById(params)
if (!(res.data && res.data.agreementId)) {
this.$message.error('当前单位和工程未上传')
this.queryParams.unitId = null
this.queryParams.proId = null
this.GetUnitData()
this.GetProData()
} else {
this.queryParams.agreementId = res.data.agreementId
this.queryParams.agreementCode = res.data.agreementCode
}
}
},
// 获取 任务详情数据
async GetTaskDetail(taskId) {
const res = await getLeaseApplyListAll({ taskId })
const data = res.rows[0]
// unitId:null,
// proId:null,
// agreementId:null, //协议id
// agreementCode: null,
if (data.taskStatus == 100) {
this.queryParams.taskStatus = 32
this.queryParams.examineStatusId = '32'
}
this.queryParams.unitId = data.unitId
this.queryParams.proId = data.proId
this.queryParams.leaseApplyInfo.phone = data.leaseApplyInfoList[0].phone
this.queryParams.leaseApplyInfo.leasePerson = data.leaseApplyInfoList[0].leasePerson
this.queryParams.agreementCode = data.agreementCode
this.queryParams.agreementId = data.agreementId
this.queryParams.estimateLeaseTime = data.estimateLeaseTime
// this.queryParams.leaseType = data.leaseType
this.$set(this.queryParams, 'leaseType', data.leaseType)
this.queryParams.leaseApplyInfo.remark = data.leaseApplyInfoList[0].remark
this.leaseApplyInfoList = data.leaseApplyInfoList
this.leaseApplyDetails = data.leaseApplyDetails.map(item => {
return this.handelEchoData(item)
})
},
// 驳回提交 任务详情数据
async GetTaskDetail2(taskId) {
const res = await getLeaseApplyAuditListAll({ taskId })
const data = res.rows[0]
// unitId:null,
// proId:null,
// agreementId:null, //协议id
// agreementCode: null,
if (data.taskStatus == 100) {
this.queryParams.taskStatus = 32
this.queryParams.examineStatusId = '32'
}
this.queryParams.unitId = data.unitId
this.queryParams.proId = data.proId
this.queryParams.leaseApplyInfo.phone = data.leaseApplyInfoList[0].phone
this.queryParams.leaseApplyInfo.leasePerson = data.leaseApplyInfoList[0].leasePerson
this.queryParams.agreementCode = data.agreementCode
this.queryParams.agreementId = data.agreementId
this.queryParams.estimateLeaseTime = data.estimateLeaseTime
// this.queryParams.leaseType = data.leaseType
this.$set(this.queryParams, 'leaseType', data.leaseType)
this.queryParams.leaseApplyInfo.remark = data.leaseApplyInfoList[0].remark
this.leaseApplyInfoList = data.leaseApplyInfoList
this.leaseApplyDetails = data.leaseApplyDetails.map(item => {
return this.handelEchoData(item)
})
},
//生成回显数据
handelEchoData(item) {
const template = JSON.parse(JSON.stringify(this.leaseApplyDetailsItem))
template.createBy = item.createBy
template.companyId = item.companyId
template.typeId = item.typeId
template.unitCn = item.unitName
template.typeCn = item.typeName
template.guigeCn = item.typeModelName
template.remark = item.remark
template.preNum = item.preNum
template.status = item.status
template.parenntId = item.parenntId
template.num = item.num
return template
},
// 表单重置
reset() {
if (this.$refs.menu != undefined) {
this.$refs.menu.setCheckedKeys([])
}
;(this.menuExpand = false),
(this.menuNodeAll = false),
(this.deptExpand = true),
(this.deptNodeAll = false),
(this.form = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: '0',
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
})
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm('queryForm')
},
// 多选框选中数据
handleSelectionChange(selection) {
// this.queryParams.leaseApplyDetails = selection
this.single = selection.length != 1
this.multiple = !selection.length
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case 'handleDataScope':
this.handleDataScope(row)
break
case 'handleAuthUser':
this.handleAuthUser(row)
break
default:
break
}
},
/** 保存按钮操作 */
handleAdd() {
this.$refs.queryForm.validate(async valid => {
if (!valid) {
return false
} else {
this.queryParams.leaseApplyDetails = this.leaseApplyDetails
if (this.queryParams.leaseApplyDetails.length == 0) {
this.$message.error('请添加数据')
return
}
let canSave = true
this.queryParams.leaseApplyDetails.forEach(item => {
if (item.num == 0) {
this.$message.error('机具类型库存量为零无法领料')
canSave = false
return
}
if (item.preNum == '') {
canSave = false
this.$message.error('请填写预领数量')
return
}
})
if (!canSave) {
return false
}
this.queryParams.createBy = this.user.userName
this.queryParams.companyId = this.user.companyId
let res
if (this.queryParams.leaseType == 1) {
this.queryParams.taskStatus = 117
}
if (this.taskId) {
this.leaseApplyInfoList.forEach(v => {
v = Object.assign(v, this.queryParams.leaseApplyInfo)
this.$set(v, 'leaseApplyDetails', this.queryParams.leaseApplyDetails)
})
if (this.$route.query.isBack) {
this.queryParams.souceByRefuse = 1
}
const params = {
...this.queryParams,
taskId: this.taskId,
leaseApplyInfoList: this.leaseApplyInfoList,
}
res = await editLeaseApply(params)
} else {
// console.log(this.queryParams)
res = await submitLeaseApply(this.queryParams)
}
if (res.code == 200) {
this.$message({
type: 'success',
message: res.msg,
})
this.$tab.closeOpenPage({ path: '/claimAndRefund/receiveByCq/receiveApply' })
}
}
})
},
/** 修改按钮操作 */
handleBack(row) {
this.$tab.closeOpenPage({ path: '/claimAndRefund/receiveByCq/receiveApply' })
},
/** 删除按钮操作 */
handleDelete(row) {
this.leaseApplyDetails.splice(row.index, 1)
},
/** 导出按钮操作 */
handleExport() {
// this.download('system/role/export', {
// ...this.queryParams
// }, `role_${new Date().getTime()}.xlsx`)
},
checkNum(row) {
let maxNum = row.num
if (row.preNum <= 1) {
row.preNum = 1
} else if (row.preNum >= maxNum) {
row.preNum = maxNum
}
},
/////// 设备类型树 切换
deviceTypeChange(val) {
console.log(val)
let nodes = null
nodes =
this.$refs.deviceTypeCascader.getCheckedNodes().length > 0
? this.$refs.deviceTypeCascader.getCheckedNodes()
: [this.$refs.deviceTypeCascader.panel.getNodeByValue(val)]
if (nodes[0].level != 4) {
return
}
// console.log(this.leaseApplyDetails)
// console.log(nodes[0].data.id)
for (let i = 0; i < this.leaseApplyDetails.length; i++) {
if (this.leaseApplyDetails[i].typeId == nodes[0].data.id) {
this.leaseApplyDetails.splice(i, 1)
break
}
}
this.leaseApplyDetails.push(this.handelTableItemData(nodes[0]))
this.deviceType = {}
},
//// 将数据处理成 表格中需要的数据
handelTableItemData(node) {
const template = JSON.parse(JSON.stringify(this.leaseApplyDetailsItem))
template.createBy = this.user.name
console.log(node.data)
template.num = node.data.num
template.companyId = node.data.companyId
template.typeId = node.data.id
template.unitCn = node.data.unitName
template.typeCn = node.pathLabels[2]
template.guigeCn = node.pathLabels[3]
if (this.taskId) {
const index = this.leaseApplyInfoList.find(key => key.companyId == node.data.companyId)
template.parenntId = index ? index.id : ''
}
return template
},
},
}
</script>
<style scoped lang="scss">
/* input number类型取消增减箭头*/
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::v-deep .el-input {
input[type='number'] {
padding-right: 0px;
-moz-appearance: textfield;
-webkit-appearance: textfield;
// 解决el-input设置类型为number时中文输入法光标上移问题
line-height: 1px !important;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
</style>