sop模块 新建sop左边内容新增 右边内容完善

src/views/mes/sop/sopm/NewSop.vue

@@ -2,35 +2,32 @@
   <div class="newOperations">
     <!--    newOperations盒子开始-->
     <div class="left">
-      <h1>我是左边</h1>
+      <!-- <h1>我是左边</h1> -->
+      <SopLeft v-if="this.activeName == 'first'" />
+      <p v-else>隔离点</p>
     </div>
     <div class="right">
       <div class="right_top">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span style="font-size: 18px">新建SOP</span>
-            <span style="float: right; padding: 1px 0;font-size: 22px" type="text">×</span>
+            <span
+              style="float: right; padding: 1px 0; font-size: 22px"
+              type="text"
+              >×</span
+            >
           </div>
-          <div  class="text item">
+          <div class="text item">
             <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane label="SOP新增" name="first">
-                <!--                  新增作业票信息-->
-                <el-form ref="form" :model="form"  label-width="70px">
+                <!-- 新增作业票信息-->
+                <el-form ref="form" :model="form" label-width="70px">
                   <el-form-item label="名称" prop="sopName">
-                    <el-select
-                      v-model="form.sopName"
-                      placeholder="请选择sop"
-                      clearable
+                    <el-input
+                      v-model="form.SOPId"
+                      placeholder="请输入SOP名称"
                       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="SOPId">
                     <el-input
@@ -40,25 +37,41 @@
                     />
                   </el-form-item>
                   <el-form-item label="SOP类型" prop="SOPType">
-                    <el-input
-                      v-model="form.SOPType"
-                      placeholder="请输入SOP类型"
+                    <el-select
+                      v-model="form.spoint"
+                      placeholder="请选择SOP类型"
+                      clearable
                       style="width: 100%"
-                    />
+                    >
+                      <el-option
+                        v-for="dict in this.sopTypeList"
+                        :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="6"></el-input>
+                    <el-input
+                      type="textarea"
+                      v-model="form.workContent"
+                      :row="6"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="" prop="" style="margin-top: 23%">
-                    <el-button style="float: right;height: 30px;line-height: 10px" type="primary" @click="nextStep">下一步</el-button>
+                    <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 ref="form" :model="form" label-width="90px">
                   <el-form-item label="车间名称" prop="workshopName">
                     <el-input
                       v-model="form.workshopName"
@@ -79,7 +92,6 @@
                       placeholder="已选隔离点"
                       clearable
                       style="width: 100%"
-
                     >
                       <el-option
                         v-for="dict in this.hardwareTypeOption"
@@ -91,14 +103,26 @@
                   </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  style="float: right;height: 30px;line-height: 10px;margin-right: 19%" type="primary" @click="nextStep">上一步</el-button>
-
+                    <el-button
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="sumbit"
+                      >确 定</el-button
+                    >
+                    <el-button
+                      style="
+                        float: right;
+                        height: 30px;
+                        line-height: 10px;
+                        margin-right: 19%;
+                      "
+                      type="primary"
+                      @click="preStep"
+                      >上一步</el-button
+                    >
                   </el-form-item>
                 </el-form>
               </el-tab-pane>
-
-
             </el-tabs>
           </div>
         </el-card>
@@ -107,14 +131,27 @@
         <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 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>
-
     </div>
     <!--    newOperations盒子结束-->
   </div>
@@ -122,78 +159,117 @@
 
 
 <script>
+import SopLeft from "./SopLeft.vue";
 export default {
-  name: 'addView',
-  data(){
+  name: "addView",
+  components: {
+    SopLeft,
+  },
+  data() {
     return {
-      activeName: 'first',
+      activeName: "first",
+      
       form: {
-        sopName:'',
-        sopId:'',
-        SOPType:'',
-        workshopName:'',//车间名称
-        workline:'',//产线
-        spoint:'',//已选隔离点
-
+        sopName: "",
+        sopId: "",
+        SOPType: "",
+        workshopName: "", //车间名称
+        workline: "", //产线
+        spoint: "", //已选隔离点
       },
       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);
+            },
+          },
+        ],
       },
-    }
-
+      // sop类型列表
+      sopTypeList: [
+        { label: "维护", value: 1 },
+        { label: "维修", value: 2 },
+        { label: "保养", value: 3 },
+      ],
+      // 已选隔离点
+      tableData: [
+        {
+          id: 1,
+          point: "E-1",
+          isolation: "挂锁",
+          type: "电能",
+        },
+        {
+          id: 2,
+          point: "E-2",
+          isolation: "挂锁",
+          type: "电能",
+        },
+        {
+          id: 3,
+          point: "E-3",
+          isolation: "挂锁",
+          type: "电能",
+        },
+      ],
+    };
   },
-  methods:{
+  methods: {
     handleClick(tab, event) {
       console.log(tab, event);
     },
-    nextStep(){
-      console.log('我点击了下一步')
-    }
-  }
-}
+    preStep() {
+      this.activeName = "first";
+     
+    },
+    nextStep() {
+      this.activeName = "second";
+    
+      console.log("我点击了下一步");
+    },
+  },
+};
 </script>
 
 
 
 <style scoped lang="scss">
-.newOperations{
+.newOperations {
   width: 99%;
   height: 100%;
-  //background: pink;
+  // background: pink;
   margin: 10px;
   display: flex;
-  .left{
+  .left {
     width: 75%;
-    height: 770px;
-    background: #eee;
+    height: 830px;
+    // background: #eee;
     margin-right: 10px;
   }
-  .right{
+  .right {
     flex: 1;
-    .right_top{
-      height: 490px;
+    .right_top {
+      height: 540px;
     }
-    .right_bottom{
-
+    .right_bottom {
     }
   }
 }
@@ -210,19 +286,33 @@ export default {
 .clearfix:after {
   display: table;
   content: "";
-  width:320px;
+  width: 320px;
 }
 .clearfix:after {
-  clear: both
+  clear: both;
 }
 
 .box-card {
-  width: 390px;
-  height: 470px;
+  // width: 390px;
+  width: 95%;
+  height: 530px;
 }
 .box-card1 {
-  width: 390px;
+  // width: 390px;
+  width: 95%;
   height: 280px;
 }
+::v-deeep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
+.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
+  padding-left: 100px !important;
+}
+::v-deep .el-tabs .el-tabs__item {
+  padding: 0 50px !important;
+}
+
 //右侧卡片样式结束
 </style>
+<style>
+</style>

src/views/mes/sop/sopm/SopLeft.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="leftcon">
+    <el-form ref="form" :model="form" label-width="100px" :inline="true">
+      <el-form-item label="车间">
+        <el-select
+          v-model="form.workShop"
+          v-bind="$attrs"
+          multiple
+          style="width: 100%"
+          placeholder="请选择线路"
+          @change="handleSelect"
+        >
+          <div style="padding: 0 20px; line-height: 34px">
+            <el-checkbox
+              v-model="checkAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAllChange"
+              >全选</el-checkbox
+            >
+          </div>
+          <el-checkbox-group v-model="form.workShop">
+            <el-option
+              v-for="item in this.workShopOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <el-checkbox style="pointer-events: none" :label="item.value">
+                {{ item.label }}
+              </el-checkbox>
+            </el-option>
+          </el-checkbox-group>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="生产线">
+        <el-select v-model="form.producLine" placeholder="请选择生产线">
+          <el-option
+            v-for="item in this.producLineOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        checkAll: false,
+        isIndeterminate: false,
+        workShop: [],
+        producLine: "",
+      },
+      workShopOptions: [
+        { label: "士力架包装车间1号", value: "1" },
+        { label: "士力架包装车间2号", value: "2" },
+        { label: "士力架包装车间3号", value: "3" },
+        { label: "士力架包装车间4号", value: "4" },
+      ],
+      producLineOptions: [
+        { label: "打包线1", value: "1" },
+        { label: "打包线2", value: "2" },
+        { label: "打包线3", value: "3" },
+        { label: "打包线4", value: "4" },
+      ],
+    };
+  },
+  methods: {
+    // 下拉框选择事件
+    handleSelect(value) {
+      console.log(value, "value");
+      const checkedCount = value.length;
+      this.checkAll = checkedCount === this.workShopOptions.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.workShopOptions.length;
+      const data = value.map((item) => {
+        return item;
+      });
+      this.form.workShop = value.length > 0 ? data : [];
+      console.log(this.form.workShop, " form.workShop");
+    },
+    // 全选事件
+    handleCheckAllChange(val) {
+      const data = this.workShopOptions.map((item) => {
+        return item.value;
+      });
+      this.form.workShop = val ? data : [];
+      this.isIndeterminate = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+.leftcon {
+  width: 100%;
+  height: 100%;
+  //   background-color: rgba(229, 229, 229, 1);
+  background: url("../../../../assets/images/sopbgimg.png") no-repeat;
+  background-size: 100% 100%;
+  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+  padding: 3% 4%;
+}
+</style>