<template>
<div class="app-container">
<el-card style="margin-bottom: 15px">
<div slot="header">
<span class="left-text">仓库管理</span>
</div>
<div class="clearfix">
<!-- 表单 -->
<el-form
:inline="true"
:model="formInline"
label-width="100px"
class="demo-form-inline"
size="mini"
>
<el-form-item label="仓库名称：">
<el-input
v-model.trim="formInline.name"
placeholder="请输入仓库名称"
></el-input>
</el-form-item>
<el-form-item label="启用状态：">
<el-select
v-model="formInline.status"
placeholder="请选择"
style="width: 260px"
>
<el-option label="启用" value="1"></el-option>
<el-option label="停用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库编码：">
<el-input
v-model.trim="formInline.code"
style="width: 260px"
placeholder="请输入仓库编码"
></el-input>
</el-form-item>
<el-form-item label="联系电话：">
<el-input
v-model.trim="formInline.contact_tel"
style="width: 260px"
placeholder="请输入联系电话"
></el-input>
</el-form-item>
<el-form-item label="联系人：">
<el-input
v-model.trim="formInline.contact_name"
style="width: 260px"
placeholder="请输入联系人"
></el-input>
</el-form-item>
<el-form-item style="margin-left: 20px">
<el-button type="primary" @click="onSubmit" size="mini"
>查询</el-button
>
<el-button @click="reset" icon="el-icon-refresh-right" size="mini"
>重置</el-button
>
<el-button type="primary" @click="handleAdd()" size="mini"
>添加仓库</el-button
>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card>
<!-- 表格 -->
<el-table
:data="tableData"
:height="tableHeight"
stripe
style="width: 100%"
>
<el-table-column prop="code" label="仓库编码" width="90px">
</el-table-column>
<el-table-column prop="name" label="仓库名称"> </el-table-column>
<el-table-column prop="contact_name" label="联系人"> </el-table-column>
<el-table-column prop="contact_tel" label="联系电话" width="110px">
</el-table-column>
<el-table-column label="地区" width="200px">
<template slot-scope="scope">
<div>
{{ scope.row.province + scope.row.city + scope.row.district }}
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="仓库地址"> </el-table-column>
<el-table-column label="仓库面积">
<template slot-scope="scope">
<div>{{ scope.row.warehouse_area }} m²</div>
</template>
</el-table-column>
<el-table-column label="默认发货仓">
<template slot-scope="scope">
<div>
{{ isDefaulu(scope.row.is_default_send) }}
</div>
</template>
</el-table-column>
<el-table-column label="默认收货仓">
<template slot-scope="scope">
<div>
{{ isDefaulu(scope.row.is_default_get) }}
</div>
</template>
</el-table-column>
<el-table-column label="启用状态" width="110px">
<template slot-scope="scope">
<el-switch
@change="change(scope.row)"
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
>
</el-switch>
<span v-if="scope.row.status == 1" style="color: #13ce66"
>已启用</span
>
<span v-if="scope.row.status == 0">已停用</span>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
style="color: red"
>删除
</el-button>
<!-- <el-divider direction="vertical"></el-divider> -->
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="footer_pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</el-card>
<!-- 新增或修改弹窗 -->
<el-dialog
:title="title"
:visible.sync="dialogVisible"
center
v-loading="loading"
:append-to-body="true"
:destroy-on-close="true"
:close-on-click-modal="false"
:before-close="clearData"
width="40%"
>
<div style="width: 100%; margin: 0 auto">
<el-form
v-if="dialogVisible"
:model="editForm"
ref="editForms"
:rules="editFormRules"
:label-position="labelPosition"
label-width="150px"
size="mini"
>
<el-form-item label="仓库名称：" prop="name" inline-message="true">
<el-input
v-model.trim="editForm.name"
style="width: 80%"
placeholder="请输入仓库名称"
></el-input>
</el-form-item>
<el-form-item
label="联系人："
prop="contact_name"
inline-message="true"
>
<el-input
v-model.trim="editForm.contact_name"
style="width: 80%"
placeholder="请输入联系人姓名"
></el-input>
</el-form-item>
<el-form-item
label="联系电话："
prop="contact_tel"
inline-message="true"
>
<el-input
v-model.trim="editForm.contact_tel"
style="width: 80%"
placeholder="请输入联系电话"
></el-input>
</el-form-item>
<el-form-item
label="地区："
:rules="[
{ required: true, message: '请选择地区', trigger: 'blur' },
]"
>
<el-cascader
v-model="areaList"
:props="props"
@change="handleChanges"
placeholder="请选择具体的省市区"
style="width: 80%"
></el-cascader>
</el-form-item>
<el-form-item label="仓库地址：" prop="address" inline-message="true">
<el-input
v-model.trim="editForm.address"
style="width: 80%"
placeholder="请输入仓库详细地址"
></el-input>
</el-form-item>
<el-form-item
label="仓库面积："
prop="warehouse_area"
inline-message="true"
>
<el-input
v-model.trim="editForm.warehouse_area"
style="width: 80%"
placeholder="请输入仓库面积（单位：m²）"
></el-input>
</el-form-item>
<el-form-item
label="默认发货仓："
prop="is_default_send"
inline-message="true"
>
<el-radio-group v-model="editForm.is_default_send">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="默认收货仓："
prop="is_default_get"
inline-message="true"
>
<el-radio-group v-model="editForm.is_default_get">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="启用状态：" prop="status" inline-message="true">
<el-radio-group v-model="editForm.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="clearData" size="mini">取 消</el-button>
<el-button
type="primary"
size="mini"
@click="closeDialogVisible('editForms')"
>提交</el-button
>
</span>
</el-dialog>
<!-- 删除弹窗 -->
<el-dialog
title="提示"
:visible.sync="dialogDelete"
center
:close-on-click-modal="false"
width="30%"
>
<div style="text-align: center; margin: 0 auto">
<p>确定要删除仓库吗？删除后添加商品时将不可用</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogDelete = false" size="mini">取 消</el-button>
<el-button type="primary" size="mini" @click="closeDialogDelete()"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { getAreaList } from "@/api/module/retreat/address";
import {
wareHoustList,
addWareHoust,
wareHoustInfo,
updateWareHoust,
deleteWareHoust,
} from "@/api/system/wareHouse";
export default {
name: "wareHouse",
data() {
// 手机号码格式校验
let checkTel = (rule, value, callback) => {
const reg = /^1[3456789]\d{9}$/;
if (value === "") {
callback(new Error("手机号码不能为空"));
} else if (!reg.test(value)) {
callback(new Error("手机号码格式不对,请重新输入"));
} else {
callback();
}
};
// 面积格式校验
let checkware = (rule, value, callback) => {
const reg = /^[0-9]+(\.[0-9]{1,2})?$/;
if (value === "") {
callback(new Error("仓库面积不能为空"));
} else if (!reg.test(value)) {
callback(new Error("格式不对或只能保留两位小数"));
} else {
callback();
}
};
return {
loading: false,
fullHeight: 0,
tableHeight: 0,
total: 0,
currentPage: 1,
pageSize: 20,
code: 0,
//控制启用状态展示
exhibition: true,
tableData: [],
labelPosition: "right",
// 所属地区下拉框
props: {
expandTrigger: "click",
lazy: true,
lazyLoad: this.lazyLoad,
value: "id",
label: "name",
leaf: "leaf",
},
areaList: [],
//搜索表单内容
formInline: {
name: "",
status: "",
code: "",
contact_tel: "",
contact_name: "",
},
//新增表单内容
editForm: {
name: "",
contact_name: "",
contact_tel: "",
address: "",
warehouse_area: "",
is_default_send: 1,
is_default_get: 1,
status: 1,
},
//表单验证
editFormRules: {
name: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
contact_name: [
{ required: true, message: "请输入联系人姓名", trigger: "blur" },
],
contact_tel: [{ required: true, validator: checkTel, trigger: "blur" }],
address: [
{ required: true, message: "请输入仓库地址", trigger: "blur" },
],
warehouse_area: [
{ required: true, validator: checkware, trigger: "blur" },
],
is_default_send: [
{ required: true, message: "请选择", trigger: "blur" },
],
is_default_get: [
{ required: true, message: "请选择", trigger: "blur" },
],
status: [{ required: true, message: "请选择", trigger: "blur" }],
},
title: "",
//新增修改提示框
dialogVisible: false,
//删除提示框
dialogDelete: false,
};
},
created() {
this.$nextTick(() => {
this.fullHeight =
document.getElementsByClassName("app-container")[0].clientHeight;
});
this.getWareHoustList();
},
watch: {
fullHeight(val) {
let formHeight =
document.getElementsByClassName("clearfix")[0].clientHeight;
this.tableHeight = val - formHeight - 225;
},
},
methods: {
// 开关已停用和已启用
change(val) {
let obj = JSON.parse(JSON.stringify(val));
updateWareHoust(obj).then((res) => {
if (res.code == 1) {
this.getWareHoustList();
} else {
this.$message({
type: "error",
message: res.message,
});
}
});
},
//新增分组
handleAdd() {
this.dialogVisible = true;
this.title = "新增仓库";
this.editForm.name = "";
this.editForm.contact_name = "";
this.editForm.contact_tel = "";
this.editForm.address = "";
this.editForm.warehouse_area = "";
this.editForm.is_default_send = 1;
this.editForm.is_default_get = 1;
this.editForm.status = 1;
this.areaList = [];
},
//删除分组
handleDelete(val) {
this.dialogDelete = true;
this.code = val.id;
},
//点击编辑按钮
handleUpdate(val) {
this.loading = true;
this.title = "编辑仓库";
let obj = {
id: val.id,
};
wareHoustInfo(obj).then((res) => {
if (res.code == 1) {
this.editForm = res.data;
this.areaList.push(res.data.province_id);
this.areaList.push(res.data.city_id);
this.areaList.push(res.data.district_id);
this.dialogVisible = true;
} else {
this.$message({
type: "error",
message: res.message,
});
}
this.loading = false;
});
},
//查询
onSubmit() {
this.getWareHoustList();
},
//重置
reset() {
this.formInline.name = "";
this.formInline.status = "";
this.formInline.code = "";
this.formInline.contact_tel = "";
this.formInline.contact_name = "";
this.getWareHoustList();
},
//新增或修改弹框确定回调
closeDialogVisible(editForms) {
this.$refs[editForms].validate((valid) => {
if (valid) {
if (this.title == "新增仓库") {
this.editForm["province_id"] = this.areaList[0];
this.editForm["city_id"] = this.areaList[1];
this.editForm["district_id"] = this.areaList[2];
addWareHoust(this.editForm).then((res) => {
if (res.code == 1) {
this.$message({
message: "添加成功",
type: "success",
});
this.clearData();
this.getWareHoustList();
this.dialogVisible = false;
} else {
this.$message({
message: res.message,
type: "error",
});
}
});
} else if (this.title == "编辑仓库") {
this.editForm["province_id"] = this.areaList[0];
this.editForm["city_id"] = this.areaList[1];
this.editForm["district_id"] = this.areaList[2];
updateWareHoust(this.editForm).then((res) => {
if (res.code == 1) {
this.$message({
message: "编辑成功",
type: "success",
});
this.clearData();
this.getWareHoustList();
this.dialogVisible = false;
} else {
this.$message({
message: res.message,
type: "error",
});
}
});
}
}
});
},
//清空表单数据
clearData() {
this.dialogVisible = false;
this.editForm.name = "";
this.editForm.contact_name = "";
this.editForm.contact_tel = "";
this.editForm.address = "";
this.editForm.warehouse_area = "";
this.editForm.is_default_send = 1;
this.editForm.is_default_get = 1;
this.editForm.status = 1;
this.areaList = [];
},
//删除提示框
closeDialogDelete() {
let obj = {
id: this.code,
};
deleteWareHoust(obj).then((res) => {
if (res.code == 1) {
this.$message({
message: "删除成功",
type: "success",
});
this.getWareHoustList();
this.dialogDelete = false;
} else {
this.$message({
message: res.message,
type: "error",
});
this.dialogDelete = false;
}
});
},
//
lazyLoad(node, resolve) {
this.getArea(node, resolve);
},
//
getArea(node, resolve) {
const level = node.level;
let limboNode = {};
if (level === 0) {
limboNode = { pid: 0 };
}
if (level === 1) {
limboNode = { pid: node.value };
}
if (level === 2) {
limboNode = { pid: node.value };
}
getAreaList(limboNode).then((res) => {
let result = {};
if (level === 0) {
result = res.data;
result.forEach((item) => {
item.value = item.id;
item.label = item.name;
item.children = [];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
});
}
if (level === 1) {
result = res.data;
result.forEach((item) => {
item.value = item.id;
item.label = item.name;
item.children = [];
//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
item.leaf = 0;
});
}
if (level === 2) {
result = res.data;
result.forEach((item) => {
item.value = item.id;
item.label = item.name;
item.leaf = 1;
});
}
resolve(result);
});
},
handleChanges(value) {
this.areaList = value;
// this.addressForm.address_ids = value;
},
// 获取仓库列表
getWareHoustList() {
let obj = {};
obj["limit"] = this.pageSize;
obj["page"] = this.currentPage;
if (this.formInline.name != "") {
obj["name"] = this.formInline.name;
}
if (this.formInline.status != "") {
obj["status"] = this.formInline.status;
}
if (this.formInline.code != "") {
obj["code"] = this.formInline.code;
}
if (this.formInline.contact_tel != "") {
obj["contact_tel"] = this.formInline.contact_tel;
}
if (this.formInline.contact_name != "") {
obj["contact_name"] = this.formInline.contact_name;
}
wareHoustList(obj).then((res) => {
if (res.code == 1) {
this.total = res.data.count;
this.tableData = res.data.list;
}
});
},
//分页查询
handleSizeChange(val) {
this.pageSize = val;
this.getWareHoustList();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getWareHoustList();
},
//是否默认收货仓
isDefaulu(val) {
if (val == 0) {
return "否";
} else if (val == 1) {
return "是";
}
},
},
};
</script>
<style scoped>
/* .clearfix {
margin: 10px 0 15px 0;
} */
.left-text {
padding-left: 7px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 28px;
}
/* 分页 */
.footer_pagination {
text-align: center;
margin-top: 15px;
}
</style>