New file |
| | |
| | | <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时间激活v-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> |
| | |
| | | <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="角色名称"> |
| | |
| | | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" --> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | |
| | | <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" |
| | |
| | | <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" |
| | |
| | | </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" /> |
| | |
| | | data() { |
| | | return { |
| | | showSearch: true, // 是否显示搜索区 |
| | | keyWord: '', |
| | | keyWord: '', // 搜索区字段,可自行扩展其余字段 |
| | | |
| | | // TODO |
| | | objectName: 'xx', // 对象名称,用于删除提示、启用提示、弹窗标题等 |
| | | |
| | | // 数据列表 |
| | | list: [], |
| | | |
| | | // 弹窗数据 |
| | | dialogVisible: false, |
| | | dialogData: {}, |
| | | |
| | | // 富文本编辑器 |
| | | // rangenum: null, |
| | | |
| | | // 分页 ↓↓↓↓↓↓↓↓↓↓ |
| | | total: 0, |
| | |
| | | pageSize: 20, |
| | | // 分页 ↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | // TODO |
| | | // 表单校验 |
| | | rules: { |
| | | name: [ |
| | |
| | | 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 |
| | |
| | | params: { |
| | | pageNum: pageNum, |
| | | pageSize: pageSize, |
| | | |
| | | // TODO |
| | | keyWord: keyWord |
| | | }, |
| | | mockData: { |
| | |
| | | // 删除 |
| | | handleDelete(item) { |
| | | // 打开二次确认弹窗 |
| | | this.$confirm('是否确认删除该角色?', '提示', { |
| | | this.$confirm('是否确认删除该' + this.objectName + '?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | // 确定回调 |
| | | // TODO url |
| | | this.postFN({ |
| | | url: 'xxx', |
| | | params: { |
| | |
| | | }) |
| | | }).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: { |
| | |
| | | var dialogData = { |
| | | type: 'add', |
| | | isUp: 1 |
| | | // TODO 部分组件需要预设字段,提供给v-model,例如 el-select el-timepicker el-datepicker 上传组件 富文本等 |
| | | } |
| | | this.dialogVisible = true |
| | | this.$nextTick(() => { |
| | |
| | | hideDialog() { |
| | | this.dialogData = {} |
| | | this.dialogVisible = false |
| | | // 清空富文本 |
| | | // this.rangenum = null |
| | | }, |
| | | // 提交新增&编辑 |
| | | submitHandle() { |
| | |
| | | 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) |
| | | |
| | |
| | | <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="角色名称"> |
| | |
| | | |
| | | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" --> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | |
| | | <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" |
| | |
| | | <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" |
| | |
| | | </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" /> |
| | |
| | | data() { |
| | | return { |
| | | showSearch: true, // 是否显示搜索区 |
| | | keyWord: '', |
| | | keyWord: '', // 搜索区字段,可自行扩展其余字段 |
| | | |
| | | // TODO |
| | | objectName: 'xx', // 对象名称,用于删除提示、启用提示、弹窗标题等 |
| | | |
| | | // 数据列表 |
| | | list: [], |
| | | |
| | | // 弹窗数据 |
| | | dialogVisible: false, |
| | | dialogData: {}, |
| | | |
| | | // 富文本编辑器 |
| | | // rangenum: null, |
| | | |
| | | // 分页 ↓↓↓↓↓↓↓↓↓↓ |
| | | total: 0, |
| | |
| | | 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, |
| | |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | // 测试用 |
| | | for (var i = 0; i < 19; i++) { |
| | | inf.list.push({ |
| | | id: 'xxx', |
| | |
| | | type: 'warning' |
| | | }).then(() => { |
| | | // 确定回调 |
| | | // TODO url |
| | | this.postFN({ |
| | | url: 'xxx', |
| | | params: { |
| | |
| | | }).then(() => { |
| | | this.postFN({ |
| | | url: 'xxx', |
| | | // TODO url |
| | | params: { |
| | | id: item.id |
| | | }, |
| | |
| | | hideDialog() { |
| | | this.dialogData = {} |
| | | this.dialogVisible = false |
| | | // 清空富文本 |
| | | // this.rangenum = null |
| | | }, |
| | | // 提交新增&编辑 |
| | | submitHandle() { |
| | |
| | | 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) |
| | | |
| | |
| | | position: absolute; |
| | | } |
| | | |
| | | .el-table .fixed-width .el-button--mini { |
| | | .el-table .fixed-width .el-button--text { |
| | | color: #409EFF; |
| | | padding-left: 0; |
| | | padding-right: 0; |
| | |
| | | .top-right-btn { |
| | | position: relative; |
| | | float: right; |
| | | } |
| | | } |