| | |
| | | <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-input |
| | | v-model="keyWord" |
| | | placeholder="请输入角色名称" |
| | | placeholder="搜索角色名称" |
| | | clearable |
| | | size="small" |
| | | style="width: 240px" |
| | |
| | | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> |
| | | <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-row> |
| | | <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ --> |
| | | |
| | | <!-- |
| | | 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" |
| | |
| | | <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" /> |
| | |
| | | :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, |
| | |
| | | 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: { |
| | | id: item.id |
| | | id: item.id, |
| | | isUp: item.isUp |
| | | }, |
| | | mockData: { |
| | | code: 100, |
| | |
| | | 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) |
| | | |
| | |
| | | }, () => { |
| | | this.$messageSuc('保存成功') |
| | | this.hideDialog() |
| | | this.reGetList() |
| | | isAdd ? this.reGetList() : this.getList() |
| | | }) |
| | | } |
| | | } |