新增mars的sop界面

src/router/index.js

@@ -115,14 +115,14 @@ export const dynamicRoutes = [
     children: [
       {
         path: 'NewSop',
-        component: () => import('@/views/mes/sop/sopm/NewSop'),
+        component: () => import('@/views/mes/sop/sopm/NewSop.vue'),
         name: 'NewSop',
         meta: { title: 'SOP管理-新建SOP', activeMenu: '/mes/sop/sopm/NewSop' }
 
       },
       {
         path: 'NewSopEdit',
-        component: () => import('@/views/mes/sop/sopm/NewSop'),
+        component: () => import('@/views/mes/sop/sopm/NewSop.vue'),
         name: 'NewSopEdit',
         meta: { title: 'SOP管理-编辑SOP', activeMenu: '/mes/sop/sopm/NewSop' }
 

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

@@ -0,0 +1,1261 @@
+<template>
+  <div class="newOperations">
+    <!--    newOperations盒子开始-->
+    <div class="left">
+      <!-- 车间 -->
+      <keep-alive>
+        <SopLeft
+          v-show="this.activeName == 'first' || this.activeName == 'third'"
+          @product-line-selected="handleProductLineSelected"
+          @work-shop-selected="handleWorkshopSelected"
+          :sopProps="sopProps"
+        ></SopLeft>
+      </keep-alive>
+      <!-- 隔离点 style="position: relative;z-index:0"-->
+
+      <IsolationLeftVue
+        v-show="this.activeName == 'second'"
+        :points="points"
+        @selection-changed="handleSelectPoint"
+      ></IsolationLeftVue>
+    </div>
+    <div class="right">
+      <div class="right_top">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span style="font-size: 18px">{{ this.getSopTitle }}</span>
+            <span
+              style="
+                float: right;
+                padding: 1px 15px;
+                font-size: 22px;
+                cursor: pointer;
+
+              "
+              type="text"
+              @click="goBack"
+            >×</span
+            >
+            <el-tooltip content="开启人员配置" placement="top" style="float: right;margin-top: 3px">
+              <el-switch v-model="openStaffing"
+                         active-color="#13ce66"
+                         active-text=""
+                         @change="handleOpenStaffing(openStaffing)"
+              >
+              </el-switch>
+            </el-tooltip>
+          </div>
+          <div class="text item">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="SOP信息" name="first">
+                <!-- 新增作业票信息-->
+                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+                  <el-form-item label="SOP名称" prop="sopName">
+                    <el-input
+                      :disabled="this.getSopLook"
+                      v-model="form.sopName"
+                      placeholder="请输入SOP名称"
+                      style="width: 100%"
+                    />
+                  </el-form-item>
+                  <el-row>
+                    <el-col :span="16">
+                      <el-form-item label="SOP编号" prop="sopCode">
+                        <el-input
+                          :disabled="this.getSopLook"
+                          v-model="form.sopCode"
+                          placeholder="请输入SOP编号"
+                          style="width: 100%"
+                        />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label-width="80">
+                        <el-switch
+                          :disabled="this.getSopLook"
+                          v-model="autoGenFlag"
+                          active-color="#13ce66"
+                          active-text="自动生成"
+                          @change="handleAutoGenChange(autoGenFlag)"
+                        >
+                        </el-switch>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+
+                  <el-form-item label="SOP类型" prop="sopType">
+                    <el-select
+                      :disabled="this.getSopLook"
+                      v-model="form.sopType"
+                      placeholder="请选择SOP类型"
+                      clearable
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.sop_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="SOP内容" prop="sopContent">
+                    <el-input
+                      :disabled="this.getSopLook"
+                      type="textarea"
+                      v-model="form.sopContent"
+                      :rows="5"
+                    ></el-input>
+                  </el-form-item>
+
+                  <el-form-item label="" prop="" style="margin-top: 95%">
+                    <el-button v-no-more-click
+                      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"-->
+                  <!--                      style="width: 100%"-->
+                  <!--                      disabled-->
+                  <!--                    />-->
+                  <!--                  </el-form-item>-->
+                  <el-form-item label="作业区域" prop="workline">
+                    <el-input
+                      v-model="form.workline"
+                      style="width: 100%"
+                      disabled
+                    />
+                  </el-form-item>
+
+                  <div class="text item">
+                    <p
+                      style="color: #606266; font-weight: 600; font-size: 14px"
+                    >
+                      已选隔离点
+                    </p>
+
+                    <el-table
+                      :data="tableData"
+                      stripe
+                      height="480"
+                      style="width: 100%"
+                      id="table-key"
+                      row-key="id"
+                    >
+
+                      <el-table-column prop="pointName" label="隔离点" width="80">
+                        <template slot-scope="scope">
+                          <span style="color: #2a87ff">{{
+                              scope.row.pointName
+                            }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="pointType" label="隔离点类型">
+                        <template slot-scope="scope">
+                          {{ scope.row.pointType }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        prop="powerType"
+                        label="危险能量类型"
+                        width="100"
+                      >
+                        <template slot-scope="scope">
+                          {{ scope.row.powerType }}
+
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        prop="prePointId"
+                        label="前置隔离点"
+
+                      >
+                        <template slot-scope="scope">
+                          <el-select size="mini" v-model="scope.row.prePointId" @change="prePointIdChange(scope.row)"
+                                     @visible-change="onDropdownVisibleChange(scope.row)"  clearable
+                          >
+                            <el-option v-for="item in prePointIdOptions"
+                                       :key="item.pointId"
+                                       :label="item.pointName"
+                                       :value="item.pointId"
+                            >
+                            </el-option>
+                          </el-select>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                  <el-form-item label="" prop="">
+                    <!--                    这个确认是没有人员配置的时候-->
+                    <el-button v-no-more-click
+                      v-if="!openStaffing"
+                      :disabled="this.getSopLook"
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="submit"
+                    >确 定
+                    </el-button
+                    >
+                    <el-button v-no-more-click
+                      v-if="openStaffing"
+                      :style="{float: 'right',
+                        height: '30px',
+                        lineHeight: '10px',
+                        marginRight: openStaffing?'0%':'0%'}
+                      "
+                      type="primary"
+                      @click="preStep('third')"
+                    >下一步
+                    </el-button
+                    >
+                    <el-button v-no-more-click
+                      :style="{float: 'right',
+                        height: '30px',
+                        lineHeight: '10px',
+                        marginRight: openStaffing?'19%':'19%'}
+                      "
+                      type="primary"
+                      @click="preStep('first')"
+                    >上一步
+                    </el-button
+                    >
+
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+              <el-tab-pane label="人员选择" name="third" v-if="openStaffing  ">
+                <!--人员选择-->
+                <el-form ref="form" :model="form" label-width="70px">
+                  <el-form-item label="上锁人" prop="locker">
+                    <el-select
+                      :disabled="this.getSopLook"
+                      v-model="form.locker"
+                      placeholder="上锁人"
+                      clearable
+                      style="width: 100%"
+                      @change="handlelockerChage"
+                    >
+                      <el-option
+                        v-for="dict in this.listLockerOption"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="共锁人" prop="coLocker">
+                    <el-button v-no-more-click
+                      type="primary"
+                      @click="addInside"
+                      class="gsr"
+                      size="mini"
+                    >添加内部人员
+                    </el-button>
+                    <el-button v-no-more-click type="primary" @click="addOutside" size="mini"
+                    >添加外部人员
+                    </el-button>
+                  </el-form-item>
+                  <div class="text item">
+                    <el-table
+                      :data="sortedTicketUserDTOList"
+                      stripe
+                      height="400"
+                      style="width: 100%"
+                    >
+                      <el-table-column prop="userId" label="序号" width="50">
+                      </el-table-column>
+                      <el-table-column
+                        prop="userName"
+                        label="共锁人"
+                        width="120"
+                      >
+                        <template slot-scope="scope">
+                          <span style="color: #2a87ff">{{
+                              scope.row.userName
+                            }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="userType" label="共锁人来源">
+                        <template slot-scope="scope">
+                          <span>{{
+                              scope.row.userType == '0' ? '内部' : '外部'
+                            }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="" width="80">
+                        <template slot-scope="scope">
+                          <el-button v-no-more-click
+                            @click.native.prevent="
+                              deleteRow(scope.$index, sortedTicketUserDTOList)
+                            "
+                            type="text"
+                            size="small"
+                          >
+                            移除
+                          </el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+
+                  <el-form-item label="" prop="">
+                    <!--                    这里是有人员配置的-->
+                    <el-button v-no-more-click
+                      v-if="openStaffing"
+                      :disabled="this.getSopLook"
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="submit"
+                    >确 定
+                    </el-button
+                    >
+                    <el-button v-no-more-click
+                      style="
+                        float: right;
+                        height: 30px;
+                        line-height: 10px;
+                        margin-right: 19%;
+                      "
+                      type="primary"
+                      @click="preStep('second')"
+                    >上一步
+                    </el-button
+                    >
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <!--    newSop盒子结束-->
+    <!-- 添加或修改外部人员对话框 -->
+    <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"
+
+        label-width="70px"
+      >
+        <el-form-item label="选择人员" prop="nickName" v-if="insideMumber">
+          <el-select
+            v-model="dialogForm.nickName"
+            placeholder="请选择人员"
+            clearable
+            style="width: 100%"
+            multiple
+            @change="changeInsideUser"
+          >
+            <el-option
+              v-for="dict in this.listCoLockerOption"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="人员ID" prop="username" v-if="outsideMumber">
+          <el-row>
+            <el-col :span="16">
+              <el-input
+                v-model="dialogForm.username"
+                placeholder="请输入人员ID"
+                clearable
+                style="width: 80%"
+                @change="outSideUserInput"
+              />
+            </el-col>
+            <el-col :span="4">
+              <el-button v-no-more-click type="primary" @click="insertOutSideTable">添加</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-row>
+          <el-table :data="OutSideUserTableData"
+                    stripe
+                    height="200"
+                    v-if="outsideMumber"
+          >
+            <el-table-column prop="userId" label="序号">
+            </el-table-column>
+            <el-table-column
+              prop="userName"
+              label="人员ID"
+
+            >
+              <template slot-scope="scope">
+                          <span style="color: #2a87ff">{{
+                              scope.row.userName
+                            }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80">
+              <template slot-scope="scope">
+                <el-button v-no-more-click
+                  @click.native.prevent="
+                              deleteRow(scope.$index, OutSideUserTableData)
+                            "
+                  type="text"
+                  size="small"
+                >
+                  移除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <!--  内部人员确认-->
+        <el-button v-no-more-click type="primary" @click="cancel" v-if="insideMumber">确认</el-button>
+        <!--        外部人员确认-->
+        <el-button v-no-more-click type="primary" @click="outSideDialogConfirm" v-if="outsideMumber">确认</el-button>
+        <el-button v-no-more-click @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+
+<script>
+import IsolationLeftVue from '@/components/separationPoint/index.vue'
+import SopLeft from '@/components/separationPoint/workshop.vue'
+import { genCode } from '@/api/system/autocode/rule'
+import {
+  addinsertIsSop,
+  updateIsSop,
+  selectIsSopById, SopUser
+} from '@/api/mes/sop/sopindex'
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'addView',
+  dicts: ['power_type', 'point_type', 'sop_type', 'job_user_role'],
+  components: {
+    SopLeft,
+    IsolationLeftVue
+  },
+  data() {
+    return {
+      //自动生成编码
+      autoGenFlag: false,
+      activeName: 'first',
+      form: {
+        sopName: '',
+        sopCode: '',
+        SOPType: '',
+        workshopName: '', //车间名称
+        workline: '', //区域
+        workareaName: '',
+        spoint: [], //已选隔离点
+        prePointId: [],//已选隔离点的前置节点Id
+        locker: '', //上锁人
+        coLocker: '', //共锁人
+        pointDetailVOList: [],//隔离点数据
+
+        ticketUserDTOList: [
+          // {
+          //   userId: '',
+          //   userName: '',
+          //   userRole: '',//作业票角色 角色code jtlocker(上锁人) jtcolocker(共锁人)
+          //   userType: ''//用户类型 0是内部 1是外部
+          // }
+        ] //所选择的用户
+      },
+
+      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)
+            }
+          }
+        ]
+      },
+      // 右侧底部已选隔离点
+      tableData: null,
+      orderTableData:[],//排序
+      points: null, //车间逆向传递拿到的隔离点数据
+      emitWorkShop: null, //车间逆向传递拿到车间相关数据
+      emitworklineId: null,//生产线逆向传递拿到数据
+      sopProps: [], //正传递
+      worklineMap: '',
+      prePointIdOptions: [],//前置节点的下拉选项
+      initprePointIdOptions: [],//前置节点初始化数据选项
+      prePointId: null,//回显选中的前置节点id
+      relations: [],//维护父子关系的前置节点
+      openStaffing: null,
+      newticketUserDTOList: [], //为了上锁人单独传递数据
+      // 弹框中显示的form表单内容
+      insideMumber: false,
+      outsideMumber: false,
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: '',
+      dialogForm: {
+        nickName: '',
+        username: ''
+      },
+      rules: {
+        sopName: [
+          { required: true, message: "sop名称不能为空", trigger: "blur" },
+        ],
+        sopCode: [
+          { required: true, message: "sop编码不能为空", trigger: "blur" },
+        ],
+
+      },
+      listLockerOption: null,//上锁人下拉数据
+      listCoLockerOption: null,//共锁人下拉数据
+      OutSideUserTableData: [],//添加外部人员多个表格
+      nextUserId: 0//新增外部人员表格序号自定义
+    }
+  },
+  mounted() {
+    this.handleOpenStaffing()
+    if (this.$route.query.sopId !== 'null') {
+      // console.log(this.$route.query.sopId, "接受路由参数");
+      this.getSopInfo()
+
+      if (this.getSopLook) {
+        this.setSopTitle('查看SOP')
+      } else {
+        this.setSopTitle('编辑SOP')
+      }
+    } else {
+      this.handleAutoGenChange(true)
+      this.autoGenFlag=true
+      this.setSelectSopPoints([])
+      this.setPointTableData([])
+      this.setSopTitle('新建SOP')
+    }
+  },
+
+  computed: {
+    ...mapGetters('sopSelectPoints', ['getSopTitle', 'getSopLook', 'getMapData']),
+    // 排序 ticketUserDTOList，将 userRole 为 0 的选项放在前面
+    sortedTicketUserDTOList() {
+      return this.form.ticketUserDTOList.sort(
+        (a, b) => Number(a.userRole) - Number(b.userRole)
+      )
+    }
+  },
+
+  methods: {
+    ...mapActions('sopSelectPoints', [
+      'setSelectSopPoints',
+      'setPointTableData',
+      'setSopEdit',
+      'setSopTitle'
+    ]),
+    handleClick(tab, event) {
+
+    },
+    preStep(val) {
+      this.activeName = val
+      console.log(this.form, 'sopform')
+    },
+
+    nextStep(val) {
+      if(val=='second'&&this.form.sopName==''){
+        this.$message.error('SOP名称不能为空')
+        return;
+      }else if(val=='second'&&this.form.sopCode==''){
+        this.$message.error('SOP编码不能为空')
+        return;
+      }
+      this.activeName = val
+      // console.log("我点击了下一步");
+
+    },
+
+    // 详情数据
+    getSopInfo() {
+      const sopId = this.$route.query.sopId
+      console.log(this.$route.query.sopId, '接受路由参数')
+
+      if (sopId !== null) {
+        selectIsSopById(sopId).then((response) => {
+          console.log(response, '详细内容 ')
+          this.orderTableData=response.data.pointDetailVOList.map((point)=>{
+            return{
+              pointName: point.pointName, // 显示的名称
+              pointId: point.pointId, // 对应的值
+              pointType: point.pointType,
+              powerType: point.powerType,
+              prePointId: point.prePointId
+            }
+          })
+
+          this.sopProps = [response.data]
+          this.title = '修改隔离点信息'
+          if (response.data.ticketUserDTOList) {
+            this.openStaffing = true;
+          }
+          this.form = {
+            ...response.data,
+            workareaId: response.data.workareaId,
+            sopId: response.data.sopId,
+            spoint: response.data.pointDetailVOList,
+            ticketUserDTOList: response.data.ticketUserDTOList
+              ? response.data.ticketUserDTOList
+                .filter((item) => item.userRole !== "jtlocker")
+                .map((item) => ({
+                  userName: item.userName,
+                  userType: item.userType,
+                  userRole: item.userRole,
+                  userId: item.userId,
+                }))
+              : [],
+            locker: response.data.ticketUserDTOList
+              ? response.data.ticketUserDTOList
+                .filter((item) => item.userRole === "jtlocker")
+                .map((item) => item.userName)[0]
+              : null,
+            coLocker: response.data.ticketUserDTOList
+              ? response.data.ticketUserDTOList.map((item) => {
+                return item.userRole !== "jtlocker" ? item.userName : null;
+              })
+              : [],
+          };
+
+          this.newticketUserDTOList = response.data.ticketUserDTOList
+            ? response.data.ticketUserDTOList
+              .filter((item) => item.userRole === "jtlocker")
+              .map((item) => ({
+                userName: item.userName,
+                userType: item.userType,
+                userRole: item.userRole,
+                userId: item.userId,
+              }))
+            : [];
+
+          console.log(this.form,this.newticketUserDTOList,'编辑sop回显的数据',)
+
+        })
+      } else {
+        this.title = '新增隔离点信息'
+        this.setSopEdit(true)
+        this.setSelectSopPoints([])
+        this.setPointTableData([])
+        this.tableData = null
+        this.form = {
+          spoint: [],
+          sopContent: '',
+          sopCode: '',
+          sopName: '',
+          sopType: '',
+          workareaId: '',
+          workshopId: ''
+        }
+        this.autoGenFlag = false
+      }
+    },
+    submit() {
+      console.log('我点击了确认')
+      // 确保 this.form.spoint 是一个数组，如果为空则默认空数组
+      if (!Array.isArray(this.form.spoint)) {
+        this.form.spoint = []
+      }
+      console.log(this.form.spoint, 'spoint')
+
+      // 如果没有选中点，逆向传递为空时，使用当前表格数据中的点
+      if (this.form.spoint.length === 0 && Array.isArray(this.tableData)) {
+        this.form.spoint = this.tableData.map((point) => point.pointId)
+      }
+
+      // 编辑模式
+      if (this.$route.query.sopId !== 'null') {
+        console.log(this.$route.query.sopId, 'sopIdaaa')
+        // 确保 sopId 存在
+        if (!this.form.sopId) {
+          console.error('隔离点id不可为空!')
+          this.$message.error('隔离点id不可为空!') // 使用消息提示
+          return
+        }
+        const selectedpointIds = this.form.spoint.join(',')
+        const UserList=[...(this.form.ticketUserDTOList|| []),...(this.newticketUserDTOList|| [])]
+        // const pointsList=this.form.pointDetailVOList.map((item)=>{
+        //   return {
+        //     pointId:item.pointId,
+        //     prePointId:item.prePointId
+        //   }
+        // })
+        const pointsList=this.tableData.map((item)=>{
+          return {
+            pointId:item.pointId,
+            prePointId:item.prePointId
+          }
+        })
+        const data = {
+          sopId:this.form.sopId,
+          pointIds: selectedpointIds,
+          sopContent: this.form.sopContent,
+          sopCode: this.form.sopCode,
+          sopName: this.form.sopName,
+          sopType: this.form.sopType,
+          workareaId: this.emitworklineId,
+          ticketUserDTOList: UserList,
+          pointsList: pointsList
+          // workshopId: this.emitWorkShop.value
+        }
+
+
+        console.log(data,'编辑的参数')
+        updateIsSop(data).then((res) => {
+          console.log(res, '修改接口')
+          if (res.code == 200) {
+            this.$router.push('/sop/sopm')
+            this.$message.success('SOP修改成功')
+          }
+        })
+      } else {
+        // 新增模式
+        const selectedpointIds = this.form.spoint.join(',')
+        const UserList=[...this.form.ticketUserDTOList,...this.newticketUserDTOList]
+        const pointsList=this.tableData.map((item)=>{
+          return {
+            pointId:item.pointId,
+            prePointId:item.prePointId
+          }
+        })
+        const data = {
+          pointIds: selectedpointIds,
+          sopContent: this.form.sopContent,
+          sopCode: this.form.sopCode,
+          sopName: this.form.sopName,
+          sopType: this.form.sopType,
+          workareaId: this.emitworklineId,
+          ticketUserDTOList: UserList,
+          pointsList: pointsList
+        }
+        console.log(data, '新增参数')
+        addinsertIsSop(data).then((res) => {
+          console.log(res, '新增接口')
+          if (res.code == 200) {
+            this.$router.push('/sop/sopm')
+            this.$message.success('SOP新建成功')
+          }
+        })
+      }
+    },
+
+    // 选中隔离点 前置节点的change函数
+    onDropdownVisibleChange(row) {
+      console.log(row, '我执行这里拉')
+
+      // 当前节点 ID
+      const currentPointId = row.pointId
+
+      // 获取当前行的 prePointId
+      const currentPrePointId = row.prePointId
+
+      // 已经被选为前置节点的 ID 集合
+      const selectedPrePointIds = new Set(
+        this.tableData
+          .filter((item) => item.prePointId !== null)
+          .map((item) => item.prePointId)
+      )
+
+      // console.log(selectedPrePointIds, 'selectedPrePointIds')
+      // 构建 form.prePointId 数组对象
+      this.form.prePointId = this.tableData.map((item) => ({
+        pointId: item.pointId,
+        prePointId: item.prePointId || null
+      }))
+      // 每次都从原始数据开始过滤
+      let filteredOptions = [...this.initprePointIdOptions]
+
+      // 过滤规则：
+      // 1. 排除自身
+      // 2. 排除已经被选为前置节点的隔离点
+      // 3. 排除所有已经选为前置节点的节点及其前置节点
+      const allExcludedPoints = new Set([currentPointId])
+      this.getAllExcludedPoints(currentPointId, allExcludedPoints)
+
+      filteredOptions = filteredOptions.filter((option) => {
+        return !allExcludedPoints.has(option.pointId)
+      })
+
+      this.prePointIdOptions = filteredOptions
+
+      console.log('过滤后的前置节点选项', this.prePointIdOptions)
+    },
+
+    // 递归获取所有需要排除的节点
+    getAllExcludedPoints(pointId, excludedPoints) {
+      const relatedRows = this.tableData.filter(item => item.prePointId === pointId)
+      for (const row of relatedRows) {
+        excludedPoints.add(row.pointId)
+        this.getAllExcludedPoints(row.pointId, excludedPoints)
+      }
+    },
+
+    // 前置节点改变时的处理函数
+    prePointIdChange(row) {
+      console.log(row, '前置节点改变')
+
+      // 更新 tableData 中对应行的 prePointId
+      const index = this.tableData.findIndex(item => item.pointId === row.pointId)
+      if (index !== -1) {
+        this.$set(this.tableData, index, row)
+      }
+
+      // 重新调用 onDropdownVisibleChange 确保其他节点的选项更新
+      this.onDropdownVisibleChange(row)
+    },
+// 定义一个排序函数，根据 orderTableData 中 pointName 的顺序对 tableData 进行排序
+    sortTableDataByOrder(tableData, orderTableData) {
+      // 构建 orderMap，使用 pointName 作为键，索引作为值
+      const orderMap = new Map(orderTableData.map((item, index) => [item.pointName, index]))
+
+      return tableData.sort((a, b) => {
+        // 如果 pointName 在 orderMap 中，按 orderMap 的索引排序
+        // 如果 pointName 不在 orderMap 中，排在最后，并按 pointName 的自然顺序排列
+        const indexA = orderMap.has(a.pointName) ? orderMap.get(a.pointName) : Infinity
+        const indexB = orderMap.has(b.pointName) ? orderMap.get(b.pointName) : Infinity
+
+        if (indexA === indexB) {
+          // 当两者都不在 orderMap 中时，按 pointName 的自然顺序排列
+          return a.pointName.localeCompare(b.pointName)
+        }
+
+        return indexA - indexB
+      })
+    },
+    // 子组件选中的隔离点逆传递拿到的数据
+    handleSelectPoint(points) {
+      // console.log(points, "父组件接收逆向传递选中的隔离点");
+
+      // 1. 去除重复的点，使用 Set 确保每个 pointId 唯一
+      const uniquePoints = Array.from(
+        new Set(points.map((point) => point.pointId))
+      ).map((id) => points.find((point) => point.pointId === id));
+
+      // console.log(uniquePoints, "去重后的选中节点");
+      if(this.$route.query.sopId=='null'){
+        this.tableData = uniquePoints; // 子组件传递过来的选中节点（去重后）
+      }else{
+        this.tableData = this.sortTableDataByOrder(uniquePoints, this.orderTableData);//去重并排序
+
+      }
+      console.log(this.tableData,this.orderTableData,'排序之后')
+      // this.tableData = uniquePoints; // 子组件传递过来的选中节点（去重后）
+
+      // 使用 Set 来存储传递过来的点值
+      const newValues = new Set(uniquePoints.map((point) => point.pointId));
+
+      // 2. 删除取消选中的点
+      const removedPoints = this.tableData
+        .filter((item) => !newValues.has(item.pointId))
+        .map((item) => item.pointId); // 记录被删除的点
+
+      this.tableData = this.tableData.filter((item) =>
+        newValues.has(item.pointId)
+      );
+
+      // 3. 确保新增点不会重复
+      const existingValues = new Set(
+        this.tableData.map((item) => item.pointId)
+      );
+
+      uniquePoints.forEach((point) => {
+        // 如果当前传递的点不在已有的点集中，则添加
+        if (!existingValues.has(point.pointId)) {
+          this.tableData.push({
+            pointName: point.pointName, // 显示的名称
+            pointId: point.pointId, // 对应的值
+            pointType: point.pointType,
+            powerType: point.powerType,
+            prePointId: null,
+          });
+
+          this.prePointIdOptions.push({
+            pointName: point.pointName, // 显示的名称
+            pointId: point.pointId, // 对应的值
+          });
+          this.initprePointIdOptions = [...this.prePointIdOptions];
+          console.log(this.prePointIdOptions, "前置节点设置下拉");
+          existingValues.add(point.pointId);
+        }
+      });
+
+      // 4. 处理被删除的点，如果这些点作为父节点绑定，则将对应的 prePointId 设置为 null
+      this.tableData.forEach((item) => {
+        if (removedPoints.includes(item.prePointId)) {
+          item.prePointId = null;
+        }
+      });
+
+      // 5. 从下拉选项中移除被删除的点
+      this.prePointIdOptions = this.prePointIdOptions.filter(
+        (option) => !removedPoints.includes(option.pointId)
+      );
+      this.initprePointIdOptions = [...this.prePointIdOptions];
+
+      // 6. 确保下拉选项中仍然保留所有未被删除的点
+      const allPoints = uniquePoints.map((point) => ({
+        pointName: point.pointName,
+        pointId: point.pointId,
+      }));
+
+      this.prePointIdOptions = allPoints.filter(
+        (option) => !removedPoints.includes(option.pointId)
+      );
+      this.initprePointIdOptions = [...this.prePointIdOptions];
+
+      // 更新 form.spoint 为最新选中的隔离点数组
+      this.form.spoint = uniquePoints.map((point) => point.pointId);
+    },
+
+    // 车间逆向传递拿到的隔离点数据产线
+    handleProductLineSelected(selectedOption) {
+      // console.log(selectedOption, "父组件接收到的 selectedOption");
+      this.points = selectedOption
+      this.form.workline = selectedOption.label
+      // console.log(this.worklineMap.length, '父组件接收到的 worklineMap')
+    },
+    // 车间子组件逆传递车间相关数据车间
+    handleWorkshopSelected(selectedOption) {
+      console.log(selectedOption, 'handleWorkshopSelected')
+      // this.emitWorkShop = selectedOption
+      // this.form.workshopName = selectedOption.label;//这里是回显车间的 暂时不需要
+      this.form.workline = selectedOption.label//这里是回显作业区域的
+      this.emitworklineId = selectedOption.id
+      this.worklineMap = selectedOption.map
+    },
+
+// 添加内部人员
+    addInside() {
+      this.open = true
+      this.title = '添加内部人员'
+      this.insideMumber = true
+      this.outsideMumber = false
+      // this.form.ticketUserDTOList = [];
+
+      this.dialogForm.nickName = ''
+    },
+    // 添加外部人员
+    addOutside() {
+      this.open = true
+      this.title = '添加外部人员'
+      this.OutSideUserTableData=[]
+      this.insideMumber = false
+      this.outsideMumber = true
+      this.dialogForm.username = null
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+    },
+    // 人员列表删除
+    deleteRow(index, rows) {
+      console.log(index, rows, '删除的行')
+      const deletedItem = rows[index] // 获取要删除的项
+      rows.splice(index, 1) // 从显示的列表中删除
+      // const formIndex = this.form.ticketUserDTOList.findIndex(
+      //   (item) => item.userId === deletedItem.userId
+      // )
+      const formIndex = this.form.ticketUserDTOList.findIndex(
+        (item) => item.userName == deletedItem.userName
+      )
+      if (formIndex !== -1) {
+        this.form.ticketUserDTOList.splice(formIndex, 1) // 从 form.ticketUserDTOList 中删除
+      }
+    },
+    // 上锁人下拉选择change事件
+    handlelockerChage(val) {
+      console.log(val, '上锁人chage')
+      const user = this.listLockerOption.find((item) => item.value === val)
+
+      if (user && this.form.locker !== '') {
+        const existingUser = this.form.ticketUserDTOList.find(
+          (u) => u.userName === user.label
+        )
+        if (!existingUser) {
+          this.newticketUserDTOList.push({
+            userName: user.label,
+            userId: user.value,
+            userType: 0,
+            userRole: 'jtlocker'
+          })
+
+          console.log(this.newticketUserDTOList, '上锁人用户')
+        } else {
+          // console.log('用户已存在', user.label)
+        }
+      }
+    },
+
+    // 添加内部人员的用户新增到ticketUserDTOList这个数据里
+    changeInsideUser(values) {
+      const usersinside = values
+        .map((value) =>
+          this.listCoLockerOption.find((item) => item.value === value)
+        )
+        .filter(Boolean)
+
+      usersinside.forEach((user) => {
+        const existingUser = this.form.ticketUserDTOList.find(
+          (u) => u.userName === user.label
+        )
+        // console.log(usersinside, 'usersinside----67')
+        if (!existingUser) {
+          this.form.ticketUserDTOList.push({
+            userName: user.label,
+            userId: user.value,
+            userType: 0,
+            userRole: 'jtcolocker'
+
+          })
+          console.log(this.form.ticketUserDTOList, '共锁人用户')
+        } else {
+          // console.log('用户已存在', user.label)
+        }
+      })
+      this.updateCoLocker()
+
+      // console.log(this.form.ticketUserDTOList, '用户')
+    },
+    // 添加外部人员 输入名称 userType==1是共锁人 0是上锁人 userId==0
+    outSideUserInput(event) {
+      this.dialogForm.username = event
+    },
+    // 添加外部人员弹窗 添加给表格数据的按钮事件
+    insertOutSideTable() {
+      const newUserName = this.dialogForm.username.trim();
+      if (newUserName === '') {
+        this.$message.warning('请输入用户名');
+        return;
+      }
+      // 检查新用户是否已存在于表格中
+      const existingUser = this.OutSideUserTableData.find(user => user.userName === newUserName);
+      if (existingUser) {
+        this.$message.warning('该用户已存在');
+        return;
+      }
+      // 添加新用户
+      this.OutSideUserTableData.push({
+        userName: newUserName,
+        userId: this.nextUserId++
+      });
+
+      // 清空对话框表单
+      this.dialogForm.username = '';
+
+      // 打印当前的外部人员表格数据
+      console.log(this.OutSideUserTableData, 'OutSideUserTableData');
+    },
+    // 添加外部人员 确认弹窗
+    outSideDialogConfirm() {
+      this.updateCoLocker()
+      this.open = false
+    },
+    // 更新界面中共锁人下拉框显示的内容
+    updateCoLocker() {
+      // 检查并补充 ticketUserDTOList 中缺少的用户
+      this.OutSideUserTableData.forEach((item) => {
+        const existingUser = this.form.ticketUserDTOList.find(
+          (u) => u.userName === item.userName
+        )
+
+        if (!existingUser) {
+          this.form.ticketUserDTOList.push({
+            userName: item.userName,
+            userId: 0,
+            userType: 1,
+            userRole: 'jtcolocker'
+
+          })
+        }
+      })
+
+      console.log(this.form.ticketUserDTOList, '最终的 ticketUserDTOList')
+    },
+    //自动生成编码
+    handleAutoGenChange(autoGenFlag) {
+      if (autoGenFlag) {
+        genCode('SOP_CODE').then((response) => {
+          this.form.sopCode = response
+        })
+      } else {
+        this.form.sopCode = null
+      }
+    },
+    //是否开启人员配置界面
+    handleOpenStaffing(openStaffing) {
+      // 定义一个函数来封装接口调用逻辑
+      const fetchUserData = (roleKey) => {
+        const data = {
+          pageNum: 1,
+          pageSize: 10000,
+          roleKey: roleKey
+        }
+        return SopUser(data).then((res) => {
+          // console.log(res, `上锁人 - ${roleKey}`);
+          return res // 返回结果以便后续处理
+        }).catch((err) => {
+          // console.error(err, `请求失败 - ${roleKey}`);
+          throw err // 抛出错误以便捕获
+        })
+      }
+
+      // 调用两次接口，分别传递不同的 roleKey
+      Promise.all([
+        fetchUserData('jtlocker'),
+        fetchUserData('jtcolocker')
+      ]).then((results) => {
+        // 处理两次调用的结果
+        const [jtlockerResult, jtcolockerResult] = results
+        console.log(jtlockerResult, jtcolockerResult, 'jtlocker 结果')
+        this.listLockerOption = jtlockerResult.rows.map((item) => {
+          return {
+            label: item.nickName,
+            value: item.userId
+          }
+        })
+        this.listCoLockerOption = jtcolockerResult.rows.map((item) => {
+          return {
+            label: item.nickName,
+            value: item.userId
+          }
+        })
+
+      }).catch((err) => {
+        console.error(err, '其中一个请求失败')
+      })
+      if (openStaffing) {
+        console.log(openStaffing, '开启人员配置')
+        this.openStaffing = openStaffing
+
+      } else {
+        console.log(openStaffing, '关闭人员配置')
+        this.openStaffing = openStaffing
+        this.activeName = 'first'
+      }
+    },
+    // 侧边X关闭
+    goBack() {
+      this.$router.push('/sop/sopm')
+    }
+    //   methods结束
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.newOperations {
+  width: 99%;
+  height: 100%;
+  // background: pink;
+  margin: 10px;
+  display: flex;
+
+  .left {
+    width: 75%;
+    height: 830px;
+    // background: #eee;
+    margin-right: 10px;
+  }
+
+  .right {
+    //width: 25%;
+    flex: 1;
+    height: 100%;
+    //background: #000;
+    .right_top {
+      height: 540px;
+    }
+  }
+}
+
+//右侧卡片样式开始
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+
+  p {
+    font-size: 18px;
+    font-weight: bolder;
+    font-family: SourceHanSansSC-bold;
+  }
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  width: 320px;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.box-card {
+  // width: 390px;
+  width: 100%;
+  height: 850px;
+  //background: pink;
+}
+
+::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 30px !important;
+}
+
+//右侧卡片样式结束
+</style>
+<style>
+</style>

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

@@ -1,1261 +1,115 @@
 <template>
-  <div class="newOperations">
-    <!--    newOperations盒子开始-->
-    <div class="left">
-      <!-- 车间 -->
-      <keep-alive>
-        <SopLeft
-          v-show="this.activeName == 'first' || this.activeName == 'third'"
-          @product-line-selected="handleProductLineSelected"
-          @work-shop-selected="handleWorkshopSelected"
-          :sopProps="sopProps"
-        ></SopLeft>
-      </keep-alive>
-      <!-- 隔离点 style="position: relative;z-index:0"-->
-
-      <IsolationLeftVue
-        v-show="this.activeName == 'second'"
-        :points="points"
-        @selection-changed="handleSelectPoint"
-      ></IsolationLeftVue>
+  <div>
+    <div style="display:flex;justify-content:center;align-items:center;position:relative;" v-show="sopStep=='first'">
+      <img style="width: 1250px;height:700px" src="@/assets/images/marsBg.png" alt="">
+      <img style="position: absolute;width:35px;height: 35px;left: 620px;top:310px" src="@/assets/images/workPoint.png"
+           alt="" @click="handelChange('second')"
+      >
+    </div>
+    <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;"
+         v-show="sopStep=='second'"
+    >
+      <el-table style="width: 50%;margin: 10px" :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}"
+                :data="technologyList"
+      >
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="设备/工艺名称" align="center" prop="technologyName"></el-table-column>
+        <el-table-column label="所属岗位" align="center" prop="workstationName"></el-table-column>
+        <el-table-column label="设备/工艺类型" align="center" prop="technologyType"></el-table-column>
+      </el-table>
+      <h2>sop类型</h2>
+      <el-radio-group v-model="selectedOption" size="small"
+                      style="display: flex;flex-direction: column;align-items: flex-start;"
+      >
+        <el-radio label="开收班" border style="margin: 10px">开收班</el-radio>
+        <el-radio label="清洁" border style="margin: 10px 10px">清洁</el-radio>
+        <el-radio label="换产" border style="margin: 10px 10px">换产</el-radio>
+        <el-radio label="维修" border style="margin: 10px 10px">维修</el-radio>
+        <el-radio label="PM" border style="margin: 10px 10px">PM</el-radio>
+      </el-radio-group>
+      <el-button @click="handelChange('third')">开始执行</el-button>
     </div>
-    <div class="right">
-      <div class="right_top">
-        <el-card class="box-card">
+    <div style="position:relative;display: flex;" v-show="sopStep=='third'">
+      <div class="left" style="width: 25%;display: flex;flex-direction: column">
+        <div class="left-top">
+          <el-card class="box-card" style="margin: 10px">
+            <div slot="header" class="clearfix">
+              <span>工艺/涉笔 工艺图</span>
+            </div>
+            <img src="@/assets/images/techonlogy.png" alt="">
+          </el-card>
+        </div>
+        <div class="left-bottom" >
+          <el-card class="box-card" style="margin: 10px">
+            <div slot="header" class="clearfix">
+              <span>LOTO站信息</span>
+            </div>
+            <img src="@/assets/images/sopPoint.png" alt="">
+          </el-card>
+        </div>
+      </div>
+      <div class="right" style="flex:1;">
+        <el-card class="box-card" style="margin: 10px;height: 742px;">
           <div slot="header" class="clearfix">
-            <span style="font-size: 18px">{{ this.getSopTitle }}</span>
-            <span
-              style="
-                float: right;
-                padding: 1px 15px;
-                font-size: 22px;
-                cursor: pointer;
-
-              "
-              type="text"
-              @click="goBack"
-            >×</span
-            >
-            <el-tooltip content="开启人员配置" placement="top" style="float: right;margin-top: 3px">
-              <el-switch v-model="openStaffing"
-                         active-color="#13ce66"
-                         active-text=""
-                         @change="handleOpenStaffing(openStaffing)"
-              >
-              </el-switch>
-            </el-tooltip>
+            <span>八大步骤</span>
           </div>
-          <div class="text item">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="SOP信息" name="first">
-                <!-- 新增作业票信息-->
-                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
-                  <el-form-item label="SOP名称" prop="sopName">
-                    <el-input
-                      :disabled="this.getSopLook"
-                      v-model="form.sopName"
-                      placeholder="请输入SOP名称"
-                      style="width: 100%"
-                    />
-                  </el-form-item>
-                  <el-row>
-                    <el-col :span="16">
-                      <el-form-item label="SOP编号" prop="sopCode">
-                        <el-input
-                          :disabled="this.getSopLook"
-                          v-model="form.sopCode"
-                          placeholder="请输入SOP编号"
-                          style="width: 100%"
-                        />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label-width="80">
-                        <el-switch
-                          :disabled="this.getSopLook"
-                          v-model="autoGenFlag"
-                          active-color="#13ce66"
-                          active-text="自动生成"
-                          @change="handleAutoGenChange(autoGenFlag)"
-                        >
-                        </el-switch>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-
-                  <el-form-item label="SOP类型" prop="sopType">
-                    <el-select
-                      :disabled="this.getSopLook"
-                      v-model="form.sopType"
-                      placeholder="请选择SOP类型"
-                      clearable
-                      style="width: 100%"
-                    >
-                      <el-option
-                        v-for="dict in dict.type.sop_type"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                      />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="SOP内容" prop="sopContent">
-                    <el-input
-                      :disabled="this.getSopLook"
-                      type="textarea"
-                      v-model="form.sopContent"
-                      :rows="5"
-                    ></el-input>
-                  </el-form-item>
-
-                  <el-form-item label="" prop="" style="margin-top: 95%">
-                    <el-button v-no-more-click
-                      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"-->
-                  <!--                      style="width: 100%"-->
-                  <!--                      disabled-->
-                  <!--                    />-->
-                  <!--                  </el-form-item>-->
-                  <el-form-item label="作业区域" prop="workline">
-                    <el-input
-                      v-model="form.workline"
-                      style="width: 100%"
-                      disabled
-                    />
-                  </el-form-item>
-
-                  <div class="text item">
-                    <p
-                      style="color: #606266; font-weight: 600; font-size: 14px"
-                    >
-                      已选隔离点
-                    </p>
+          <div style="width:400px;height:400px;background: pink;">
 
-                    <el-table
-                      :data="tableData"
-                      stripe
-                      height="480"
-                      style="width: 100%"
-                      id="table-key"
-                      row-key="id"
-                    >
-
-                      <el-table-column prop="pointName" label="隔离点" width="80">
-                        <template slot-scope="scope">
-                          <span style="color: #2a87ff">{{
-                              scope.row.pointName
-                            }}</span>
-                        </template>
-                      </el-table-column>
-                      <el-table-column prop="pointType" label="隔离点类型">
-                        <template slot-scope="scope">
-                          {{ scope.row.pointType }}
-                        </template>
-                      </el-table-column>
-                      <el-table-column
-                        prop="powerType"
-                        label="危险能量类型"
-                        width="100"
-                      >
-                        <template slot-scope="scope">
-                          {{ scope.row.powerType }}
-
-                        </template>
-                      </el-table-column>
-                      <el-table-column
-                        prop="prePointId"
-                        label="前置隔离点"
-
-                      >
-                        <template slot-scope="scope">
-                          <el-select size="mini" v-model="scope.row.prePointId" @change="prePointIdChange(scope.row)"
-                                     @visible-change="onDropdownVisibleChange(scope.row)"  clearable
-                          >
-                            <el-option v-for="item in prePointIdOptions"
-                                       :key="item.pointId"
-                                       :label="item.pointName"
-                                       :value="item.pointId"
-                            >
-                            </el-option>
-                          </el-select>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                  </div>
-                  <el-form-item label="" prop="">
-                    <!--                    这个确认是没有人员配置的时候-->
-                    <el-button v-no-more-click
-                      v-if="!openStaffing"
-                      :disabled="this.getSopLook"
-                      style="float: right; height: 30px; line-height: 10px"
-                      type="primary"
-                      @click="submit"
-                    >确 定
-                    </el-button
-                    >
-                    <el-button v-no-more-click
-                      v-if="openStaffing"
-                      :style="{float: 'right',
-                        height: '30px',
-                        lineHeight: '10px',
-                        marginRight: openStaffing?'0%':'0%'}
-                      "
-                      type="primary"
-                      @click="preStep('third')"
-                    >下一步
-                    </el-button
-                    >
-                    <el-button v-no-more-click
-                      :style="{float: 'right',
-                        height: '30px',
-                        lineHeight: '10px',
-                        marginRight: openStaffing?'19%':'19%'}
-                      "
-                      type="primary"
-                      @click="preStep('first')"
-                    >上一步
-                    </el-button
-                    >
-
-                  </el-form-item>
-                </el-form>
-              </el-tab-pane>
-              <el-tab-pane label="人员选择" name="third" v-if="openStaffing  ">
-                <!--人员选择-->
-                <el-form ref="form" :model="form" label-width="70px">
-                  <el-form-item label="上锁人" prop="locker">
-                    <el-select
-                      :disabled="this.getSopLook"
-                      v-model="form.locker"
-                      placeholder="上锁人"
-                      clearable
-                      style="width: 100%"
-                      @change="handlelockerChage"
-                    >
-                      <el-option
-                        v-for="dict in this.listLockerOption"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                      />
-                    </el-select>
-                  </el-form-item>
-
-                  <el-form-item label="共锁人" prop="coLocker">
-                    <el-button v-no-more-click
-                      type="primary"
-                      @click="addInside"
-                      class="gsr"
-                      size="mini"
-                    >添加内部人员
-                    </el-button>
-                    <el-button v-no-more-click type="primary" @click="addOutside" size="mini"
-                    >添加外部人员
-                    </el-button>
-                  </el-form-item>
-                  <div class="text item">
-                    <el-table
-                      :data="sortedTicketUserDTOList"
-                      stripe
-                      height="400"
-                      style="width: 100%"
-                    >
-                      <el-table-column prop="userId" label="序号" width="50">
-                      </el-table-column>
-                      <el-table-column
-                        prop="userName"
-                        label="共锁人"
-                        width="120"
-                      >
-                        <template slot-scope="scope">
-                          <span style="color: #2a87ff">{{
-                              scope.row.userName
-                            }}</span>
-                        </template>
-                      </el-table-column>
-                      <el-table-column prop="userType" label="共锁人来源">
-                        <template slot-scope="scope">
-                          <span>{{
-                              scope.row.userType == '0' ? '内部' : '外部'
-                            }}</span>
-                        </template>
-                      </el-table-column>
-                      <el-table-column label="" width="80">
-                        <template slot-scope="scope">
-                          <el-button v-no-more-click
-                            @click.native.prevent="
-                              deleteRow(scope.$index, sortedTicketUserDTOList)
-                            "
-                            type="text"
-                            size="small"
-                          >
-                            移除
-                          </el-button>
-                        </template>
-                      </el-table-column>
-                    </el-table>
-                  </div>
-
-                  <el-form-item label="" prop="">
-                    <!--                    这里是有人员配置的-->
-                    <el-button v-no-more-click
-                      v-if="openStaffing"
-                      :disabled="this.getSopLook"
-                      style="float: right; height: 30px; line-height: 10px"
-                      type="primary"
-                      @click="submit"
-                    >确 定
-                    </el-button
-                    >
-                    <el-button v-no-more-click
-                      style="
-                        float: right;
-                        height: 30px;
-                        line-height: 10px;
-                        margin-right: 19%;
-                      "
-                      type="primary"
-                      @click="preStep('second')"
-                    >上一步
-                    </el-button
-                    >
-                  </el-form-item>
-                </el-form>
-              </el-tab-pane>
-            </el-tabs>
           </div>
         </el-card>
       </div>
     </div>
-    <!--    newSop盒子结束-->
-    <!-- 添加或修改外部人员对话框 -->
-    <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"
-
-        label-width="70px"
-      >
-        <el-form-item label="选择人员" prop="nickName" v-if="insideMumber">
-          <el-select
-            v-model="dialogForm.nickName"
-            placeholder="请选择人员"
-            clearable
-            style="width: 100%"
-            multiple
-            @change="changeInsideUser"
-          >
-            <el-option
-              v-for="dict in this.listCoLockerOption"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="人员ID" prop="username" v-if="outsideMumber">
-          <el-row>
-            <el-col :span="16">
-              <el-input
-                v-model="dialogForm.username"
-                placeholder="请输入人员ID"
-                clearable
-                style="width: 80%"
-                @change="outSideUserInput"
-              />
-            </el-col>
-            <el-col :span="4">
-              <el-button v-no-more-click type="primary" @click="insertOutSideTable">添加</el-button>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-row>
-          <el-table :data="OutSideUserTableData"
-                    stripe
-                    height="200"
-                    v-if="outsideMumber"
-          >
-            <el-table-column prop="userId" label="序号">
-            </el-table-column>
-            <el-table-column
-              prop="userName"
-              label="人员ID"
+  </div>
 
-            >
-              <template slot-scope="scope">
-                          <span style="color: #2a87ff">{{
-                              scope.row.userName
-                            }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="80">
-              <template slot-scope="scope">
-                <el-button v-no-more-click
-                  @click.native.prevent="
-                              deleteRow(scope.$index, OutSideUserTableData)
-                            "
-                  type="text"
-                  size="small"
-                >
-                  移除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-row>
 
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <!--  内部人员确认-->
-        <el-button v-no-more-click type="primary" @click="cancel" v-if="insideMumber">确认</el-button>
-        <!--        外部人员确认-->
-        <el-button v-no-more-click type="primary" @click="outSideDialogConfirm" v-if="outsideMumber">确认</el-button>
-        <el-button v-no-more-click @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
 </template>
 
-
 <script>
-import IsolationLeftVue from '@/components/separationPoint/index.vue'
-import SopLeft from '@/components/separationPoint/workshop.vue'
-import { genCode } from '@/api/system/autocode/rule'
 import {
-  addinsertIsSop,
-  updateIsSop,
-  selectIsSopById, SopUser
-} from '@/api/mes/sop/sopindex'
-import { mapActions, mapGetters } from 'vuex'
+  listMarsDept
+} from '@/api/system/marsdept'
+import {
+  listTechnology
+} from '@/api/system/technology'
 
 export default {
-  name: 'addView',
-  dicts: ['power_type', 'point_type', 'sop_type', 'job_user_role'],
-  components: {
-    SopLeft,
-    IsolationLeftVue
-  },
+  name: 'NewSop',
   data() {
     return {
-      //自动生成编码
-      autoGenFlag: false,
-      activeName: 'first',
-      form: {
-        sopName: '',
-        sopCode: '',
-        SOPType: '',
-        workshopName: '', //车间名称
-        workline: '', //区域
-        workareaName: '',
-        spoint: [], //已选隔离点
-        prePointId: [],//已选隔离点的前置节点Id
-        locker: '', //上锁人
-        coLocker: '', //共锁人
-        pointDetailVOList: [],//隔离点数据
-
-        ticketUserDTOList: [
-          // {
-          //   userId: '',
-          //   userName: '',
-          //   userRole: '',//作业票角色 角色code jtlocker(上锁人) jtcolocker(共锁人)
-          //   userType: ''//用户类型 0是内部 1是外部
-          // }
-        ] //所选择的用户
-      },
-
-      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)
-            }
-          }
-        ]
-      },
-      // 右侧底部已选隔离点
-      tableData: null,
-      orderTableData:[],//排序
-      points: null, //车间逆向传递拿到的隔离点数据
-      emitWorkShop: null, //车间逆向传递拿到车间相关数据
-      emitworklineId: null,//生产线逆向传递拿到数据
-      sopProps: [], //正传递
-      worklineMap: '',
-      prePointIdOptions: [],//前置节点的下拉选项
-      initprePointIdOptions: [],//前置节点初始化数据选项
-      prePointId: null,//回显选中的前置节点id
-      relations: [],//维护父子关系的前置节点
-      openStaffing: null,
-      newticketUserDTOList: [], //为了上锁人单独传递数据
-      // 弹框中显示的form表单内容
-      insideMumber: false,
-      outsideMumber: false,
-      // 是否显示弹出层
-      open: false,
-      // 弹出层标题
-      title: '',
-      dialogForm: {
-        nickName: '',
-        username: ''
-      },
-      rules: {
-        sopName: [
-          { required: true, message: "sop名称不能为空", trigger: "blur" },
-        ],
-        sopCode: [
-          { required: true, message: "sop编码不能为空", trigger: "blur" },
-        ],
-
-      },
-      listLockerOption: null,//上锁人下拉数据
-      listCoLockerOption: null,//共锁人下拉数据
-      OutSideUserTableData: [],//添加外部人员多个表格
-      nextUserId: 0//新增外部人员表格序号自定义
+      sopStep: 'first',
+      selectedOption: '',
+      technologyList: [],
+      marsDeptList: []
     }
-  },
-  mounted() {
-    this.handleOpenStaffing()
-    if (this.$route.query.sopId !== 'null') {
-      // console.log(this.$route.query.sopId, "接受路由参数");
-      this.getSopInfo()
 
-      if (this.getSopLook) {
-        this.setSopTitle('查看SOP')
-      } else {
-        this.setSopTitle('编辑SOP')
-      }
-    } else {
-      this.handleAutoGenChange(true)
-      this.autoGenFlag=true
-      this.setSelectSopPoints([])
-      this.setPointTableData([])
-      this.setSopTitle('新建SOP')
-    }
   },
-
-  computed: {
-    ...mapGetters('sopSelectPoints', ['getSopTitle', 'getSopLook', 'getMapData']),
-    // 排序 ticketUserDTOList，将 userRole 为 0 的选项放在前面
-    sortedTicketUserDTOList() {
-      return this.form.ticketUserDTOList.sort(
-        (a, b) => Number(a.userRole) - Number(b.userRole)
-      )
-    }
+  mounted() {
+    this.getList()
   },
-
   methods: {
-    ...mapActions('sopSelectPoints', [
-      'setSelectSopPoints',
-      'setPointTableData',
-      'setSopEdit',
-      'setSopTitle'
-    ]),
-    handleClick(tab, event) {
-
-    },
-    preStep(val) {
-      this.activeName = val
-      console.log(this.form, 'sopform')
-    },
-
-    nextStep(val) {
-      if(val=='second'&&this.form.sopName==''){
-        this.$message.error('SOP名称不能为空')
-        return;
-      }else if(val=='second'&&this.form.sopCode==''){
-        this.$message.error('SOP编码不能为空')
-        return;
-      }
-      this.activeName = val
-      // console.log("我点击了下一步");
-
-    },
-
-    // 详情数据
-    getSopInfo() {
-      const sopId = this.$route.query.sopId
-      console.log(this.$route.query.sopId, '接受路由参数')
-
-      if (sopId !== null) {
-        selectIsSopById(sopId).then((response) => {
-          console.log(response, '详细内容 ')
-          this.orderTableData=response.data.pointDetailVOList.map((point)=>{
-            return{
-              pointName: point.pointName, // 显示的名称
-              pointId: point.pointId, // 对应的值
-              pointType: point.pointType,
-              powerType: point.powerType,
-              prePointId: point.prePointId
-            }
-          })
-
-          this.sopProps = [response.data]
-          this.title = '修改隔离点信息'
-          if (response.data.ticketUserDTOList) {
-            this.openStaffing = true;
-          }
-          this.form = {
-            ...response.data,
-            workareaId: response.data.workareaId,
-            sopId: response.data.sopId,
-            spoint: response.data.pointDetailVOList,
-            ticketUserDTOList: response.data.ticketUserDTOList
-              ? response.data.ticketUserDTOList
-                .filter((item) => item.userRole !== "jtlocker")
-                .map((item) => ({
-                  userName: item.userName,
-                  userType: item.userType,
-                  userRole: item.userRole,
-                  userId: item.userId,
-                }))
-              : [],
-            locker: response.data.ticketUserDTOList
-              ? response.data.ticketUserDTOList
-                .filter((item) => item.userRole === "jtlocker")
-                .map((item) => item.userName)[0]
-              : null,
-            coLocker: response.data.ticketUserDTOList
-              ? response.data.ticketUserDTOList.map((item) => {
-                return item.userRole !== "jtlocker" ? item.userName : null;
-              })
-              : [],
-          };
-
-          this.newticketUserDTOList = response.data.ticketUserDTOList
-            ? response.data.ticketUserDTOList
-              .filter((item) => item.userRole === "jtlocker")
-              .map((item) => ({
-                userName: item.userName,
-                userType: item.userType,
-                userRole: item.userRole,
-                userId: item.userId,
-              }))
-            : [];
-
-          console.log(this.form,this.newticketUserDTOList,'编辑sop回显的数据',)
-
-        })
-      } else {
-        this.title = '新增隔离点信息'
-        this.setSopEdit(true)
-        this.setSelectSopPoints([])
-        this.setPointTableData([])
-        this.tableData = null
-        this.form = {
-          spoint: [],
-          sopContent: '',
-          sopCode: '',
-          sopName: '',
-          sopType: '',
-          workareaId: '',
-          workshopId: ''
-        }
-        this.autoGenFlag = false
-      }
-    },
-    submit() {
-      console.log('我点击了确认')
-      // 确保 this.form.spoint 是一个数组，如果为空则默认空数组
-      if (!Array.isArray(this.form.spoint)) {
-        this.form.spoint = []
-      }
-      console.log(this.form.spoint, 'spoint')
-
-      // 如果没有选中点，逆向传递为空时，使用当前表格数据中的点
-      if (this.form.spoint.length === 0 && Array.isArray(this.tableData)) {
-        this.form.spoint = this.tableData.map((point) => point.pointId)
-      }
-
-      // 编辑模式
-      if (this.$route.query.sopId !== 'null') {
-        console.log(this.$route.query.sopId, 'sopIdaaa')
-        // 确保 sopId 存在
-        if (!this.form.sopId) {
-          console.error('隔离点id不可为空!')
-          this.$message.error('隔离点id不可为空!') // 使用消息提示
-          return
-        }
-        const selectedpointIds = this.form.spoint.join(',')
-        const UserList=[...(this.form.ticketUserDTOList|| []),...(this.newticketUserDTOList|| [])]
-        // const pointsList=this.form.pointDetailVOList.map((item)=>{
-        //   return {
-        //     pointId:item.pointId,
-        //     prePointId:item.prePointId
-        //   }
-        // })
-        const pointsList=this.tableData.map((item)=>{
-          return {
-            pointId:item.pointId,
-            prePointId:item.prePointId
-          }
-        })
-        const data = {
-          sopId:this.form.sopId,
-          pointIds: selectedpointIds,
-          sopContent: this.form.sopContent,
-          sopCode: this.form.sopCode,
-          sopName: this.form.sopName,
-          sopType: this.form.sopType,
-          workareaId: this.emitworklineId,
-          ticketUserDTOList: UserList,
-          pointsList: pointsList
-          // workshopId: this.emitWorkShop.value
-        }
-
-
-        console.log(data,'编辑的参数')
-        updateIsSop(data).then((res) => {
-          console.log(res, '修改接口')
-          if (res.code == 200) {
-            this.$router.push('/sop/sopm')
-            this.$message.success('SOP修改成功')
-          }
-        })
-      } else {
-        // 新增模式
-        const selectedpointIds = this.form.spoint.join(',')
-        const UserList=[...this.form.ticketUserDTOList,...this.newticketUserDTOList]
-        const pointsList=this.tableData.map((item)=>{
-          return {
-            pointId:item.pointId,
-            prePointId:item.prePointId
-          }
-        })
-        const data = {
-          pointIds: selectedpointIds,
-          sopContent: this.form.sopContent,
-          sopCode: this.form.sopCode,
-          sopName: this.form.sopName,
-          sopType: this.form.sopType,
-          workareaId: this.emitworklineId,
-          ticketUserDTOList: UserList,
-          pointsList: pointsList
-        }
-        console.log(data, '新增参数')
-        addinsertIsSop(data).then((res) => {
-          console.log(res, '新增接口')
-          if (res.code == 200) {
-            this.$router.push('/sop/sopm')
-            this.$message.success('SOP新建成功')
-          }
-        })
-      }
-    },
-
-    // 选中隔离点 前置节点的change函数
-    onDropdownVisibleChange(row) {
-      console.log(row, '我执行这里拉')
-
-      // 当前节点 ID
-      const currentPointId = row.pointId
-
-      // 获取当前行的 prePointId
-      const currentPrePointId = row.prePointId
-
-      // 已经被选为前置节点的 ID 集合
-      const selectedPrePointIds = new Set(
-        this.tableData
-          .filter((item) => item.prePointId !== null)
-          .map((item) => item.prePointId)
-      )
-
-      // console.log(selectedPrePointIds, 'selectedPrePointIds')
-      // 构建 form.prePointId 数组对象
-      this.form.prePointId = this.tableData.map((item) => ({
-        pointId: item.pointId,
-        prePointId: item.prePointId || null
-      }))
-      // 每次都从原始数据开始过滤
-      let filteredOptions = [...this.initprePointIdOptions]
-
-      // 过滤规则：
-      // 1. 排除自身
-      // 2. 排除已经被选为前置节点的隔离点
-      // 3. 排除所有已经选为前置节点的节点及其前置节点
-      const allExcludedPoints = new Set([currentPointId])
-      this.getAllExcludedPoints(currentPointId, allExcludedPoints)
-
-      filteredOptions = filteredOptions.filter((option) => {
-        return !allExcludedPoints.has(option.pointId)
+    getList() {
+      const data = {
+        pages: 1,
+        size: -1
+      }
+      listTechnology(data).then(res => {
+        console.log(res, 'technologyList')
+        this.technologyList = res.data.records
       })
-
-      this.prePointIdOptions = filteredOptions
-
-      console.log('过滤后的前置节点选项', this.prePointIdOptions)
-    },
-
-    // 递归获取所有需要排除的节点
-    getAllExcludedPoints(pointId, excludedPoints) {
-      const relatedRows = this.tableData.filter(item => item.prePointId === pointId)
-      for (const row of relatedRows) {
-        excludedPoints.add(row.pointId)
-        this.getAllExcludedPoints(row.pointId, excludedPoints)
-      }
-    },
-
-    // 前置节点改变时的处理函数
-    prePointIdChange(row) {
-      console.log(row, '前置节点改变')
-
-      // 更新 tableData 中对应行的 prePointId
-      const index = this.tableData.findIndex(item => item.pointId === row.pointId)
-      if (index !== -1) {
-        this.$set(this.tableData, index, row)
-      }
-
-      // 重新调用 onDropdownVisibleChange 确保其他节点的选项更新
-      this.onDropdownVisibleChange(row)
-    },
-// 定义一个排序函数，根据 orderTableData 中 pointName 的顺序对 tableData 进行排序
-    sortTableDataByOrder(tableData, orderTableData) {
-      // 构建 orderMap，使用 pointName 作为键，索引作为值
-      const orderMap = new Map(orderTableData.map((item, index) => [item.pointName, index]))
-
-      return tableData.sort((a, b) => {
-        // 如果 pointName 在 orderMap 中，按 orderMap 的索引排序
-        // 如果 pointName 不在 orderMap 中，排在最后，并按 pointName 的自然顺序排列
-        const indexA = orderMap.has(a.pointName) ? orderMap.get(a.pointName) : Infinity
-        const indexB = orderMap.has(b.pointName) ? orderMap.get(b.pointName) : Infinity
-
-        if (indexA === indexB) {
-          // 当两者都不在 orderMap 中时，按 pointName 的自然顺序排列
-          return a.pointName.localeCompare(b.pointName)
-        }
-
-        return indexA - indexB
+      listMarsDept(data).then(res => {
+        console.log(res, 'marsDeptList')
+        this.marsDeptList = res.data.records
       })
     },
-    // 子组件选中的隔离点逆传递拿到的数据
-    handleSelectPoint(points) {
-      // console.log(points, "父组件接收逆向传递选中的隔离点");
-
-      // 1. 去除重复的点，使用 Set 确保每个 pointId 唯一
-      const uniquePoints = Array.from(
-        new Set(points.map((point) => point.pointId))
-      ).map((id) => points.find((point) => point.pointId === id));
-
-      // console.log(uniquePoints, "去重后的选中节点");
-      if(this.$route.query.sopId=='null'){
-        this.tableData = uniquePoints; // 子组件传递过来的选中节点（去重后）
-      }else{
-        this.tableData = this.sortTableDataByOrder(uniquePoints, this.orderTableData);//去重并排序
-
-      }
-      console.log(this.tableData,this.orderTableData,'排序之后')
-      // this.tableData = uniquePoints; // 子组件传递过来的选中节点（去重后）
-
-      // 使用 Set 来存储传递过来的点值
-      const newValues = new Set(uniquePoints.map((point) => point.pointId));
-
-      // 2. 删除取消选中的点
-      const removedPoints = this.tableData
-        .filter((item) => !newValues.has(item.pointId))
-        .map((item) => item.pointId); // 记录被删除的点
-
-      this.tableData = this.tableData.filter((item) =>
-        newValues.has(item.pointId)
-      );
-
-      // 3. 确保新增点不会重复
-      const existingValues = new Set(
-        this.tableData.map((item) => item.pointId)
-      );
-
-      uniquePoints.forEach((point) => {
-        // 如果当前传递的点不在已有的点集中，则添加
-        if (!existingValues.has(point.pointId)) {
-          this.tableData.push({
-            pointName: point.pointName, // 显示的名称
-            pointId: point.pointId, // 对应的值
-            pointType: point.pointType,
-            powerType: point.powerType,
-            prePointId: null,
-          });
-
-          this.prePointIdOptions.push({
-            pointName: point.pointName, // 显示的名称
-            pointId: point.pointId, // 对应的值
-          });
-          this.initprePointIdOptions = [...this.prePointIdOptions];
-          console.log(this.prePointIdOptions, "前置节点设置下拉");
-          existingValues.add(point.pointId);
-        }
-      });
-
-      // 4. 处理被删除的点，如果这些点作为父节点绑定，则将对应的 prePointId 设置为 null
-      this.tableData.forEach((item) => {
-        if (removedPoints.includes(item.prePointId)) {
-          item.prePointId = null;
-        }
-      });
-
-      // 5. 从下拉选项中移除被删除的点
-      this.prePointIdOptions = this.prePointIdOptions.filter(
-        (option) => !removedPoints.includes(option.pointId)
-      );
-      this.initprePointIdOptions = [...this.prePointIdOptions];
-
-      // 6. 确保下拉选项中仍然保留所有未被删除的点
-      const allPoints = uniquePoints.map((point) => ({
-        pointName: point.pointName,
-        pointId: point.pointId,
-      }));
-
-      this.prePointIdOptions = allPoints.filter(
-        (option) => !removedPoints.includes(option.pointId)
-      );
-      this.initprePointIdOptions = [...this.prePointIdOptions];
-
-      // 更新 form.spoint 为最新选中的隔离点数组
-      this.form.spoint = uniquePoints.map((point) => point.pointId);
-    },
-
-    // 车间逆向传递拿到的隔离点数据产线
-    handleProductLineSelected(selectedOption) {
-      // console.log(selectedOption, "父组件接收到的 selectedOption");
-      this.points = selectedOption
-      this.form.workline = selectedOption.label
-      // console.log(this.worklineMap.length, '父组件接收到的 worklineMap')
-    },
-    // 车间子组件逆传递车间相关数据车间
-    handleWorkshopSelected(selectedOption) {
-      console.log(selectedOption, 'handleWorkshopSelected')
-      // this.emitWorkShop = selectedOption
-      // this.form.workshopName = selectedOption.label;//这里是回显车间的 暂时不需要
-      this.form.workline = selectedOption.label//这里是回显作业区域的
-      this.emitworklineId = selectedOption.id
-      this.worklineMap = selectedOption.map
-    },
-
-// 添加内部人员
-    addInside() {
-      this.open = true
-      this.title = '添加内部人员'
-      this.insideMumber = true
-      this.outsideMumber = false
-      // this.form.ticketUserDTOList = [];
-
-      this.dialogForm.nickName = ''
-    },
-    // 添加外部人员
-    addOutside() {
-      this.open = true
-      this.title = '添加外部人员'
-      this.OutSideUserTableData=[]
-      this.insideMumber = false
-      this.outsideMumber = true
-      this.dialogForm.username = null
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-    },
-    // 人员列表删除
-    deleteRow(index, rows) {
-      console.log(index, rows, '删除的行')
-      const deletedItem = rows[index] // 获取要删除的项
-      rows.splice(index, 1) // 从显示的列表中删除
-      // const formIndex = this.form.ticketUserDTOList.findIndex(
-      //   (item) => item.userId === deletedItem.userId
-      // )
-      const formIndex = this.form.ticketUserDTOList.findIndex(
-        (item) => item.userName == deletedItem.userName
-      )
-      if (formIndex !== -1) {
-        this.form.ticketUserDTOList.splice(formIndex, 1) // 从 form.ticketUserDTOList 中删除
-      }
-    },
-    // 上锁人下拉选择change事件
-    handlelockerChage(val) {
-      console.log(val, '上锁人chage')
-      const user = this.listLockerOption.find((item) => item.value === val)
-
-      if (user && this.form.locker !== '') {
-        const existingUser = this.form.ticketUserDTOList.find(
-          (u) => u.userName === user.label
-        )
-        if (!existingUser) {
-          this.newticketUserDTOList.push({
-            userName: user.label,
-            userId: user.value,
-            userType: 0,
-            userRole: 'jtlocker'
-          })
-
-          console.log(this.newticketUserDTOList, '上锁人用户')
-        } else {
-          // console.log('用户已存在', user.label)
-        }
-      }
-    },
-
-    // 添加内部人员的用户新增到ticketUserDTOList这个数据里
-    changeInsideUser(values) {
-      const usersinside = values
-        .map((value) =>
-          this.listCoLockerOption.find((item) => item.value === value)
-        )
-        .filter(Boolean)
-
-      usersinside.forEach((user) => {
-        const existingUser = this.form.ticketUserDTOList.find(
-          (u) => u.userName === user.label
-        )
-        // console.log(usersinside, 'usersinside----67')
-        if (!existingUser) {
-          this.form.ticketUserDTOList.push({
-            userName: user.label,
-            userId: user.value,
-            userType: 0,
-            userRole: 'jtcolocker'
-
-          })
-          console.log(this.form.ticketUserDTOList, '共锁人用户')
-        } else {
-          // console.log('用户已存在', user.label)
-        }
-      })
-      this.updateCoLocker()
-
-      // console.log(this.form.ticketUserDTOList, '用户')
-    },
-    // 添加外部人员 输入名称 userType==1是共锁人 0是上锁人 userId==0
-    outSideUserInput(event) {
-      this.dialogForm.username = event
-    },
-    // 添加外部人员弹窗 添加给表格数据的按钮事件
-    insertOutSideTable() {
-      const newUserName = this.dialogForm.username.trim();
-      if (newUserName === '') {
-        this.$message.warning('请输入用户名');
-        return;
-      }
-      // 检查新用户是否已存在于表格中
-      const existingUser = this.OutSideUserTableData.find(user => user.userName === newUserName);
-      if (existingUser) {
-        this.$message.warning('该用户已存在');
-        return;
-      }
-      // 添加新用户
-      this.OutSideUserTableData.push({
-        userName: newUserName,
-        userId: this.nextUserId++
-      });
-
-      // 清空对话框表单
-      this.dialogForm.username = '';
-
-      // 打印当前的外部人员表格数据
-      console.log(this.OutSideUserTableData, 'OutSideUserTableData');
-    },
-    // 添加外部人员 确认弹窗
-    outSideDialogConfirm() {
-      this.updateCoLocker()
-      this.open = false
-    },
-    // 更新界面中共锁人下拉框显示的内容
-    updateCoLocker() {
-      // 检查并补充 ticketUserDTOList 中缺少的用户
-      this.OutSideUserTableData.forEach((item) => {
-        const existingUser = this.form.ticketUserDTOList.find(
-          (u) => u.userName === item.userName
-        )
-
-        if (!existingUser) {
-          this.form.ticketUserDTOList.push({
-            userName: item.userName,
-            userId: 0,
-            userType: 1,
-            userRole: 'jtcolocker'
-
-          })
-        }
-      })
-
-      console.log(this.form.ticketUserDTOList, '最终的 ticketUserDTOList')
-    },
-    //自动生成编码
-    handleAutoGenChange(autoGenFlag) {
-      if (autoGenFlag) {
-        genCode('SOP_CODE').then((response) => {
-          this.form.sopCode = response
-        })
-      } else {
-        this.form.sopCode = null
-      }
-    },
-    //是否开启人员配置界面
-    handleOpenStaffing(openStaffing) {
-      // 定义一个函数来封装接口调用逻辑
-      const fetchUserData = (roleKey) => {
-        const data = {
-          pageNum: 1,
-          pageSize: 10000,
-          roleKey: roleKey
-        }
-        return SopUser(data).then((res) => {
-          // console.log(res, `上锁人 - ${roleKey}`);
-          return res // 返回结果以便后续处理
-        }).catch((err) => {
-          // console.error(err, `请求失败 - ${roleKey}`);
-          throw err // 抛出错误以便捕获
-        })
-      }
-
-      // 调用两次接口，分别传递不同的 roleKey
-      Promise.all([
-        fetchUserData('jtlocker'),
-        fetchUserData('jtcolocker')
-      ]).then((results) => {
-        // 处理两次调用的结果
-        const [jtlockerResult, jtcolockerResult] = results
-        console.log(jtlockerResult, jtcolockerResult, 'jtlocker 结果')
-        this.listLockerOption = jtlockerResult.rows.map((item) => {
-          return {
-            label: item.nickName,
-            value: item.userId
-          }
-        })
-        this.listCoLockerOption = jtcolockerResult.rows.map((item) => {
-          return {
-            label: item.nickName,
-            value: item.userId
-          }
-        })
-
-      }).catch((err) => {
-        console.error(err, '其中一个请求失败')
-      })
-      if (openStaffing) {
-        console.log(openStaffing, '开启人员配置')
-        this.openStaffing = openStaffing
-
-      } else {
-        console.log(openStaffing, '关闭人员配置')
-        this.openStaffing = openStaffing
-        this.activeName = 'first'
-      }
-    },
-    // 侧边X关闭
-    goBack() {
-      this.$router.push('/sop/sopm')
+    handelChange(val) {
+      console.log(val)
+      this.sopStep = val
     }
-    //   methods结束
   }
 }
 </script>
 
 
 <style scoped lang="scss">
-.newOperations {
-  width: 99%;
-  height: 100%;
-  // background: pink;
-  margin: 10px;
-  display: flex;
-
-  .left {
-    width: 75%;
-    height: 830px;
-    // background: #eee;
-    margin-right: 10px;
-  }
-
-  .right {
-    //width: 25%;
-    flex: 1;
-    height: 100%;
-    //background: #000;
-    .right_top {
-      height: 540px;
-    }
-  }
-}
-
-//右侧卡片样式开始
-.text {
-  font-size: 14px;
-}
-
-.item {
-  margin-bottom: 18px;
-
-  p {
-    font-size: 18px;
-    font-weight: bolder;
-    font-family: SourceHanSansSC-bold;
-  }
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-  width: 320px;
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.box-card {
-  // width: 390px;
-  width: 100%;
-  height: 850px;
-  //background: pink;
-}
 
-::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 30px !important;
-}
-
-//右侧卡片样式结束
-</style>
-<style>
 </style>