From b67a17cc810f087f0708c3cb6effa91b7752140f Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期三, 06 三月 2024 14:58:43 +0800
Subject: [PATCH] 新增产量登记表页面和仪器正常弹窗页面、弹窗可拖拽功能
---
src/common/untils/dialog.js | 51 ++++++++++
src/main.js | 1
src/views/productManage/productRegisterForm/components/addProductDialog.vue | 187 +++++++++++++++++++++++++++++++++++++
src/views/productManage/productRegisterForm/addProductRegisterPage.vue | 19 +++
4 files changed, 254 insertions(+), 4 deletions(-)
diff --git a/src/common/untils/dialog.js b/src/common/untils/dialog.js
new file mode 100644
index 0000000..e0e29fe
--- /dev/null
+++ b/src/common/untils/dialog.js
@@ -0,0 +1,51 @@
+import Vue from "vue"
+
+// v-dialogDrag: 寮圭獥鎷栨嫿
+Vue.directive("dialogDrag", {
+ bind(el, binding, vnode, oldVnode) {
+ console.log(binding, vnode, oldVnode)
+ const dialogHeaderEl = el.querySelector(".el-dialog__header")
+ const dragDom = el.querySelector(".el-dialog")
+ dialogHeaderEl.style.cursor = "move"
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL, styT
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ if (sty.left.includes("%")) {
+ styL = +document.body.clientWidth * (+sty.left.replace(/\\%/g, "") / 100)
+ styT = +document.body.clientHeight * (+sty.top.replace(/\\%/g, "") / 100)
+ } else {
+ styL = +sty.left.replace(/\px/g, "")
+ styT = +sty.top.replace(/\px/g, "")
+ }
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ const l = e.clientX - disX
+ const t = e.clientY - disY
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.left = `${l + styL}px`
+ dragDom.style.top = `${t + styT}px`
+
+ // 灏嗘鏃剁殑浣嶇疆浼犲嚭鍘�
+ // binding.value({x:e.pageX,y:e.pageY})
+ }
+
+ document.onmouseup = function (e) {
+ console.log(e)
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
diff --git a/src/main.js b/src/main.js
index 8acc4e8..2b0bb22 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@
import "element-ui/lib/theme-chalk/index.css"
import "@/assets/style/index.scss"
import "@/components"
+import "@/common/untils/dialog"
Vue.use(ElementUI)
// 淇敼榛樿鐐瑰嚮閬僵灞備负涓嶅叧闂�
diff --git a/src/views/productManage/productRegisterForm/addProductRegisterPage.vue b/src/views/productManage/productRegisterForm/addProductRegisterPage.vue
index ce36553..4957b7f 100644
--- a/src/views/productManage/productRegisterForm/addProductRegisterPage.vue
+++ b/src/views/productManage/productRegisterForm/addProductRegisterPage.vue
@@ -75,7 +75,7 @@
</el-col>
<el-col :span="3">
<el-form-item label="缁勫埆" prop="group">
- <el-select v-model="ruleForm.group" placeholder="璇烽�夋嫨杞﹂棿" size="small">
+ <el-select v-model="ruleForm.group" placeholder="璇烽�夋嫨缁勫埆" size="small">
<el-option
v-for="item in groupOptions"
:key="item.id"
@@ -168,7 +168,7 @@
</el-form>
</div>
<div class="b-t-right">
- <div class="b-t-r-icon" :class="isDeviceConnectStatus ? 'c-p' : 'c-n'">
+ <div class="b-t-r-icon" :class="isDeviceConnectStatus ? 'c-p' : 'c-n'" @click="deviceConnectClick">
<i class="el-icon-d-arrow-left"></i>
</div>
</div>
@@ -211,15 +211,18 @@
</el-table>
</div>
</div>
+ <!-- 浠櫒杩炴帴姝ｅ父寮圭獥 -->
+ <addProductDialog ref="addProductDialog" />
</div>
</template>
<script>
+import addProductDialog from "./components/addProductDialog"
export default {
name: "addProductRegisterPage",
props: {},
mixins: [],
- components: {},
+ components: { addProductDialog },
computed: {},
data() {
return {
@@ -271,7 +274,15 @@
}
},
created() {},
- methods: {}
+ methods: {
+ // 浠櫒杩炴帴寮圭獥
+ deviceConnectClick() {
+ console.log("dddd")
+ if (this.isDeviceConnectStatus) {
+ this.$refs.addProductDialog.editDialogVisible = true
+ }
+ }
+ }
}
</script>
diff --git a/src/views/productManage/productRegisterForm/components/addProductDialog.vue b/src/views/productManage/productRegisterForm/components/addProductDialog.vue
new file mode 100644
index 0000000..7dca258
--- /dev/null
+++ b/src/views/productManage/productRegisterForm/components/addProductDialog.vue
@@ -0,0 +1,187 @@
+<template>
+ <el-dialog
+ v-dialogDrag
+ :close-on-click-modal="false"
+ :visible.sync="editDialogVisible"
+ width="533px"
+ class="add-event-dialog"
+ @close="handleClose"
+ >
+ <div class="dialog-content-box">
+ <el-form
+ :model="proForm"
+ :rules="rules"
+ ref="ruleForm"
+ label-width="60px"
+ label-position="right"
+ class="demo-ruleForm"
+ >
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="鏃ユ湡" prop="date">
+ <el-date-picker
+ type="date"
+ placeholder="骞�/鏈�/鏃�"
+ v-model="proForm.date"
+ size="small"
+ style="width: 100%"
+ ></el-date-picker>
+ </el-form-item>
+ </el-col>
+ <el-col :span="9">
+ <el-form-item label="缁勫埆" prop="group">
+ <el-select v-model="proForm.group" placeholder="璇烽�夋嫨缁勫埆" size="small">
+ <el-option v-for="item in groupOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11">
+ <el-form-item label="杞﹂棿" prop="workshop">
+ <el-select v-model="proForm.workshop" placeholder="璇烽�夋嫨杞﹂棿" size="small">
+ <el-option label="杞﹂棿涓�" value="杞﹂棿涓�"></el-option>
+ <el-option label="杞﹂棿浜�" value="杞﹂棿浜�"></el-option>
+ <el-option label="杞﹂棿涓�" value="杞﹂棿涓�"></el-option>
+ <el-option label="杞﹂棿鍥�" value="杞﹂棿鍥�"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="9">
+ <el-form-item label="瑙勬牸" prop="spec">
+ <el-input v-model="proForm.spec" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item label="搴勫彛" prop="lots">
+ <el-select v-model="proForm.lots" placeholder="璇烽�夋嫨搴勫彛" size="small" style="width: 100%">
+ <el-option label="搴勫彛涓�" value="搴勫彛涓�"></el-option>
+ <el-option label="搴勫彛浜�" value="搴勫彛浜�"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="" label-width="20px">
+ <el-button type="primary" size="small">鍒囨崲</el-button>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item prop="tareWeight" label-width="80px">
+ <span slot="label">
+ <span class="formLabel">鐨噸</span>
+ </span>
+ <el-input v-model="proForm.tareWeight" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item prop="netWeight" label-width="80px">
+ <span slot="label">
+ <span class="formLabel">鍑�閲�</span>
+ </span>
+ <el-input v-model="proForm.netWeight" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item prop="carNum" label-width="80px">
+ <span slot="label">
+ <span class="formLabel">杞﹀彿</span>
+ </span>
+ <el-input v-model="proForm.carNum" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item prop="numTimes" label-width="80px">
+ <span slot="label">
+ <span class="formLabel">鍥炴暟</span>
+ </span>
+ <el-input v-model="proForm.numTimes" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="20">
+ <el-form-item prop="pieces" label-width="80px">
+ <span slot="label">
+ <span class="formLabel">鐗囨暟</span>
+ </span>
+ <el-input v-model="proForm.pieces" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="handleClose" size="mini">鍙栨秷</el-button>
+ <el-button type="primary" @click="onSubmit('form')" size="mini">纭畾</el-button>
+ </div>
+ </el-dialog>
+</template>
+<script>
+export default {
+ props: {},
+ components: {},
+ data() {
+ return {
+ editDialogVisible: false,
+ proForm: {},
+ rules: {
+ date: [{ required: true, message: "璇烽�夋嫨鏃ユ湡", trigger: "change" }],
+ number: [{ required: true, message: "璇疯緭鍏ョ紪鍙�", trigger: "blur" }],
+ workshop: [{ type: "date", required: true, message: "璇烽�夋嫨杞﹂棿", trigger: "change" }]
+ },
+ groupOptions: [
+ { id: 1, value: 1 },
+ { id: 2, value: 2 },
+ { id: 3, value: 3 },
+ { id: 4, value: 4 },
+ { id: 5, value: 5 },
+ { id: 6, value: 6 },
+ { id: 7, value: 7 },
+ { id: 8, value: 8 },
+ { id: 9, value: 9 }
+ ]
+ }
+ },
+ created() {},
+ methods: {
+ handleClose() {
+ this.editDialogVisible = false
+ },
+ // 纭畾
+ onSubmit(form) {
+ console.log(form)
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.add-event-dialog {
+ .formLabel {
+ font-size: 20px;
+ font-weight: 700;
+ color: #333;
+ }
+ .dialog-footer {
+ background-color: #fff;
+ }
+}
+::v-deep {
+ .el-dialog__header {
+ border-bottom: 0px solid #e5e5e5;
+ }
+ .el-dialog__body {
+ padding: 0px 20px 10px;
+ }
+ .el-form-item__label {
+ font-size: 16px;
+ color: #333;
+ font-weight: 700;
+ }
+}
+</style>
+<style>
+.add-event-dialog .el-dialog {
+ position: absolute;
+ right: 40px;
+ top: 40px;
+}
+/* .add-event-dialog .el-dialog__header {
+ display: none;
+} */
+</style>
--
Gitblit v1.8.0