inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-row :gutter="24" >
3     <a-col :md="5" :sm="24" >
4       <a-card :bordered="false" :loading="treeLoading">
5         <div v-if="this.orgTree!='' ">
6           <a-tree
7             style="scroll:true"
8             :treeData="orgTree"
9             v-if="orgTree.length"
10             @select="handleClick"
11             :defaultExpandAll="true"
12             :defaultExpandedKeys="defaultExpandedKeys"
13             :replaceFields="replaceFields" />
14         </div>
15         <div v-else>
16           <a-empty :image="simpleImage" />
17         </div>
18       </a-card>
19     </a-col>
20     <a-col :md="19" :sm="24">
21       <x-card v-if="hasPerm('sysOrg:page')">
22         <div slot="content" class="table-page-search-wrapper">
23           <a-form layout="inline">
24             <a-row :gutter="48">
25               <a-col :md="8" :sm="24">
26                 <a-form-item label="机构名称" >
27                   <a-input v-model="queryParam.name" allow-clear placeholder="请输入机构名称"/>
28                 </a-form-item>
29               </a-col>
30               <a-col :md="8" :sm="24">
31                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
32                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
33               </a-col>
34             </a-row>
35           </a-form>
36         </div>
37       </x-card>
38       <a-card :bordered="false">
39         <s-table
40           ref="table"
41           :columns="columns"
42           :data="loadData"
43           :alert="options.alert"
44           :rowKey="(record) => record.id"
45           :rowSelection="options.rowSelection"
46         >
47           <template slot="operator">
48             <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysOrg:add')">新增机构</a-button>
49             <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('sysPos:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
50             <x-down
51               v-if="hasPerm('sysOrg:export')"
52               ref="batchExport"
53               @batchExport="batchExport"
54             />
55           </template>
56           <span slot="action" slot-scope="text, record">
57             <a v-if="hasPerm('sysOrg:edit')" @click="$refs.editForm.edit(record)">编辑</a>
58             <a-divider type="vertical" v-if="hasPerm('sysOrg:edit') & hasPerm('sysOrg:delete')"/>
59             <a-popconfirm v-if="hasPerm('sysOrg:delete')" placement="topRight" title="确认删除?" @confirm="() => singleDelete(record)">
60               <a>删除</a>
61             </a-popconfirm>
62           </span>
63         </s-table>
64         <add-form ref="addForm" @ok="handleOk" />
65         <edit-form ref="editForm" @ok="handleOk" />
66       </a-card>
67     </a-col>
68   </a-row>
69 </template>
70 <script>
71   import { STable, XCard, XDown } from '@/components'
72   import { Empty } from 'ant-design-vue'
73   import { getOrgPage, sysOrgDelete, getOrgTree, sysOrgExport } from '@/api/modular/system/orgManage'
74   import addForm from './addForm'
75   import editForm from './editForm'
76   export default {
77     components: {
78       XDown,
79       XCard,
80       STable,
81       addForm,
82       editForm
83     },
84     data () {
85       return {
86         // 查询参数
87         queryParam: {},
88         // 表头
89         columns: [
90           {
91             title: '机构名称',
92             dataIndex: 'name'
93           },
94           {
95             title: '唯一编码',
96             dataIndex: 'code'
97           },
98           {
99             title: '排序',
100             dataIndex: 'sort'
101           },
102           {
103             title: '备注',
104             dataIndex: 'remark'
105           }
106         ],
107         // 加载数据方法 必须为 Promise 对象
108         loadData: parameter => {
109           return getOrgPage(Object.assign(parameter, this.queryParam)).then((res) => {
110             return res.data
111           })
112         },
113         orgTree: [],
114         selectedRowKeys: [],
115         selectedRows: [],
116         defaultExpandedKeys: [],
117         // 搜索的三个参数
118         expandedKeys: [],
119         searchValue: '',
120         autoExpandParent: true,
121         treeLoading: true,
122         simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
123         replaceFields: {
124           key: 'id'
125         },
126         options: {
127           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
128           rowSelection: {
129             selectedRowKeys: this.selectedRowKeys,
130             onChange: this.onSelectChange
131           }
132         }
133       }
134     },
135     created () {
136       this.getOrgTree()
137       if (this.hasPerm('sysOrg:edit') || this.hasPerm('sysOrg:delete')) {
138         this.columns.push({
139           title: '操作',
140           width: '150px',
141           dataIndex: 'action',
142           scopedSlots: { customRender: 'action' }
143         })
144       }
145     },
146     methods: {
147       /**
148        * 获取到机构树,展开顶级下树节点,考虑到后期数据量变大,不建议全部展开
149        */
150       getOrgTree () {
151         getOrgTree(Object.assign(this.queryParam)).then(res => {
152           this.treeLoading = false
153           if (!res.success) {
154             return
155           }
156           this.orgTree = res.data
157           this.queryParam.parentId = this.orgTree[0].id
158           // 全部展开,上面api方法提供的不生效,先用此方法
159           for (var item of res.data) {
160             // eslint-disable-next-line eqeqeq
161             if (item.parentId == 0) {
162               this.defaultExpandedKeys.push(item.id)
163             }
164           }
165           this.$refs.table.refresh()
166         })
167       },
168       /**
169        * 单个删除
170        */
171       singleDelete (record) {
172         const param = [{ 'id': record.id }]
173         this.sysOrgDelete(param)
174       },
175       /**
176        * 批量删除
177        */
178       batchDelete () {
179         const paramIds = this.selectedRowKeys.map((d) => {
180           return { 'id': d }
181         })
182         this.sysOrgDelete(paramIds)
183       },
184       /**
185        * 批量导出
186        */
187       batchExport () {
188         sysOrgExport().then((res) => {
189           this.$refs.batchExport.downloadfile(res)
190         })
191       },
192       /**
193        * 删除
194        */
195       sysOrgDelete (record) {
196         sysOrgDelete(record).then((res) => {
197           if (res.success) {
198             this.$message.success('删除成功')
199             this.getOrgTree()
200             this.$refs.table.clearRefreshSelected()
201           } else {
202             this.$message.error('删除失败:' + res.message)
203           }
204         }).catch((err) => {
205           this.$message.error('删除错误:' + err.message)
206         })
207       },
208       handleClick (e) {
209         this.queryParam = {
210           pid: e.toString()
211         }
212         this.$refs.table.refresh(true)
213       },
214       handleOk () {
215         this.getOrgTree()
216         this.$refs.table.refresh()
217       },
218       onSelectChange (selectedRowKeys, selectedRows) {
219         this.selectedRowKeys = selectedRowKeys
220         this.selectedRows = selectedRows
221       }
222     }
223   }
224 </script>
225 <style lang="less">
226   .table-operator {
227     margin-bottom: 18px;
228   }
229   button {
230     margin-right: 8px;
231   }
232 </style>