123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <el-dialog
- v-loading="loading"
- :show-close="false"
- :close-on-click-modal="false"
- :visible.sync="isShow"
- :title="this.curObj && this.curObj.id ? '编辑角色' : '添加角色'"
- :fullscreen="false"
- width="470px"
- custom-class="xl-dialog"
- center>
- <base-form style="width:400px" :data="formData" ref="ruleForm" :isInline="false" labelWidth="80px">
- <div slot="otherItem" class="scoped-tree">
- <!-- check-strictly -->
- <el-tree
- :data="curData"
- show-checkbox
- node-key="id"
- :default-expanded-keys="checkedIds"
- :default-checked-keys="checkedIds"
- ref="menuTree"
- :props="defaultProps">
- </el-tree>
- </div>
- <div slot="footer">
- <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
- <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
- </div>
- </base-form>
- </el-dialog>
- </template>
- <script>
- export default {
- props: {
- isShow: Boolean,
- curObj: Object
- },
- mixins,
- data() {
- return {
- formData: [],
- curData: [],
- checkedIds: [],
- defaultProps: {
- children: 'children',
- label: 'name'
- },
- loading: true,
- }
- },
- watch: {
- isShow: function(val) {
- if (val) {
- let params = {...this.curObj}
- this.checkedIds = params.permissions_ids || []
- this.formData = [
- {label: '角色名称', key: 'name', rules: 1},
- {label: '角色描述', key: 'description', rules: 1},
- ]
- this.setDefaultValue(params)
- }
- }
- },
- created () {
- this.getMenu()
- },
- methods: {
- getMenu () {
- this.$api.base.admpermissionslist().then(res => {
- this.curData = [...res]
- })
- },
- systemChange (val) {
- // console.log(val)
- },
- close (str) {
- if (str === 'confirm') {
- this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
- if (valid) {
- const oldform = this.$refs.ruleForm.baseForm
- let params = {...oldform}
- let str = 'admrolesadd'
- if(this.curObj && this.curObj.id) {
- params.id = this.curObj.id
- str = 'admrolesedit'
- }
- const resIds = this.$refs.menuTree.getCheckedNodes(false, false).map(item=> {
- return item.id
- })
- params.node = resIds.join(',')
- this.$api.base[str](params).then(data => {
- this.$msgs('保存成功!')
- this.$emit('close', params)
- // this.setDefaultValue()
- })
- }
- })
- } else {
- this.$emit('close')
- this.setDefaultValue()
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- ::v-deep .scoped-tree {
- height: 300px;
- overflow-y: auto;
- .el-tree {
- background: #f7f7f7;
- }
- }
- </style>
|