From 794f2a2560a00eb7e008eb94219c82654488831f Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期五, 12 十一月 2021 09:52:01 +0800
Subject: [PATCH] 功能展示列表：table添加简易单行省略显示tooltip
---
src/pages/demo/index.vue | 77 ++++++++++++++++++++++++++++++++------
1 files changed, 65 insertions(+), 12 deletions(-)
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index b10bcf5..11688f3 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -1,5 +1,8 @@
<template>
<div class="app-container">
+ <!-- 杩斿洖鎸夐挳鍜屾爣棰� -->
+ <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->
+
<!-- 鎼滅储鍖� 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌 -->
<el-form v-show="showSearch" ref="searchForm" :inline="true">
<el-form-item label="瑙掕壊鍚嶇О">
@@ -9,6 +12,7 @@
clearable
size="small"
style="width: 240px"
+ maxlength="50"
@keyup.enter.native="reGetList"
/>
</el-form-item>
@@ -22,6 +26,7 @@
<!-- 鎿嶄綔鍖� 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_add')" -->
<el-button
type="primary"
icon="el-icon-plus"
@@ -33,11 +38,18 @@
</el-row>
<!-- 鎿嶄綔鍖� 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈 -->
- <el-table :data="list">
+ <!--
+ table鍙傛暟璁剧疆锛�
+ stripe 鏄惁涓烘枒椹汗
+ border 鏄惁甯︽湁绾靛悜杈规
+ max-height 鏈�澶ч珮搴�
+ -->
+ <el-table :data="list" 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="isUp" align="center" min-width="100">
<template slot-scope="scope">
+ <!-- 鏉冮檺鍒ゆ柇 :disabled="!getAuthValueFN('xxx_edit')" -->
<el-switch
v-model="scope.row.isUp"
:active-value="1"
@@ -47,14 +59,16 @@
</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" min-width="100">
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="120">
<template slot-scope="scope">
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_edit')" -->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="showEditDialog(scope.row)"
>缂栬緫</el-button>
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_del')" -->
<el-button
size="mini"
type="text warn"
@@ -66,10 +80,10 @@
</el-table>
<!-- 鏂板&缂栬緫 -->
- <el-dialog :title="dialogData.type=='add'?'鏂板鍖婚櫌绉戝':'缂栬緫鍖婚櫌绉戝'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog">
+ <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'鏂板':'缂栬緫') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
<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="璇疯緭鍏ュ悕绉�" />
+ <el-input v-model="dialogData.name" placeholder="璇疯緭鍏ュ悕绉�" maxlength="50" />
</el-form-item>
<el-form-item label="鏄惁涓婃灦" prop="isUp">
<el-switch
@@ -92,23 +106,33 @@
:limit.sync="pageSize"
@pagination="getList"
/>
+
+ <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
</div>
</template>
<script>
-
+import BackToTop from '@/components/BackToTop'
export default {
name: 'Demo',
+ components: { BackToTop },
data() {
return {
showSearch: true, // 鏄惁鏄剧ず鎼滅储鍖�
- keyWord: '',
+ keyWord: '', // 鎼滅储鍖哄瓧娈碉紝鍙嚜琛屾墿灞曞叾浣欏瓧娈�
+ // TODO
+ objectName: 'xx', // 瀵硅薄鍚嶇О锛岀敤浜庡垹闄ゆ彁绀恒�佸惎鐢ㄦ彁绀恒�佸脊绐楁爣棰樼瓑
+
+ // 鏁版嵁鍒楄〃
list: [],
// 寮圭獥鏁版嵁
dialogVisible: false,
dialogData: {},
+
+ // 瀵屾枃鏈紪杈戝櫒
+ // rangenum: null,
// 鍒嗛〉 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
total: 0,
@@ -116,6 +140,7 @@
pageSize: 20,
// 鍒嗛〉 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ // TODO
// 琛ㄥ崟鏍￠獙
rules: {
name: [
@@ -136,6 +161,21 @@
this.getList()
},
+ // ========== 瀵屾枃鏈浉鍏�
+ // 瀵屾枃鏈紪杈戝櫒鐨勫唴瀹硅祴鍊�
+ // catchData(content) {
+ // if (content === '<p><br></p>') content = ''
+ // try {
+ // const currentRange = window.getSelection().getRangeAt(0)
+ // this.rangenum = currentRange
+ // } catch (e) {
+ //
+ // }
+ // this.$set(this.dialogData, 'content', content)
+ // this.$refs[this.formName].validateField('content')
+ // },
+ // ========== 瀵屾枃鏈浉鍏�
+
// 鑾峰彇鍒楄〃
getList() {
var { pageNum, pageSize, keyWord } = this
@@ -144,6 +184,8 @@
params: {
pageNum: pageNum,
pageSize: pageSize,
+
+ // TODO
keyWord: keyWord
},
mockData: {
@@ -177,12 +219,13 @@
// 鍒犻櫎
handleDelete(item) {
// 鎵撳紑浜屾纭寮圭獥
- this.$confirm('鏄惁纭鍒犻櫎璇ヨ鑹�?', '鎻愮ず', {
+ this.$confirm('鏄惁纭鍒犻櫎璇�' + this.objectName + '?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
// 纭畾鍥炶皟
+ // TODO url
this.postFN({
url: 'xxx',
params: {
@@ -199,18 +242,20 @@
})
}).catch(() => {})
},
- // 淇敼鏄惁涓婃灦 todo
+ // 淇敼鏄惁涓婃灦
handleUpChange(item) {
const text = item.isUp === 1 ? '涓婃灦' : '涓嬫灦'
- this.$confirm('纭瑕�' + text + '璇ヨ鑹插悧?', '鎻愮ず', {
+ this.$confirm('纭瑕�' + text + '璇�' + this.objectName + '鍚�?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
+ // TODO url
this.postFN({
url: 'xxx',
params: {
- id: item.id
+ id: item.id,
+ isUp: item.isUp
},
mockData: {
code: 100,
@@ -219,6 +264,9 @@
}
}, () => {
this.$messageSuc(text + '鎴愬姛')
+ }, (res) => {
+ item.isUp = item.isUp === 1 ? 0 : 1
+ this.$messageError(res.msg)
})
}).catch(() => {
item.isUp = item.isUp === 1 ? 0 : 1
@@ -230,6 +278,7 @@
var dialogData = {
type: 'add',
isUp: 1
+ // TODO 閮ㄥ垎缁勪欢闇�瑕侀璁惧瓧娈碉紝鎻愪緵缁檝-model锛屼緥濡� el-select el-timepicker el-datepicker 涓婁紶缁勪欢 瀵屾枃鏈瓑
}
this.dialogVisible = true
this.$nextTick(() => {
@@ -254,6 +303,8 @@
hideDialog() {
this.dialogData = {}
this.dialogVisible = false
+ // 娓呯┖瀵屾枃鏈�
+ // this.rangenum = null
},
// 鎻愪氦鏂板&缂栬緫
submitHandle() {
@@ -269,12 +320,14 @@
var params = {
name: dialogData.name,
isUp: dialogData.isUp
+ // TODO 鍙傛暟
}
if (dialogData.password) params.password = dialogData.password
var isAdd = dialogData.type === 'add'
- var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'
+ // TODO url
+ var url = isAdd ? 'xxx/add' : 'xxx/edit'
!isAdd && (params.id = dialogData.id)
@@ -289,7 +342,7 @@
}, () => {
this.$messageSuc('淇濆瓨鎴愬姛')
this.hideDialog()
- this.reGetList()
+ isAdd ? this.reGetList() : this.getList()
})
}
}
--
Gitblit v1.8.0