|
@@ -0,0 +1,273 @@
|
|
|
+<template>
|
|
|
+ <div class="admin-department">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="" size="small" @click="getList">查询</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleAdd(0)">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ row-key="id"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ @expand-change="getNode"
|
|
|
+ header-row-class-name="custom-table-header"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="数据权限名称" align="" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="tenant" label="所属功能" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)">
|
|
|
+ 编辑
|
|
|
+ <el-dropdown-menu slot="dropdown" class="text-align_center">
|
|
|
+ <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" :visible.sync="visible" width="100%" :before-close="close">
|
|
|
+ <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
|
|
|
+ <!-- <el-form-item label="所属租户" prop="tenant">
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="dark"
|
|
|
+ :disabled="!userinfo.tenantName"
|
|
|
+ :content="userinfo.tenantName"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-input v-model="userinfo.tenantName" placeholder="请输入所属租户" :readonly="true" ></el-input>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="所属功能" prop="function">
|
|
|
+ <el-cascader
|
|
|
+ v-model="ruleForm.function"
|
|
|
+ :options="functionList"
|
|
|
+ :props="{multiple:true, checkStrictly: false,value:'id',label:'name' }"
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择所属功能"
|
|
|
+ clearable
|
|
|
+ style="width:100%"></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据权限">
|
|
|
+ <template>
|
|
|
+ <div style="border:1px solid #C0C0C0;border-radius:4px;overflow:auto">
|
|
|
+ <div class="tree">
|
|
|
+ <div class="tree-content" @mousedown.stop="move">
|
|
|
+ <tree-item :tree-data="treeData" :tree-first="true" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Treeselect from '@riophae/vue-treeselect'
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+import TreeItem from './components/TreeItem'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Treeselect,
|
|
|
+ TreeItem
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ treeData: [{
|
|
|
+ name: '1',
|
|
|
+ child: [
|
|
|
+ { name: '2',
|
|
|
+ child: [{ name: '1' }, { name: '2' }]
|
|
|
+ },
|
|
|
+ { name: '1',
|
|
|
+ child: [{ name: '1' }, { name: '2' }]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ btnLoading: false,
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ title: '',
|
|
|
+ show:false,
|
|
|
+ disabled:false,
|
|
|
+ lastName:'',
|
|
|
+ functionLis:[],
|
|
|
+ queryParams: {
|
|
|
+ size: 10,
|
|
|
+ current: 1,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ ruleForm: {},
|
|
|
+ roleList:[],
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
|
|
|
+ parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' },],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ this.getFunctionList()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userinfo() {
|
|
|
+ return this.$store.state.admin.userinfo
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ move(e) {
|
|
|
+ const odiv = e.currentTarget // 获取元素
|
|
|
+ console.log(odiv)
|
|
|
+
|
|
|
+ // 算出鼠标相对元素的位置
|
|
|
+ const disX = e.clientX - odiv.offsetLeft
|
|
|
+ const disY = e.clientY - odiv.offsetTop
|
|
|
+ document.onmousemove = (e) => { // 鼠标按下并移动的事件
|
|
|
+ // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
|
|
|
+ const left = e.clientX - disX
|
|
|
+ const top = e.clientY - disY
|
|
|
+
|
|
|
+ // 绑定元素位置到positionX和positionY上面
|
|
|
+ this.positionX = top
|
|
|
+ this.positionY = left
|
|
|
+
|
|
|
+ // 移动当前元素
|
|
|
+ odiv.style.left = left + 'px'
|
|
|
+ odiv.style.top = top + 'px'
|
|
|
+ }
|
|
|
+ document.onmouseup = () => {
|
|
|
+ document.onmousemove = null
|
|
|
+ document.onmouseup = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getNode(node){
|
|
|
+ console.log(node)
|
|
|
+
|
|
|
+ },
|
|
|
+ normalizer(node) {
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.name,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAdd(updepartmentId,row) {
|
|
|
+ console.log(row)
|
|
|
+ this.title = '新增数据权限'
|
|
|
+ this.visible = true
|
|
|
+
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.title = '编辑数据权限'
|
|
|
+ this.visible = true
|
|
|
+ this.ruleForm = { ...row }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.current = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.getDepartmentList(this.queryParams).then(response => {
|
|
|
+
|
|
|
+ this.tableData = response.data
|
|
|
+ this.total=response.pageColumn.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getFunctionList() {
|
|
|
+ this.$api.getFunctionList().then(response => {
|
|
|
+ this.functionList = response.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.btnLoading = true
|
|
|
+ if (this.ruleForm.id) {
|
|
|
+ this.$api.editDepartment(this.ruleForm).then(response => {
|
|
|
+ this.$message.success('编辑成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.ruleForm.tenant=this.userinfo.tenantId
|
|
|
+ this.$api.addDepartment(this.ruleForm).then(response => {
|
|
|
+ this.$message.success('新增成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确认删除本条数据吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.deleteDepartment({ id: row.id }).then(response => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.loading = false
|
|
|
+ this.getList()
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.admin-department {
|
|
|
+
|
|
|
+}
|
|
|
+.tree{
|
|
|
+ background: #fff;
|
|
|
+ min-height: calc(100vh - 110px);
|
|
|
+ position: relative;
|
|
|
+ &-content{
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|