实验室运维前端-web
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.
 
 
 
 
 

293 lines
8.7 KiB

<template>
<basic-container style="max-height: 800px; overflow: hidden">
<avue-crud :option="option" :table-loading="loading" :data="data" :search.sync="searchForm" :page.sync="page"
ref="crud" v-model="form" :permission="permissionList"
@search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
@size-change="sizeChange" @refresh-change="refreshChange" @selection-change="selectionChange" @on-load="onLoad">
<template slot-scope="{row}" slot="produceTime">
{{ row.produceTime.substring(0, 10) }}
</template>
<template slot-scope="{ row }" slot="status">
<el-tag size="small" :type="row.status == 0
? 'warning'
: row.status == 1
? ''
: ''
">
{{
row.status == 0
? "待确认"
: row.status == 1
? "已确认"
: ""
}}
</el-tag>
</template>
<template slot-scope="{ row }" slot="runStatus">
<el-tag size="small" :type="row.runStatus == 0
? 'info'
: row.runStatus == 1
? 'success'
: row.runStatus == 2
? 'danger'
: ''
">
{{
row.runStatus == 0
? "关机"
: row.runStatus == 1
? "运行中"
: row.runStatus == 2
? '报警中'
: ""
}}
</el-tag>
</template>
<template slot-scope="scope" slot="menuLeft">
<el-button size="small" @click="handlleAdd" type="primary">新 增</el-button>
<el-button size="small" @click="handlleDeletes" type="danger">删 除</el-button>
</template>
<template slot-scope="{ row }" slot="menu">
<el-button v-show="permission.deviceView" @click="handleView(row)">查看</el-button>
<el-button v-show="permission.deviceEdit" @click="handleEdit(row)">编辑</el-button>
<el-button v-show="permission.deviceDelete" @click="handleDelete(row)">删除</el-button>
</template>
</avue-crud>
<el-dialog :title="addTitle" :visible.sync="addVisible" :append-to-body="true" width="50%" :close-on-click-modal="false">
<el-form ref="form" :model="addForm" :rules="addRules" label-width="80px" label-position="left">
<el-form-item label="仓库编码" prop="code">
<el-input placeholder="请输入仓库编码" v-model="addForm.code" :disabled="addTitle == '查看仓库'"></el-input>
</el-form-item>
<el-form-item label="仓库名称" prop="name">
<el-input placeholder="请输入仓库名称" v-model="addForm.name" style="width: 98%;" :disabled="addTitle == '查看仓库'"></el-input>
</el-form-item>
<el-form-item label="仓库地址" prop="address">
<el-input placeholder="请输入仓库地址" v-model="addForm.address" style="width: 98%;" :disabled="addTitle == '查看仓库'"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">关 闭</el-button>
<el-button v-show="addTitle != '查看仓库'" type="primary" @click="handleConfirm"> </el-button>
</span>
</el-dialog>
</basic-container>
</template>
<script>
import { mapGetters } from "vuex";
import {getList,addWare,getDetail,editWare,deleteWare} from '@/api/goodsManagement/warehouse'
export default {
data(){
return {
form:{},
searchForm:{},
loading:true,
addVisible:false,
addTitle:'仓库新增',
addRules:{
code: { required: true, message: '请输入仓库编码', trigger: 'blur' },
name: { required: true, message: '请输入仓库名称', trigger: 'blur' },
address:{required:true,message:'请输入仓库地址',trigger:'blur'},
},
addForm:{},
option: {
height: "auto",
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
dialogType: "dialog",
dialogClickModal: false,
addBtn: false,
viewBtn: false,
editBtn: false,
delBtn: false,
searchShowBtn: false,
refreshBtn: false,
columnBtn: false,
menuWidth: 400,
selection: true,
searchEnter:true,
gridBtn:false,
column: [
{
label: "仓库编码",
labelWidth: 120,
prop: "code",
search: true,
overHidden: true,
},
{
label: "仓库名称",
labelWidth: 120,
prop: "name",
overHidden: true,
},
{
label: "仓库地址",
labelWidth: 120,
prop: "address",
overHidden: true,
},
],
},
page:{
pageSize: 10,
currentPage: 1,
total: 0,
},
data:[],
selectionList:[]
}
},
computed: {
...mapGetters(["userInfo", "permission"]),
},
mounted(){
},
methods:{
// 多选数据
selectionChange(list){
this.selectionList = list
},
searchChange(params, done){
this.page.currentPage = 1;
this.onLoad();
done();
},
searchReset(params, done) {
this.onLoad();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
this.onLoad()
},
sizeChange(pageSize){
this.page.pageSize = pageSize;
this.onLoad()
},
// 查询数据
onLoad(){
console.log('searchForm',this.searchForm)
this.loading = true
let query = {
current:this.page.currentPage,
size:this.page.pageSize,
...this.searchForm
}
getList(query).then(res =>{
this.data = res.data.data.records
this.page.total = res.data.data.total
this.loading = false
})
},
// 点击新增按钮
handlleAdd(){
this.addForm = {}
this.addVisible = true
},
// 关闭弹窗
handleClose(){
this.addVisible = false
this.addForm = {}
this.$refs['form'].resetFields()
},
// 点击弹窗确定按钮
handleConfirm(){
this.$refs['form'].validate((valid) => {
if(valid){
if(this.addForm.id){
let query = {
id:this.addForm.id,
name:this.addForm.name,
code:this.addForm.code,
address:this.addForm.address
}
editWare(query).then(res =>{
if(res.data.code == 200){
this.$message.success("仓库编辑成功")
this.addVisible = false
this.onLoad()
}
})
}else{
addWare(this.addForm).then(res =>{
if(res.data.code == 200){
this.$message.success("仓库新增成功")
this.addVisible = false
this.onLoad()
}
})
}
}
})
},
// 点击编辑按钮
handleEdit(row){
getDetail({id:row.id}).then(res =>{
this.addForm = res.data.data
this.addVisible = true
this.addTitle = '编辑仓库'
})
},
// 点击查看按钮
handleView(row){
getDetail({id:row.id}).then(res =>{
this.addForm = res.data.data
this.addVisible = true
this.addTitle = '查看仓库'
})
},
// 点击行内删除按钮
handleDelete(row){
this.$confirm('请确认是否删除该仓库?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteWare({ids:row.id}).then(res => {
if (res.data.code == 200) {
this.onLoad()
this.$message({
type: 'success',
message: '删除成功!'
});
}
})
}).catch(() => {
});
},
// 点击行外删除按钮
handlleDeletes(){
if(this.selectionList.length == 0){
this.$message.warning('请至少选择一条数据')
}else{
let ids = this.selectionList.map(item => item.id).join(',')
this.$confirm('请确认是否删除选中的仓库?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteWare({ids:ids}).then(res => {
if (res.data.code == 200) {
this.onLoad()
this.$message({
type: 'success',
message: '删除成功!'
});
}
})
}).catch(() => {
});
}
},
}
}
</script>
<style>
</style>