新增产量登记表页面和仪器正常弹窗页面、弹窗可拖拽功能

yangfeng

2024-03-06 b67a17cc810f087f0708c3cb6effa91b7752140f

新增产量登记表页面和仪器正常弹窗页面、弹窗可拖拽功能

 src/common/untils/dialog.js

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

      // 注意在ie中 第一次获取到的值为组件自带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
      }
    }
  }
})

 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)
// 修改默认点击遮罩层为不关闭

 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>


 src/views/productManage/productRegisterForm/components/addProductDialog.vue

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