|  |  | 
 |  |  | <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> --> | 
 |  |  |       <!--    <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> | 
 |  |  |                 <li v-permissions="['business:category:exportExcel']"><el-button type="primary" | 
 |  |  |                         @click="exportExcel">导出</el-button></li> | 
 |  |  |             </ul> | 
 |  |  |             <el-table row-key="id" :tree-props="{ children: 'childCategoryList' }" v-loading="isWorking.search" | 
 |  |  |             <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="remark" label="备注" min-width="100px"></el-table-column> | 
 |  |  | 
 |  |  |                     </template> | 
 |  |  |                 </el-table-column> | 
 |  |  |             </el-table> | 
 |  |  |             <pagination @size-change="handleSizeChange" @current-change="getList" :pagination="tableData.pagination"> | 
 |  |  |             <pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination"> | 
 |  |  |             </pagination> | 
 |  |  |         </template> | 
 |  |  |         <!-- 新建/修改 --> | 
 |  |  | 
 |  |  | 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: '' | 
 |  |  |             }, | 
 |  |  |             isShowEdit: false, | 
 |  |  |             loading: false, | 
 |  |  |             pagination: { | 
 |  |  |                 pageSize: 10, | 
 |  |  |                 page: 1, | 
 |  |  |                 total: 0, | 
 |  |  |             }, | 
 |  |  |             dataList: [] | 
 |  |  |         } | 
 |  |  |     }, | 
 |  |  |     created() { | 
 |  |  |         this.config({ | 
 |  |  |   name: 'Category', | 
 |  |  |   extends: BaseTable, | 
 |  |  |   components: { TableLayout, Pagination, OperaCategoryWindow }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       // 搜索 | 
 |  |  |       filters: { | 
 |  |  |         parentId: '' | 
 |  |  |       }, | 
 |  |  |       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() | 
 |  |  |     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) | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     methods: { | 
 |  |  |         handleEdit(row) { | 
 |  |  |             this.isShowEdit = true | 
 |  |  |             let 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() { | 
 |  |  |             const { pagination, filters } = this | 
 |  |  |             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 | 
 |  |  |             }) | 
 |  |  |         }, | 
 |  |  |     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> |