| New file |
| | |
| | | <script setup> |
| | | 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({ |
| | | |
| | | height:'100%', |
| | | loading: false, |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | | align: 'center',//文字居中 |
| | | stripe:true,//斑马纹 |
| | | rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮 |
| | | id: 'ComputeCard', |
| | | 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 |
| | | }, |
| | | filterConfig: { //筛选配置项 |
| | | remote: true |
| | | }, |
| | | customConfig: { |
| | | storage: true |
| | | }, |
| | | editConfig: { |
| | | trigger: 'click', |
| | | mode: 'row', |
| | | showStatus: true |
| | | }, |
| | | |
| | | columns:[ |
| | | {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: [], |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | |
| | | }) |
| | | |
| | | 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> |
| | | <div style="width: 100%;height: 100%"> |
| | | <span>流程卡</span> |
| | | <vxe-grid |
| | | size="small" |
| | | height="100%" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | > |
| | | <template #num2_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')" @change="changeFilterEvent($event, option, $panel)"> |
| | | <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option> |
| | | <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option> |
| | | </vxe-select> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <input |
| | | |
| | | type="type" |
| | | v-model="option.data" |
| | | @keyup.enter.native="$panel.confirmFilter()" |
| | | @input="changeFilterEvent($event, option, $panel)"/> |
| | | </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> |