|
|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+ <div class="newOperations">
|
|
|
+ <!-- newOperations盒子开始-->
|
|
|
+ <div class="left">
|
|
|
+ <h1>我是左边</h1>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right_top">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span style="font-size: 18px">新建</span>
|
|
|
+ <span style="float: right; padding: 1px 0;font-size: 22px" type="text">×</span>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="作业票信息" name="first">
|
|
|
+<!-- 新增作业票信息-->
|
|
|
+ <el-form ref="form" :model="form" label-width="90px">
|
|
|
+ <el-form-item label="选择SOP" prop="sop">
|
|
|
+ <el-select
|
|
|
+ v-model="form.sop"
|
|
|
+ placeholder="请选择sop"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.hardwareTypeOption"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作业票编号" prop="workCode">
|
|
|
+ <el-input
|
|
|
+ v-model="form.workCode"
|
|
|
+ placeholder="请输入作业票编号"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作业票名称" prop="workName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.workName"
|
|
|
+ placeholder="请输入作业票名称"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作业票类型" prop="workType">
|
|
|
+ <el-select
|
|
|
+ v-model="form.workType"
|
|
|
+ placeholder="请选择作业类型"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.hardwareTypeOption"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作业内容" prop="workContent">
|
|
|
+ <el-input type="textarea" v-model="form.workContent" :row="3"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="">
|
|
|
+ <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">下一步</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="选择隔离点" name="second">
|
|
|
+<!-- 隔离点信息-->
|
|
|
+ <el-form ref="form" :model="form" label-width="90px">
|
|
|
+
|
|
|
+ <el-form-item label="车间名称" prop="workshopName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.workshopName"
|
|
|
+ placeholder="请输入车间名称"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产线" prop="workline">
|
|
|
+ <el-input
|
|
|
+ v-model="form.workline"
|
|
|
+ placeholder="请输入产线"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已选隔离点" prop="spoint">
|
|
|
+ <el-select
|
|
|
+ v-model="form.spoint"
|
|
|
+ placeholder="已选隔离点"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.hardwareTypeOption"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="" prop="" style="margin-top: 45%">
|
|
|
+ <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">下一步</el-button>
|
|
|
+ <el-button plain style="float: right;height: 30px;line-height: 10px;margin-right: 19%" type="primary" @click="nextStep">下一步</el-button>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="人员选择" name="third">
|
|
|
+ <!-- 人员选择-->
|
|
|
+ <el-form ref="form" :model="form" label-width="70px">
|
|
|
+
|
|
|
+ <el-form-item label="上锁人" prop="locker">
|
|
|
+ <el-select
|
|
|
+ v-model="form.locker"
|
|
|
+ placeholder="上锁人"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.hardwareTypeOption"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="共锁人" prop="coLocker">
|
|
|
+ <el-select
|
|
|
+ v-model="form.coLocker"
|
|
|
+ placeholder="共锁人"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.hardwareTypeOption"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="共锁人" prop="coLocker">
|
|
|
+ <el-button type="primary">添加内部人员</el-button>
|
|
|
+ <el-button type="primary">添加外部人员</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开始时间" prop="startTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.startTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间"
|
|
|
+ align="right"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="endTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.endTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间"
|
|
|
+ align="right"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="" style="margin-top: 12%">
|
|
|
+ <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">完 成</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="right_bottom">
|
|
|
+ <el-card class="box-card1">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span style="font-size: 18px">已选隔离点</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-for="o in 4" :key="o" class="text item">
|
|
|
+ {{'列表内容 ' + o }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- newOperations盒子结束-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'addView',
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ activeName: 'first',
|
|
|
+ form: {
|
|
|
+ sop:'',
|
|
|
+ workName:'',
|
|
|
+ workCode:'',
|
|
|
+ workType:'',
|
|
|
+ workContent:'',
|
|
|
+ workshopName:'',//车间名称
|
|
|
+ workline:'',//产线
|
|
|
+ spoint:'',//已选隔离点
|
|
|
+ locker:'',//上锁人
|
|
|
+ coLocker:'',//共锁人
|
|
|
+ startTime:'',//开始时间
|
|
|
+ endTime:'',//结束时间
|
|
|
+ },
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '今天',
|
|
|
+ onClick(picker) {
|
|
|
+ picker.$emit('pick', new Date());
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '昨天',
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
+ picker.$emit('pick', date);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '一周前',
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', date);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ nextStep(){
|
|
|
+ console.log('我点击了下一步')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.newOperations{
|
|
|
+ width: 99%;
|
|
|
+ height: 100%;
|
|
|
+ //background: pink;
|
|
|
+ margin: 10px;
|
|
|
+ display: flex;
|
|
|
+ .left{
|
|
|
+ width: 75%;
|
|
|
+ height: 770px;
|
|
|
+ background: #eee;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 1;
|
|
|
+ .right_top{
|
|
|
+ height: 490px;
|
|
|
+ }
|
|
|
+ .right_bottom{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//右侧卡片样式开始
|
|
|
+.text {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix:before,
|
|
|
+.clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+ width:320px;
|
|
|
+}
|
|
|
+.clearfix:after {
|
|
|
+ clear: both
|
|
|
+}
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ width: 390px;
|
|
|
+ height: 470px;
|
|
|
+}
|
|
|
+.box-card1 {
|
|
|
+ width: 390px;
|
|
|
+ height: 280px;
|
|
|
+}
|
|
|
+//右侧卡片样式结束
|
|
|
+</style>
|
