From 36b71142347dc524e18fa24c5ffdffff0d02287a Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期二, 02 二月 2021 18:56:28 +0800
Subject: [PATCH] 优化列表、回到顶部组件、优化样式
---
src/pages/demo/index.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 145 insertions(+), 5 deletions(-)
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 592110e..91decb3 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -9,6 +9,7 @@
clearable
size="small"
style="width: 240px"
+ maxlength="50"
@keyup.enter.native="reGetList"
/>
</el-form-item>
@@ -26,22 +27,34 @@
type="primary"
icon="el-icon-plus"
size="mini"
+ @click="showAddDialog"
>鏂板</el-button>
</el-col>
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
</el-row>
<!-- 鎿嶄綔鍖� 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈 -->
- <el-table :data="list">
+ <el-table :data="list" max-height="500px" stripe>
<el-table-column type="index" label="搴忓彿" align="center" width="60" />
<el-table-column label="瑙掕壊鍚嶇О" prop="name" align="center" min-width="120" />
- <el-table-column label="鍒涘缓鏃堕棿" prop="createTime" align="center" min-width="180" />
- <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" min-width="100">
+ <el-table-column label="鏄惁涓婃灦" prop="isUp" align="center" min-width="100">
+ <template slot-scope="scope">
+ <el-switch
+ v-model="scope.row.isUp"
+ :active-value="1"
+ :inactive-value="0"
+ @change="handleUpChange(scope.row)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒涘缓鏃堕棿" prop="createTime" align="center" min-width="160" />
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
+ @click="showEditDialog(scope.row)"
>缂栬緫</el-button>
<el-button
size="mini"
@@ -52,6 +65,26 @@
</template>
</el-table-column>
</el-table>
+
+ <!-- 鏂板&缂栬緫 -->
+ <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'鏂板鍖婚櫌绉戝':'缂栬緫鍖婚櫌绉戝'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog">
+ <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input v-model="dialogData.name" placeholder="璇疯緭鍏ュ悕绉�" maxlength="50" />
+ </el-form-item>
+ <el-form-item label="鏄惁涓婃灦" prop="isUp">
+ <el-switch
+ v-model="dialogData.isUp"
+ :active-value="1"
+ :inactive-value="0"
+ />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="hideDialog">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitHandle">纭畾</el-button>
+ </div>
+ </el-dialog>
<pagination
v-show="total>0"
@@ -66,7 +99,7 @@
<script>
export default {
- name: 'Role',
+ name: 'Demo',
data() {
return {
showSearch: true, // 鏄惁鏄剧ず鎼滅储鍖�
@@ -74,11 +107,25 @@
list: [],
+ // 寮圭獥鏁版嵁
+ dialogVisible: false,
+ dialogData: {},
+
// 鍒嗛〉 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
total: 0,
pageNum: 1,
- pageSize: 20
+ pageSize: 20,
// 鍒嗛〉 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+
+ // 琛ㄥ崟鏍￠獙
+ rules: {
+ name: [
+ { required: true, message: '鍚嶇О涓嶈兘涓虹┖', trigger: 'change' }
+ ],
+ isUp: [
+ { required: true, message: '鏄惁涓婃灦涓嶈兘涓虹┖', trigger: 'change' }
+ ]
+ }
}
},
mounted() {
@@ -152,6 +199,99 @@
this.$messageSuc('鍒犻櫎鎴愬姛')
})
}).catch(() => {})
+ },
+ // 淇敼鏄惁涓婃灦 todo
+ handleUpChange(item) {
+ const text = item.isUp === 1 ? '涓婃灦' : '涓嬫灦'
+ this.$confirm('纭瑕�' + text + '璇ヨ鑹插悧?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.postFN({
+ url: 'xxx',
+ params: {
+ id: item.id
+ },
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {}
+ }
+ }, () => {
+ this.$messageSuc(text + '鎴愬姛')
+ })
+ }).catch(() => {
+ item.isUp = item.isUp === 1 ? 0 : 1
+ })
+ },
+
+ // 鎵撳紑鏂板寮圭獥
+ showAddDialog() {
+ var dialogData = {
+ type: 'add',
+ isUp: 1
+ }
+ this.dialogVisible = true
+ this.$nextTick(() => {
+ this.dialogData = dialogData
+ this.$refs['refDialog'].resetFields()
+ })
+ },
+ // 鎵撳紑缂栬緫寮规
+ showEditDialog(item) {
+ var dialogData = {
+ type: 'edit',
+ ...item
+ }
+ console.log('dialogData', dialogData)
+ this.dialogVisible = true
+ this.$nextTick(() => {
+ this.dialogData = dialogData
+ this.$refs['refDialog'].resetFields()
+ })
+ },
+ // 鍏抽棴缂栬緫寮圭獥
+ hideDialog() {
+ this.dialogData = {}
+ this.dialogVisible = false
+ },
+ // 鎻愪氦鏂板&缂栬緫
+ submitHandle() {
+ this.$refs['refDialog'].validate(valid => {
+ if (valid) {
+ this.submitReq()
+ }
+ })
+ },
+ // 鎻愪氦鎺ュ彛
+ submitReq() {
+ var { dialogData } = this
+ var params = {
+ name: dialogData.name,
+ isUp: dialogData.isUp
+ }
+
+ if (dialogData.password) params.password = dialogData.password
+
+ var isAdd = dialogData.type === 'add'
+ var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'
+
+ !isAdd && (params.id = dialogData.id)
+
+ this.postFN({
+ url: url,
+ params: params,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {}
+ }
+ }, () => {
+ this.$messageSuc('淇濆瓨鎴愬姛')
+ this.hideDialog()
+ this.reGetList()
+ })
}
}
}
--
Gitblit v1.8.0