From c054516a38a2613a4e7399ba62694fbd99a606fe Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 06 一月 2023 09:10:09 +0800
Subject: [PATCH] 1.组织架构表格拖动实现demo
---
src/views/jcsz/zzjg.vue | 8 +-
src/views/scgl/gdplgb.vue | 30 ++++++++-
src/directive/el-drag-dialog/drag.js | 77 +++++++++++++++++++++++++
src/directive/el-drag-dialog/index.js | 13 ++++
4 files changed, 121 insertions(+), 7 deletions(-)
diff --git a/src/directive/el-drag-dialog/drag.js b/src/directive/el-drag-dialog/drag.js
new file mode 100644
index 0000000..299e985
--- /dev/null
+++ b/src/directive/el-drag-dialog/drag.js
@@ -0,0 +1,77 @@
+export default {
+ bind(el, binding, vnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header')
+ const dragDom = el.querySelector('.el-dialog')
+ dialogHeaderEl.style.cssText += ';cursor:move;'
+ dragDom.style.cssText += ';top:0px;'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const getStyle = (function() {
+ if (window.document.currentStyle) {
+ return (dom, attr) => dom.currentStyle[attr]
+ } else {
+ return (dom, attr) => getComputedStyle(dom, false)[attr]
+ }
+ })()
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ const dragDomWidth = dragDom.offsetWidth
+ const dragDomHeight = dragDom.offsetHeight
+
+ const screenWidth = document.body.clientWidth
+ const screenHeight = document.body.clientHeight
+
+ const minDragDomLeft = dragDom.offsetLeft
+ const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+ const minDragDomTop = dragDom.offsetTop
+ const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL = getStyle(dragDom, 'left')
+ let styT = getStyle(dragDom, 'top')
+
+ if (styL.includes('%')) {
+ styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+ styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+ } else {
+ styL = +styL.replace(/\px/g, '')
+ styT = +styT.replace(/\px/g, '')
+ }
+
+ document.onmousemove = function(e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ let left = e.clientX - disX
+ let top = e.clientY - disY
+
+ // 杈圭晫澶勭悊
+ if (-(left) > minDragDomLeft) {
+ left = -minDragDomLeft
+ } else if (left > maxDragDomLeft) {
+ left = maxDragDomLeft
+ }
+
+ if (-(top) > minDragDomTop) {
+ top = -minDragDomTop
+ } else if (top > maxDragDomTop) {
+ top = maxDragDomTop
+ }
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+ // emit onDrag event
+ vnode.child.$emit('dragDialog')
+ }
+
+ document.onmouseup = function(e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+}
diff --git a/src/directive/el-drag-dialog/index.js b/src/directive/el-drag-dialog/index.js
new file mode 100644
index 0000000..29facbf
--- /dev/null
+++ b/src/directive/el-drag-dialog/index.js
@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+ Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+ window['el-drag-dialog'] = drag
+ Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag
diff --git a/src/views/jcsz/zzjg.vue b/src/views/jcsz/zzjg.vue
index 543ab21..c5f2b1c 100644
--- a/src/views/jcsz/zzjg.vue
+++ b/src/views/jcsz/zzjg.vue
@@ -85,8 +85,8 @@
:fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
>
<template slot-scope="{row}">
- <div v-if="row[item.prop]==='D'">閮ㄩ棬</div>
- <div v-else-if="row[item.prop]==='W'">杞﹂棿</div>
+ <div v-if="row[item.prop]==='D'&&row.description">閮ㄩ棬</div>
+ <div v-else-if="row[item.prop]==='W'&&row.description">杞﹂棿</div>
<div v-else-if="row[item.prop]===null">/</div>
<div v-else>{{ row[item.prop] }}</div>
</template>
@@ -191,6 +191,7 @@
</div>
<el-dialog
+ v-el-drag-dialog
:title="operation==='add'?'鏂板':'缂栬緫'"
:visible.sync="dialogVisible"
width="800px"
@@ -258,6 +259,7 @@
import { getCookie } from '@/utils/auth'
import { validateCode } from '@/utils/global'
import TableColumnSettings from '@/components/TableColumnSettings'
+import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
// const SER_HZ = /^[\u4e00-\u9fa5]+$/
// const SER_HZ = /^[a-zA-Z0-9_;,.<>() ]{0,}$/
@@ -266,7 +268,7 @@
components: {
Pagination, TableColumnSettings
},
-
+ directives: { elDragDialog },
data() {
// const validateName = (rule, value, callback) => {
// if (!value) {
diff --git a/src/views/scgl/gdplgb.vue b/src/views/scgl/gdplgb.vue
index 7b41170..fffb605 100644
--- a/src/views/scgl/gdplgb.vue
+++ b/src/views/scgl/gdplgb.vue
@@ -124,6 +124,8 @@
<div v-if="row.status==='NEW'">鏂板伐鍗�</div>
<!-- <div v-if="row.status==='CREATING'">鎵ц涓�</div>-->
<!-- <div v-if="row.status==='CREATED'">宸插叧闂�</div>-->
+ <div v-if="row.status==='NOSCHED'">鏈帓绋�</div>
+ <div v-if="row.status==='SCHED'">宸叉帓绋�</div>
<div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
<div v-if="row.status==='START'">寮�宸�</div>
<div v-if="row.status==='CLOSED'">瀹屽伐</div>
@@ -142,7 +144,12 @@
show-tooltip-when-overflow
sortable="custom"
min-width="160"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.m_po">{{ row.m_po }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="wotype"
label="鍗曟嵁绫诲瀷"
@@ -195,21 +202,36 @@
show-tooltip-when-overflow
sortable="custom"
width="110"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.good_qty">{{ row.good_qty }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="ng_qty"
label="涓嶈壇鏁伴噺"
show-tooltip-when-overflow
sortable="custom"
width="110"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.ng_qty">{{ row.ng_qty }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="bad_qty"
label="鎶ュ簾鏁伴噺"
show-tooltip-when-overflow
sortable="custom"
width="110"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.bad_qty">{{ row.bad_qty }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="wkshp_name"
show-tooltip-when-overflow
--
Gitblit v1.9.3