From 23bfd7ceb7a3d15a0228789542845cd132cacc64 Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期一, 07 六月 2021 15:09:17 +0800
Subject: [PATCH] 添加规则模板页
---
src/components_simple/UploadMultipleImg.vue | 156 +++++++++++++++++++++++++++++++
src/pages/demo/index.vue | 51 +++++++++-
src/styles/ry.scss | 4
src/pages/demo/list.vue | 42 +++++++
4 files changed, 242 insertions(+), 11 deletions(-)
diff --git a/src/components_simple/UploadMultipleImg.vue b/src/components_simple/UploadMultipleImg.vue
new file mode 100644
index 0000000..e4b4af5
--- /dev/null
+++ b/src/components_simple/UploadMultipleImg.vue
@@ -0,0 +1,156 @@
+<template>
+ <div>
+ <!-- 涓婁紶鍥剧墖缁勪欢(澶氬浘) -->
+ <el-upload
+ ref="refUploadImg"
+ :accept="accept"
+ :auto-upload="false"
+ list-type="picture-card"
+ :class="{disabled:uploadDisabled}"
+ action="#"
+ :limit="limit"
+ :file-list="uploadImgs"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="uploadImg"
+ :on-preview="uploadPreview"
+ :before-upload="beforeUploadImg"
+ size="mini"
+ >
+ <i class="el-icon-plus" />
+ </el-upload>
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鍥剧墖棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadImgs',
+ event: 'change'
+ },
+ props: {
+ uploadImgs: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ accept: {
+ type: String,
+ default: () => {
+ return 'image/jpeg,image/jpg,image/gif,image/png'
+ }
+ },
+ limit: {
+ type: Number,
+ default: 9
+ }
+ },
+
+ data() {
+ return {
+ callback: null
+ }
+ },
+ computed: {
+ uploadDisabled() {
+ return this.uploadImgs.length >= this.limit
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶇‘璁ゆ牸寮�
+ beforeUploadImg(file) {
+ const isImg = file.type.indexOf('image/') > -1
+ const isTooLarge = file.size / 1024 / 1024 > 4
+ let flag = true
+ if (!isImg) {
+ this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
+ flag = false
+ } else if (isTooLarge) {
+ this.$message.error('璇峰嬁涓婁紶澶т簬4MB鐨勫浘鐗�')
+ flag = false
+ }
+ return flag
+ },
+ // 澧炲姞鍥剧墖
+ addUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鍒犻櫎鍥剧墖
+ delUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鎵ц涓婁紶鍟嗗搧鍥�
+ runUploadImg(suc_cb) {
+ console.log('runUploadImg!!!!!')
+ if (this.checkNeedUpload(this.uploadImgs)) {
+ this.callback = suc_cb
+ this.$refs.refUploadImg.submit()
+ } else {
+ suc_cb && suc_cb()
+ }
+ },
+ // 涓婁紶鍟嗗搧鍥�
+ uploadImg(res) {
+ console.log(res)
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ console.log(formData)
+ this.postFN({
+ url: 'admin/image/upload?folderCode=IMG',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ }, (inf) => {
+ console.log('涓婁紶鍥剧墖鎴愬姛')
+
+ // 鏍规嵁uid 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ var uploadImgs = this.uploadImgs
+ uploadImgs.forEach((o, i) => {
+ if (o.uid === res.file.uid) uploadImgs[i] = { url: inf.imgUrl, status: 'success' }
+ })
+ this.uploadImgs = JSON.parse(JSON.stringify(uploadImgs))
+
+ // 瑙﹀彂change鏃堕棿婵�娲籿-model
+ this.$emit('change', uploadImgs)
+
+ console.log('涓婁紶鍥剧墖缁撴潫')
+
+ // 涓婁紶缁撴潫
+ if (!this.checkNeedUpload(this.uploadImgs)) {
+ console.log('涓婁紶杞挱鍥剧粨鏉�')
+ this.callback && this.callback(this.uploadImgs)
+ }
+ })
+ }
+ // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
+
+<style>
+.disabled .el-upload--picture-card {
+ display: none;
+}
+.el-upload-list--picture-card{
+ line-height: 1;
+}
+.el-upload-list--picture-card .el-upload-list__item{
+ margin-bottom: 0
+}
+</style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index b8d386c..b9e4cae 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="瑙掕壊鍚嶇О">
@@ -23,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"
@@ -39,6 +43,7 @@
<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">
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_edit')" -->
<el-switch
v-model="scope.row.isUp"
:active-value="1"
@@ -50,12 +55,14 @@
<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">
+ <!-- 鏉冮檺鍒ゆ柇 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"
@@ -67,7 +74,7 @@
</el-table>
<!-- 鏂板&缂栬緫 -->
- <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'鏂板鍖婚櫌绉戝':'缂栬緫鍖婚櫌绉戝'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
+ <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="璇疯緭鍏ュ悕绉�" maxlength="50" />
@@ -106,13 +113,20 @@
data() {
return {
showSearch: true, // 鏄惁鏄剧ず鎼滅储鍖�
- keyWord: '',
+ keyWord: '', // 鎼滅储鍖哄瓧娈碉紝鍙嚜琛屾墿灞曞叾浣欏瓧娈�
+ // TODO
+ objectName: 'xx', // 瀵硅薄鍚嶇О锛岀敤浜庡垹闄ゆ彁绀恒�佸惎鐢ㄦ彁绀恒�佸脊绐楁爣棰樼瓑
+
+ // 鏁版嵁鍒楄〃
list: [],
// 寮圭獥鏁版嵁
dialogVisible: false,
dialogData: {},
+
+ // 瀵屾枃鏈紪杈戝櫒
+ // rangenum: null,
// 鍒嗛〉 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
total: 0,
@@ -120,6 +134,7 @@
pageSize: 20,
// 鍒嗛〉 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ // TODO
// 琛ㄥ崟鏍￠獙
rules: {
name: [
@@ -140,6 +155,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
@@ -148,6 +178,8 @@
params: {
pageNum: pageNum,
pageSize: pageSize,
+
+ // TODO
keyWord: keyWord
},
mockData: {
@@ -181,12 +213,13 @@
// 鍒犻櫎
handleDelete(item) {
// 鎵撳紑浜屾纭寮圭獥
- this.$confirm('鏄惁纭鍒犻櫎璇ヨ鑹�?', '鎻愮ず', {
+ this.$confirm('鏄惁纭鍒犻櫎璇�' + this.objectName + '?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
// 纭畾鍥炶皟
+ // TODO url
this.postFN({
url: 'xxx',
params: {
@@ -203,14 +236,15 @@
})
}).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: {
@@ -237,6 +271,7 @@
var dialogData = {
type: 'add',
isUp: 1
+ // TODO 閮ㄥ垎缁勪欢闇�瑕侀璁惧瓧娈碉紝鎻愪緵缁檝-model锛屼緥濡� el-select el-timepicker el-datepicker 涓婁紶缁勪欢 瀵屾枃鏈瓑
}
this.dialogVisible = true
this.$nextTick(() => {
@@ -261,6 +296,8 @@
hideDialog() {
this.dialogData = {}
this.dialogVisible = false
+ // 娓呯┖瀵屾枃鏈�
+ // this.rangenum = null
},
// 鎻愪氦鏂板&缂栬緫
submitHandle() {
@@ -276,12 +313,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)
diff --git a/src/pages/demo/list.vue b/src/pages/demo/list.vue
index 5da8489..1e93e40 100644
--- a/src/pages/demo/list.vue
+++ b/src/pages/demo/list.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="瑙掕壊鍚嶇О">
@@ -22,6 +25,7 @@
<!-- 鎿嶄綔鍖� 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌 -->
<el-row :gutter="10" class="mb8">
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_add')" -->
<el-col :span="1.5">
<el-button
type="primary"
@@ -48,6 +52,7 @@
<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">
+ <!-- 鏉冮檺鍒ゆ柇 v-if="getAuthValueFN('xxx_edit')" -->
<el-switch
v-model="scope.row.isUp"
:active-value="1"
@@ -59,12 +64,14 @@
<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" fixed="right">
<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"
@@ -76,7 +83,7 @@
</el-table>
<!-- 鏂板&缂栬緫 -->
- <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'鏂板鍖婚櫌绉戝':'缂栬緫鍖婚櫌绉戝'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
+ <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="璇疯緭鍏ュ悕绉�" maxlength="50" />
@@ -112,13 +119,20 @@
data() {
return {
showSearch: true, // 鏄惁鏄剧ず鎼滅储鍖�
- keyWord: '',
+ keyWord: '', // 鎼滅储鍖哄瓧娈碉紝鍙嚜琛屾墿灞曞叾浣欏瓧娈�
+ // TODO
+ objectName: 'xx', // 瀵硅薄鍚嶇О锛岀敤浜庡垹闄ゆ彁绀恒�佸惎鐢ㄦ彁绀恒�佸脊绐楁爣棰樼瓑
+
+ // 鏁版嵁鍒楄〃
list: [],
// 寮圭獥鏁版嵁
dialogVisible: false,
dialogData: {},
+
+ // 瀵屾枃鏈紪杈戝櫒
+ // rangenum: null,
// 鍒嗛〉 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
total: 0,
@@ -146,10 +160,26 @@
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
this.postFN({
+ // TODO url
url: 'xxx',
params: {
pageNum: pageNum,
@@ -170,6 +200,7 @@
}
}
}, (inf) => {
+ // 娴嬭瘯鐢�
for (var i = 0; i < 19; i++) {
inf.list.push({
id: 'xxx',
@@ -201,6 +232,7 @@
type: 'warning'
}).then(() => {
// 纭畾鍥炶皟
+ // TODO url
this.postFN({
url: 'xxx',
params: {
@@ -227,6 +259,7 @@
}).then(() => {
this.postFN({
url: 'xxx',
+ // TODO url
params: {
id: item.id
},
@@ -275,6 +308,8 @@
hideDialog() {
this.dialogData = {}
this.dialogVisible = false
+ // 娓呯┖瀵屾枃鏈�
+ // this.rangenum = null
},
// 鎻愪氦鏂板&缂栬緫
submitHandle() {
@@ -295,7 +330,8 @@
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)
diff --git a/src/styles/ry.scss b/src/styles/ry.scss
index c4b9b7c..225a386 100644
--- a/src/styles/ry.scss
+++ b/src/styles/ry.scss
@@ -105,7 +105,7 @@
position: absolute;
}
-.el-table .fixed-width .el-button--mini {
+.el-table .fixed-width .el-button--text {
color: #409EFF;
padding-left: 0;
padding-right: 0;
@@ -237,4 +237,4 @@
.top-right-btn {
position: relative;
float: right;
-}
\ No newline at end of file
+}
--
Gitblit v1.8.0