nw-cqdevicemgt-ui/src/views/warehouseManage/newPurchase/toolsAcceptance/component/addTools.vue

840 lines
30 KiB
Vue

<template>
<!-- 新增工机具 -->
<div>
<!-- <el-form -->
<!-- :model="queryParams" -->
<!-- ref="queryForm" -->
<!-- size="small" -->
<!-- :inline="true" -->
<!-- label-width="100px" -->
<!-- > -->
<!-- <el-form-item label="出厂日期">
<el-date-picker
v-model="queryParams.productionTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="date"
placeholder="出厂日期"
@change="changeTime"
></el-date-picker>
</el-form-item>
<el-form-item label="机具厂家" prop="supplierId">
<el-select
v-model="queryParams.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> -->
<el-form
:model="maForm"
ref="maForm"
:rules="rules"
size="small"
:inline="true"
label-width="120px"
>
<el-form-item label="线下采购单编号" prop="purchaseNumber">
<el-input
placeholder="请输入线下采购单编号"
style="width: 240px"
v-model="maForm.purchaseNumber"
/>
</el-form-item>
<el-form-item label="规格型号" prop="equipmentId">
<!-- <treeselect
v-model="queryParams.equipmentId"
default-expand-all
:options="equipmentTypeList"
placeholder="请选择规格型号"
@select="select"
:disable-branch-nodes="true"
style="width: 240px"
noChildrenText="没有数据了"
noOptionsText="没有数据"
noResultsText="没有搜索结果"
/> -->
<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="purchaseTime">
<el-date-picker
v-model="maForm.purchaseTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择采购日期"
></el-date-picker>
</el-form-item>
<el-form-item label="到货日期" prop="arrivalTime">
<el-date-picker
v-model="maForm.arrivalTime"
style="width: 240px"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
type="date"
placeholder="请选择到货日期"
></el-date-picker>
</el-form-item>
<el-form-item label="采购员" prop="purchaser">
<el-select
v-model="maForm.purchaser"
filterable
placeholder="请选择采购员"
style="width: 240px"
>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="item.userId"
></el-option>
</el-select>
</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-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="machineTypeName"
show-overflow-tooltip
></el-table-column>
<el-table-column
align="center"
label="规格型号"
prop="specificationType"
show-overflow-tooltip
/>
<el-table-column align="center" label="单位" prop="unitName" />
<el-table-column
label="购置单价(元)"
prop="purchasePrice"
align="center"
>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.purchasePrice"
controls-position="right"
style="width: 100%"
:min="0"
></el-input-number>
</template>
</el-table-column>
<el-table-column align="center" label="采购数量" prop="purchaseNum">
<template slot-scope="scope">
<el-input-number
type="number"
:min="1"
clearable
v-model.number="scope.row.purchaseNum"
style="width: 100%"
></el-input-number>
</template>
</el-table-column>
<el-table-column
label="机具厂家"
prop="supplierId"
align="center"
width="200"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.supplierId"
placeholder="机具厂家"
filterable
clearable
>
<el-option
v-for="item in supplierList"
:key="item.supplierId"
:label="item.supplier"
:value="item.supplierId"
/>
</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"
range-separator="-"
placeholder="出厂日期"
clearable
></el-date-picker>
</template>
</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-document"
v-if="scope.row.manageType == 2"
@click="handleDetail(scope.row)"
>明细</el-button
>
<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>
<holdingpole-dialog
:dialog-class="'my-custom-dialog'"
:initial-visible="showDialog"
:holdingpoleData="holdingpoleData"
@close="onDialogClose"
></holdingpole-dialog>
</div>
</template>
<script>
import {
addPurchaseCheckInfo,
getPurchaseCheckInfo,
updatePurchaseCheckInfo,
} from '@/api/store/newBuy'
import { getUserByRoleList } from '@/api/system/user'
import { equipmentTypeTree, supplierInfoList } from '@/api/store/tools'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'
import {} from '@/api/store/newBuy'
export default {
name: 'NewDevicesArrival',
dicts: ['sys_normal_disable'],
components: { Treeselect, HoldingpoleDialog },
props: {
isEdit: {
type: Boolean,
default: () => {
return false
},
},
editTaskId: {
type: [String, Number],
default: () => {
return ''
},
},
},
data() {
return {
taskId: '',
// isEdit: false,
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//机具厂家(供应商管理)
supplierList: [],
//机具类型
equipmentTypeList: [],
// 用户数据
userList: [],
// 角色表格数据
equipmentList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 是否显示弹出层(数据权限)
openDataScope: false,
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
showDialog: false,
holdingpoleData: {},
// 日期范围
dateRange: [],
// 数据范围选项
dataScopeOptions: [
{
value: '1',
label: '全部数据权限',
},
{
value: '2',
label: '自定数据权限',
},
{
value: '3',
label: '本部门数据权限',
},
{
value: '4',
label: '本部门及以下数据权限',
},
{
value: '5',
label: '仅本人数据权限',
},
],
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: [],
// 查询参数
queryParams: {
equipmentId: undefined,
productionTime: '',
supplierId: '',
},
maForm: {
purchaseTime: '',
arrivalTime: '',
purchaser: '',
remark: '',
purchaseNumber: '',
},
// 表单参数
form: {},
defaultProps: {
children: 'children',
label: 'label',
},
// 表单校验
rules: {
purchaseNumber: [
{
required: true,
message: '请输入线下采购单编号',
trigger: 'blur',
},
],
purchaseTime: [
{
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,
}
},
computed: {
pickerOptions() {
return {
disabledDate(time) {
const currentDate = new Date()
currentDate.setHours(0, 0, 0, 0)
return time.getTime() < currentDate.getTime()
},
}
},
},
watch: {
'maForm.purchaseTime'() {
if (this.maForm.purchaseTime != '') {
// this.maForm.arrivalTime = ''
}
},
},
mounted() {
// const taskId = this.$route.query && this.$route.query.taskId
// this.taskId = taskId
// if (this.taskId == '' || !this.taskId) {
// this.isEdit = false
// } else if (this.taskId != '') {
// this.isEdit = true
// this.getTaskInfo()
// }
if (this.isEdit) {
this.taskId = this.editTaskId
this.getTaskInfo()
}
this.getUserList()
// this.getList();
this.equipmentType()
this.supplierInfoList()
},
methods: {
/** 查询用户列表--采购员 */
getUserList() {
getUserByRoleList({ roleIds: [152] }).then((response) => {
this.userList = response.data
})
},
/** 机具厂家 */
supplierInfoList() {
supplierInfoList().then((response) => {
this.supplierList = response.rows
})
},
/** 机具类型 */
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.machineTypeName =
item3.typeName
item4.specificationType =
item4.typeName
this.$set(item4, 'purchasePrice', 0)
this.$set(item4, 'purchaseNum', 1)
})
}
})
}
})
}
})
let selectList = []
this.equipmentList.forEach((e) => {
selectList.push(
this.getParentsById(this.equipmentTypeList, e.typeId),
)
})
this.deviceType = selectList
})
},
//添加机具类型
select(row) {
console.log(row)
if (row.level == 4) {
for (let i = 0; i < this.equipmentList.length; i++) {
if (this.equipmentList[i].typeId == row.typeId) {
this.equipmentList.splice(i, 1)
break
}
}
// 如果有厂家则代入
if (this.queryParams.supplierId) {
this.$set(row, 'supplierId', this.queryParams.supplierId)
} else {
this.$set(row, 'supplierId', '')
}
this.$set(row, 'createTime', null)
this.$set(row, 'productionTime', '')
// this.$set(row, 'supplierId', '')
this.$set(row, 'purchasePrice', 0)
this.$set(row, 'purchaseNum', 1)
this.equipmentList.unshift(row)
}
},
//选择机具厂家
// changeSupplier(supplierId) {
// this.equipmentList.forEach((item) => {
// this.$set(item, 'supplierId', supplierId)
// })
// },
//选择出厂日期
changeTime(time) {
console.log(time)
this.equipmentList.forEach((item) => {
this.$set(item, 'productionTime', time)
})
},
//获取任务详情--- 编辑回显数据
getTaskInfo() {
// this.loading = true;
getPurchaseCheckInfo({
taskId: this.taskId,
keyWord: this.queryParams.keyWord,
}).then((response) => {
// this.taskInfo = response.data
this.maForm.purchaseTime = response.data.purchaseTime
this.maForm.arrivalTime = response.data.arrivalTime
this.maForm.purchaser = response.data.purchaser
this.maForm.remark = response.data.remark
this.maForm.purchaseNumber = response.data.purchaseNumber
this.equipmentList = response.data.checkDetailsList
// this.loading = false;
})
},
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
}
}
}
},
/** 查询右侧列表 */
getList() {
// this.loading = true;
// listRole().then(response => {
// this.equipmentList = response.rows;
// this.total = response.total;
// this.loading = false;
// }
// );
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 取消按钮(数据权限)
cancelDataScope() {
this.openDataScope = false
this.reset()
},
// 表单重置
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')
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.roleId)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleSave() {
if (this.equipmentList.length > 0) {
this.$refs['maForm'].validate((valid) => {
if (valid) {
// console.log(this.maForm,'maForm')
// console.log(this.equipmentList,'equipmentList')
let isEmpty = true
this.equipmentList.forEach((item) => {
if (item.purchaseNum == '' || !item.purchaseNum) {
isEmpty = false
}
})
// console.log(this.taskId)
this.maForm.taskId = this.taskId
this.maForm.checkDetailsList = this.equipmentList
// console.log(this.maForm)
if (isEmpty) {
if (this.equipmentList.length > 0) {
this.$modal
.confirm('是否确认保存当前页面')
.then(function () {})
.then(() => {
if (this.isEdit) {
console.log('编辑')
this.loading = true
updatePurchaseCheckInfo(
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('新增')
this.loading = true
addPurchaseCheckInfo(
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(
'请先选择并添加机具类型!!!',
)
}
} else {
this.$modal.msgError('请填写采购数量!!!')
}
}
})
} else {
this.$modal.msgError('请先添加机具类型')
}
},
jumpList() {
const obj = { path: '/store/newBuy/newDevicesList' }
this.$tab.closeOpenPage(obj)
},
/** 修改按钮操作 */
handleUpdate(row) {
// this.reset();
// this.form = response.data;
// this.open = true;
},
/** 明细按钮操作 */
handleDetail(row) {
this.holdingpoleData = row
this.showDialog = true
},
onDialogClose() {
console.log('弹窗已关闭')
this.showDialog = false
// 在这里执行关闭后的相关操作
},
/** 删除按钮操作 */
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.id == row.id) {
this.equipmentList.splice(index, 1)
}
})
})
.catch(() => {})
// const roleIds = row.roleId || this.ids;
// this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function() {
// return delRole(roleIds);
// }).then(() => {
// this.getList();
// this.$modal.msgSuccess("删除成功");
// }).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// this.download('system/role/export', {
// ...this.queryParams
// }, `role_${new Date().getTime()}.xlsx`)
},
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))
obj.supplierId = ''
obj.createTime = null
obj.productionTime = ''
obj.purchasePrice = 0
obj.purchaseNum = ''
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
} else {
this.equipmentList = []
}
},
},
}
</script>
//
<style lang="scss" scoped>
// ::v-deep.el-table .fixed-width .el-button--mini {
// width: 60px !important;
// margin-bottom: 10px;
// }
// ::v-deep input::-webkit-inner-spin-button {
// -webkit-appearance: none !important;
// }
// ::v-deep input[type='number'] {
// -moz-appearance: textfield !important;
// }
//
</style>
<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>