| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <!-- |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-03-26 10:28:33 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-05-08 18:22:48 |
| | | * @FilePath: /smart-web/src/views/master/person/main/index.vue |
| | | * @Description: è¿æ¯é»è®¤è®¾ç½®,请设置`customMade`, æå¼koroFileHeaderæ¥çé
ç½® è¿è¡è®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | | <template> |
| | | <div class="user-main"> |
| | | <div class="user-top"> |
| | | <div class="noteTop"> |
| | | <el-button type="primary" @click="addPerson">åå¸å
Œ</el-button> |
| | | <el-button type="danger" plain @click="delData">å é¤</el-button> |
| | | </div> |
| | | <el-form :inline="true" :model="searchData" label-width="80px" style="width: 50%;"> |
| | | <el-row> |
| | | <el-col :span="8"> |
| | | <el-form-item label="å
¬åç±»å"> |
| | | <el-select v-model="searchData.category" multiple style="width: 100%" @change="searchChange"> |
| | | <el-option v-for="item in categoryList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="æ¶é´èå´"> |
| | | <el-date-picker v-model="searchData.selectDate" type="datetimerange" range-separator="è³" start-placeholder="å¼å§æ¥æ" end-placeholder="ç»ææ¥æ" align="right" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" style="vertical-align: middle;width: 100%;"></el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label=""> |
| | | <el-input v-model="searchData.keyWord" placeholder="请è¾å
¥æç´¢å
容" clearable style="width: 100%" @change="searchChange"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </div> |
| | | <div class="user-table"> |
| | | <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column prop="title" label="å
¬åæ é¢"></el-table-column> |
| | | <el-table-column prop="categoryName" label="å
¬åç±»å"></el-table-column> |
| | | <el-table-column prop="updateTime" label="å
¬åæ¶é´"></el-table-column> |
| | | <el-table-column fixed="right" label="æä½"> |
| | | <template #default="scope"> |
| | | <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">æ¥ç</el-button> |
| | | <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">ç¼è¾</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination |
| | | style="margin-top: 12px;" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage4" |
| | | :page-sizes="[15, 50, 100]" |
| | | :page-size="15" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <save-dialog v-if="dialog.save" ref="saveDialog" @success="addUserSuccess" @closed="dialog.save=false"></save-dialog> --> |
| | | </template> |
| | | <script> |
| | | // import saveDialog from './addUser' |
| | | export default { |
| | | name: "bakalaka", |
| | | data(){ |
| | | return { |
| | | categoryList: [], |
| | | selection: [], |
| | | searchData: { |
| | | selectDate: [], |
| | | tital: "", |
| | | category: [], |
| | | startDate: "", |
| | | endDate: "", |
| | | keyWord: "", |
| | | current: "1", |
| | | size: "15" |
| | | }, |
| | | total: 0, |
| | | isSaveing: false, |
| | | groups: [], |
| | | dialog: { |
| | | save: false |
| | | }, |
| | | leftActive: true, |
| | | input: '', |
| | | options: [{ |
| | | value: 'é项1', |
| | | label: 'é»éç³' |
| | | }], |
| | | input3: '', |
| | | tableData: [] |
| | | } |
| | | }, |
| | | created(){ |
| | | |
| | | }, |
| | | mounted(){ |
| | | this.getData(); |
| | | this.getcategoryList(); |
| | | }, |
| | | components: { |
| | | //saveDialog |
| | | }, |
| | | methods: { |
| | | searchChange() { |
| | | this.getData(); |
| | | }, |
| | | dateChange(val) { |
| | | this.searchData.startDate = val[0]; |
| | | this.searchData.endDate = val[1]; |
| | | this.getData(); |
| | | }, |
| | | getcategoryList() { |
| | | this.$HTTP.get(`/api/blade-system/dict/dictionary?code=notice`).then(res=> { |
| | | if(res.code == 200) { |
| | | this.categoryList = res.data; |
| | | } |
| | | }) |
| | | }, |
| | | addUserSuccess() { |
| | | |
| | | }, |
| | | getData() { |
| | | var obj = {}; |
| | | var searchData = JSON.parse(JSON.stringify(this.searchData)); |
| | | searchData.category = searchData.category.join(','); |
| | | for(var key in searchData) { |
| | | if(key != 'selectDate' && searchData[key] != '') { |
| | | obj[key] = searchData[key]; |
| | | } |
| | | } |
| | | this.$HTTP.get("/api/blade-notify/notice/page?" + this.$TOOL.qsStringify(obj)).then(res=> { |
| | | if(res.code == 200) { |
| | | this.tableData = res.data.records; |
| | | } |
| | | }) |
| | | }, |
| | | //æ·»å |
| | | addPerson(){ |
| | | this.dialog.save = true |
| | | this.$nextTick(() => { |
| | | this.$refs.saveDialog.open() |
| | | }) |
| | | }, |
| | | table_edit(row){ |
| | | this.dialog.save = true |
| | | this.$nextTick(() => { |
| | | this.$refs.saveDialog.open('edit').setData(row) |
| | | }) |
| | | }, |
| | | //æ¥ç |
| | | table_show(row){ |
| | | this.dialog.save = true |
| | | this.$nextTick(() => { |
| | | this.$refs.saveDialog.open('show').setData(row) |
| | | }) |
| | | }, |
| | | handleSelectionChange(selection) { |
| | | this.selection = selection; |
| | | }, |
| | | delData() { |
| | | if(this.selection.length == 0) { |
| | | this.$message({ |
| | | message: 'è¯·éæ©è³å°ä¸æ¡æ°æ®', |
| | | type: 'warning' |
| | | }); |
| | | return; |
| | | } |
| | | var selStr = ""; |
| | | this.selection.map(item=> { |
| | | selStr += item.id + "," |
| | | }) |
| | | selStr = selStr.replace(/,$/, ''); |
| | | var that = this; |
| | | this.$confirm('ç¡®å®å°éæ©æ°æ®å é¤ï¼','æç¤º', { |
| | | type: 'warning', |
| | | }).then(() => { |
| | | that.$HTTP.post("/api/blade-notify/notice/remove?ids="+selStr).then(res=> { |
| | | if(res.code == 200) { |
| | | that.$message.success("æä½æå"); |
| | | that.getData(); |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | //åæ¶ |
| | | }) |
| | | }, |
| | | handleSizeChange(val) { |
| | | console.log(`æ¯é¡µ ${val} æ¡`); |
| | | this.searchData.current = "1"; |
| | | this.searchData.size = val; |
| | | this.getData(); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | console.log(`å½å页: ${val}`); |
| | | this.searchData.current = val; |
| | | this.getData(); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .user-main { |
| | | background-color: #f9fafb; |
| | | border: 1px solid #dcdfe6; |
| | | box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); |
| | | margin: 8px; |
| | | padding: 8px; |
| | | background-color: #fff; |
| | | } |
| | | .user-top { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 8px; |
| | | } |
| | | .user-table { |
| | | width: 100%; |
| | | margin-bottom: 8px; |
| | | |
| | | } |
| | | .multipleTableRef { |
| | | margin-bottom: 8px; |
| | | } |
| | | </style> |