新增产量登记表页面开发

yangfeng

2024-03-05 17b83cb04a18dfd0b21ba48c219966934dff2987

新增产量登记表页面开发

 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,379 @@
<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'">
            <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>
  </div>
</template>

<script>
export default {
  name: "addProductRegisterPage",
  props: {},
  mixins: [],
  components: {},
  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: {}
}
</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/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>