添加新建作业票添加内部人员和外部人员弹框

src/views/mes/job/jobm/NewOperations.vue

@@ -189,8 +189,12 @@
                     </el-select>
                   </el-form-item>
                   <el-form-item label="共锁人" prop="coLocker">
-                    <el-button type="primary">添加内部人员</el-button>
-                    <el-button type="primary">添加外部人员</el-button>
+                    <el-button type="primary" @click="addInside"
+                      >添加内部人员</el-button
+                    >
+                    <el-button type="primary" @click="addOutside"
+                      >添加外部人员</el-button
+                    >
                   </el-form-item>
                   <el-form-item label="开始时间" prop="startTime">
                     <el-date-picker
@@ -199,6 +203,7 @@
                       placeholder="选择日期时间"
                       align="right"
                       :picker-options="pickerOptions"
+                      style="width: 100%"
                     >
                     </el-date-picker>
                   </el-form-item>
@@ -209,6 +214,7 @@
                       placeholder="选择日期时间"
                       align="right"
                       :picker-options="pickerOptions"
+                      style="width: 100%"
                     >
                     </el-date-picker>
                   </el-form-item>
@@ -228,6 +234,67 @@
       </div>
     </div>
     <!--    newOperations盒子结束-->
+
+    <!-- 添加或修改设备维修单对话框 -->
+    <el-dialog
+      :visible.sync="open"
+      width="450px"
+      append-to-body
+      style="margin-top: 13%"
+    >
+      <div slot="title" class="dialog-title">
+        <i></i>
+        <span class="title">{{ title }}</span>
+      </div>
+      <el-form
+        ref="dialogForm"
+        :model="dialogForm"
+        :rules="rules"
+        label-width="70px"
+      >
+        <el-form-item label="部门" prop="dept" v-if="insideMumber">
+          <el-select
+            v-model="dialogForm.dept"
+            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="mumber" v-if="insideMumber">
+          <el-select
+            v-model="dialogForm.mumber"
+            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="人员ID" prop="mumberId" v-if="outsideMumber">
+          <el-input
+            v-model="dialogForm.mumberId"
+            placeholder="请输入人员ID"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogConfirm">确认</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -258,6 +325,11 @@ export default {
         startTime: "", //开始时间
         endTime: "", //结束时间
       },
+      dialogForm: {
+        dept: "",
+        mumber: "",
+        mumberId: "",
+      },
       hardwareTypeOption: null,
       // 已选隔离点
       tableData: [],
@@ -287,6 +359,13 @@ export default {
           },
         ],
       },
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: "",
+      // 弹框中显示的form表单内容
+      insideMumber: false,
+      outsideMumber: false,
     };
   },
 
@@ -333,13 +412,32 @@ export default {
       // 更新 form.spoint 为最新选中的隔离点数组
       this.form.spoint = points.map((point) => point.value);
     },
+
+    // 添加内部人员
+    addInside() {
+      this.open = true;
+      this.title = "添加内部人员";
+      this.insideMumber = true;
+      this.outsideMumber = false;
+    },
+    addOutside() {
+      this.open = true;
+      this.title = "添加外部人员";
+      this.insideMumber = false;
+      this.outsideMumber = true;
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
   },
 };
 </script>
 
 
 
-<style scoped lang="scss">
+<style scoped lang="scss" >
 .newOperations {
   width: 99%;
   height: 100%;
@@ -421,3 +519,6 @@ export default {
 }
 //隔离点多选框样式结束
 </style>
+
+<style scoped lang="scss" src="@/assets/styles/dialog-title.scss">
+</style>