| commit | author | age | ||
| 4d51af | 1 | <template> |
| I | 2 | <div> |
| 3 | <a-card :bordered="false" :bodyStyle="tstyle"> | |
| 4 | <div class="table-page-search-wrapper" v-if="hasPerm('blogFriendshipLink:page')"> | |
| 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-select style="width: 100%" v-model="queryParam.linkType" placeholder="请选择链接类型"> | |
| 15 | <a-select-option v-for="(item,index) in linkTypeData" :key="index" :value="item.code">{{ item.name }} | |
| 16 | </a-select-option> | |
| 17 | </a-select> | |
| 18 | </a-form-item> | |
| 19 | </a-col> | |
| 20 | <template v-if="advanced"> | |
| 21 | <a-col :md="8" :sm="24"> | |
| 22 | <a-form-item label="权重"> | |
| 23 | <a-input v-model="queryParam.topValue" allow-clear placeholder="请输入权重" /> | |
| 24 | </a-form-item> | |
| 25 | </a-col> | |
| 26 | <a-col :md="8" :sm="24"> | |
| 27 | <a-form-item label="是否启用"> | |
| 28 | <a-input v-model="queryParam.isEnable" allow-clear placeholder="请输入是否启用" /> | |
| 29 | </a-form-item> | |
| 30 | </a-col> | |
| 31 | <a-col :md="8" :sm="24"> | |
| 32 | <a-form-item label="是否新窗口打开"> | |
| 33 | <a-select style="width: 100%" v-model="queryParam.isNewWindowOpen" placeholder="请选择是否新窗口打开"> | |
| 34 | <a-select-option v-for="(item,index) in isNewWindowOpenData" :key="index" :value="item.code"> | |
| 35 | {{ item.name }}</a-select-option> | |
| 36 | </a-select> | |
| 37 | </a-form-item> | |
| 38 | </a-col> | |
| 39 | <a-col :md="8" :sm="24"> | |
| 40 | <a-form-item label="创建时间"> | |
| 41 | <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-model="queryParam.createDateDate" | |
| 42 | @change="onChangecreateDate" /> | |
| 43 | </a-form-item> | |
| 44 | </a-col> | |
| 45 | </template> | |
| 46 | <a-col :md="8" :sm="24"> | |
| 47 | <span class="table-page-search-submitButtons"> | |
| 48 | <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button> | |
| 49 | <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button> | |
| 50 | <a @click="toggleAdvanced" style="margin-left: 8px"> | |
| 51 | {{ advanced ? '收起' : '展开' }} | |
| 52 | <a-icon :type="advanced ? 'up' : 'down'" /> | |
| 53 | </a> | |
| 54 | </span> | |
| 55 | </a-col> | |
| 56 | </a-row> | |
| 57 | </a-form> | |
| 58 | </div> | |
| 59 | </a-card> | |
| 60 | <a-card :bordered="false"> | |
| 61 | <s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert" :rowKey="(record) => record.id" | |
| 62 | :rowSelection="options.rowSelection"> | |
| 63 | <template class="table-operator" slot="operator" v-if="hasPerm('blogFriendshipLink:add')"> | |
| 64 | <a-button type="primary" v-if="hasPerm('blogFriendshipLink:add')" icon="plus" @click="$refs.addForm.add()"> | |
| 65 | 新增友情链接</a-button> | |
| 66 | <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('blogFriendshipLink:delete')" | |
| 67 | @click="batchDelete"> | |
| 68 | <a-icon type="delete" />批量删除 | |
| 69 | </a-button> | |
| 70 | <x-down v-if="hasPerm('blogFriendshipLink:export')" ref="batchExport" @batchExport="batchExport" /> | |
| 71 | </template> | |
| 72 | <span slot="linkTypeScopedSlots" slot-scope="text"> | |
| 73 | {{ 'blog_link_type' | dictType(text) }} | |
| 74 | </span> | |
| 75 | <span slot="isEnableScopedSlots" slot-scope="text"> | |
| 76 | {{ 'blog_yes_or_no' | dictType(text) }} | |
| 77 | </span> | |
| 78 | <span slot="isNewWindowOpenScopedSlots" slot-scope="text"> | |
| 79 | {{ 'blog_yes_or_no' | dictType(text) }} | |
| 80 | </span> | |
| 81 | <span slot="action" slot-scope="text, record"> | |
| 82 | <a v-if="hasPerm('blogFriendshipLink:edit')" @click="$refs.editForm.edit(record)">编辑</a> | |
| 83 | <a-divider type="vertical" v-if="hasPerm('blogFriendshipLink:edit') & hasPerm('blogFriendshipLink:delete')" /> | |
| 84 | <a-popconfirm v-if="hasPerm('blogFriendshipLink:delete')" placement="topRight" title="确认删除？" | |
| 85 | @confirm="() => singleDelete(record)"> | |
| 86 | <a>删除</a> | |
| 87 | </a-popconfirm> | |
| 88 | </span> | |
| 89 | </s-table> | |
| 90 | <add-form ref="addForm" @ok="handleOk" /> | |
| 91 | <edit-form ref="editForm" @ok="handleOk" /> | |
| 92 | </a-card> | |
| 93 | </div> | |
| 94 | </template> | |
| 95 | <script> | |
| 96 | import { | |
| 97 | STable, | |
| 98 | XDown | |
| 99 | } from '@/components' | |
| 100 | import moment from 'moment' | |
| 101 | import { | |
| 102 | blogFriendshipLinkPage, | |
| 103 | blogFriendshipLinkDelete, | |
| 104 | blogFriendshipLinkExport | |
| 105 | } from '@/api/modular/main/blogfriendshiplink/blogFriendshipLinkManage' | |
| 106 | import addForm from './addForm.vue' | |
| 107 | import editForm from './editForm.vue' | |
| 108 | export default { | |
| 109 | components: { | |
| 110 | STable, | |
| 111 | addForm, | |
| 112 | editForm, | |
| 113 | XDown | |
| 114 | }, | |
| 115 | data() { | |
| 116 | return { | |
| 117 | // 高级搜索 展开/关闭 | |
| 118 | advanced: false, | |
| 119 | // 查询参数 | |
| 120 | queryParam: {}, | |
| 121 | // 表头 | |
| 122 | columns: [{ | |
| 123 | title: '名称', | |
| 124 | align: 'center', | |
| 125 | dataIndex: 'name' | |
| 126 | }, | |
| 127 | { | |
| 128 | title: 'url地址', | |
| 129 | align: 'center', | |
| 130 | dataIndex: 'url' | |
| 131 | }, | |
| 132 | { | |
| 133 | title: '头像地址', | |
| 134 | align: 'center', | |
| 135 | dataIndex: 'avatar' | |
| 136 | }, | |
| 137 | { | |
| 138 | title: '描述', | |
| 139 | align: 'center', | |
| 140 | dataIndex: 'remark' | |
| 141 | }, | |
| 142 | { | |
| 143 | title: '链接类型', | |
| 144 | align: 'center', | |
| 145 | dataIndex: 'linkType', | |
| 146 | scopedSlots: { | |
| 147 | customRender: 'linkTypeScopedSlots' | |
| 148 | } | |
| 149 | }, | |
| 150 | { | |
| 151 | title: '权重', | |
| 152 | align: 'center', | |
| 153 | dataIndex: 'topValue' | |
| 154 | }, | |
| 155 | { | |
| 156 | title: '是否启用', | |
| 157 | align: 'center', | |
| 158 | dataIndex: 'isEnable', | |
| 159 | scopedSlots: { | |
| 160 | customRender: 'isEnableScopedSlots' | |
| 161 | } | |
| 162 | }, | |
| 163 | { | |
| 164 | title: '是否新窗口打开', | |
| 165 | align: 'center', | |
| 166 | dataIndex: 'isNewWindowOpen', | |
| 167 | scopedSlots: { | |
| 168 | customRender: 'isNewWindowOpenScopedSlots' | |
| 169 | } | |
| 170 | }, | |
| 171 | { | |
| 172 | title: '更新时间', | |
| 173 | align: 'center', | |
| 174 | dataIndex: 'updateDate' | |
| 175 | }, | |
| 176 | { | |
| 177 | title: '创建时间', | |
| 178 | align: 'center', | |
| 179 | dataIndex: 'createDate' | |
| 180 | } | |
| 181 | ], | |
| 182 | tstyle: { | |
| 183 | 'padding-bottom': '0px', | |
| 184 | 'margin-bottom': '10px' | |
| 185 | }, | |
| 186 | // 加载数据方法 必须为 Promise 对象 | |
| 187 | loadData: parameter => { | |
| 188 | return blogFriendshipLinkPage(Object.assign(parameter, this.switchingDate())).then((res) => { | |
| 189 | return res.data | |
| 190 | }) | |
| 191 | }, | |
| 192 | linkTypeData: [], | |
| 193 | isNewWindowOpenData: [], | |
| 194 | selectedRowKeys: [], | |
| 195 | selectedRows: [], | |
| 196 | options: { | |
| 197 | alert: { | |
| 198 | show: true, | |
| 199 | clear: () => { | |
| 200 | this.selectedRowKeys = [] | |
| 201 | } | |
| 202 | }, | |
| 203 | rowSelection: { | |
| 204 | selectedRowKeys: this.selectedRowKeys, | |
| 205 | onChange: this.onSelectChange | |
| 206 | } | |
| 207 | } | |
| 208 | } | |
| 209 | }, | |
| 210 | created() { | |
| 211 | if (this.hasPerm('blogFriendshipLink:edit') || this.hasPerm('blogFriendshipLink:delete')) { | |
| 212 | this.columns.push({ | |
| 213 | title: '操作', | |
| 214 | width: '150px', | |
| 215 | dataIndex: 'action', | |
| 216 | scopedSlots: { | |
| 217 | customRender: 'action' | |
| 218 | } | |
| 219 | }) | |
| 220 | } | |
| 221 | const linkTypeOption = this.$options | |
| 222 | this.linkTypeData = linkTypeOption.filters['dictData']('blog_link_type') | |
| 223 | const isNewWindowOpenOption = this.$options | |
| 224 | this.isNewWindowOpenData = isNewWindowOpenOption.filters['dictData']('blog_yes_or_no') | |
| 225 | }, | |
| 226 | methods: { | |
| 227 | moment, | |
| 228 | /** | |
| 229 | * 查询参数组装 | |
| 230 | */ | |
| 231 | switchingDate() { | |
| 232 | const queryParamcreateDate = this.queryParam.createDateDate | |
| 233 | if (queryParamcreateDate != null) { | |
| 234 | this.queryParam.createDate = moment(queryParamcreateDate).format('YYYY-MM-DD') | |
| 235 | if (queryParamcreateDate.length < 1) { | |
| 236 | delete this.queryParam.createDate | |
| 237 | } | |
| 238 | } | |
| 239 | const obj = JSON.parse(JSON.stringify(this.queryParam)) | |
| 240 | return obj | |
| 241 | }, | |
| 242 | /** | |
| 243 | * 单个删除 | |
| 244 | */ | |
| 245 | singleDelete(record) { | |
| 246 | const param = [{ | |
| 247 | 'id': record.id | |
| 248 | }] | |
| 249 | this.blogFriendshipLinkDelete(param) | |
| 250 | }, | |
| 251 | /** | |
| 252 | * 批量删除 | |
| 253 | */ | |
| 254 | batchDelete() { | |
| 255 | const paramIds = this.selectedRowKeys.map((d) => { | |
| 256 | return { | |
| 257 | 'id': d | |
| 258 | } | |
| 259 | }) | |
| 260 | this.blogFriendshipLinkDelete(paramIds) | |
| 261 | }, | |
| 262 | blogFriendshipLinkDelete(record) { | |
| 263 | blogFriendshipLinkDelete(record).then((res) => { | |
| 264 | if (res.success) { | |
| 265 | this.$message.success('删除成功') | |
| 266 | this.$refs.table.clearRefreshSelected() | |
| 267 | } else { | |
| 268 | this.$message.error('删除失败') // + res.message | |
| 269 | } | |
| 270 | }) | |
| 271 | }, | |
| 272 | toggleAdvanced() { | |
| 273 | this.advanced = !this.advanced | |
| 274 | }, | |
| 275 | onChangecreateDate(date, dateString) { | |
| 276 | this.createDateDateString = dateString | |
| 277 | }, | |
| 278 | /** | |
| 279 | * 批量导出 | |
| 280 | */ | |
| 281 | batchExport() { | |
| 282 | const paramIds = this.selectedRowKeys.map((d) => { | |
| 283 | return { | |
| 284 | 'id': d | |
| 285 | } | |
| 286 | }) | |
| 287 | blogFriendshipLinkExport(paramIds).then((res) => { | |
| 288 | this.$refs.batchExport.downloadfile(res) | |
| 289 | }) | |
| 290 | }, | |
| 291 | handleOk() { | |
| 292 | this.$refs.table.refresh() | |
| 293 | }, | |
| 294 | onSelectChange(selectedRowKeys, selectedRows) { | |
| 295 | this.selectedRowKeys = selectedRowKeys | |
| 296 | this.selectedRows = selectedRows | |
| 297 | } | |
| 298 | } | |
| 299 | } | |
| 300 | </script> | |
| 301 | <style lang="less"> | |
| 302 | .table-operator { | |
| 303 | margin-bottom: 18px; | |
| 304 | } | |
| 305 | ||
| 306 | button { | |
| 307 | margin-right: 8px; | |
| 308 | } | |
| 309 | </style> | |
