UA 不良品列表页添加 汽泡信息

he wei

2024-07-31 7076632b633cda8cd08848f063cd57a4480f1127

UA 不良品列表页添加 汽泡信息

 src/pages/resourceManage/components/pop.vue

New file
@@ -0,0 +1,168 @@
<template>
  <div
    ref="pop"
    :class="['pop', position]"
    :style="{
      left: x + 'px',
      top: y + 'px',
      display: visible ? 'block' : 'none',
    }"
  >
    <div class="inner">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {
  },
  props: {
    x: {
      type: Number,
      default: 0,
    },
    y: {
      type: Number,
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: "bottom",
    },
  },
  data() {
    return {};
  },
  methods: {
    onMouseenter() {
      this.$emit('update:visible', true);
    },
    onMouseleave() {
      this.$emit('update:visible', false);
    }
  },

  mounted() {
    this.$refs.pop.addEventListener('mouseenter', this.onMouseenter);
    this.$refs.pop.addEventListener('mouseleave', this.onMouseleave);
  },
  beforeDestroy() {
    this.$refs.pop.removeEventListener('mouseenter', this.onMouseenter);
    this.$refs.pop.removeEventListener('mouseleave', this.onMouseleave);
  }
};
</script>

<style lang="less" scoped>
.pop {
  position: absolute;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  width: 420px;
  padding: 10px;
  border-radius: 6px;
  /deep/ th,
  /deep/ td {
    border: 1px #fff solid;
    color: #fff;
  }
  &.top {
    transform: translate(-50%, -100%);
    margin-top: -10px;
    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-5px);
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 10px solid rgba(0, 0, 0, 0.6);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }
    &::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: inline-block;
      height: 10px;
      background: transparent;
    }
  }
  &.bottom {
    margin-top: 10px;
    transform: translate(-50%, 0%);
    &::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-5px);
      display: inline-block;
      width: 0;
      height: 0;
      border-bottom: 10px solid rgba(0, 0, 0, 0.6);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }
    &::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      height: 10px;
      background: transparent;
    }
  }
  &.left {
    margin-left: -10px;
    transform: translate(-100%, -50%);
    &::after {
      content: "";
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-5px);
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 10px solid rgba(0, 0, 0, 0.6);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
  }
  &.right {
    margin-left: 10px;
    transform: translate(0%, -50%);
    &::after {
      content: "";
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-5px);
      display: inline-block;
      width: 0;
      height: 0;
      border-right: 10px solid rgba(0, 0, 0, 0.6);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
  }
  .inner {
    max-height: 360px;
    overflow-y: auto;
  }
}
</style>

 src/pages/resourceManage/defective/list.vue

@@ -37,10 +37,7 @@
            <template slot="title">
              <a-space class="operator">
                <span class="title">不良品中心</span>
                <a-button
                  v-if="canUploadBom"
                  type="primary"
                  @click="uploadDefective"
                <a-button type="primary" @click="uploadDefective"
                  >新增</a-button
                >
              </a-space>
@@ -188,6 +185,14 @@
    >
      <img alt="example" style="width: 100%" :src="imgUrl" />
    </a-modal>
    <pop
      :visible.sync="popVisible"
      :x="popPosition.x"
      :y="popPosition.y"
      :position="popPosition.dir"
    >
    <pop-info :info="popInfo" v-if="popVisible"></pop-info>
  </pop>
  </div>
</template>

@@ -202,11 +207,14 @@
import filesList from "@/pages/components/filesList";

import getWebUrl from "@/assets/js/tools/getWebUrl";

import { getUserList } from "../../permission/apis";
import { stopDefective } from "./apis";
import { mapGetters } from "vuex";
import checkPermit from "@/assets/js/tools/checkPermit";
import PERMITS from "@/assets/js/const/const_permits";
import Pop from "../components/pop";
import popInfo from './popInfo';
import offset from "@/assets/js/tools/offset";

import createWs from "@/assets/js/websocket";
import DiffList from "@/pages/components/diffList";
@@ -220,6 +228,13 @@
  mixins: [WSMixin],
  data() {
    return {
      popVisible: false,
      popPosition: {
        x: 0,
        y: 0,
        dir: "bottom",
      },
      popInfo: [],
      previewVisible: false,
      imgUrl: "",
      fileList: [],
@@ -282,6 +297,8 @@
          width: 60,
          noSearch: true,
          scopedSlots: { customRender: "dataIndex" },
          customCell: this.customCell,
          
        },
        {
          title: "物料名称",
@@ -291,6 +308,7 @@
          align: "center",
          // searchAble: true,
          noSearch: true,
          customCell: this.customCell,
        },
        {
          title: "型号",
@@ -299,6 +317,7 @@
          align: "center",
          width: 180,
          noSearch: true,
          customCell: this.customCell,
        },
        {
          title: "厂商名称",
@@ -308,6 +327,7 @@
          width: 180,
          // searchAble: true,
          noSearch: true,
          customCell: this.customCell,
        },
        {
          title: "入料时间",
@@ -317,6 +337,7 @@
          width: 160,
          searchAble: true,
          dataType: "dateRange",
          customCell: this.customCell,
        },
        {
          title: "创建人",
@@ -329,6 +350,7 @@
            default: "",
            selectOptions: [],
          },
          customCell: this.customCell,
        },
        {
          title: "状态",
@@ -361,6 +383,7 @@
              },
            ],
          },
          customCell: this.customCell,
        },
        {
          title: "总数量",
@@ -377,6 +400,7 @@
          // searchAble: true,
          noSearch: true,
          // visible: false,
          customCell: this.customCell,
        },
        {
          title: "不良描述",
@@ -385,6 +409,7 @@
          // searchAble: true,
          noSearch: true,
          // visible: false,
          customCell: this.customCell,
        },
        {
          title: "操作",
@@ -412,8 +437,63 @@
    DownloadReason,
    DownloadLogs,
    OwnerDownload,
    Pop,
    popInfo,
  },
  methods: {
    cellMouseenter(e, obj) {
      // console.log("enter", e, obj);
      const wraper = this.$refs.wraper;
      const { clientHeight, clientWidth } = wraper;
      const { target, clientX, clientY } = e;
      let { left: x, top: y } = offset(wraper);
      x = clientX - x;
      y = clientY - y;
      // 如果clientHeight 小于380 * 2 则左右布局
      let dir = "bottom";
      if (clientHeight < 380 * 2) {
        if (x + 420 + 18 > clientWidth) {
          dir = "left";
        } else {
          dir = "right";
        }
        if (y < 180) {
          y = 180;
        } else if (y > clientHeight - 378) {
          y = clientHeight / 2;
        }
      } else {
        if (y + 18 + 360 > clientHeight) {
          // y = clientHeight - 378;
          dir = "top";
        } else {
          dir = "bottom";
        }
        if (x < 300) {
          x = 300;
        }
        if (x + 300 > clientWidth) {
          x = clientWidth - 300;
        }
      }
      this.popPosition.x = x;
      this.popPosition.y = y;
      this.popPosition.dir = dir;
      this.popInfo = obj;
      this.popVisible = true;
    },
    cellMouseleave(e, obj) {
      // console.log("leave", obj);
      this.popVisible = false;
    },
    customCell(record) {
      return {
        on: {
          mouseenter: (e) => this.cellMouseenter(e, record),
          mouseleave: (e) => this.cellMouseleave(e, record),
        },
      };
    },
    rowClassFn(record) {
      let classList = [];
      classList.push("level-" + record.confirmStatus);
@@ -639,6 +719,29 @@
    logCancel() {
      this.logVisible = false;
    },
    searchAllUserList() {
      getUserList()
        .then((res) => {
          let rs = res.data;
          if (rs.code && rs.data) {
            let list = rs.data2
              .map((v) => ({ title: v.name, value: v.id }))
              .filter((v) => v.title != this.user.name);
            list.unshift(
              { title: "全部", value: "" },
              { title: this.user.name, value: this.user.id }
            );
            this.columns.forEach((v) => {
              if (v.dataIndex == "recorder") {
                v.search.selectOptions = list;
              }
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  watch: {
    update(n) {
@@ -683,9 +786,6 @@
      "user",
    ]),
    ...mapGetters("setting", ["affixed"]),
    canUploadBom() {
      return checkPermit(PERMITS.uploadBom, this.permits);
    },
    canDownloadBom() {
      return checkPermit(PERMITS.downloadBom, this.permits);
    },
@@ -738,6 +838,7 @@
    },
  },
  mounted() {
    this.searchAllUserList();
    this.sendMessage();
    window.addEventListener("resize", this.resize);
  },

 src/pages/resourceManage/defective/popInfo.vue

New file
@@ -0,0 +1,75 @@
<template>
  <div class="">
    <table class="table">
      <tbody>
        <tr>
          <th class="col-1">物料名称</th>
          <td colspan="3">{{ info.productName }}</td>
        </tr>
        <tr>
          <th class="col-1">型号</th>
          <td colspan="3">{{ info.type }}</td>
        </tr>
        <tr>
          <th class="col-1">厂商名称</th>
          <td colspan="3">{{ info.provideName }}</td>
        </tr>
        <tr>
          <th class="col-1">入料时间</th>
          <td>{{ info.startTimeEx }}</td>
          <th class="col-3">创建人</th>
          <td>{{ info.recorder }}</td>
        </tr>
        <tr>
          <th class="col-1">总数量</th>
          <td>{{ info.sumProduct }}</td>
          <th class="col-3">不良数</th>
          <td>{{ info.badProduct }}</td>
        </tr>
        <tr>
          <th class="col-1">不良描述</th>
          <td colspan="3">{{ info.content }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  components: {},
  methods: {},

  mounted() {    
  },
};
</script>

<style lang="less" scoped>
.table {
  width: 100%;
  // table-layout: fixed;
  border-collapse: collapse;
  th,
  td {
    border: 1px #fff solid;
    padding: 4px;
  }
  td {
    color: #13c2c2;
    word-break: break-all;
  }
}
</style>