<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>
|
