增加页面进入密码弹框

wuyouming666

2024-05-10 10d08bead7b128db3cf0ed8e0977e65a1b188b6e

增加页面进入密码弹框

 CanadaMes-ui/src/views/Electrical/AutomaticParameterSetting.vue

@@ -136,6 +136,23 @@
      </el-col>
    </el-row>
    <!-- <el-button @click="submitDataToBackend">提交数据到后端</el-button> -->

    <div>
   
   <el-dialog
     :visible="isPromptVisible"
     title="Prompt"
     width="30%"
     :close-on-click-modal="false" 
     @close="handleCloseDialog"
   >
     <el-input v-model="password2" type="password" :placeholder="$t('Please enter the password')"></el-input>
     <span slot="footer" class="dialog-footer">
       <el-button @click="handleCancel">{{ $t('Home') }}</el-button>
       <el-button type="primary" @click="handleConfirm">{{ $t('Confirm') }}</el-button>
     </span>
   </el-dialog>
 </div>
  </div>
</template>

@@ -152,7 +169,11 @@
  data () {
    return {
      jsonData: data ,
      password: 1// 加载整个data.json文件作为jsonData
      password: 1,// 加载整个data.json文件作为jsonData
      password2:"" ,
      jianju: "",
      
      isPromptVisible: false,
    }
  },
  activated () {
@@ -166,10 +187,37 @@
    this.$forceUpdate();

    this.load();

    this.showPasswordPrompt();
  },
 
  methods: {
    showPasswordPrompt() {
      this.isPromptVisible = true;
    },
    handleCancel() {
      this.$router.push('/home');
      this.isPromptVisible = false;
    },
    handleConfirm() {
      // 验证密码并执行相应操作
      if (this.password === this.password2) {
        // 密码正确，执行操作
        console.log('Password correct, perform operation');
        this.$message.success(this.$t('success password'));
        this.isPromptVisible = false;
        this.password2="";
     
        // 在这里执行你的操作
      } else {
        this.$message.error(this.$t('Incorrect password'));
        this.showPasswordPrompt();
      }
     
    },
    handleCloseDialog() {
      // 在这里处理弹框关闭事件，如果需要的话
      console.log('Dialog closed');
    },
    load(){

SelectPassword().then(res => {
@@ -186,6 +234,7 @@
      

},

    closeSocket () {
      // 关闭 WebSocket 连接
      socket.close();
@@ -224,35 +273,14 @@

      // 提交数据到后端
      const jsonString = JSON.stringify(jsonObject);
      this.$prompt(
    this.$t('Are you sure to perform this operation?'),
    this.$t('prompt'),
    {
      inputType: 'password',
      inputPlaceholder: this.$t('Please enter the password'),
      confirmButtonText: this.$t('Yes'),
      cancelButtonText: this.$t('No'),
      type: 'warning',
    }
  ).then(({ value }) => {
    // 验证密码是否正确
    if (value !== this.password) {
      this.$message.error(this.$t('Incorrect password'));
      return ;
    }else{
     
      
      console.log("提交以下数据到后端:", jsonString);
      socket?.send(jsonString);
    }

   
   

  }).catch(() => {
    // 取消操作
    console.log('取消1');
  });

   
  
 // console.log("提交以下数据到后端:", jsonString);
      // socket?.send(jsonString);
      event.target.blur(); // 取消输入框焦点

 CanadaMes-ui/src/views/Electrical/Positioning1.vue

@@ -184,8 +184,35 @@
      </el-col>
    </el-row>
    <!-- <el-button @click="submitDataToBackend">提交数据到后端</el-button> -->



    <div>
   
    <el-dialog
      :visible="isPromptVisible"
      title="Prompt"
      width="30%"
      :close-on-click-modal="false" 
      @close="handleCloseDialog"
    >
      <el-input v-model="password2" type="password" :placeholder="$t('Please enter the password')"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">{{ $t('Home') }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ $t('Confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
  </div>


  


</template>



  
<script>
let socket;
@@ -203,8 +230,12 @@
      A02: "",
      B01: "",
      B02: "",
      password: 1,
      password:"" ,
      password2:"" ,
      jianju: "",
      
      isPromptVisible: false,
     
    };
  },
  activated() {
@@ -217,9 +248,78 @@
    }
    this.$forceUpdate();
    this.load();
   
// 调用函数，显示密码输入对话框
this.showPasswordPrompt();
    
  },
  methods: {

    showPasswordPrompt() {
      this.isPromptVisible = true;
    },
    handleCancel() {
      this.$router.push('/home');
      this.isPromptVisible = false;
    },
    handleConfirm() {
      // 验证密码并执行相应操作
      if (this.password === this.password2) {
        // 密码正确，执行操作
        console.log('Password correct, perform operation');
        this.$message.success(this.$t('success password'));
        this.isPromptVisible = false;
        this.password2="";
     
        // 在这里执行你的操作
      } else {
        this.$message.error(this.$t('Incorrect password'));
        this.showPasswordPrompt();
      }
     
    },
    handleCloseDialog() {
      // 在这里处理弹框关闭事件，如果需要的话
      console.log('Dialog closed');
    },


  //   showPasswordPrompt() {
  //   // 显示遮罩层
  //   this.isPromptVisible = true;

  //   this.$prompt(
  //     this.$t('Are you sure to perform this operation?'),
  //     this.$t('prompt'),
  //     {
  //       inputType: 'password',
  //       inputPlaceholder: this.$t('Please enter the password'),
  //       confirmButtonText: this.$t('Yes'),
  //       showClose: false, // 不显示右上角的关闭按钮
  //       showCancelButton: false, // 不显示取消按钮
  //       type: 'warning',
  //     }
  //   ).then(({ value }) => {
  //     // 验证密码是否正确
  //     if (value !== this.password) {
  //       this.$message.error(this.$t('Incorrect password'));
  //       // 不关闭对话框，重新触发密码输入对话框
  //       this.showPasswordPrompt();
  //     } else {
  //       // 密码正确，执行操作
  //       // 这里可以添加你想要执行的操作
  //       // 如果没有操作，可以省略这个 else 代码块
  //     }
  //   }).catch(() => {
  //     // 如果用户取消操作，也不做任何处理
  //     console.log('取消1');
  //   }).finally(() => {
  //     // 关闭遮罩层
  //     this.isPromptVisible = false;
  //   });
  // },


    load(){

SelectPassword().then(res => {
@@ -310,36 +410,10 @@
      // 提交数据到后端
      const jsonString = JSON.stringify(jsonObject);

      this.$prompt(
    this.$t('Are you sure to perform this operation?'),
    this.$t('prompt'),
    {
      inputType: 'password',
      inputPlaceholder: this.$t('Please enter the password'),
      confirmButtonText: this.$t('Yes'),
      cancelButtonText: this.$t('No'),
      type: 'warning',
    }
  ).then(({ value }) => {
    // 验证密码是否正确
    if (value !== this.password) {
      this.$message.error(this.$t('Incorrect password'));
      return ;
    }else{
      console.log("提交以下数据到后端:", jsonString);
      

  console.log("提交以下数据到后端:", jsonString);
      socket?.send(jsonString);
      
    }

   
   

  }).catch(() => {
    // 取消操作
    console.log('取消1');
  });

      
      
      event.target.blur(); // 取消输入框焦点
    },