소스 검색

作业票右侧内容样式布局调整

wangyani 1 년 전
부모
커밋
18400d0e56
1개의 변경된 파일335개의 추가작업 그리고 305개의 파일을 삭제
  1. 335 305
      src/views/mes/job/jobm/NewOperations.vue

+ 335 - 305
src/views/mes/job/jobm/NewOperations.vue

@@ -1,276 +1,293 @@
 <template>
   <div class="newOperations">
     <!--    newOperations盒子开始-->
-      <div class="left" >
-<!--        左边第一个是隔离点组件-->
-<!--        第二个是车间组件-->
-        <SeparationPoint v-if="this.activeName=='second'" @selection-changed="handleSelectPoint"></SeparationPoint>
-        <WorkShop v-if="this.activeName=='first'||this.activeName=='third'"></WorkShop>
-      </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%"
+    <div class="left">
+      <!--        左边第一个是隔离点组件-->
+      <!--        第二个是车间组件-->
+      <SeparationPoint
+        v-if="this.activeName == 'second'"
+        @selection-changed="handleSelectPoint"
+      ></SeparationPoint>
+      <WorkShop
+        v-if="this.activeName == 'first' || this.activeName == 'third'"
+      ></WorkShop>
+    </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-form-item>
-                    <el-form-item label="作业票名称" prop="workName">
-                      <el-input
-                        v-model="form.workName"
-                        placeholder="请输入作业票名称"
-                        style="width: 100%"
+                    </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-form-item>
-                    <el-form-item label="作业票类型" prop="workType">
-                      <el-select
-                        v-model="form.workType"
-                        placeholder="请选择作业类型"
-                        clearable
-                        style="width: 100%"
-
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="作业内容" prop="workContent">
+                    <el-input
+                      type="textarea"
+                      v-model="form.workContent"
+                      :rows="4"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="" prop="" style="margin-top: 80%">
+                    <el-button
+                      type="primary"
+                      class="workTicket_btn"
+                      @click="nextStep('second')"
+                      >下一步</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>
+                  <div class="text item">
+                    <p>已选隔离点</p>
+                    <el-table
+                      :data="tableData"
+                      stripe
+                      height="480"
+                      style="width: 100%"
+                    >
+                      <el-table-column prop="id" label="序号" width="60">
+                      </el-table-column>
+                      <el-table-column prop="point" label="已选隔离点">
+                        <template slot-scope="scope">
+                          <span style="color: #2a87ff">{{
+                            scope.row.point
+                          }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="isolation" label="隔离方式">
+                      </el-table-column>
+                      <el-table-column
+                        prop="type"
+                        label="危险能量类型"
+                        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" :rows="4"></el-input>
-                    </el-form-item>
-                    <el-form-item label="" prop="">
-                      <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep('second')">下一步</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-table-column>
+                    </el-table>
+                  </div>
+                  <el-form-item label="" prop="">
+                    <el-button
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="nextStep('third')"
+                      >下一步</el-button
+                    >
+                    <el-button
+                      plain
+                      style="
+                        float: right;
+                        height: 30px;
+                        line-height: 10px;
+                        margin-right: 19%;
+                      "
+                      type="primary"
+                      @click="previousStep('first')"
+                      >上一步</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-form-item>
-                    <el-form-item label="产线" prop="workline">
-                      <el-input
-                        v-model="form.workline"
-                        placeholder="请输入产线"
-                        style="width: 100%"
+                    </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-form-item>
-                    <el-form-item label="已选隔离点" prop="spoint">
-                      <el-select
-                        v-model="form.spoint"
-                        placeholder="已选隔离点"
-                        clearable
-                        class="selects"
-                        style="width: 100%;"
-                        multiple
-                        collapse-tags
-                      >
-                        <el-option
-                          v-for="dict in this.selectPoint"
-                          :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('third')">下一步</el-button>
-                      <el-button plain style="float: right;height: 30px;line-height: 10px;margin-right: 19%" type="primary" @click="previousStep('first')">上一步</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="confirm">完 成</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>-->
-            <div class="text item">
-              <el-table :data="tableData" stripe height="250" style="width: 100%" >
-                <el-table-column prop="id" label="序号" width="60">
-                </el-table-column>
-                <el-table-column prop="point" label="已选隔离点">
-                  <template slot-scope="scope">
-                    <span style="color: #2a87ff">{{ scope.row.point }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="isolation" label="隔离方式">
-                </el-table-column>
-                <el-table-column prop="type" label="危险能量类型" width="100">
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-card>
-        </div>
-
+                    </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: 100%">
+                    <el-button
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="confirm"
+                      >完 成</el-button
+                    >
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </div>
+    </div>
     <!--    newOperations盒子结束-->
   </div>
 </template>
 
 
 <script>
-import SeparationPoint from '@/views/mes/job/jobm/SeparationPoint.vue'
-import WorkShop from '@/views/mes/job/jobm/WorkShop.vue'
+import SeparationPoint from "@/views/mes/job/jobm/SeparationPoint.vue";
+import WorkShop from "@/views/mes/job/jobm/WorkShop.vue";
 export default {
-  name: 'addView',
-  components:{
+  name: "addView",
+  components: {
     SeparationPoint,
-    WorkShop
+    WorkShop,
   },
-  data(){
+  data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       form: {
-        sop:'',
-        workName:'',
-        workCode:'',
-        workType:'',
-        workContent:'',
-        workshopName:'',//车间名称
-        workline:'',//产线
-        spoint:'',//已选隔离点
-        locker:'',//上锁人
-        coLocker:'',//共锁人
-        startTime:'',//开始时间
-        endTime:'',//结束时间
+        sop: "",
+        workName: "",
+        workCode: "",
+        workType: "",
+        workContent: "",
+        workshopName: "", //车间名称
+        workline: "", //产线
+        spoint: "", //已选隔离点
+        locker: "", //上锁人
+        coLocker: "", //共锁人
+        startTime: "", //开始时间
+        endTime: "", //结束时间
       },
-      hardwareTypeOption:null,
-      selectPoint:[
+      hardwareTypeOption: null,
+      selectPoint: [
         {
-          label:'E-1',
-          value:1
+          label: "E-1",
+          value: 1,
         },
         {
-          label:'E-2',
-          value:2
+          label: "E-2",
+          value: 2,
         },
         {
-          label:'E-3',
-          value:3
+          label: "E-3",
+          value: 3,
         },
         {
-          label:'E-4',
-          value:4
+          label: "E-4",
+          value: 4,
         },
         {
-          label:'E-5',
-          value:5
+          label: "E-5",
+          value: 5,
         },
         {
-          label:'E-6',
-          value:6
+          label: "E-6",
+          value: 6,
         },
         {
-          label:'E-7',
-          value:7
-        }
+          label: "E-7",
+          value: 7,
+        },
       ],
       // 已选隔离点
       tableData: [
@@ -294,90 +311,98 @@ export default {
         },
       ],
       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);
-          }
-        }]
+        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:{
+  methods: {
     handleClick(tab, event) {
       console.log(tab, event);
     },
     previousStep(val) {
-      this.activeName=val
+      this.activeName = val;
     },
-    nextStep(val){
-      console.log(val,'nextStep')
-      this.activeName=val
-      console.log('我点击了下一步')
+    nextStep(val) {
+      console.log(val, "nextStep");
+      this.activeName = val;
+      console.log("我点击了下一步");
     },
-    confirm(){
-      console.log('确认')
+    confirm() {
+      console.log("确认");
     },
     // 子组件逆向传递选中的隔离点
-    handleSelectPoint(points){
-        console.log(points, '逆向传递选中的隔离点');
-        points.forEach(point => {
-          // 确保当前传递的点不重复添加
-          if (!this.selectPoint.some(existingPoint => existingPoint.value === point.value)) {
-            this.selectPoint.push({
-              label: point.label,  // 显示的名称
-              value: point.value,  // 对应的值
-            });
-          }
-        });
-
-        // 更新 form.spoint 为最新选中的隔离点数组
-        this.form.spoint = points.map(point => point.value);
-
-    }
+    handleSelectPoint(points) {
+      console.log(points, "逆向传递选中的隔离点");
+      points.forEach((point) => {
+        // 确保当前传递的点不重复添加
+        if (
+          !this.selectPoint.some(
+            (existingPoint) => existingPoint.value === point.value
+          )
+        ) {
+          this.selectPoint.push({
+            label: point.label, // 显示的名称
+            value: point.value, // 对应的值
+          });
+        }
+      });
 
-  }
-}
+      // 更新 form.spoint 为最新选中的隔离点数组
+      this.form.spoint = points.map((point) => point.value);
+    },
+  },
+};
 </script>
 
 
 
 <style scoped lang="scss">
-.newOperations{
+.newOperations {
   width: 99%;
   height: 100%;
   //background: pink;
   margin: 10px;
   display: flex;
-  .left{
+  .left {
     width: 75%;
     height: 830px;
     background: #eee;
     margin-right: 10px;
   }
-  .right{
+  .right {
     flex: 1;
-    .right_top{
+    .right_top {
       height: 550px;
     }
-    .right_bottom{
-
+    .workTicket_btn {
+      position: relative;
+      left: 63%;
+      height: 30px;
+      line-height: 10px;
     }
   }
 }
@@ -388,45 +413,50 @@ export default {
 
 .item {
   margin-bottom: 18px;
+  p {
+    font-size: 18px;
+    font-weight: bolder;
+    font-family: SourceHanSansSC-bold;
+  }
 }
 
 .clearfix:before,
 .clearfix:after {
   display: table;
   content: "";
-  width:320px;
+  width: 320px;
 }
 .clearfix:after {
-  clear: both
+  clear: both;
 }
 
 .box-card {
   // width: 390px;
   width: 95%;
-  height: 530px;
-}
-.box-card1 {
-  // width: 390px;
-  width: 95%;
-  height: 280px;
+  height: 820px;
 }
+
 //右侧卡片样式结束
 //隔离点多选框样式
 .selects {
-  .el-input.el-input--medium.el-input--suffix { // 调整箭头符号块的宽度
+  .el-input.el-input--medium.el-input--suffix {
+    // 调整箭头符号块的宽度
     width: 175px !important;
   }
   .el-input.el-input--medium.el-input--suffix {
-    .el-input__inner {                          // 调整输入框的宽高
+    .el-input__inner {
+      // 调整输入框的宽高
       height: 36px !important;
       width: 220px !important;
     }
-    .el-input__suffix-inner {                   // 调整箭头符号的位置
+    .el-input__suffix-inner {
+      // 调整箭头符号的位置
       position: absolute;
       right: -45px;
     }
   }
-  .el-select__tags {                            // 调整输入框里面的多选不换行
+  .el-select__tags {
+    // 调整输入框里面的多选不换行
     flex-wrap: nowrap !important;
   }
 }