| | |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | @cell-click="cellClickEvent" |
| | | @cell-dblclick="cellClickEvent" |
| | | > |
| | | |
| | | <!-- @toolbar-button-click="toolbarButtonClickEvent"--> |
| | |
| | | <!-- 详情框 部分1--> |
| | | <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false" resize> |
| | | <el-container > |
| | | <!-- <el-header height="35px" |
| | | style="margin: 0;padding: 0"> |
| | | 这是头 |
| | | </el-header>--> |
| | | <el-header height="35px" |
| | | style="margin: 0;padding: 0"> |
| | | |
| | | <el-input v-model="showCGDH" placeholder="采购单号" disabled > |
| | | <template #prepend>采购单号:</template> |
| | | </el-input> |
| | | </el-header> |
| | | <el-main> |
| | | <template #default> |
| | | <vxe-table |
| | | border="inner" |
| | | border="default" |
| | | auto-resize |
| | | show-overflow |
| | | max-height="420" |
| | | max-height="400" |
| | | :row-config="{isHover: true}" |
| | | :show-header="false" |
| | | :sync-resize="showDetails" |
| | | :data="detailData"> |
| | | :data="detailData" |
| | | |
| | | > |
| | | <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column> |
| | | <vxe-column field="value"></vxe-column> |
| | | </vxe-table> |
| | |
| | | </el-container> |
| | | </vxe-modal> |
| | | <!-- 详情框 部分1 结束--> |
| | | |
| | | |
| | | |
| | | </el-main> |
| | | </el-container> |
| | | </template> |
| | |
| | | |
| | | }) |
| | | |
| | | |
| | | //详情框 部分2 |
| | | const showCGDH =ref(); |
| | | const showDetails =ref(false); |
| | | let detailData =[]; |
| | | const cellClickEvent = ({row}) => { |
| | | detailData = ['cgdh', 'thdh', 'h', 'xh', 'wlbh', 'wlmc', 'gys','w','g','dw','cgzt','rq','yl','sl','xsdh','je','6'].map(field => { |
| | | return { label: ModelColumnContent(field) , value: row[field] } |
| | | |
| | | }) |
| | | showDetails.value = true; |
| | | showCGDH.value = row['cgdh']; |
| | | } |
| | | |
| | | const ModelColumnContent = (text) => { |
| | |
| | | <style scoped> |
| | | :deep(.v-column-label div span){ |
| | | font-weight: bold; |
| | | font-align:center; |
| | | } |
| | | </style> |