From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/crm/contract/components/ContractProductForm.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 183 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/contract/components/ContractProductForm.vue b/src/views/crm/contract/components/ContractProductForm.vue
new file mode 100644
index 0000000..c33b996
--- /dev/null
+++ b/src/views/crm/contract/components/ContractProductForm.vue
@@ -0,0 +1,183 @@
+<template>
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ v-loading="formLoading"
+ label-width="0px"
+ :inline-message="true"
+ :disabled="disabled"
+ >
+ <el-table :data="formData" class="-mt-10px">
+ <el-table-column label="搴忓彿" type="index" align="center" width="60" />
+ <el-table-column label="浜у搧鍚嶇О" min-width="180">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
+ <el-select
+ v-model="row.productId"
+ clearable
+ filterable
+ @change="onChangeProduct($event, row)"
+ placeholder="璇烽�夋嫨浜у搧"
+ >
+ <el-option
+ v-for="item in productList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏉＄爜" min-width="150">
+ <template #default="{ row }">
+ <el-form-item class="mb-0px!">
+ <el-input disabled v-model="row.productNo" />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍗曚綅" min-width="80">
+ <template #default="{ row }">
+ <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
+ </template>
+ </el-table-column>
+ <el-table-column label="浠锋牸锛堝厓锛�" min-width="120">
+ <template #default="{ row }">
+ <el-form-item class="mb-0px!">
+ <el-input disabled v-model="row.productPrice" :formatter="erpPriceInputFormatter" />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍞环锛堝厓锛�" fixed="right" min-width="140">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.contractPrice`" class="mb-0px!">
+ <el-input-number
+ v-model="row.contractPrice"
+ controls-position="right"
+ :min="0.001"
+ :precision="2"
+ class="!w-100%"
+ />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏁伴噺" prop="count" fixed="right" min-width="120">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.count`" :rules="formRules.count" class="mb-0px!">
+ <el-input-number
+ v-model="row.count"
+ controls-position="right"
+ :min="0.001"
+ :precision="3"
+ class="!w-100%"
+ />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍚堣" prop="totalPrice" fixed="right" min-width="140">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
+ <el-input disabled v-model="row.totalPrice" :formatter="erpPriceInputFormatter" />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" fixed="right" label="鎿嶄綔" width="60">
+ <template #default="{ $index }">
+ <el-button @click="handleDelete($index)" link>鈥�</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-form>
+ <el-row justify="center" class="mt-3" v-if="!disabled">
+ <el-button @click="handleAdd" round>+ 娣诲姞浜у搧</el-button>
+ </el-row>
+</template>
+<script setup lang="ts">
+import * as ProductApi from '@/api/crm/product'
+import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
+import { DICT_TYPE } from '@/utils/dict'
+
+const props = defineProps<{
+ products: undefined
+ disabled: false
+}>()
+const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑
+const formData = ref([])
+const formRules = reactive({
+ productId: [{ required: true, message: '浜у搧涓嶈兘涓虹┖', trigger: 'blur' }],
+ contractPrice: [{ required: true, message: '鍚堝悓浠锋牸涓嶈兘涓虹┖', trigger: 'blur' }],
+ count: [{ required: true, message: '浜у搧鏁伴噺涓嶈兘涓虹┖', trigger: 'blur' }]
+})
+const formRef = ref([]) // 琛ㄥ崟 Ref
+const productList = ref<ProductApi.ProductVO[]>([]) // 浜у搧鍒楄〃
+
+/** 鍒濆鍖栬缃骇鍝侀」 */
+watch(
+ () => props.products,
+ async (val) => {
+ formData.value = val
+ },
+ { immediate: true }
+)
+
+/** 鐩戝惉鍚堝悓浜у搧鍙樺寲锛岃绠楀悎鍚屼骇鍝佹�讳环 */
+watch(
+ () => formData.value,
+ (val) => {
+ if (!val || val.length === 0) {
+ return
+ }
+ // 寰幆澶勭悊
+ val.forEach((item) => {
+ if (item.contractPrice != null && item.count != null) {
+ item.totalPrice = erpPriceMultiply(item.contractPrice, item.count)
+ } else {
+ item.totalPrice = undefined
+ }
+ })
+ },
+ { deep: true }
+)
+
+/** 鏂板鎸夐挳鎿嶄綔 */
+const handleAdd = () => {
+ const row = {
+ id: undefined,
+ productId: undefined,
+ productUnit: undefined, // 浜у搧鍗曚綅
+ productNo: undefined, // 浜у搧鏉＄爜
+ productPrice: undefined, // 浜у搧浠锋牸
+ contractPrice: undefined,
+ count: 1
+ }
+ formData.value.push(row)
+}
+
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = (index: number) => {
+ formData.value.splice(index, 1)
+}
+
+/** 澶勭悊浜у搧鍙樻洿 */
+const onChangeProduct = (productId, row) => {
+ const product = productList.value.find((item) => item.id === productId)
+ if (product) {
+ row.productUnit = product.unit
+ row.productNo = product.no
+ row.productPrice = product.price
+ row.contractPrice = product.price
+ }
+}
+
+/** 琛ㄥ崟鏍￠獙 */
+const validate = () => {
+ return formRef.value.validate()
+}
+defineExpose({ validate })
+
+/** 鍒濆鍖� */
+onMounted(async () => {
+ productList.value = await ProductApi.getProductSimpleList()
+})
+</script>
--
Gitblit v1.8.0