<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> 
 |