| | |
| | | <div class="demo-drawer__content"> |
| | | <el-form label-position="top" label-width="120px" :model="addSampleFrom"> |
| | | <el-form-item> |
| | | <el-button type="primary">选择物料</el-button> |
| | | <el-button type="primary" @click="chooseMaterialVisible = true">选择物料</el-button> |
| | | </el-form-item> |
| | | <div class="materialParams-card"> |
| | | <el-row class="materialParams-top"> |
| | |
| | | </el-form> |
| | | </div> |
| | | </el-drawer> |
| | | <el-dialog title="选择物料" :visible.sync="chooseMaterialVisible"> |
| | | <div class="dialog-content"> |
| | | <!-- Left side tree structure --> |
| | | <div class="tree-container"> |
| | | <span class="all"> 全部</span> |
| | | <el-tree :data="treeData" @node-click="handleNodeClick" ></el-tree> |
| | | </div> |
| | | <!-- Right side material list --> |
| | | <div class="table-container"> |
| | | <el-table |
| | | ref="todoListRef" |
| | | :data="selectedNodeMaterials" |
| | | style="width: 100%" |
| | | highlight-current-row |
| | | @row-click="handleSelectionChange" |
| | | :header-row-class-name="headerBg" |
| | | > |
| | | <el-table-column |
| | | label="物料编号" |
| | | prop="number"> |
| | | <template slot-scope="scope"> |
| | | <el-radio v-model="radioSelected" :label="scope.row.number" @change.native='handleSelectionChange(scope.row)'> </el-radio> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="物料名称"></el-table-column> |
| | | </el-table> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="pageParams.pageNo" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="pageParams.pageSize" |
| | | :total="pageParams.total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="chooseMaterialVisible = false">取 消</el-button> |
| | | <el-button type="primary" >确定选择</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | total: 3 |
| | | }, |
| | | addSampleVisible: false, |
| | | chooseMaterialVisible: false, |
| | | direction: 'rtl', |
| | | addSampleFrom: {} |
| | | addSampleFrom: {}, |
| | | treeData: [{ |
| | | id: 1, |
| | | label: '一级 1', |
| | | children: [{ |
| | | id: 4, |
| | | label: '二级 1-1', |
| | | children: [{ |
| | | id: 9, |
| | | label: '三级 1-1-1' |
| | | }, { |
| | | id: 10, |
| | | label: '三级 1-1-2' |
| | | }] |
| | | }] |
| | | }, { |
| | | id: 2, |
| | | label: '一级 2', |
| | | children: [{ |
| | | id: 4, |
| | | label: '二级 2-1', |
| | | children: [{ |
| | | id: 9, |
| | | label: '三级 2-1-1' |
| | | }, { |
| | | id: 10, |
| | | label: '三级 2-1-2' |
| | | }] |
| | | }] |
| | | |
| | | }], |
| | | selectedNodeMaterials: [ |
| | | { |
| | | number: '12345', |
| | | name: '测试数据1' |
| | | }, |
| | | { |
| | | number: 'Y111111', |
| | | name: '测试数据2' |
| | | }], |
| | | radioSelected: null, |
| | | multipleSelection: '' |
| | | } |
| | | }, |
| | | methods: { |
| | | handleSelectionChange(val) { |
| | | console.log(val) |
| | | this.radioSelected = val.number // 选中行的number |
| | | this.multipleSelection = val // 选中的一行数据 |
| | | }, |
| | | handleSizeChange(pageSize) { |
| | | this.pageParams.pageSize = pageSize |
| | | }, |
| | | handleCurrentChange(pageNo) { |
| | | this.pageParams.pageNo = pageNo |
| | | }, |
| | | headerBg({ row, rowIndex }) { |
| | | console.log('rowIndex', rowIndex) |
| | | if (rowIndex === 0) { |
| | | return 'headerBgClass' |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .dialog-content{ |
| | | display: flex; |
| | | .tree-container{ |
| | | flex: 30%; |
| | | // background-color: #bfa; |
| | | margin-right: 12px; |
| | | margin-left: 12px; |
| | | .all{ |
| | | display: block; |
| | | color: #0077DB; |
| | | padding: 5px; |
| | | } |
| | | } |
| | | .table-container{ |
| | | flex: 70%; |
| | | // background-color: #0077DB; |
| | | margin-left: 12px; |
| | | .el-table{ |
| | | .el-table__header_wrapper{ |
| | | .has-gutter{ |
| | | .headerBgClass{ |
| | | background-color: #606266; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .el-pagination{ |
| | | margin-top: 12px; |
| | | } |
| | | } |
| | | } |
| | | .forInspectionDetail-main{ |
| | | min-height: calc(100vh - 88px); |
| | | display: flex; |