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

<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,
      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.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.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)
    },

    // 子组件选中的隔离点逆传递拿到的数据
    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, "去重后的选中节点");

      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.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>