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

606 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() {
const that = this;
return {
disabledDate(time) {
if (that.maForm.purchaseTime) {
return (
time.getTime() < Date.now() ||
time.getTime() < new Date(that.maForm.purchaseTime).getTime()
);
}
return time.getTime() < Date.now(); //实现1效果
},
};
},
},
watch: {
'maForm.purchaseTime'() {
if (this.maForm.purchaseTime != '') {
this.maForm.arrivalTime = ''
}
}
},
created() {
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=>{
// console.log(item3,'item3')
if(item3.children&&item3.children.length>0){
item3.children.forEach(item4=>{
// console.log(item4,'item4')
item4.machineTypeName = item3.typeName
item4.specificationType = item4.typeName
// item4.purchasePrice = 1
// item4.purchaseNum = 1
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>