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