| | |
| | | <script setup> |
| | | import {reactive, ref} from "vue"; |
| | | import {nextTick, onMounted, reactive, ref, watch} from "vue"; |
| | | import request from "@/utils/request"; |
| | | import {useI18n} from "vue-i18n"; |
| | | import {ElMessage} from "element-plus"; |
| | | import deepClone from "@/utils/deepClone"; |
| | | import {addListener, toolbarButtonClickEvent} from "@/hook/mouseMove"; |
| | | const { t } = useI18n() |
| | | |
| | | const xGrid = ref() |
| | | |
| | | const checkboxCellRender = reactive({ |
| | | name: 'VxeCheckboxGroup', |
| | | options: [ |
| | | { label: '幕墙模式', value: '1' }, |
| | | { label: '允许横排', value: '2' }, |
| | | { label: '钢化', value: '3' }, |
| | | |
| | | ] |
| | | }) |
| | | |
| | | const gridOptions = reactive({ |
| | | |
| | |
| | | scrollX:{enabled: true}, |
| | | scrollY:{ enabled: true ,gt:0},//开启虚拟滚动 |
| | | showOverflow:true, |
| | | menuConfig: { |
| | | body: { |
| | | options: [ |
| | | [ |
| | | { code: 'copyChecked', name: t('basicData.selectSame'), prefixIcon: 'vxe-icon-copy', visible: true, disabled: false }, |
| | | { code: 'copyAll', name: t('basicData.sameAfterwards'), prefixIcon: 'vxe-icon-feedback', visible: true, disabled: false }, |
| | | ] |
| | | ] |
| | | } |
| | | }, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | |
| | | mode: 'row', |
| | | showStatus: true |
| | | }, |
| | | /*formConfig: { |
| | | data: { |
| | | width: '', |
| | | height: '', |
| | | quantity: '' |
| | | }, |
| | | items: [ |
| | | { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } }, |
| | | { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } }, |
| | | { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } }, |
| | | { |
| | | itemRender: { |
| | | name: 'VxeButtonGroup', |
| | | options: [ |
| | | { type: 'submit', content: t('craft.sure'), status: 'primary' }, |
| | | { type: 'reset', content: t('product.msg.reset') } |
| | | ] |
| | | } |
| | | } |
| | | ] |
| | | },*/ |
| | | |
| | | columns:[ |
| | | {type:'expand',fixed:"left",slots: { content:'content' },width: 50}, |
| | | {field: 'checkbox', title: '允许横排', width: 100}, |
| | | {field: 'checkbox', title: '钢化', width: 70}, |
| | | {field: 'processId',width: 150, title: t('processCard.processId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'id',width: 70, title: '层',filters:[{ data: '' }], slots: { default: 'state',filter: 'num2_filter' }}, |
| | | {field: 'id',width: 150, title: '总层数',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'id',width: 100, title: '规格',filters:[{ data: '' }], slots: { default: 'state',filter: 'num2_filter' }}, |
| | | {field: 'quantity',width: 150, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderDetail.productName',width: 150, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderDetail.computeGrossArea',width: 150, title: t('order.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: '',width: 70, title: 'merge'} |
| | | {type: 'seq', title: t('basicData.Number'), width: 80}, |
| | | {field: 'curtain_wall',title: '幕墙模式',width: 80, slots: { default: 'state1' }}, |
| | | {field: "allow_rotate", title: '允许横排', width: 80, slots: { default: 'state2' }}, |
| | | {field: "tempering", title: '钢化', width: 80, slots: { default: 'state3' }}, |
| | | |
| | | {field: 'processId',width: 150, title: t('processCard.processId'), sortable: true}, |
| | | {field: 'technologyNumber',width: 70, title: '层', sortable: true}, |
| | | {field: 'total_layers',width: 150, title: '总层数', sortable: true}, |
| | | {field: 'TotalNumber',width: 150, title: '规格', sortable: true}, |
| | | {field: 'total_num',width: 150, title: t('order.quantity'), sortable: true}, |
| | | {field: 'glass_child',width: 150, title: t('order.product'), sortable: true}, |
| | | {field: 'project', width:150, title: t('order.project'), showOverflow: "ellipsis"}, |
| | | {field: 'total_area',width: 150, title: t('order.area'), sortable: true}, |
| | | |
| | | |
| | | ],//表头参数 |
| | | data:null,//表格数据 |
| | | |
| | | toolbarConfig: { |
| | | buttons: [], |
| | | slots:{ |
| | | buttons: "toolbar_buttons" |
| | | }, |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | |
| | | }) |
| | | let emit = defineEmits([ |
| | | 'changeDialog' |
| | | ]) |
| | | let Membrane = ref('选择膜系') |
| | | |
| | | const changeOrderType = async ()=>{ |
| | | await emit('changeDialog',Membrane.value) |
| | | Membrane.value = null |
| | | let emit = defineEmits([ |
| | | 'changeDialog','upProcessId', 'sendData' |
| | | ]); |
| | | |
| | | |
| | | const selectFullData = () => { |
| | | return xGrid.value.getTableData().fullData |
| | | } |
| | | |
| | | |
| | | const props = defineProps({ |
| | | tableData: Array, |
| | | processId: null, |
| | | technologyNumber: null, |
| | | patchState: null, |
| | | glassThickness: String, // 添加玻璃厚度属性 |
| | | glassType: String // 添加玻璃类型属性 |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | watch(() => props.tableData, async (newData) => { |
| | | if (Array.isArray(newData)) { |
| | | addListener(xGrid.value,gridOptions) |
| | | console.log(newData) |
| | | xGrid.value.loadData(deepClone(newData)) |
| | | const data = xGrid.value.getTableData().fullData |
| | | data.forEach(item => { |
| | | item.tempering = item.tempering === 1; |
| | | item.allow_rotate = item.allow_rotate === 1; |
| | | item.curtain_wall = item.curtain_wall === 1; |
| | | }) |
| | | } |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | let process_id = ref() |
| | | //获取流程卡号详情 |
| | | let rowClickIndex = ref(null) |
| | | const gridEvents = { |
| | | cellClick({row}) { |
| | | rowClickIndex.value = row |
| | | // Emit 事件将更新后的值传递给父组件 |
| | | emit('upProcessId', rowClickIndex.value.processId,rowClickIndex.value.patch_state,rowClickIndex.value.technologyNumber); |
| | | emit('updateTechnologyNumber', rowClickIndex.value.processId,rowClickIndex.value.patch_state,rowClickIndex.value.technologyNumber); |
| | | }, |
| | | menuClick ({ menu, row, column }) { |
| | | const $grid = xGrid.value |
| | | if ($grid) { |
| | | switch (menu.code) { |
| | | |
| | | case 'copyChecked' :{ |
| | | let result = toolbarButtonClickEvent() |
| | | if(result){ |
| | | const dataList = xGrid.value.getTableData().visibleData |
| | | let firstVal=null; |
| | | if(result.cell.indexOf('.')>-1){ |
| | | firstVal = eval("dataList["+result.start +"]."+result.cell) |
| | | }else { |
| | | firstVal=dataList[result.start][result.cell]; |
| | | } |
| | | dataList.forEach((item,index) =>{ |
| | | if(index>=result.start && index<=result.end){ |
| | | //取消选中 |
| | | if(parseInt(firstVal)<=0){ |
| | | xGrid.value.setCheckboxRow(item, false); |
| | | } |
| | | if(result.cell.indexOf('.')>-1){ |
| | | const columnArr = result.cell.split('.') |
| | | item[columnArr[0]][columnArr[1]] = firstVal |
| | | }else{ |
| | | item[result.cell] = firstVal |
| | | } |
| | | |
| | | } |
| | | }) |
| | | } |
| | | break |
| | | } |
| | | case 'copyAll' :{ |
| | | let result = toolbarButtonClickEvent() |
| | | if(result){ |
| | | const dataList = xGrid.value.getTableData().visibleData |
| | | let firstVal=null; |
| | | if(result.cell.indexOf('.')>-1){ |
| | | firstVal = eval("dataList["+result.start +"]."+result.cell) |
| | | }else { |
| | | firstVal=dataList[result.start][result.cell]; |
| | | } |
| | | dataList.forEach((item,index) =>{ |
| | | if(index>=result.start){ |
| | | //取消选中 |
| | | if(parseInt(firstVal)<=0){ |
| | | xGrid.value.setCheckboxRow(item, false); |
| | | } |
| | | if(result.cell.indexOf('.')>-1){ |
| | | const columnArr = result.cell.split('.') |
| | | item[columnArr[0]][columnArr[1]] = firstVal |
| | | }else{ |
| | | item[result.cell] = firstVal |
| | | } |
| | | |
| | | } |
| | | }) |
| | | } |
| | | break |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | defineExpose({selectFullData}) |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | <span>流程卡</span> |
| | | <vxe-grid |
| | | size="small" |
| | | @filter-change="filterChanged" |
| | | height="100%" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #state1="{ row,column}"> |
| | | <el-checkbox |
| | | v-model="row.curtain_wall"/> |
| | | </template> |
| | | <template #state2="{ row,column}"> |
| | | <el-checkbox |
| | | v-model="row.allow_rotate"/> |
| | | </template> |
| | | <template #state3="{ row,column}"> |
| | | <el-checkbox |
| | | v-model="row.tempering"/> |
| | | </template> |
| | | </vxe-grid> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | :deep(.vxe-tools--operate){ |
| | | height: 20px; |
| | | margin-top: -20px; |
| | | } |
| | | .vxe-grid { |
| | | /* 禁用浏览器默认选中 */ |
| | | -webkit-user-select: none; |
| | | -moz-user-select: none; |
| | | -ms-user-select: none; |
| | | user-select: none; |
| | | } |
| | | |
| | | </style> |