sc

src/views/Clue/Order/Comp/DialogAddProduct.vue

@@ -0,0 +1,130 @@
+<template>
+  <Dialog title="添加产品" v-model="show" width="800px">
+    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="成交产品" prop="productId">
+            <el-select
+              v-model="form.productId"
+              placeholder="选择成交产品"
+              filterable
+              @change="form.specsId = undefined"
+            >
+              <el-option
+                v-for="item in prodOptions"
+                :key="item.productId"
+                :label="item.productName"
+                :value="item.productId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="产品规格" prop="specsId">
+            <el-select
+              v-model="form.specsId"
+              placeholder="选择规格"
+              filterable
+              :disabled="!form.productId"
+            >
+              <el-option
+                v-for="item in specsOptions(form.productId)"
+                :key="item.specsId"
+                :label="item.specsName"
+                :value="item.specsId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="成交数量" prop="signNum">
+            <el-input-number v-model="form.signNum" :min="1" :controls="false" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="生产状态" prop="isProduced">
+            <el-radio-group v-model="form.isProduced">
+              <el-radio :label="0">待生产</el-radio>
+              <el-radio :label="1">已生产</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" :offset="0">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              type="textarea"
+              :autoSize="{ minRows: 3 }"
+              v-model="form.remark"
+              placeholder="请输入备注"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span>
+        <el-button @click="show = false">取 消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogProduct">
+import { addOrderProduct } from '@/api/clue/sign'
+
+const message = useMessage() // 消息弹窗
+
+const specsOptions = computed({
+  get() {
+    return (prodId) => {
+      if (prodId) {
+        return prodOptions.value.find((it) => it.productId == prodId).productSpecList
+      }
+      return []
+    }
+  }
+})
+
+const show = ref(false)
+const form = ref({})
+const rules = {
+  productId: { required: true, message: '成交产品不可为空', trigger: 'change' },
+  specsId: { required: true, message: '产品规格不可为空', trigger: 'change' },
+  signNum: { required: true, message: '成交数量不可为空', trigger: 'blur' }
+}
+
+const prodOptions = ref([])
+
+function open(signId, arr) {
+  prodOptions.value = arr
+  form.value.signId = signId
+  form.value.isProduced = 0
+  show.value = true
+}
+defineExpose({ open })
+
+const emit = defineEmits(['success'])
+const formRef = ref()
+const formLoading = ref(false)
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    await addOrderProduct(form.value)
+    message.success('新增成功！')
+    show.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>