|
|
@@ -1,62 +1,140 @@
|
|
|
<template>
|
|
|
<el-card style="margin: 15px">
|
|
|
- <a-tabs v-model="activeKey">
|
|
|
- <a-tab-pane
|
|
|
- v-for="item in tabs"
|
|
|
- :key="item.name"
|
|
|
- :tab="item.title"
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div class="table-operator" style="margin: 5px 0;float: right">
|
|
|
+ <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
|
|
+ <a-dropdown v-if="selectedRowKeys.length > 0">
|
|
|
+ <a-menu slot="overlay">
|
|
|
+ <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ <a-button style="margin-left: 8px">
|
|
|
+ 批量操作 <a-icon type="down" />
|
|
|
+ </a-button>
|
|
|
+ </a-dropdown>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查询区域 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
+ <a-form-item>
|
|
|
+ <a-input
|
|
|
+ v-model="queryParam.glb"
|
|
|
+ style="width: 150px"
|
|
|
+ placeholder="职务名称"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" @click="searchQuery">查询</a-button>
|
|
|
+ <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- table区域-begin -->
|
|
|
+ <div>
|
|
|
+ <div class="ant-alert ant-alert-info" style="margin: 16px 0;">
|
|
|
+ <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
|
|
+ <a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ ref="table"
|
|
|
+ size="middle"
|
|
|
+ bordered
|
|
|
+ row-key="id"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="dataSource"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="loading"
|
|
|
+ :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
|
+ @change="handleTableChange"
|
|
|
>
|
|
|
- <component
|
|
|
- :is="item.name"
|
|
|
- v-if="activeKey === item.name"
|
|
|
- />
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
+ <template slot="status" slot-scope="text, record">
|
|
|
+ <a-switch v-model="record['status']" checked-children="启用" un-checked-children="停用" @change="changeStatus($event,record)" />
|
|
|
+ </template>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-button type="primary" @click="handleEdit(record)">
|
|
|
+ 编辑
|
|
|
+ </a-button>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+
|
|
|
+ <a-dropdown>
|
|
|
+ <a-button class="ant-dropdown-link" type="primary">
|
|
|
+ 操作权限 <a-icon type="down" />
|
|
|
+ </a-button>
|
|
|
+ <a-menu slot="overlay">
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;" @click="app(record)">APP功能菜单</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;" @click="pc(record)">PC功能菜单</a>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
|
|
+ <a-button type="danger">
|
|
|
+ 删除
|
|
|
+ </a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ <check-and-edit-model ref="modalForm" @ok="modalFormOk" />
|
|
|
+ <right-model ref="rightModal" @ok="updateQueryParam" />
|
|
|
+ </div>
|
|
|
+ <!-- table区域-end -->
|
|
|
+ <!-- 表单区域 -->
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import fd from './view/fd'
|
|
|
-import bl from './view/fd'
|
|
|
-import dc from './view/fd'
|
|
|
-import gl from './view/fd'
|
|
|
-import jc from './view/fd'
|
|
|
-import wjc from './view/fd'
|
|
|
+import { listMixin } from '@/mixin/listMixin'
|
|
|
+import columns from './indexColumns'
|
|
|
+import CheckAndEditModel from './CheckAndEditModel'
|
|
|
+import rightModel from '@/components/RightModel'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- fd,
|
|
|
- bl,
|
|
|
- dc,
|
|
|
- gl,
|
|
|
- jc,
|
|
|
- wjc
|
|
|
+ CheckAndEditModel,
|
|
|
+ rightModel
|
|
|
},
|
|
|
+ mixins: [listMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
- activeKey: 'fd',
|
|
|
- tabs: [{
|
|
|
- title: '分段分相绝缘器',
|
|
|
- name: 'fd'
|
|
|
- }, {
|
|
|
- title: '避雷器',
|
|
|
- name: 'bl'
|
|
|
- }, {
|
|
|
- title: '地磁感应装置',
|
|
|
- name: 'dc'
|
|
|
- }, {
|
|
|
- title: '隔离开关',
|
|
|
- name: 'gl'
|
|
|
- }, {
|
|
|
- title: '交叉线岔',
|
|
|
- name: 'jc'
|
|
|
- }, {
|
|
|
- title: '无交叉线岔',
|
|
|
- name: 'wjc'
|
|
|
- }]
|
|
|
+ // 查询条件
|
|
|
+ queryParam: {},
|
|
|
+ // 表头
|
|
|
+ columns: columns(this),
|
|
|
+ url: {
|
|
|
+ list: '/business/catenary/bus/zzdzxx/list',
|
|
|
+ delete: '/business/catenary/bus/zzdzxx/',
|
|
|
+ exportXlsUrl: '/exportXlsUrl',
|
|
|
+ importExcelUrl: `${process.env.VUE_APP_BASE_API}/importExcelUrl`
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- computed: {},
|
|
|
- methods: {}
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeStatus(val, row) {
|
|
|
+ console.log(val, row.id)
|
|
|
+ },
|
|
|
+ app(data) {
|
|
|
+ this.$refs.rightModal.title = 'app菜单权限'
|
|
|
+ this.$refs.rightModal.treeKey = '/treeKey'
|
|
|
+ this.$refs.rightModal.treeList = '/treeList'
|
|
|
+ this.$refs.rightModal.show()
|
|
|
+ },
|
|
|
+ pc(data) {
|
|
|
+ this.$refs.rightModal.title = 'pc菜单权限'
|
|
|
+ this.$refs.rightModal.treeKey = '/treeKey'
|
|
|
+ this.$refs.rightModal.treeList = '/treeList'
|
|
|
+ this.$refs.rightModal.show()
|
|
|
+ },
|
|
|
+ updateQueryParam(data) {
|
|
|
+ this.queryParam.unit = data.id
|
|
|
+ this.queryParam.unitName = data.departName
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|