空管耐用品库存管理前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

300 lines
7.7 KiB

5 months ago
<template>
<basic-container>
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :page.sync="page"
:permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
@refresh-change="refreshChange" @on-load="onLoad" >
<!-- @row-click="rowSelect" -->
<template slot-scope="scope" slot="menuLeft">
<el-button size="small" plain @click.stop="handleDesign()">新增入库单
</el-button>
<el-button size="small" plain @click.stop="handleExport()">入库单导出
</el-button>
</template>
<template slot-scope="scope" slot="caigoudanmingcheng">
<el-button type="text" @click.stop="purchaseFn(scope.row)" v-if="scope.row.caigoudanmingcheng!=''">{{scope.row.caigoudanmingcheng}}</el-button>
<span v-else></span>
</template>
<template #menu="scope">
<el-button type="text" @click.stop="handleDetails(scope.row)">详情</el-button>
<el-button type="text" v-if="scope.row.str7==1" @click.stop="handleEdit(scope.row)">编辑</el-button>
</template>
</avue-crud>
<!-- 新增 -->
<inDialog v-if="inDialogVisible" :repairVisible='inDialogVisible' :inDialogTiltle="inDialogTiltle"
:inDialogType="inDialogType" @handleCloseDetail="handleCloseDetail" type="一级库">
</inDialog>
<!-- 采购单详情 -->
<purchaseDialog :showDialog="purchaseOpen" v-if="purchaseOpen" @closeDialog="closeDialog" :purchaseTitle="purchaseTitle"></purchaseDialog>
</basic-container>
</template>
<script>
import { getList, remove } from "@/api/report/report";
import { mapGetters } from "vuex";
import inDialog from './components/inDialog.vue';
import purchaseDialog from './components/purchaseDialog.vue';
export default {
components: {
inDialog,
purchaseDialog
},
data() {
return {
form: {},
selectionList: [],
query: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
option: {
height: 'auto',
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
selection: true,
viewBtn: true,
dialogClickModal: false,
selection: false,
printBtn: false,
refreshBtn: false,
gridBtn: false,
gridBackgroundImage: false,
gridSpan: false,
filterBtn: false,
columnBtn: false,
menuWidth:120,
menu:true,
column: [
{
label: "采购单名称",
prop: "caigoudanmingcheng",
width:180,
},
{
label: "仓库类型",
prop: "str1",
},
{
label: "入库单号",
prop: "str2",
},
{
label: "入库时间",
prop: "str3",
search: true,
type: "date",
searchRange:true,
startPlaceholder: '开始时间',
endPlaceholder: "结束时间",
},
{
label: "入库人",
prop: "str4",
search: true,
},
{
label: "审批人",
prop: "str5",
},
{
label: "来源",
prop: "str6",
search: false,
},
{
label: "审批状态",
prop: "str7",
type:'select',
dicData:[
{
label:'暂存',
value:1
},
{
label:'待审批',
value:2
},
{
label:'已审批',
value:3
},
]
},
]
},
data: [{
caigoudanmingcheng:"2025年第一季度采购单",
str1: '类型一',
str2: '00000001',
str3: '2025-03-01',
str4: '员工一',
str5: '员工二',
str6: '采购',
str7: '1',
}, {
caigoudanmingcheng:"2025年第二季度采购单",
str1: '类型二',
str2: '00000002',
str3: '2025-03-02',
str4: '员工一',
str5: '员工二',
str6: '采购',
str7: '2',
}, {
caigoudanmingcheng:"",
str1: '类型三',
str2: '00000002',
str3: '2025-03-02',
str4: '员工一',
str5: '员工二',
str6: '单项',
str7: '3',
}, {
caigoudanmingcheng:"",
str1: '类型三',
str2: '00000002',
str3: '2025-03-02',
str4: '员工一',
str5: '员工二',
str6: '单项',
str7: '1',
}],
inDialogVisible: false,
inDialogTiltle: '入库',
inDialogType: '',//弹框类型
purchaseOpen:false,
purchaseTitle:'',
inTitle:'',
};
},
computed: {
...mapGetters(["userInfo", "permission"]),
permissionList() {
return {
addBtn: false,
viewBtn: false,
delBtn: false,
editBtn: false
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
handleDesign() {
this.inDialogVisible = true
this.inDialogType = 'add'
this.inDialogTiltle = '新增入库'
},
// 详情
handleDetails(row){
this.inDialogVisible = true
this.inDialogType = 'details'
this.inDialogTiltle = '详情'
},
// 编辑
handleEdit(){
this.inDialogVisible = true
this.inDialogType = 'edit'
this.inDialogTiltle = '编辑'
},
// 采购单
purchaseFn(row){
this.purchaseOpen = true
this.purchaseTitle = row.caigoudanmingcheng+'详情'
},
closeDialog(){
this.purchaseOpen = false
},
handleCloseDetail() {
this.inDialogVisible = false
},
handleExport(name) {
this.$message({
type: "success",
message: "出库单导出成功!"
});
},
// 行点击事件
rowSelect(row) {
this.inDialogVisible = true
this.inDialogType = 'inbound'
this.inDialogTiltle = '入库'
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
this.loading = false
}
}
};
</script>
<style></style>