From 7076632b633cda8cd08848f063cd57a4480f1127 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 31 七月 2024 15:33:09 +0800
Subject: [PATCH] UA 不良品列表页添加 汽泡信息
---
src/pages/resourceManage/defective/list.vue | 117 ++++++++++++++++++-
src/pages/resourceManage/components/pop.vue | 168 ++++++++++++++++++++++++++++
src/pages/resourceManage/defective/popInfo.vue | 75 ++++++++++++
3 files changed, 352 insertions(+), 8 deletions(-)
diff --git a/src/pages/resourceManage/components/pop.vue b/src/pages/resourceManage/components/pop.vue
new file mode 100644
index 0000000..3dbb620
--- /dev/null
+++ b/src/pages/resourceManage/components/pop.vue
@@ -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>
diff --git a/src/pages/resourceManage/defective/list.vue b/src/pages/resourceManage/defective/list.vue
index cd7a070..2a76b92 100644
--- a/src/pages/resourceManage/defective/list.vue
+++ b/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);
},
diff --git a/src/pages/resourceManage/defective/popInfo.vue b/src/pages/resourceManage/defective/popInfo.vue
new file mode 100644
index 0000000..5a32eaf
--- /dev/null
+++ b/src/pages/resourceManage/defective/popInfo.vue
@@ -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>
--
Gitblit v1.9.1