<script setup>
|
import {computed, onMounted, reactive, ref, watch} from "vue"
|
import {filterChanged} from "@/hook"
|
import {useI18n} from "vue-i18n"
|
import {ElMessage, ElMessageBox,} from "element-plus"
|
import request from "@/utils/request"
|
import {useRouter,useRoute} from "vue-router"
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
let rowClickIndex = ref(null)
|
const xGrid = ref()
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
id: 'OrderList',
|
showFooter: true,//显示脚
|
scrollY:{ enabled: true },//开启虚拟滚动
|
showOverflow:true,
|
|
columnConfig: {
|
// resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
//remote: true //远端筛选
|
},
|
// customConfig: {
|
// storage: true
|
// },
|
editConfig: {
|
trigger: 'click',
|
mode: 'cell',
|
showStatus: true
|
},//表头参数
|
columns:[
|
// {field: 'buildingNumber',width:120, title: '楼号',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
|
{field: 'alias', title:'其他加工',minWith:'130'},
|
{field: 'price', title:'单价',editRender: { name: 'input'}},
|
{field: 'quantity', title:'数量' },
|
{field: 'money', slots:{default:'default'}, title:'金额'}
|
],
|
//表单验证
|
editRules: {
|
price: [
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0(\.\d{1,2})?|([1-9]\d{0,4})(\.\d{1,2})?|99999(\.9{1,2})?)$/
|
if (cellValue && !regex.test(cellValue) ) {
|
return new Error(t('basicData.msg.range99999Dec2') )
|
}
|
}
|
}
|
],
|
quantity: [
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0(\.\d{1,2})?|([1-9]\d{0,4})(\.\d{1,2})?|99999(\.9{1,2})?)$/
|
if (cellValue && !regex.test(cellValue) ) {
|
return new Error(t('basicData.msg.range99999Dec2') )
|
}
|
}
|
}
|
]
|
|
},
|
toolbarConfig: {
|
buttons: [
|
{'code': 'add', 'name': '新增',status: 'primary'},
|
{'code': 'delete', 'name': '删除',status: 'primary'}
|
],
|
|
|
// import: false,
|
// export: true,
|
// print: true,
|
// zoom: true,
|
// custom: true
|
}
|
,
|
//table body实际数据
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return t('basicData.total')+':'
|
}
|
const footList = ['quantity']
|
if (footList.includes(column.field)) {
|
return sumNum(data, column.field)
|
}
|
if(column.field==='money'){
|
let count = 0
|
data.forEach(item => {
|
count+=countAmount(item)
|
})
|
return parseFloat(count.toFixed(2))
|
}
|
return ''
|
})
|
]
|
}
|
|
})
|
const gridEvents = {
|
async toolbarButtonClick({code}) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (code) {
|
case 'add': {
|
addColumn()
|
break
|
}
|
case 'delete': {
|
if(rowClickIndex.value === null){
|
ElMessage.warning('请先单击选择行')
|
return
|
}
|
deleteColum(rowClickIndex.value.id)
|
rowClickIndex.value = null
|
break
|
}
|
}
|
}
|
},
|
cellClick({ row }){
|
rowClickIndex.value = row
|
}
|
}
|
|
const sumNum = (list, field) => {
|
let count = 0
|
list.forEach(item => {
|
count += Number(item[field])
|
})
|
return count.toFixed(2)==='NaN' ? null : parseFloat(count.toFixed(2))
|
}
|
|
//用于接收父组件参数
|
let prop = defineProps({
|
otherMoney:{}
|
})
|
onMounted(()=>{
|
xGrid.value.reloadData(prop.otherMoney.filter(item => item.column.indexOf('M')>-1))
|
})
|
watch(prop,(newVal)=>{
|
xGrid.value.reloadData(prop.otherMoney.filter(item => item.column.indexOf('M')>-1))
|
})
|
|
const countAmount = (row) => {
|
const price = row.price===null?0:row.price
|
const quantity = row.quantity===null?0:row.quantity
|
return parseFloat((row.price * row.quantity).toFixed(2))
|
}
|
|
|
const validate = async () => {
|
const errMap = await xGrid.value.validate(true)
|
if (errMap) {
|
ElMessage.error(`校验不通过！`)
|
return false
|
}
|
return true
|
}
|
defineExpose({
|
validate
|
})
|
|
|
const addColumn = () => {
|
ElMessageBox.prompt( '新增列名:', {
|
confirmButtonText: '新增',
|
cancelButtonText: '取消',
|
inputPattern:/^.{1,20}$/,
|
inputErrorMessage: '请输入20个字符以内的且不为空的字符',
|
})
|
.then(({ value }) => {
|
request.post('/basicOtherMoney/save',{alias:value}).then(res=>{
|
if (res.code==='200' && res.data!==false){
|
ElMessage.success('新增成功')
|
setTimeout(()=>{
|
window.location.reload()
|
},1500)
|
|
}else{
|
ElMessage.error('新增失败,不能重复添加或超过100条列')
|
}
|
})
|
})
|
|
}
|
|
const deleteColum = (id) => {
|
ElMessageBox.confirm(
|
'确认删除此列名?',
|
'Warning',
|
{
|
confirmButtonText: '删除',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}
|
)
|
.then(() => {
|
request.post(`/basicOtherMoney/deleteById/${id}`,).then(res=>{
|
if (res.code==='200' && res.data!==false){
|
ElMessage.success('删除成功')
|
setTimeout(()=>{
|
window.location.reload()
|
},1500)
|
}else{
|
ElMessage.error('删除失败')
|
}
|
})
|
})
|
|
}
|
|
</script>
|
|
<template>
|
<div style="height: 100%;width: 100%">
|
<vxe-grid
|
@filter-change="filterChanged"
|
ref="xGrid"
|
max-height="350px"
|
:width="'100%'"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<template #default="{ row }">
|
<span>{{ countAmount(row) }} </span>
|
</template>
|
</vxe-grid>
|
|
</div>
|
|
|
</template>
|
|
<style scoped>
|
|
</style>
|
