add 料仓料位图

src/views/atomViews/ListViewWithHead.vue

@@ -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",

src/views/modules/pms/materialStorageQty/components/storageBox.vue

@@ -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>

src/views/modules/pms/materialStorageQty/index.vue

@@ -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>