| <template> | 
|   <TableLayout class="menu-layout" :permissions="['business:bjparam:query']"> | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <ul class="toolbar" v-permissions="['business:bjparam:create', 'business:bjparam:delete', 'business:bjparam:sort']"> | 
|         <li><el-button type="primary" @click="$refs.OperaBjParamWindow.open('新建报价配置',null,null,pList)" icon="el-icon-plus" v-permissions="['business:bjparam:create']">新建</el-button></li> | 
|         <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:bjparam:delete']">删除</el-button></li> | 
|       </ul> | 
|       <el-table | 
|           ref="table1" | 
|           v-loading="isWorking.search" | 
|           :data="tableData.list" | 
|           :tree-props="{children: 'children', hasChildren: 'hasChildren'}" | 
|           row-key="id" | 
|           stripe | 
|           default-expand-all | 
|           @selection-change="handleSelectionChange" | 
|       > | 
|         <el-table-column type="selection" width="55" fixed="left"></el-table-column> | 
|         <el-table-column prop="name" label="名称"  fixed="left" min-width="160px"></el-table-column> | 
|         <el-table-column prop="rate" label="比例(100倍)" min-width="120px" class-name="table-column-icon"> </el-table-column> | 
|         <el-table-column prop="type" label="类型" min-width="120px" class-name="table-column-icon"> | 
|           <template slot-scope="{row}"> | 
|             <span v-if="row.type == 0">毛坯</span> | 
|             <span v-if="row.type == 1">精装</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="sortnum" label="排序码" min-width="140px"></el-table-column> | 
| <!-- | 
|         <el-table-column prop="remark" label="备注" min-width="120px"></el-table-column> | 
| --> | 
|         <el-table-column prop="editorName" label="操作人" min-width="100px"> </el-table-column> | 
|         <el-table-column prop="editDate" label="操作时间" min-width="140px"></el-table-column> | 
|         <el-table-column | 
|             v-if="containPermissions(['business:bjparam:update', 'business:bjparam:create', 'business:bjparam:delete'])" | 
|             label="操作" | 
|             min-width="220" | 
|             fixed="right" | 
|         > | 
|           <template slot-scope="{row}"> | 
|             <el-button type="text" icon="el-icon-edit" @click="$refs.OperaBjParamWindow.open('编辑报价配置', row,null,pList)" v-permissions="['business:bjparam:update']">编辑</el-button> | 
|             <el-button type="text" icon="el-icon-plus" v-if="!row.parentId " @click="$refs.OperaBjParamWindow.open('新建子配置', null, row,pList)" v-permissions="['business:bjparam:create']">新建子配置</el-button> | 
|             <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['business:bjparam:delete']">删除</el-button> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|     </template> | 
|     <!-- 新建/修改 --> | 
|     <OperaBjParamWindow ref="OperaBjParamWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import TableLayout from '@/layouts/TableLayout' | 
| import BaseTable from '@/components/base/BaseTable' | 
| import { fetchTree, updateSort } from '@/api/business/bjParam' | 
| import OperaBjParamWindow from '@/components/business/OperaBjParamWindow' | 
| export default { | 
|   name: 'bjParam', | 
|   extends: BaseTable, | 
|   components: { OperaBjParamWindow,  TableLayout }, | 
|   data () { | 
|     return { | 
|       // 是否正在处理中 | 
|       pList:[], | 
|       isWorking: { | 
|         sort: false | 
|       } | 
|     } | 
|   }, | 
|   methods: { | 
|     // 查询数据 | 
|     handlePageChange () { | 
|       this.isWorking.search = true | 
|       fetchTree() | 
|         .then(records => { | 
|           this.pList = records || [] | 
|           for (const p of  this.pList ) { | 
|             if (p.hasChildren && p.children) { | 
|               for (const item of p.children) { | 
|                 item.hasChildren = true | 
|                 item.children = [] | 
|               } | 
|             } | 
|           } | 
|           this.tableData.list = this.pList | 
|           console.log(this.tableData.list) | 
|         }) | 
|         .catch(e => { | 
|           this.$tip.apiFailed(e) | 
|         }) | 
|         .finally(() => { | 
|           this.isWorking.search = false | 
|         }) | 
|     }, | 
|     // 查询父节点 | 
|     __findParent (id, parent) { | 
|       if (parent.children === 0) { | 
|         return | 
|       } | 
|       for (const menu of parent.children) { | 
|         if (menu.id === id) { | 
|           return parent | 
|         } | 
|         if (menu.children.length > 0) { | 
|           const m = this.__findParent(id, menu) | 
|           if (m != null) { | 
|             return m | 
|           } | 
|         } | 
|       } | 
|       return null | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       module: '报价计算器配置', | 
|       api: '/business/bjParam' | 
|     }) | 
|     this.search() | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| @import "@/assets/style/variables.scss"; | 
| .menu-layout { | 
|   /deep/ .table-content { | 
|     margin-top: 0; | 
|   } | 
| } | 
| // 图标列 | 
| .table-column-icon { | 
|   // element-ui图标 | 
|   i { | 
|     background-color: $primary-color; | 
|     opacity: 0.72; | 
|     font-size: 20px; | 
|     color: #fff; | 
|     padding: 4px; | 
|     border-radius: 50%; | 
|   } | 
|   // 自定义图标 | 
|   [class^="eva-icon-"] { | 
|     width: 20px; | 
|     height: 20px; | 
|     background-size: 16px; | 
|     vertical-align: middle; | 
|   } | 
| } | 
| </style> |