Merge branch 'master' of http://192.168.5.5:10010/r/silk/silk-web

haoxuan

2024-03-07 b96a095c7a6ba16676843829429146b971017849

Merge branch 'master' of http://192.168.5.5:10010/r/silk/silk-web

 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/router/product/index.js

@@ -3,7 +3,9 @@
const silkRegisterForm = (resolve) => require(["@/views/productManage/silkRegisterForm/index"], resolve) // 纤度登记表
const silkInspectForm = (resolve) => require(["@/views/productManage/silkInspectForm/index"], resolve) // 纤度检验表
const silkRegisterAddPage = (resolve) => require(["@/views/productManage/silkRegisterForm/addPage"], resolve) // 纤度登记表，检验表 新增
const productRegisterForm = (resolve) => require(["@/views/productManage/productRegisterForm/index"], resolve) // 产量登记表
const productRegisterForm = (resolve) => require(["@/views/productManage/productRegisterForm/index"], resolve) // 产量登记表， 新增
const addProductRegisterPage = (resolve) =>
  require(["@/views/productManage/productRegisterForm/addProductRegisterPage"], resolve) // 新增产量登记表

const appconfig = [
  {
@@ -37,6 +39,14 @@
    meta: {
      title: "产量登记表"
    }
  },
  {
    path: "/productManage/productRegisterForm/addProductRegisterPage",
    name: "addProductRegisterPage",
    component: addProductRegisterPage,
    meta: {
      title: "新增产量登记表"
    }
  }
]


 src/views/productManage/productRegisterForm/addProductRegisterPage.vue

New file
@@ -0,0 +1,390 @@
<template>
  <div class="add-product-page">
    <div class="top-view">
      <div class="t-left">
        <el-button type="primary" size="small">放弃</el-button>
        <el-button type="primary" size="small">保存</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" size="small">退出</el-button>
      </div>
      <div class="t-right">
        <div class="t-right-circle" :class="isDeviceConnectStatus ? 't-r-bg-green ' : 't-r-bg-red '"></div>
        <div :class="isDeviceConnectStatus ? 't-right-green' : 't-right-red'">计量仪器连接正常</div>
      </div>
    </div>
    <div class="body-card">
      <div class="body-top">
        <div class="b-t-left">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            label-position="right"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="3">
                <el-form-item label="编号" prop="number">
                  <el-input v-model="ruleForm.number" size="small"></el-input>
                </el-form-item>
                <el-form-item label="生产用时" prop="productTime">
                  <el-input v-model="ruleForm.productTime" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="生产日期" prop="productDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.productDate"
                    size="small"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="回数" prop="numTimes">
                  <el-input v-model="ruleForm.numTimes" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="庄口" prop="lots">
                  <el-select v-model="ruleForm.lots" placeholder="请选择庄口" size="small">
                    <el-option label="庄口一" value="庄口一"></el-option>
                    <el-option label="庄口二" value="庄口二"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="落丝茧量" prop="silkCocoonCount">
                  <el-input v-model="ruleForm.silkCocoonCount" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="车间" prop="workshop">
                  <el-select v-model="ruleForm.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-form-item label="每桶茧量" prop="barrelCocoonCount">
                  <div style="display: flex">
                    <el-input v-model="ruleForm.silkCocoonCount" size="small"></el-input>
                    <span>克</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="组别" prop="group">
                  <el-select v-model="ruleForm.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-form-item label="实际车速" prop="actualSpeed">
                  <el-input v-model="ruleForm.actualSpeed" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="规格" prop="spec">
                  <el-input v-model="ruleForm.spec" size="small"></el-input>
                </el-form-item>
                <el-form-item label="乙班时间" prop="bShiftTime">
                  <el-input v-model="ruleForm.bShiftTime" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="是否结庄" prop="end">
                  <el-input v-model="ruleForm.spec" size="small"></el-input>
                </el-form-item>
                <el-form-item label="甲班时间" prop="aShiftTime">
                  <el-input v-model="ruleForm.aShiftTime" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="等级" prop="grade">
                  <el-input v-model="ruleForm.grade" size="small"></el-input>
                </el-form-item>
                <el-form-item label="车组缫折" prop="reelingDiscount">
                  <el-input v-model="ruleForm.reelingDiscount" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="落丝桶数:" prop="doffBarrelage">
                  <div class="doff-barrelage-card">
                    <div class="d-b-common">
                      <el-input v-model="ruleForm.oneInput" size="small" class="d-b-c-input"></el-input>
                      <el-checkbox v-model="ruleForm.isOneDoff"></el-checkbox>
                    </div>
                    <div class="d-b-common">
                      <el-input v-model="ruleForm.twoInput" size="small" class="d-b-c-input"></el-input>
                      <el-checkbox v-model="ruleForm.isTwoDoff"></el-checkbox>
                    </div>
                    <div class="d-b-common">
                      <el-input v-model="ruleForm.threeInput" size="small" class="d-b-c-input"></el-input>
                      <el-checkbox v-model="ruleForm.isThreeDoff"></el-checkbox>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="号带颜色:" prop="numBandColor">
                  <div class="doff-barrelage-card">
                    <div class="d-b-common">
                      <div class="n-m-c-label">第一回</div>
                      <el-input v-model="ruleForm.oneInput" size="small" class="d-b-c-input"></el-input>
                    </div>
                    <div class="d-b-common">
                      <div class="n-m-c-label">第二回</div>
                      <el-input v-model="ruleForm.twoInput" size="small" class="d-b-c-input"></el-input>
                    </div>
                    <div class="d-b-common">
                      <div class="n-m-c-label">第三回</div>
                      <el-input v-model="ruleForm.threeInput" size="small" class="d-b-c-input"></el-input>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="理论丝量" prop="theorySilkCount">
                  <el-input v-model="ruleForm.theorySilkCount" size="small"></el-input>
                </el-form-item>
                <el-form-item label="总产量" prop="totalOutput">
                  <div style="display: flex">
                    <el-input v-model="ruleForm.totalOutput" size="small"></el-input>
                    <span>kg</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="台时产量" prop="platformTimeOutput">
                  <el-input v-model="ruleForm.platformTimeOutput" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="b-t-right">
          <div class="b-t-r-icon" :class="isDeviceConnectStatus ? 'c-p' : 'c-n'" @click="deviceConnectClick">
            <i class="el-icon-d-arrow-left"></i>
          </div>
        </div>
      </div>
      <div class="body-table">
        <div class="b-t-unit">单位：克</div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="carNum" label="车号" width="99" align="center"> </el-table-column>
          <el-table-column label="第一回" align="center">
            <el-table-column prop="fist1" label="1" width="60" align="center"> </el-table-column>
            <el-table-column prop="fist2" label="2" width="60" align="center"> </el-table-column>
            <el-table-column prop="fist3" label="3" width="60" align="center"> </el-table-column>
            <el-table-column prop="fist4" label="4" width="60" align="center"> </el-table-column>
          </el-table-column>
          <el-table-column label="第二回" align="center">
            <el-table-column prop="two1" label="1" width="60" align="center"> </el-table-column>
            <el-table-column prop="two2" label="2" width="60" align="center"> </el-table-column>
            <el-table-column prop="two3" label="3" width="60" align="center"> </el-table-column>
            <el-table-column prop="two4" label="4" width="60" align="center"> </el-table-column>
          </el-table-column>
          <el-table-column label="第三回" align="center">
            <el-table-column prop="three1" label="1" width="60" align="center"> </el-table-column>
            <el-table-column prop="three2" label="2" width="60" align="center"> </el-table-column>
            <el-table-column prop="three3" label="3" width="60" align="center"> </el-table-column>
            <el-table-column prop="three4" label="4" width="60" align="center"> </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="台产量" align="center"> </el-table-column>
          <el-table-column prop="date" label="个人产量" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="台时产量" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="个人缫折" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="一回产量" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="一回台产" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="一回缫折" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="二回产量" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="二回台产" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="二回缫折" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="三回产量" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="三回台产" width="60" align="center"> </el-table-column>
          <el-table-column prop="date" label="三回缫折" width="60" align="center"> </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 仪器连接正常弹窗 -->
    <addProductDialog ref="addProductDialog" />
  </div>
</template>

<script>
import addProductDialog from "./components/addProductDialog"
export default {
  name: "addProductRegisterPage",
  props: {},
  mixins: [],
  components: { addProductDialog },
  computed: {},
  data() {
    return {
      isDeviceConnectStatus: false,
      ruleForm: {
        number: "",
        productTime: "",
        productDate: "",
        numTimes: "",
        lots: "庄口一",
        silkCocoonCount: "",
        workshop: "车间一",
        barrelCocoonCount: "",
        group: 1,
        actualSpeed: "",
        spec: "",
        bShiftTime: "",
        aShiftTime: "",
        end: false,
        reelingDiscount: "",
        grade: "",
        oneInput: "",
        isOneDoff: false,
        twoInput: "",
        isTwoDoff: false,
        threeInput: "",
        isThreeDoff: false,
        theorySilkCount: "",
        totalOutput: "",
        platformTimeOutput: ""
      },
      rules: {
        number: [{ required: true, message: "请输入编号", trigger: "blur" }],
        productDate: [{ required: true, message: "请选择生产日期", trigger: "change" }],
        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 }
      ],
      tableData: []
    }
  },
  created() {},
  methods: {
    // 仪器连接弹窗
    deviceConnectClick() {
      console.log("dddd")
      if (this.isDeviceConnectStatus) {
        this.$refs.addProductDialog.editDialogVisible = true
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-product-page {
  height: 100%;
  .top-view {
    margin: 20px 30px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    border-radius: 12px;
    background-color: #fff;
    .t-right {
      display: flex;
      font-size: 14px;
      // color: #ff0000;
      .t-right-circle {
        width: 18px;
        height: 18px;
        border-radius: 9px;
        // background: #ff0000;
        margin-right: 10px;
      }
    }
  }
  .body-card {
    margin: 0 30px;
    background-color: #fff;
    padding: 10px 15px;
    height: calc(100% - 180px);
    border-radius: 4px;
    .body-top {
      display: flex;
      .b-t-left {
        width: 95%;
        padding-top: 15px;
        .doff-barrelage-card {
          display: flex;
          .d-b-common {
            width: 33.3%;
            display: flex;
            justify-content: center;
            .d-b-c-input {
              width: 50%;
              margin-right: 10px;
            }
            .n-m-c-label {
              color: #606266;
              margin-right: 10px;
            }
          }
        }
      }
      .b-t-right {
        width: 60px;
        .b-t-r-icon {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          border: 1px solid #1890ff;
          color: #1890ff;
          font-size: 30px;
          line-height: 50px;
          text-align: center;
          margin-top: 15px;
          margin-left: 30px;
        }
      }
    }
    .body-table {
      position: relative;
      .b-t-unit {
        position: absolute;
        top: -25px;
        right: 20px;
      }
    }
  }
}
.t-right-red {
  color: #ff0000;
}
.t-right-green {
  color: #00ff00;
}
.t-r-bg-red {
  background: #ff0000;
}
.t-r-bg-green {
  background: #00ff00;
}
.c-p {
  cursor: pointer;
}
.c-n {
  cursor: no-drop;
}

::v-deep {
}
</style>

 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>

 src/views/productManage/productRegisterForm/index.vue

@@ -90,7 +90,9 @@
      console.log(searchText)
    },
    // 新增
    addBtnClick() {},
    addBtnClick() {
      this.$router.push({ name: "addProductRegisterPage" })
    },
    // 查看
    viewClick(row) {
      console.log(row)
@@ -110,6 +112,7 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.productRegisterForm-container {
  height: 100%;
  .filter-card {
    margin: 20px 30px;
    height: 80px;
@@ -123,6 +126,7 @@
    margin: 0 30px;
    background-color: #fff;
    padding: 10px 15px;
    height: calc(100% - 180px);
  }
}
</style>