初始化

src/views/MiniMall/Purchase/Comp/DialogAdd.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-dialog title="发起采购" v-model="dialogVisible" width="800px">
+    <el-form :model="form" ref="addForm" :rules="rules" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="产品" prop="product">
+            <el-select v-model="form.product" placeholder="请选择" filterable style="width: 100%">
+              <el-option
+                v-for="item in productOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="规格" prop="specs">
+            <el-select v-model="form.specs" placeholder="请选择" filterable style="width: 100%">
+              <el-option
+                v-for="item in specsOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="供应商" prop="supplier">
+            <el-input v-model="form.supplier" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="采购数量" prop="purchaseCount">
+            <el-input-number
+              :min="1"
+              v-model="form.purchaseCount"
+              placeholder="请输入"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="采购单价" prop="price">
+            <el-input-number
+              :min="0"
+              v-model="form.price"
+              placeholder="请输入"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="存放仓库" prop="warehouse">
+            <el-select v-model="form.warehouse" placeholder="请选择" filterable style="width: 100%">
+              <el-option
+                v-for="item in warehouseOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="备注" prop="remark">
+            <Editor v-model:modelValue="form.remark" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const dialogVisible = ref(false) // 弹窗的是否展示
+
+const form = ref()
+const rules = ref({})
+
+const productOptions = ref([])
+const specsOptions = ref([])
+const warehouseOptions = ref([
+  { label: '自营仓', value: 1 },
+  { label: '供应商仓', value: 2 }
+])
+
+const open = (val) => {
+  dialogVisible.value = true
+  form.value = val || {
+    product: '',
+    specs: '',
+    supplier: '',
+    purchaseCount: 1,
+    warehouse: 1,
+    remark: ''
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+function handleSave() {
+  console.log('保存')
+}
+</script>
+
+<style scoped></style>