CRM-合同：完善合同表单
puhui999
2 years ago
parent
a64d4240a3
commit
ed94205fa7
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<el-row justify="end">
|
||||||
|
<el-button plain type="primary" @click="openForm">添加产品</el-button>
|
||||||
|
</el-row>
|
||||||
|
<el-table :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||||
|
<el-table-column align="center" label="产品名称" prop="name" width="160" />
|
||||||
|
<el-table-column align="center" label="产品类型" prop="categoryName" width="160" />
|
||||||
|
<el-table-column align="center" label="产品单位" prop="unit">
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="产品编码" prop="no" />
|
||||||
|
<el-table-column
|
||||||
|
:formatter="fenToYuanFormat"
|
||||||
|
align="center"
|
||||||
|
label="价格（元）"
|
||||||
|
prop="price"
|
||||||
|
width="100"
|
||||||
|
/>
|
||||||
|
<el-table-column align="center" label="数量" prop="count" width="200">
|
||||||
|
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
|
||||||
|
<el-input-number v-model="row.count" class="!w-100%" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="折扣(%)" prop="discountPercent" width="200">
|
||||||
|
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
|
||||||
|
<el-input-number v-model="row.discountPercent" class="!w-100%" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="合计" prop="totalPrice" width="100">
|
||||||
|
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
|
||||||
|
{{ getTotalPrice(row) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" fixed="right" label="操作" width="130">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="danger" @click="handleDelete(scope.row.id)"> 移除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- table 选择表单 -->
|
||||||
|
<TableSelectForm ref="tableSelectFormRef" v-model="multipleSelection" title="选择商品">
|
||||||
|
<el-table-column align="center" label="产品名称" prop="name" width="160" />
|
||||||
|
<el-table-column align="center" label="产品类型" prop="categoryName" width="160" />
|
||||||
|
<el-table-column align="center" label="产品单位" prop="unit">
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="产品编码" prop="no" />
|
||||||
|
<el-table-column
|
||||||
|
:formatter="fenToYuanFormat"
|
||||||
|
align="center"
|
||||||
|
label="价格（元）"
|
||||||
|
prop="price"
|
||||||
|
width="100"
|
||||||
|
/>
|
||||||
|
</TableSelectForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import * as ProductApi from '@/api/crm/product'
|
||||||
|
import { DICT_TYPE } from '@/utils/dict'
|
||||||
|
import { fenToYuanFormat } from '@/utils/formatter'
|
||||||
|
import { TableSelectForm } from '@/components/Table/index'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ProductList' })
|
||||||
|
withDefaults(defineProps<{ modelValue: any[] }>(), { modelValue: () => [] })
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'update:modelValue', v: any[]): void
|
||||||
|
}>()
|
||||||
|
const list = ref<ProductApi.ProductExpandVO[]>([])
|
||||||
|
const handleDelete = (id: number) => {
|
||||||
|
const index = list.value.findIndex((item) => item.id === id)
|
||||||
|
if (index !== -1) {
|
||||||
|
list.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const tableSelectFormRef = ref<InstanceType<typeof TableSelectForm>>()
|
||||||
|
const multipleSelection = ref<ProductApi.ProductExpandVO[]>([])
|
||||||
|
const openForm = () => {
|
||||||
|
tableSelectFormRef.value?.open(ProductApi.getProductPage)
|
||||||
|
}
|
||||||
|
const getTotalPrice = computed(() => (row: ProductApi.ProductExpandVO) => {
|
||||||
|
const totalPrice = (row.price * row.count * row.discountPercent) / 100
|
||||||
|
row.totalPrice = isNaN(totalPrice) ? 0 : totalPrice
|
||||||
|
return isNaN(totalPrice) ? 0 : totalPrice
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
list,
|
||||||
|
(val) => {
|
||||||
|
if (!val || val.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
emits('update:modelValue', list.value)
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
multipleSelection,
|
||||||
|
(val) => {
|
||||||
|
if (!val || val.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const ids = list.value.map((item) => item.id)
|
||||||
|
list.value.push(...multipleSelection.value.filter((item) => ids.indexOf(item.id) === -1))
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue