| | |
| | | import {changeFilterEvent, filterChanged} from "@/hook" |
| | | import {useI18n} from "vue-i18n" |
| | | import request from "@/utils/request" |
| | | import footSum from "@/hook/footSum"; |
| | | const { t } = useI18n() |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | |
| | | align: 'center',//文字居中 |
| | | stripe:true,//斑马纹 |
| | | showOverflow:true, |
| | | showFooter: true,//显示脚 |
| | | rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮 |
| | | virtualScroll: true, // 开启虚拟滚动功能 |
| | | id: 'OrderList', |
| | | id: 'OrderDetail', |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | |
| | | customConfig: { |
| | | storage: true |
| | | }, |
| | | |
| | | mouseConfig:{selected: true},//鼠标选中 |
| | | keyboardConfig:{ |
| | | isArrow: true, |
| | | isDel: true, |
| | | isEnter: true, |
| | | isTab: true, |
| | | isEdit: true, |
| | | isChecked: true |
| | | }, |
| | | |
| | | columns:[ |
| | | {type: 'seq', title: t('basicData.Number'), width: 80 }, |
| | | // {field: 'buildingNumber',width:120, title: '楼号',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'buildingNumber',width:120, title: t('order.buildingNumber'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'productId',width:140, title: t('order.productId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'productName',width:300, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | //{field: 'price',width:140, title: t('order.price'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'otherColumns.S01',width:140, title: '编号',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | //{field: 'grossAmount',width:160, title: t('order.grossAmount'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'width',width:120, title: t('order.width') ,editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'height',width:140, title: t('order.height'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'quantity',width:140, title: t('order.quantity'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'processingNote',width:200, title: t('order.processingNote'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'price',width:140, title: t('order.price'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'area',width:150, title: t('order.trueArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'grossArea',width:160, title: t('order.trueGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'computeArea',width:180, title: t('order.computeArea'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'computeGrossArea',width:200, title: t('order.computeGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'processingNote',width:200, title: t('order.processingNote'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'perimeter',width:200, title: t('order.perimeter'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'remarks',width:140, title: t('basicData.remarks'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'shape',width:120, |
| | | title: t('order.shape'), |
| | |
| | | {field: 'edgingType',width:160, title: t('order.edgingType'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | |
| | | ], |
| | | toolbarConfig: { |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | |
| | | footerMethod ({ columns, data }) {//页脚函数 |
| | | return[ |
| | | columns.map((column, columnIndex) => { |
| | | if (columnIndex === 0) { |
| | | return t('basicData.total') |
| | | } |
| | | const List = ["quantity",'grossArea','area','computeGrossArea','computeArea','perimeter'] |
| | | if (List.includes(column.field)) { |
| | | return footSum(data, column.field) |
| | | } |
| | | return '' |
| | | }) |
| | | ] |
| | | } |
| | | }) |
| | | |
| | | let props = defineProps({ |
| | | orderId:null |
| | | }) |
| | | onMounted(()=>{ |
| | | request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{ |
| | | xGrid.value.reloadData(res.data) |
| | | }) |
| | | onMounted(async ()=>{ |
| | | await getColumns() |
| | | await getDetail() |
| | | }) |
| | | watch(()=>props.orderId,(newValue)=>{ |
| | | request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{ |
| | | xGrid.value.reloadData(res.data) |
| | | }) |
| | | getDetail() |
| | | }) |
| | | |
| | | const getColumns = async () => { |
| | | await request.post(`/basicOtherMoney/findAllByState`).then(res=>{ |
| | | res.data.forEach(item => { |
| | | let column = { |
| | | field: `otherColumns.${item.column}`, |
| | | width:100, |
| | | title: item.alias, |
| | | editRender: { |
| | | name: 'input', |
| | | } |
| | | } |
| | | //columns.push(column) |
| | | gridOptions.columns.push(column) |
| | | |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | const getDetail = async ()=> { |
| | | await request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{ |
| | | res.data.forEach(item => { |
| | | item.otherColumns = JSON.parse(item.otherColumns) |
| | | }) |
| | | xGrid.value.reloadData(res.data) |
| | | }) |
| | | } |
| | | |
| | | const handleKeyDown = (evnt) =>{ |
| | | |
| | | if(evnt.$event.keyCode === 38 ){ |
| | | let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) - 1; |
| | | if (nextRowIndex < xGrid.value.getTableData().fullData.length && nextRowIndex>=0) { |
| | | xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]); |
| | | } |
| | | |
| | | } |
| | | if(evnt.$event.keyCode === 40 ){ |
| | | let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) + 1; |
| | | if (nextRowIndex < xGrid.value.getTableData().fullData.length) { |
| | | xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]); |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | @keydown="handleKeyDown" |
| | | > |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |