vue在弹窗中选择商品后在另一个文本框显示供应商并锁定文本框

你可以在弹窗中的商品选择事件中获取供应商信息，然后将供应商信息填充到另一个文本框中，并设置该文本框为只读或禁用状态，从而达到锁定的效果。具体可以按照如下示例代码实现：

<template>
  <div>
    <button @click="showDialog">选择商品</button>
    <input type="text" v-model="selectedProduct" readonly>
    <input type="text" v-model="selectedSupplier" readonly disabled>
    <dialog :open="dialogVisible">
      <select v-model="selectedProductId" @change="onProductSelect">
        <option value="">请选择商品</option>
        <option v-for="product in products" :value="product.id">{{ product.name }}</option>
      </select>
      <button @click="closeDialog">确定</button>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      products: [
        { id: 1, name: '商品A', supplier: '供应商A' },
        { id: 2, name: '商品B', supplier: '供应商B' },
        { id: 3, name: '商品C', supplier: '供应商A' },
      ],
      selectedProductId: '',
      selectedProduct: '',
      selectedSupplier: '',
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    onProductSelect() {
      const selectedProduct = this.products.find(p => p.id === Number(this.selectedProductId));
      if (selectedProduct) {
        this.selectedProduct = selectedProduct.name;
        this.selectedSupplier = selectedProduct.supplier;
      } else {
        this.selectedProduct = '';
        this.selectedSupplier = '';
      }
    },
  },
};
</script>

在上述代码中，我们首先在模板中添加了一个按钮，点击后会显示一个弹窗，用于选择商品。在弹窗中，我们使用了一个下拉框来显示可选的商品列表，当用户选择了一个商品时，会触发 `onProductSelect` 方法，该方法会从选中的商品中获取供应商信息，并更新到另一个文本框中。同时，为了达到锁定的效果，我们将该文本框设置为只读和禁用状态，从而防止用户手动修改其内容。