<template> 
 | 
    <TableLayout> 
 | 
        <!-- 搜索表单 --> 
 | 
      <!--    <el-form ref="searchForm" slot="search-form" label-width="100px" inline> 
 | 
           <el-form-item label="状态" prop="status"> 
 | 
               <el-select v-model="filters.status" placeholder="请选择"> 
 | 
                   <el-option label="启用" value="0"></el-option> 
 | 
                   <el-option label="禁用" value="1"></el-option> 
 | 
               </el-select> 
 | 
           </el-form-item> 
 | 
           <section> 
 | 
               <el-button type="primary" @click="search">搜索</el-button> 
 | 
               <el-button @click="reset">重置</el-button> 
 | 
           </section> 
 | 
         </el-form>--> 
 | 
        <!-- 表格和分页 --> 
 | 
        <template v-slot:table-wrap> 
 | 
            <ul class="toolbar" v-permissions="['business:category:create', 'business:category:delete']"> 
 | 
                <li><el-button type="primary" @click="handleEdit()" icon="el-icon-plus" 
 | 
                        v-permissions="['business:category:create']">新建</el-button></li> 
 | 
                <li v-permissions="['business:category:exportExcel']"><el-button type="primary" 
 | 
                        @click="exportExcel">导出</el-button></li> 
 | 
            </ul> 
 | 
            <el-table :height="tableHeightNew" row-key="id" :tree-props="{ children: 'childCategoryList' }" v-loading="isWorking.search" 
 | 
                :data="dataList" stripe @selection-change="handleSelectionChange"> 
 | 
                <el-table-column prop="name" label="分类名称" min-width="100px"></el-table-column> 
 | 
                 <el-table-column prop="bizType" label="业务类型" min-width="100px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                      <span  v-if="row.bizType ==0">访客车辆</span> 
 | 
                      <span  v-else-if="row.bizType ==1">外协运输车辆</span> 
 | 
                      <span  v-else-if="row.bizType ==2">市公司卸货车辆</span> 
 | 
                      <span  v-else-if="row.bizType ==3">加工烟卸货车辆</span> 
 | 
                      <span  v-else-if="row.bizType ==4">安泰物流公务用车</span> 
 | 
                      <span  v-else-if="row.bizType ==5">安泰物流货运车辆</span> 
 | 
                      <span  v-else >-</span> 
 | 
                    </template> 
 | 
              </el-table-column> 
 | 
              <el-table-column prop="remark" label="备注" min-width="100px"></el-table-column> 
 | 
              <!-- <el-table-column prop="status" label="状态" min-width="100px"> 
 | 
                  <template slot-scope="{row}"> 
 | 
                      <span v-if="row.status === 0">启用</span> 
 | 
                      <span v-if="row.status === 1">禁用</span> 
 | 
                  </template> 
 | 
</el-table-column> --> 
 | 
                <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column> 
 | 
                <el-table-column v-if="containPermissions(['business:category:update', 'business:category:delete'])" 
 | 
                    label="操作" min-width="120" fixed="right"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <el-button type="text" @click="handleEdit(row)" icon="el-icon-edit" 
 | 
                            v-permissions="['business:category:update']">编辑</el-button> 
 | 
                        <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" 
 | 
                            v-permissions="['business:category:delete']">删除</el-button> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination"> 
 | 
            </pagination> 
 | 
        </template> 
 | 
        <!-- 新建/修改 --> 
 | 
        <OperaCategoryWindow v-if="isShowEdit" @close="isShowEdit = false" ref="operaCategoryWindow" 
 | 
            @success="getList" /> 
 | 
    </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import OperaCategoryWindow from './components/OperaCategoryWindow' 
 | 
import { fetchList, deleteById } from '@/api/business/category.js' 
 | 
export default { 
 | 
  name: 'Category', 
 | 
  extends: BaseTable, 
 | 
  components: { TableLayout, Pagination, OperaCategoryWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 搜索 
 | 
      filters: { 
 | 
        parentId: '', 
 | 
        type: 1 
 | 
      }, 
 | 
      isShowEdit: false, 
 | 
      loading: false, 
 | 
      pagination: { 
 | 
        pageSize: 10, 
 | 
        page: 1, 
 | 
        total: 0 
 | 
      }, 
 | 
      dataList: [] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      module: '车辆信息表', 
 | 
      api: '/business/category', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'id' 
 | 
    }) 
 | 
    this.getList() 
 | 
  }, 
 | 
  methods: { 
 | 
    handleEdit (row) { 
 | 
      this.isShowEdit = true 
 | 
      const str = row && row.id ? '编辑车辆分类' : '新建车辆分类' 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.operaCategoryWindow.open(str) 
 | 
        this.$refs.operaCategoryWindow.getList() 
 | 
        if (row && row.id) { 
 | 
          this.$refs.operaCategoryWindow.getDetail(row.id) 
 | 
        } 
 | 
      }) 
 | 
    }, 
 | 
    deleteById (row) { 
 | 
      this.$confirm('您确认要删除该分类吗', '温馨提示', { 
 | 
        confirmButtonText: '确定', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then(() => { 
 | 
        deleteById(row.id).then(res => { 
 | 
          this.getList() 
 | 
        }) 
 | 
      }) 
 | 
    }, 
 | 
    getList (page) { 
 | 
      const { pagination, filters } = this 
 | 
      if (page) { 
 | 
        pagination.page = page 
 | 
      } 
 | 
      this.loading = true 
 | 
      fetchList({ 
 | 
        model: { ...filters }, 
 | 
        capacity: pagination.pageSize, 
 | 
        page: pagination.page 
 | 
      }).then(res => { 
 | 
        this.loading = false 
 | 
        this.dataList = res.records || [] 
 | 
        this.pagination.total = res.total || 0 
 | 
      }, () => { 
 | 
        this.loading = false 
 | 
      }) 
 | 
    }, 
 | 
    handleSizeChange (val) { 
 | 
      this.pagination.pageSize = val 
 | 
      this.getList(1) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |