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

607 lines
19 KiB
Vue

<template>
<div class="app-container" id="newDevicesArrival">
<el-row :gutter="24" class="mb8">
<!-- <el-col :span="4" style="text-align:center;"><h4>新购任务信息:</h4></el-col> -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-col :span="6">
<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-form-item>
</el-col>
<el-col :span="6">
<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-col>
<el-col :span="6">
<el-form-item label="机具厂家" prop="supplierId">
<el-select
v-model="queryParams.supplierId"
placeholder="机具厂家"
clearable
filterable
style="width: 240px"
@change="changeSupplier"
>
<el-option
v-for="item in supplierList"
:key="item.supplierId"
:label="item.supplier"
:value="item.supplierId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="9"></el-col>
</el-form>
</el-row>
<el-form :model="maForm" ref="maForm" :rules="rules" size="small" :inline="true">
<el-row>
<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: 100%;"
>
<el-option label="请选择" :value="0"></el-option>
<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"
/>
</el-form-item>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="2">
<el-button type="success" plain icon="el-icon-back" size="mini" @click="jumpList">新购验收管理</el-button>
</el-col>
<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="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:role:export']"
>导出</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 label="序号" type="index" width="55" />
<el-table-column
label="机具类型"
prop="machineTypeName"
:show-overflow-tooltip="true"
width="200"
></el-table-column>
<el-table-column
label="规格型号"
prop="specificationType"
:show-overflow-tooltip="true"
width="200"
/>
<el-table-column label="单位" prop="unitName" width="100" />
<el-table-column label="购置单价(元)" prop="purchasePrice" align="center" width="150">
<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 label="采购数量" prop="purchaseNum" width="150" type="number" maxlength="10">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.purchaseNum"
controls-position="right"
style="width: 100%;"
:min="1"
></el-input-number>
</template>
</el-table-column>
<el-table-column label="机具厂家" prop="supplierId" width="200">
<template slot-scope="scope">
<el-select
v-model="scope.row.supplierId"
placeholder="机具厂家"
filterable
clearable
style="width: 180px"
>
<el-option
v-for="item in supplierList"
:key="item.supplierId"
:label="item.supplier"
:value="item.supplierId"
/>
</el-select>
<!-- <el-input v-model="scope.row.supplierId"></el-input> -->
</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: 180px"
value-format="yyyy-MM-dd"
type="date"
range-separator="-"
placeholder="出厂日期"
></el-date-picker>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<!-- <el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改</el-button>-->
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</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 {} from '@/api/store/newBuy'
export default {
name: 'NewDevicesArrival',
dicts: ['sys_normal_disable'],
components: { Treeselect },
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,
// 日期范围
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: '',
},
// 表单参数
form: {},
defaultProps: {
children: 'children',
label: 'label',
},
// 表单校验
rules: {
purchaseTime: [{ required: true, message: '采购日期不能为空', trigger: 'blur' }],
arrivalTime: [{ required: true, message: '到货日期不能为空', trigger: 'blur' }],
// purchaser: [
// { required: true, message: "采购员不能为空", trigger: "blur" }
// ]
},
}
},
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()
}
this.getUserList()
// this.getList();
this.equipmentType()
this.supplierInfoList()
},
methods: {
/** 查询用户列表--采购员 */
getUserList() {
getUserByRoleList({ roleId: '104' }).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)
})
}
})
}
})
}
})
})
},
//添加机具类型
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
}
}
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.equipmentList = response.data.checkDetailsList
// this.loading = false;
})
},
/** 查询右侧列表 */
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.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.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;
},
/** 删除按钮操作 */
handleDelete(row) {
console.log(row.id)
this.$modal
.confirm('是否确认删除所选择的数据项?')
.then(() => {
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`)
},
},
}
</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>