add 料仓料位图
This commit is contained in:
parent
31f1f8f3c1
commit
47e922422a
@ -201,7 +201,7 @@ export default {
|
||||
switch (type) {
|
||||
case "delete": {
|
||||
// 确认是否删除
|
||||
return this.$confirm(`确定要删除 "${data.name}" 吗?`, "提示", {
|
||||
return this.$confirm(`确定要删除记录 "${data.name ?? data.id}" 吗?`, "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "我再想想",
|
||||
type: "warning",
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="storage-box" :style="{ outlineColor: color }">
|
||||
<div
|
||||
class="storage-title"
|
||||
style="margin-bottom: 10px; padding-bottom: 12px; text-align: center; font-weight: bold; font-size: 1.125em; border-bottom: 1px solid #ccc3"
|
||||
>
|
||||
<span style="display: inline-block; color: white; padding: 6px 12px; border-radius: 6px 20px" :style="{ background: color }">
|
||||
{{ storage }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="storage-body" style="height: 120px; display: flex">
|
||||
<div class="storage-box__bg" style="height: 100%; width: 48px; margin-right: 12px; border-radius: 4px; overflow: hidden">
|
||||
<div class="storage-box__inner" style="position: absolute; bottom: 0; left: 0; height: 65%; width: 100%" :style="{ background: color }"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; min-width: 128px; justify-content: space-between">
|
||||
<div style="font-size: 1.125em; line-height: 2.5; text-align: right">{{ material }}</div>
|
||||
<div style="font-size: 1.5em; line-height: 1.25; text-align: right; font-weight: bold">
|
||||
{{ qty }} <span style="color: #777; font-weight: normal; font-size: 1rem">存量</span>
|
||||
</div>
|
||||
|
||||
<div class="btn-group" style="text-align: right">
|
||||
<el-button type="text">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "StorageBox",
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "#0858ff", // #0b58ff
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 2, // 默认容量 2
|
||||
},
|
||||
qty: {
|
||||
type: Number,
|
||||
default: 0, // 默认存量 0
|
||||
},
|
||||
storage: {
|
||||
type: String,
|
||||
default: "-",
|
||||
},
|
||||
material: {
|
||||
type: String,
|
||||
default: "-",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.storage-box {
|
||||
border: 1px solid #ccc3;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.storage-box:hover {
|
||||
cursor: pointer;
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
.storage-box__bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.storage-box__bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #ccc3;
|
||||
}
|
||||
|
||||
/* .storage-box__bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
background-color: #0b58ff;
|
||||
} */
|
||||
</style>
|
||||
111
src/views/modules/pms/materialStorageQty/index.vue
Normal file
111
src/views/modules/pms/materialStorageQty/index.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<section class="container-title">料仓料位</section>
|
||||
<section class="container-content">
|
||||
<div class="dialy-storage" v-if="dailyStorage.length">
|
||||
<h3>日料仓</h3>
|
||||
<div class="storage-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
|
||||
<storage-box
|
||||
v-for="(st, index) in dailyStorage"
|
||||
:key="index"
|
||||
:qty="st.qty ?? 0"
|
||||
:storage="st.name"
|
||||
color="#8899ff"
|
||||
:material="st.material ?? '默认物料'"
|
||||
:total="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-storage" v-if="middleStorage.length">
|
||||
<h3>中间仓</h3>
|
||||
<div class="middle-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
|
||||
<storage-box
|
||||
v-for="(st, index) in middleStorage"
|
||||
:key="index"
|
||||
:qty="st.qty ?? 0"
|
||||
:storage="st.name"
|
||||
color="#99aa11"
|
||||
:material="st.material ?? '默认物料'"
|
||||
:total="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unknown-storage" v-if="unknownStorage.length">
|
||||
<h3>未知仓</h3>
|
||||
<div class="unknown-list" style="padding: 12px 0; display: flex; flex-wrap: wrap">
|
||||
<storage-box
|
||||
v-for="(st, index) in unknownStorage"
|
||||
:key="index"
|
||||
:qty="st.qty ?? 0"
|
||||
color="#3388ff"
|
||||
:storage="st.name"
|
||||
:material="st.material ?? '默认物料'"
|
||||
:total="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StorageBox from "./components/storageBox.vue";
|
||||
|
||||
export default {
|
||||
name: "MaterialStorageQty",
|
||||
components: { StorageBox },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
middleStorage: [],
|
||||
dailyStorage: [],
|
||||
unknownStorage: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
resetAllStorages() {
|
||||
this.middleStorage.splice(0);
|
||||
this.dailyStorage.splice(0);
|
||||
this.unknownStorage.splice(0);
|
||||
},
|
||||
|
||||
getList(storageType) {
|
||||
this.resetAllStorages();
|
||||
const params = storageType ? { limit: this.limit, page: this.page, typeDictValue: storageType } : { limit: this.limit, page: this.page };
|
||||
this.$http.get("/pms/materialStorageQty/page", { params }).then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
if ("list" in res.data) {
|
||||
res.data.list.forEach((item) => {
|
||||
if (item.typeDictValue === "1") {
|
||||
this.dailyStorage.push(item);
|
||||
} else if (item.typeDictValue === "0") {
|
||||
this.middleStorage.push(item);
|
||||
} else {
|
||||
this.unknownStorage.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${res.code}: ${res.msg}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-container {
|
||||
background: white;
|
||||
/* height: 100%; */
|
||||
min-height: inherit;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user