blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysPos:page')">
4       <div slot="content" class="table-page-search-wrapper">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="职位名称" >
9                 <a-input v-model="queryParam.name" allow-clear placeholder="请输入职位名称"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
13               <a-form-item label="唯一编码" >
14                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码" />
15               </a-form-item>
16             </a-col>
17             <a-col :md="8" :sm="24">
18               <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
19               <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
20             </a-col>
21           </a-row>
22         </a-form>
23       </div>
24     </x-card>
25     <a-card :bordered="false">
26       <s-table
27         ref="table"
28         :columns="columns"
29         :data="loadData"
30         :alert="options.alert"
31         :rowKey="(record) => record.id"
32         :rowSelection="options.rowSelection"
33       >
34         <template slot="operator" v-if="hasPerm('sysPos:add')">
35           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysPos:add')">新增职位</a-button>
36           <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('sysPos:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
37           <x-down
38             v-if="hasPerm('sysPos:export')"
39             ref="batchExport"
40             @batchExport="batchExport"
41           />
42         </template>
43         <span slot="action" slot-scope="text, record">
44           <a v-if="hasPerm('sysPos:edit')" @click="$refs.editForm.edit(record)">编辑</a>
45           <a-divider type="vertical" v-if="hasPerm('sysPos:edit') & hasPerm('sysPos:delete')"/>
46           <a-popconfirm v-if="hasPerm('sysPos:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
47             <a>删除</a>
48           </a-popconfirm>
49         </span>
50       </s-table>
51       <add-form ref="addForm" @ok="handleOk" />
52       <edit-form ref="editForm" @ok="handleOk" />
53     </a-card>
54   </div>
55 </template>
56
57 <script>
58 import { STable, XCard, XDown } from '@/components'
59 import { sysPosPage, sysPosDelete, sysPosExport } from '@/api/modular/system/posManage'
60 import addForm from './addForm'
61 import editForm from './editForm'
62
63 export default {
64   components: {
65     XDown,
66     XCard,
67     STable,
68     addForm,
69     editForm
70   },
71
72   data () {
73     return {
74       // 查询参数
75       queryParam: {},
76       // 表头
77       columns: [
78         {
79           title: '职位名称',
80           dataIndex: 'name'
81         },
82         {
83           title: '唯一编码',
84           dataIndex: 'code'
85         },
86         {
87           title: '排序',
88           dataIndex: 'sort'
89         },
90         {
91           title: '备注',
92           dataIndex: 'remark'
93         }
94       ],
95       // 加载数据方法 必须为 Promise 对象
96       loadData: parameter => {
97         return sysPosPage(Object.assign(parameter, this.queryParam)).then((res) => {
98           return res.data
99         })
100       },
101       selectedRowKeys: [],
102       selectedRows: [],
103       options: {
104         alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
105         rowSelection: {
106           selectedRowKeys: this.selectedRowKeys,
107           onChange: this.onSelectChange
108         }
109       }
110     }
111   },
112
113   created () {
114     if (this.hasPerm('sysPos:edit') || this.hasPerm('sysPos:delete')) {
115       this.columns.push({
116         title: '操作',
117         width: '150px',
118         dataIndex: 'action',
119         scopedSlots: { customRender: 'action' }
120       })
121     }
122   },
123
124   methods: {
125     /**
126      * 单个删除
127      */
128     singleDelete (record) {
129       const param = [{ 'id': record.id }]
130       this.sysPosDelete(param)
131     },
132     /**
133      * 批量删除
134      */
135     batchDelete () {
136       const paramIds = this.selectedRowKeys.map((d) => {
137         return { 'id': d }
138       })
139       this.sysPosDelete(paramIds)
140     },
141     /**
142      * 删除
143      */
144     sysPosDelete (param) {
145       sysPosDelete(param).then((res) => {
146         if (res.success) {
147           this.$message.success('删除成功')
148           this.$refs.table.clearRefreshSelected()
149         } else {
150           this.$message.error('删除失败：' + res.message)
151         }
152       }).catch((err) => {
153         this.$message.error('删除错误：' + err.message)
154       })
155     },
156     /**
157      * 批量导出
158      */
159     batchExport () {
160       const paramIds = this.selectedRowKeys.map((d) => {
161         return { 'id': d }
162       })
163       sysPosExport(paramIds).then((res) => {
164         this.$refs.batchExport.downloadfile(res)
165       })
166     },
167     handleOk () {
168       this.$refs.table.refresh()
169     },
170     onSelectChange (selectedRowKeys, selectedRows) {
171       this.selectedRowKeys = selectedRowKeys
172       this.selectedRows = selectedRows
173     }
174   }
175
176 }
177 </script>
178
179 <style lang="less">
180 .table-operator {
181   margin-bottom: 18px;
182 }
183 button {
184   margin-right: 8px;
185 }
186 </style>