9/30

<template>  
    <div>  
      <el-form :model="newProcess" ref="form">  
        <el-form-item label="工序名称" prop="name" required>  
          <el-input v-model="newProcess.name"></el-input>  
        </el-form-item>  
        <el-form-item>  
          <el-button type="primary" @click="addProcess">添加工序</el-button>  
        </el-form-item>  
      </el-form>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        newProcess: {  
          name: '',  
        },  
      };  
    },  
    methods: {  
      addProcess() {  
        const process = {  
          id: Date.now(), // 自行生成ID  
          name: this.newProcess.name,  
          qrCode: this.generateQRCode(this.newProcess.name),  
        };  
        // 这里可以处理将工序添加到全局状态或服务器  
        this.$store.dispatch('addProcess', process);  
        this.newProcess.name = ''; // 清空输入  
        this.$message.success('工序添加成功');  
      },  
      generateQRCode(text) {  
        // 使用一些库生成二维码  
        // 这里可以使用 qrcode.js / qrious 等库  
        return `http://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(text)}&size=100x100`;  
      },  
    },  
  };  
  </script>