From 65cf29e0e28e60e8264cd66826aa23d3ae986f37 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期四, 22 九月 2022 15:52:34 +0800 Subject: [PATCH] 完成部分案件池静态页面 --- src/views/systemSetting/baseSetting/user/index.vue | 356 +++++------------------------------------------------------ 1 files changed, 30 insertions(+), 326 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/index.vue b/src/views/systemSetting/baseSetting/user/index.vue index 6660c22..d4cac15 100644 --- a/src/views/systemSetting/baseSetting/user/index.vue +++ b/src/views/systemSetting/baseSetting/user/index.vue @@ -1,6 +1,6 @@ <template> <div class="userList"> - <header> + <!-- <header> <div class="headerContent"> <div class="search"> <span>绛涢�夋潯浠�:</span> @@ -17,205 +17,41 @@ </el-dialog> </div> </div> - </header> - <main> - <div class="mainContent"> - <!-- 鏁版嵁灞曠ず --> - <el-table ref="multipleTable" - :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" - :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> - <el-table-column type="selection" min-width="5"> - </el-table-column> - <el-table-column label="鐢ㄦ埛ID" min-width="5"> - <template slot-scope="scope">{{ scope.row.id }}</template> - </el-table-column> - <el-table-column prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> - </el-table-column> - <el-table-column prop="username" label="鎵�灞炲鍚�" min-width="10"> - </el-table-column> - <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" min-width="10"> - </el-table-column> - <el-table-column prop="note" label="鎵�灞炶鑹�" min-width="10"> - </el-table-column> - <el-table-column prop="departName" label="鎵�灞為儴闂�" min-width="10"> - </el-table-column> - <el-table-column prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="10"> - </el-table-column> - <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> - </el-table-column> - <el-table-column prop="status" label="鍚敤" min-width="5"> - <template slot-scope="scope"> - <el-switch class="switchStyle" v-model="scope.row.status" active-text="寮�" inactive-text="鍏�" - active-color="#3fef9a" inactive-color="#000212" @change="handleChangeStatus(scope.row)"> - </el-switch> - </template> - </el-table-column> - <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> - <template slot-scope="scope"> - <div class="operation"> - <!-- <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> --> - <span @click="handleFind(scope.row)">鏌ョ湅</span> - <span class="line">|</span> - <!-- <span>淇敼瀵嗙爜</span> --> - <!-- <span>鍒犻櫎</span> --> - <span @click="handleUpdate(scope.row)">淇敼閮ㄩ棬</span> - </div> - </template> - </el-table-column> - </el-table> - <!-- 鏌ョ湅淇敼椤甸潰 --> - <el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate" - :before-close="handleClose2" :title="updateFlag ? '淇敼鐢ㄦ埛閮ㄩ棬淇℃伅' :'鏌ョ湅鐢ㄦ埛淇℃伅'"> - <updateUser :updateFlag="updateFlag" :userInfo=userInfo /> - </el-dialog> - <!-- 鍒嗛〉 --> - <div class="pagination"> - <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" - :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" - @next-click="handleNext"> - </el-pagination> - </div> - </div> - </main> + </header> --> + <myHeader @setDialog="changeDialog" @getSearch="getSearch"></myHeader> + <myMain :refresh="isFresh" :keyword="keyword" @resetFresh="resetFresh" /> </div> </template> <script> -import createUser from "./createUser" -import updateUser from "./updateUser" -import helper from "@/utils/mydate.js" +import myHeader from "./components/header" +import myMain from "./components/main" export default { components: { - createUser, updateUser + myHeader, + myMain }, data() { return { - tableData: [], - search: "", - dialogCreate: false, - dialogUpdate: false, - updateFlag: false, - userInfo: '', - totalNum: 200, - pageSize: 10, - currentPage: 1, + isFresh: false, + keyword: '', } - }, - created() { - this.getUserList(); }, methods: { - // 淇敼瑙掕壊 - handleChangeRole(obj) { - this.dialogUpdate = true - this.user = obj; - // console.log(obj) + // 鑾峰彇鎼滅储杩斿洖缁撴灉 + getSearch({ text }) { + this.keyword = text; + this.isFresh = true; }, - // 淇敼鐢ㄦ埛鐘舵�� - handleChangeStatus(obj) { - let { id, status } = obj; - status == true ? status = 1 : status = 0; - console.log(id, status); - this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => { - console.log(res); - }) + // 鑾峰彇鍒锋柊缁撴灉 + changeDialog({ flag }) { + console.log(flag); + this.isFresh = flag; }, - // 鑾峰彇鐢ㄦ埛鍒楄〃 - getUserList() { - const that = this; - const { currentPage, pageSize, search } = this; - this.dialogCreate = false; - // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) - this.$axios.get(`sccg/admin/list?mobile=${search}¤t=${currentPage}&pageSize=${pageSize}`).then(res => { - if (res.code === 200) { - res.data.records.forEach(item => { - item.createTime = helper(item.createTime); - item.status == 1 ? item.status = true : item.status = false; - }) - that.totalNum = res.data.pages * pageSize; - that.tableData = res.data.records; - } - }) - }, - // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { - return 'warning-row'; - } else { - return 'success-row'; - } - return ''; - }, - // 鏌ョ湅鐢ㄦ埛淇℃伅(涓嶅彲淇敼) - handleFind(rowData) { - this.dialogUpdate = true; - this.updateFlag = false; - this.userInfo = rowData; - }, - // 淇敼鐢ㄦ埛閮ㄩ棬淇℃伅 - handleUpdate(rowData) { - this.dialogUpdate = true; - this.updateFlag = true; - this.userInfo = rowData - }, - // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - changeCurrentPage(page) { - this.currentPage = page; - this.getUserList(); - }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page) { - this.currentPage = page; - this.getUserList(); - }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page) { - this.currentPage = page; - this.getUserList(); - }, - // 鍒涘缓寮圭獥鍏抽棴 - handleClose1(done) { - const that = this; - this.$confirm('纭鍏抽棴锛�') - .then(_ => { - that.dialogCreate = false; - done(); - }) - .catch(_ => { }); - }, - // 鏌ョ湅寮圭獥鍏抽棴 - handleClose2(done) { - const that = this; - this.$confirm('纭鍏抽棴锛�') - .then(_ => { - this.dialogUpdate = false; - done(); - }) - .catch(_ => { }); + // 閲嶇疆isFresh + resetFresh({ flag }) { + this.isFresh = flag; + console.log(this.isFresh); } - // 鐢ㄦ埛鏌ヨ(鏆傛椂鏀寔鐢佃瘽鍙风爜) - // handlePhone() { - // const { search, getUserList } = this; - // if (search == '') { - // getUserList(); - // return; - // } - // this.handlePhoneSearch(search); - // }, - // handlePhoneSearch(search){ - // this.dialogCreate = false; - // const that = this; - // // 鑾峰彇鎵嬫満鍙风敤鎴蜂俊鎭� - // this.$axios.get(`sccg/admin/list?mobile=${search}`).then(res => { - // if (res.code === 200) { - // res.data.records.forEach(item => { - // item.createTime = helper(item.createTime); - // item.status == 1 ? item.status = true : item.status = false; - // }) - // that.totalNum = res.data.records.length; - // that.tableData = res.data.records.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize) - // } - // }) - // } } } </script> @@ -225,162 +61,30 @@ margin: 10px 20px; color: #4b9bb7; - header { - background-color: #09152f; - border: 1pox solid #fff; - - .headerContent { - padding: 0 40px; - display: flex; - line-height: 100px; - justify-content: space-between; - align-items: center; - - .search { - display: flex; - justify-content: flex-start; - - span { - flex: 1; - } - - .el-input { - flex: 2; - color: #1d3f57; - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } - } - - } - - .findBtn { - line-height: 100px; - margin-left: 15px; - display: flex; - align-items: center; - margin-top: -2px; - - .el-button { - padding: 12px 25px; - border-radius: 20px; - } - } - - .addBtn { - background-color: #eb5d01; - border: none; - border-radius: 20px; - padding: 12px 30px; - } - } - } - - main { - background-color: #09152f; - margin-top: 20px; - padding-bottom: 50px; - border: 1pox solid #fff; - - .mainTitle { - line-height: 60px; - } - - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; - - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } - } - - .el-table { - color: #4b9bb7; - font-size: 10px; - - &::v-deep .el-table__empty-block { - background-color: #09152f; - color: #4b9bb7; - } - .operation { - display: flex; - - .line { - padding: 0 5px; - } - - span:hover { - cursor: pointer; - } - } - } - - .el-table::v-deep .warning-row { - background: #06122c; - } - - .el-table::v-deep .success-row { - background: #071f39; - } - - &::v-deep .switchStyle .el-switch__label { - position: absolute; - display: none; - color: #fff; - } - - &::v-deep .el-switch__core { - background-color: rgba(166, 166, 166, 1); - } - - &::v-deep .switchStyle .el-switch__label--left { - z-index: 9; - left: 20px; - } - - &::v-deep .switchStyle .el-switch__label--right { - z-index: 9; - left: 4px; - } - - &::v-deep .switchStyle .el-switch__label.is-active { - display: block; - } - - &::v-deep .switchStyle.el-switch .el-switch__core, - &::v-deep .el-switch .el-switch__label { - width: 50px !important; - } - } - &::v-deep .el-dialog__header, &::v-deep .el-dialog__body { background-color: #06122c; } - &::v-deep .el-dialog__header{ + + &::v-deep .el-dialog__header { display: flex; align-items: center; background-color: #fff; padding: 20px; line-height: 60px; } - &::v-deep .el-dialog__title{ + + &::v-deep .el-dialog__title { color: #4b9bb7; } - &::v-deep .el-dialog__close{ + + &::v-deep .el-dialog__close { width: 20px; height: 20px; // color: #fff; } - &::v-deep .el-dialog__body{ + + &::v-deep .el-dialog__body { padding: 0; } } -- Gitblit v1.8.0