<template>
<div class="page-container">
<div ref="toolbarHeight">
<el-card class="box-card">
<div class="title-wrapper">
<breadcrumb></breadcrumb>
</div>
</el-card>
</div>
<el-card>
<div class="flex-between">
<div>
<el-button
size="small"
type="primary"
@click="handelAdd"
v-limit="['inventoryOperate:plan:add']"
>新增</el-button
>
<el-button
size="small"
type="primary"
@click="handelPreserve"
v-limit="['inventoryOperate:plan:preservate']"
>生成</el-button
>
<el-button
size="small"
@click="removeBatch"
v-limit="['inventoryOperate:plan:remove']"
>删除</el-button
>
</div>
<div>
<table-heads
:tableId="tableId"
:tableHeads="tableHeads"
@handelconfirmHead="confirmdata"
@handelrender="renderHide"
></table-heads>
<el-button
type="primary"
plain
size="small"
icon="el-icon-refresh-right"
@click="handleFilter"
>刷新</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-download"
plain
@click="handleClickDown"
v-limit="['inventoryOperate:plan:export']"
>导出</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-printer"
plain
@click="handelPrint"
>打印</el-button
>
</div>
</div>
<!-- 表格 -->
<el-row>
<el-col :span="24" v-if="handelrender">
<el-table
ref="ReservationTable"
border
stripe
:max-height="tableHeight"
@header-dragend="headerDragend"
:data="list"
:cell-style="$style.cellStyle"
:header-cell-style="$style.rowClass"
>
<el-table-column
class-name="cannotDrag"
type="selection"
width="55"
/>
<!--checkbox-->
<el-table-column label="序号" type="index" width="55" />
<el-table-column
v-for="item in confirmHead"
:key="item.label"
:label="item.label"
:prop="item.prop"
:width="item.width"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span
v-if="item.chacao"
v-limit="['inventoryOperate:plan:detail']"
>
<el-link
type="primary"
:underline="false"
@click="handleDetail(scope.row)"
>{{ scope.row.billNo }}
</el-link>
</span>
<span v-else-if="item.owners">
<span v-if="scope.row.owners == null">全部</span>
<span
v-for="(item, index) in scope.row.owners"
:key="index"
v-else
>
[{{ item.id }}]{{ item.name }},
</span>
</span>
<span v-else-if="item.areas">
<span v-if="scope.row.areas == null">全部</span>
<span
v-for="(item, index) in scope.row.areas"
:key="index"
v-else
>
{{ item.name }}
</span>
</span>
<span v-else-if="item.mode">
<el-tag v-if="scope.row.mode == 0" type="success">{{
INVENTORY_CHECK_MODE[scope.row.mode]
}}</el-tag>
<el-tag v-else-if="scope.row.mode == 1">{{
INVENTORY_CHECK_MODE[scope.row.mode]
}}</el-tag>
</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<template slot="empty">
<img
src="../../assets/img/empty.png"
alt=""
srcset=""
style="height: calc(100vh - 560px)"
/>
<h4>暂无数据~</h4>
</template>
</el-table>
<pagination
v-show="page.total > 0"
:total="page.total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getQueryList"
/>
</el-col>
</el-row>
</el-card>
<!-- 边界对话框 -->
<el-dialog
title="新增盘点单"
:visible.sync="popVisible"
:close-on-click-modal="false"
width="30%"
:append-to-body="true"
style="text-align: center"
@close="addDialogClosed"
v-dialogDrag
>
<el-form
:model="detailForm"
ref="detail"
label-width="110px"
size="small"
:rules="rules"
>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="仓库名称:" prop="houseName">
<el-input
v-model.trim="detailForm.houseName"
show-word-limit
clearable
placeholder="请输入仓库名称"
:disabled="true"
/>
</el-form-item>
</el-col>
</el-row> -->
<el-col :span="24">
<el-form-item label="区域名称:" prop="areas">
<el-select
v-model="detailForm.areas"
placeholder="请选择区域名称"
style="width: 100%"
multiple
filterable
collapse-tags
@change="AreaChange"
@remove-tag="removeTagArea"
>
<el-option
label="全部"
value="null"
key="null"
@click.native="selectAllArea"
></el-option>
<el-option
v-for="item in categoryData"
:key="item.whAId"
:label="item.whAName"
:value="item.whAId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="货主名称:" prop="owners">
<el-select
v-model="detailForm.owners"
placeholder="请选择货主名称"
style="width: 100%"
multiple
filterable
@remove-tag="removeTag"
collapse-tags
@change="storeNameChange"
:filter-method="storeNameFilter"
>
<el-option
label="全部"
value="null"
key="null"
v-if="searchVal == ''"
@click.native="selectAll"
></el-option>
<el-option
v-for="item in storeNameData"
:key="item.id"
:label="item.storeName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="盘点模式:" prop="mode">
<el-select
v-model="detailForm.mode"
placeholder="请选择盘点模式"
style="width: 100%"
>
<el-option
v-for="item in ModeData"
:key="item.id"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-show="detailForm.mode == 1">
<el-form-item label="动盘日期:" prop="date">
<el-date-picker
align="right"
unlink-panels
v-model="detailForm.date"
type="daterange"
range-separator="~"
start-placeholder="选择开始日期"
end-placeholder="选择结束日期"
value-format="yyyy-MM-dd"
style="width: 100%"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="popVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="submitForm"
>保 存</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { getDictionaries } from "@/utils/dictionaries";
import pagination from "@/components/Pagination";
import { listStore, goodsExport } from "@/http/moudules/basicInformate";
import {
dictionaryQueryByCode,
queryAllWarehouseArea,
} from "@/http/moudules/warehouse";
import tableHeads from "@/components/tableHeades";
import {
inventoryCheck,
inventoryCheckDelete,
inventoryCheckConfirm,
queryPage,
} from "@/http/moudules/inventoryOperate";
import tableMixin from "@/mixin/tableMixin";
import { plantableHeads } from "@/constants/inventoryOperate";
export default {
name: "Plan",
components: {
pagination,
tableHeads,
},
mixins: [tableMixin],
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
],
},
tableId: "Plan",
tableHeight: null, // 默认初始值
loading: false,
list: [], // 列表
page: {
pageNum: 1,
pageSize: 20,
total: 0,
}, // 页码,
popVisible: false,
detailForm: { houseName: "", areas: "", owners: "", mode: "", date: "" },
storeNameData: [],
categoryData: [],
goodsTypeData: [],
confirmHead: [],
handelrender: true,
tableHeads: plantableHeads,
all: false,
rules: {
owners: [{ required: true, message: "请输入", trigger: "blur" }],
areas: [{ required: true, message: "请选择", trigger: "change" }],
houseName: [{ required: true, message: "请选择", trigger: "change" }],
mode: [{ required: true, message: "请选择", trigger: "change" }],
},
ModeData: [],
owners: [],
areas: [],
INVENTORY_CHECK_MODE: {},
disabledCheck: true,
searchVal: "",
detail: {},
};
},
activated() {
this.getQueryList();
this.$nextTick(() => {
window.onresize = () => {
this.tableHeight =
window.innerHeight -
this.$refs.ReservationTable.$el.offsetTop -
this.$refs.toolbarHeight.offsetHeight -
280;
};
});
},
mounted() {
// this.getQueryList();
this.queryCategory();
this.queryArea();
this.queryMode();
this.INVENTORY_CHECK_MODE = getDictionaries("INVENTORY_CHECK_MODE");
this.tableHeight =
window.innerHeight -
this.$refs.ReservationTable.$el.offsetTop -
this.$refs.toolbarHeight.offsetHeight -
280;
},
computed: {},
created() {},
methods: {
confirmdata(val) {
this.confirmHead = val;
// ;
},
renderHide(val) {
this.handelrender = val;
},
queryCategory(val) {
listStore({ pageNum: 1, pageSize: 100, id: val, storeStatus: 0 })
.then((res) => {
this.storeNameData = res.data.data.list;
})
.catch(() => {
this.storeNameData = [];
});
},
queryMode() {
dictionaryQueryByCode({ parentCode: "INVENTORY_CHECK_MODE" })
.then((res) => {
this.ModeData = res.data.data;
})
.catch(() => {
this.ModeData = [];
});
},
queryArea() {
queryAllWarehouseArea()
.then((res) => {
this.categoryData = res.data.data;
})
.catch(() => {
this.categoryData = [];
});
},
// 获取列表
getQueryList() {
this.loading = true;
queryPage({
...this.page,
param: {
staffId: localStorage.getItem(
"currentUserId" + localStorage.getItem("urlHerf")
),
houseId: localStorage.getItem(
"whId" + localStorage.getItem("urlHerf")
),
},
})
.then((res) => {
this.loading = false;
this.list = res.data.data.list;
// this.list=[]
this.page.total = res.data.data.total;
})
.catch(() => {
this.list = [];
});
},
//详情
handleDetail(row) {
this.$router.push({
name: "PlanDetail",
query: {
id: row.id,
},
});
localStorage.setItem("PlanDetail", row.id);
},
// 新增
handelAdd() {
this.popVisible = true;
this.detailForm = {
houseName: localStorage.getItem(
"whName" + localStorage.getItem("urlHerf")
),
};
},
//保存
submitForm() {
this.$refs["detail"].validate(async (valid) => {
if (valid) {
if (this.detailForm.owners.includes("null")) {
this.owners = null;
} else {
if (this.detailForm.owners != null) {
let date = this.storeNameData.filter(
(item) => this.detailForm.owners.indexOf(item.id) > -1
);
this.owners = date.map((item) => ({
id: item.id,
name: item.storeName,
code: item.id,
}));
}
}
if (this.detailForm.areas.includes("null")) {
this.areas = null;
} else {
if (this.detailForm.areas != null) {
let date = this.categoryData.filter(
(item) => this.detailForm.areas.indexOf(item.whAId) > -1
);
// this.areas = date;
this.areas = date.map((item) => ({
id: item.whAId,
name: item.whAName,
code: item.whACode,
}));
}
}
const data = Object.assign({}, this.detailForm, {
startDate: this.detailForm.date ? this.detailForm.date[0] : null,
endDate: this.detailForm.date ? this.detailForm.date[1] : null,
owners: this.owners,
areas: this.areas,
houseId: localStorage.getItem(
"whId" + localStorage.getItem("urlHerf")
),
houseCode: localStorage.getItem(
"whCode" + localStorage.getItem("urlHerf")
),
});
inventoryCheck(data).then((res) => {
// ;
const { code, msg } = res.data;
const title = code === 200 ? "操作成功" : "操作失败";
const type = code === 200 ? "success" : "error";
this.$notification(title, type, msg);
if (code === 200) {
this.popVisible = false;
this.getQueryList();
}
});
} else {
this.$message.error("仓库资料校验未通过!");
return false;
}
});
},
// 批量删除
removeBatch() {
this.handleRemove(
this.$refs.ReservationTable.selection.map((item) => item.id)
);
},
//删除
handleRemove(params) {
if (!params.length) {
this.$message.warning("请选择数据!");
return;
}
this.$confirm("此操作将删除该条消息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
inventoryCheckDelete(params).then((res) => {
const { code, msg } = res.data;
const title = code === 200 ? "操作成功" : "操作失败";
const type = code === 200 ? "success" : "error";
this.$notification(title, type, msg);
this.loading = false;
this.popVisible = false;
this.getQueryList();
});
})
.catch((err) => console.error(err));
},
//刷新
handleFilter() {
this.page.pageNum = 1;
this.getQueryList();
},
// 监听 添加仓库对话框的关闭事件
addDialogClosed() {
this.$refs.detail.resetFields();
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
this.getQueryList();
},
// 导出
handleClickDown() {
// goodsExport(this.search).then((res) => {
// try {
// const src = URL.createObjectURL(new Blob([res.data]));
// const link = document.createElement("a");
// link.href = src;
// link.setAttribute("download", "商品信息.xls");
// document.body.appendChild(link);
// link.style.display = "none";
// link.click();
// } catch (err) {
//
// }
// });
},
// 打印
handelPrint() {},
// 保存
handelPreserve() {
var params = this.$refs.ReservationTable.selection.map((item) => item.id);
if (!params.length) {
this.$message.warning("请选择数据!");
return;
}
this.$confirm("是否保存该数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
inventoryCheckConfirm(params).then((res) => {
const { code, msg } = res.data;
const title = code === 200 ? "操作成功" : "操作失败";
const type = code === 200 ? "success" : "error";
this.$notification(title, type, msg);
this.loading = false;
this.popVisible = false;
this.getQueryList();
});
})
.catch((err) => console.error(err));
},
// 货主名称全选
storeNameChange(val) {
if (this.searchVal !== "" && val.length - 1 < this.storeNameData.length) {
return "";
} else if (
!val.includes("null") &&
val.length === this.storeNameData.length
) {
this.detailForm.owners.unshift("null");
} else if (
val.includes("null") &&
val.length - 1 < this.storeNameData.length
) {
this.detailForm.owners = this.detailForm.owners.filter((item) => {
return item !== "null";
});
}
},
// 货主名称自定义查询模板
storeNameFilter(val) {
this.searchVal = val;
this.queryCategory(val);
},
removeTag(val) {
console.log(val);
if (val === "null") {
this.detailForm.owners = [];
}
},
// 货主选择全部
selectAll() {
if (this.detailForm.owners.length < this.storeNameData.length) {
this.detailForm.owners = [];
this.storeNameData.map((item) => {
this.detailForm.owners.push(item.id);
});
this.detailForm.owners.unshift("null");
// this.detailForm.owners = null;
} else {
this.detailForm.owners = [];
}
},
// 区域名称全选
AreaChange(val) {
console.log();
if (!val.includes("null") && val.length === this.categoryData.length) {
this.detailForm.areas.unshift("null");
} else if (
val.includes("null") &&
val.length - 1 < this.categoryData.length
) {
this.detailForm.areas = this.detailForm.areas.filter((item) => {
return item !== "null";
});
}
},
removeTagArea(val) {
if (val === "null") {
this.detailForm.areas = [];
}
},
// 区域选择全部
selectAllArea() {
if (this.detailForm.areas.length < this.categoryData.length) {
this.detailForm.areas = [];
this.categoryData.map((item) => {
this.detailForm.areas.push(item.whAId);
});
this.detailForm.areas.unshift("null");
// this.detailForm.areas = null;
} else {
this.detailForm.areas = [];
}
},
},
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin.scss";
</style>
element+vue 之select多选 选择全部
最新推荐文章于 2024-07-14 02:37:49 发布