651 lines
20 KiB
Vue
651 lines
20 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<!-- <el-form-item label="项目名" prop="projectId">-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="queryParams.projectId"-->
|
||
<!-- placeholder="请输入项目名"-->
|
||
<!-- clearable-->
|
||
<!-- @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="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
v-hasPermi="['oa:oaOutWarehouse:add']"
|
||
>新增
|
||
</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="['oa:oaOutWarehouse: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="['oa:oaOutWarehouse:export']"
|
||
>导出
|
||
</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="outWareHouseList" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center"/>
|
||
<el-table-column label="序号" align="center" type="index"/>
|
||
<el-table-column label="出库单" align="center" prop="id"/>
|
||
<el-table-column label="物料名" align="center" prop="warehouseName"/>
|
||
<el-table-column label="出库数量" align="center" prop="amount"/>
|
||
<el-table-column label="关联项目" align="center" prop="projectName">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.projectName!==null">
|
||
<el-tooltip class="item" effect="dark" :content="'点击查看'+scope.row.projectName+'的出库情况'" placement="bottom">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="handleSearch(scope.row)"
|
||
> {{ scope.row.projectName }}
|
||
</el-button>
|
||
</el-tooltip>
|
||
</div>
|
||
<div v-else>未关联项目</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="出库时间" align="center" prop="createTime"/>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-search"
|
||
@click="showDetail(scope.row)"
|
||
>查看详情
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
|
||
<!-- 详情描述弹窗 -->
|
||
<el-dialog title="出库物料详情" :visible.sync="detail" width="950px" append-to-body>
|
||
<!-- 物料数据 -->
|
||
<el-descriptions class="margin-top" title="物料数据" :column="3" border>
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-s-order"></i>
|
||
出库单
|
||
</template>
|
||
{{outDetail.id}}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-postcard"></i>
|
||
出库数量（{{warehouseDetail.unit}}）
|
||
</template>
|
||
{{ outDetail.amount }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-collection"></i>
|
||
物料名
|
||
</template>
|
||
{{ warehouseDetail.name }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-user"></i>
|
||
操作人
|
||
</template>
|
||
{{ outDetail.createBy }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-date"></i>
|
||
出库时间
|
||
</template>
|
||
{{ outDetail.createTime }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-collection"></i>
|
||
关联项目
|
||
</template>
|
||
{{projectDetail==null?'未关联项目':projectDetail.projectName}}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-tickets"></i>
|
||
备注
|
||
</template>
|
||
{{outDetail.remark==null?'空':outDetail.remark}}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 项目数据 如果有的话显示 -->
|
||
<el-descriptions v-if="projectDetail!==null" class="margin-top" title="项目数据" :column="3" border>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-s-order"></i>
|
||
项目编号
|
||
</template>
|
||
{{ projectDetail.projectNum }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-s-flag"></i>
|
||
项目名
|
||
</template>
|
||
{{outDetail.id}}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-s-opportunity"></i>
|
||
项目状态
|
||
</template>
|
||
<el-tag> {{projectDetail.projectStatus==0?'未完结':'结项'}} </el-tag>
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
<i class="el-icon-tickets"></i>
|
||
备注
|
||
</template>
|
||
{{projectDetail.remark==null?'空':projectDetail.remark}}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="detail = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
|
||
<!-- 添加或修改仓库出库对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item
|
||
label="绑定项目"
|
||
>
|
||
<el-radio-group v-model="projectFlag" :disabled="drawer">
|
||
<el-radio :label="true">是</el-radio>
|
||
<el-radio :label="false">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="projectFlag&&!drawer"
|
||
prop="projectId"
|
||
label="项目名"
|
||
>
|
||
<el-select v-model="form.projectId" placeholder="请选择项目">
|
||
<el-option
|
||
v-for="item in projectList"
|
||
:key="item.projectId"
|
||
:label="item.projectName"
|
||
:value="item.projectId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
v-if="drawer"
|
||
label="项目名"
|
||
>
|
||
<el-input :value="selectedProject.projectName" disabled></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
v-else
|
||
prop="remark"
|
||
label="备注"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="请输入内容"
|
||
v-model="form.remark">
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
v-for="(item, index) in form.outWareHouseList"
|
||
:label="'出库物料' + (index+1)"
|
||
:key="item.warehouseId"
|
||
:prop="'outWareHouseList.' + index + '.warehouseId'"
|
||
>
|
||
<el-row>
|
||
<el-col :span="8">物料名</el-col>
|
||
<el-col :span="4">当前库存</el-col>
|
||
<el-col :span="8">出库数量</el-col>
|
||
<el-col :span="4">操作</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
|
||
<el-col :span="8">
|
||
<el-select
|
||
v-model="item.warehouseId"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
@change="(e)=>handleGetInventory(e,index)"
|
||
placeholder="请输入关键词"
|
||
:remote-method="remoteMethod"
|
||
:loading="loading">
|
||
<el-option
|
||
v-for="item in oaWarehouseList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
<span style="">{{ item.name }}</span>
|
||
<span style="color: #8492a6; font-size: 13px" v-if="item.model!==undefined">-{{ item.model }}</span>
|
||
<span style="color: #8492a6; font-size: 13px" v-if="item.brand!==undefined">-{{ item.brand }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<el-tag type="info" v-if="item.inventory===undefined">请选择物料</el-tag>
|
||
<el-tag type="info" v-else>{{ item.inventory }}</el-tag>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input-number v-model="item.amount" :min="1" :max="item.inventory"></el-input-number>
|
||
</el-col>
|
||
<el-col :span="6" style="display: flex;justify-content: center" >
|
||
<el-button @click.prevent="removeDomain(item)">删除</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="addDomain">新增出库</el-button>
|
||
<el-button @click="reset()">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-drawer
|
||
size="70%"
|
||
:title="selectedProject.projectName+' 出库详情'"
|
||
:visible.sync="drawer"
|
||
>
|
||
|
||
<el-button
|
||
style="margin: 25px"
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
v-hasPermi="['oa:oaOutWarehouse:add']"
|
||
>新增
|
||
</el-button>
|
||
|
||
<el-table v-loading="loading" :data="oaOutWarehouseList" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center"/>
|
||
<el-table-column label="序号" align="center" type="index"/>
|
||
<el-table-column label="出库单" align="center" prop="id"/>
|
||
<el-table-column label="物料名" align="center" prop="warehouseName"/>
|
||
<el-table-column label="出库数量" align="center" prop="amount"/>
|
||
<el-table-column label="出库时间" align="center" prop="createTime"/>
|
||
<el-table-column label="备注" align="center" prop="remark"/>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
v-hasPermi="['oa:oaOutWarehouse:remove']"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
</el-drawer>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listOaOutWarehouse,
|
||
getOaOutWarehouse,
|
||
delOaOutWarehouse,
|
||
addOaOutWarehouse,
|
||
updateOaOutWarehouse,
|
||
outWareList,
|
||
queryOutWarehouseByProjectId
|
||
} from "@/api/oa/oaOutWarehouse";
|
||
import {listProject} from "@/api/oa/project";
|
||
import {listByMultiQuery, listOaWarehouse} from "../../../api/oa/oaWarehouse";
|
||
|
||
export default {
|
||
name: "OaOutWarehouse",
|
||
data() {
|
||
return {
|
||
// 抽屉
|
||
drawer: false,
|
||
// 选中项目名称
|
||
selectedProject:"",
|
||
// 查看详情弹窗
|
||
outDetail:{},
|
||
// 弹窗标志
|
||
detail:false,
|
||
// 绑定项目详情
|
||
projectDetail:{},
|
||
// 物料信息详情
|
||
warehouseDetail:{},
|
||
// 出库列表
|
||
outWareHouseList: [],
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 仓库出库表格数据
|
||
oaOutWarehouseList: [],
|
||
// 项目列表
|
||
projectList: [],
|
||
// 库存数据
|
||
oaWarehouseList: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 选择对象
|
||
searchItem: {},
|
||
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 是否绑定项目
|
||
projectFlag: false,
|
||
// 库存查询参数
|
||
warehouseParams: {
|
||
pageSize: 999,
|
||
pageNum: 1
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
// 表单参数
|
||
form: {
|
||
projectId: ''
|
||
},
|
||
// 表单校验
|
||
rules: {
|
||
amount: [
|
||
{required: true, message: "出库数量不能为空", trigger: "blur"}
|
||
],
|
||
warehouseId: [
|
||
{required: true, message: "出库对象id不能为空", trigger: "blur"}
|
||
],
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
/** 查询仓库出库列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
|
||
listOaOutWarehouse(this.queryParams).then(res => {
|
||
this.outWareHouseList = res.rows
|
||
this.total = res.total
|
||
this.loading = false
|
||
})
|
||
|
||
listProject(this.queryParams).then(response => {
|
||
this.projectList = response.rows
|
||
});
|
||
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
id: undefined,
|
||
projectId: undefined,
|
||
amount: undefined,
|
||
remark: undefined,
|
||
warehouseId: undefined,
|
||
createTime: undefined,
|
||
createBy: undefined,
|
||
updateTime: undefined,
|
||
updateBy: undefined,
|
||
delFlag: undefined,
|
||
selectLoading: false,
|
||
outWareHouseList: []
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.id)
|
||
this.single = selection.length !== 1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
if (this.drawer){
|
||
// 如果抽屉是打开的说明是从项目处进入的新增，从而加入projectId
|
||
this.projectFlag=true;
|
||
this.form.projectId = this.selectedProject.projectId;
|
||
console.log(this.form);
|
||
}
|
||
this.title = "添加仓库出库";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const id = row.id || this.ids
|
||
// getOaOutWarehouse(id).then(response => {
|
||
// this.loading = false;
|
||
// this.form = response.data;
|
||
// this.open = true;
|
||
// this.title = "修改仓库出库";
|
||
// });
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
if (this.form.id != null) {
|
||
updateOaOutWarehouse(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
} else {
|
||
addOaOutWarehouse(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const ids = row.id || this.ids;
|
||
this.$modal.confirm('是否确认删除仓库出库编号为"' + ids + '"的数据项？').then(() => {
|
||
this.loading = true;
|
||
return delOaOutWarehouse(ids);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('oa/oaOutWarehouse/export', {
|
||
...this.queryParams
|
||
}, `oaOutWarehouse_${new Date().getTime()}.xlsx`)
|
||
},
|
||
addDomain() {
|
||
this.form.outWareHouseList.push({
|
||
value: '',
|
||
warehouseId: '',
|
||
key: Date.now()
|
||
});
|
||
},
|
||
removeDomain(item) {
|
||
var index = this.form.outWareHouseList.indexOf(item)
|
||
if (index !== -1) {
|
||
this.form.outWareHouseList.splice(index, 1)
|
||
}
|
||
},
|
||
|
||
// 获取对应的库存 后续添加品牌型号
|
||
handleGetInventory(e, index) {
|
||
let obj = this.oaWarehouseList[this.oaWarehouseList.findIndex(item => item.id === e)]
|
||
this.form.outWareHouseList[index].inventory = obj.inventory
|
||
this.form.outWareHouseList[index].model = obj.model
|
||
this.form.outWareHouseList[index].brand = obj.brand
|
||
},
|
||
|
||
|
||
querySearch(queryString, cb) {
|
||
var oaWarehouseList = this.oaWarehouseList;
|
||
var results = queryString ? oaWarehouseList.filter(this.createFilter(queryString)) : oaWarehouseList;
|
||
// 调用 callback 返回建议列表的数据
|
||
sys_oa_contract
|
||
cb(results);
|
||
},
|
||
createFilter(queryString) {
|
||
return (restaurant) => {
|
||
// console.log(restaurant)
|
||
|
||
// console.log(restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()))
|
||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||
};
|
||
},
|
||
|
||
getOaOutWarehouseList(){
|
||
listOaWarehouse(this.warehouseParams).then(res => {
|
||
this.oaWarehouseList = res.rows
|
||
})
|
||
},
|
||
|
||
remoteMethod(query) {
|
||
this.warehouseParams.name = query
|
||
this.selectLoading = true;
|
||
listByMultiQuery(this.warehouseParams).then(res => {
|
||
this.oaWarehouseList = res.rows.filter(item => {
|
||
const queryLower = query.toLowerCase();
|
||
return item.name.toLowerCase().indexOf(queryLower) > -1 ||
|
||
item.model.toLowerCase().indexOf(queryLower) > -1 ||
|
||
item.brand.toLowerCase().indexOf(queryLower) > -1;
|
||
});
|
||
this.selectLoading = false;
|
||
})
|
||
},
|
||
|
||
// 查看出库详情
|
||
handleSearch(item) {
|
||
this.loading = true
|
||
this.searchItem = item;
|
||
this.form.projectId = item.projectId;
|
||
this.selectedProject = item;
|
||
queryOutWarehouseByProjectId(item.projectId).then(response => {
|
||
this.oaOutWarehouseList = response.rows;
|
||
this.drawer = true;
|
||
this.loading = false;
|
||
})
|
||
},
|
||
|
||
// 查看出库单独条目详情
|
||
showDetail(row){
|
||
getOaOutWarehouse(row.id).then(response => {
|
||
console.log(response.data);
|
||
this.outDetail = response.data;
|
||
|
||
this.projectDetail = response.data.project;
|
||
this.warehouseDetail = response.data.warehouse;
|
||
})
|
||
this.detail=true;
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|