| | |
| | | :height="tableHeight" |
| | | border |
| | | class="cus-table" |
| | | @select="handleSelection" |
| | | @row-click="handleRowClick" |
| | | @select-all="handleSelectionAll" |
| | | @selection-change="handleSelectionChange" |
| | | @sort-change="sortChange" |
| | | > |
| | | <el-table-column |
| | | type="selection" |
| | |
| | | <el-checkbox |
| | | v-if="item.type === 'checkbox'" |
| | | v-model="row[item.prop]" |
| | | :disabled="row.allDisabled ? true :typeof row[item.prop] == 'undefined' || typeof row[item.prop] == null"> |
| | | :disabled="row.allDisabled ? true :row[item.code]"> |
| | | </el-checkbox> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | //当前选中的表格行 |
| | | selectList: [], |
| | | itemKey: '', |
| | | viewStatus: false, |
| | | addIndex: Number, |
| | | currentRow: {} |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | getClassifyAuthList({classifyId: this.classifyData.oid, authType: "classify_auth"}).then(res => { |
| | | //console.log(res.data.data); |
| | | let authDatas = res.data.data; |
| | | console.log('authDatas', authDatas) |
| | | if (authDatas.length > 0) { |
| | | authDatas.forEach((authData,index) => { |
| | | let item = { |
| | |
| | | Vue.set(item, data, true); |
| | | }); |
| | | this.classifyAuthData.push(item); |
| | | this.addIndex = this.classifyAuthData.length -1 ; |
| | | // console.log('classifyAuthData', this.classifyAuthData) |
| | | this.addIndex = this.classifyAuthData.length - 1; //添加行下标等于classifyAuthData的长度-1 |
| | | this.roleHandlerMethods(authData.roleId, 'create', this.addIndex) |
| | | }) |
| | | } |
| | | this.roleHandlerMethods('', 'create', 0) |
| | | }); |
| | | console.log('created', this.classifyAuthData) |
| | | }); |
| | | } |
| | | }, |
| | |
| | | }, |
| | | methods: { |
| | | roleHandlerMethods(id, type, index) { |
| | | if (this.classifyAuthData.length > 0) { |
| | | let roleButtonId = type === 'select' ? id : this.classifyAuthData[0].roleData; |
| | | getButtonsByRoleId({roleId: roleButtonId, code: 'classifyTree'}).then(res => { |
| | | if (this.classifyAuthData.length < 0) { |
| | | return; |
| | | } |
| | | |
| | | getButtonsByRoleId({roleId: id, code: 'classifyTree'}).then(res => { |
| | | // 找到this.classifyAuthButton中没有对应的属性 |
| | | const filteredItems = this.classifyAuthButton.filter(item => { |
| | | return !res.data.data.find(x => x.id === item.id); |
| | | }); |
| | | |
| | | //拿表格列头循环和没有对应的属性进行比较 |
| | | this.classifyAuthHeader.forEach((item) => { |
| | | if (filteredItems.some(x => x.id === item.prop)) { |
| | | this.$nextTick(() => { |
| | | |
| | | if(this.classifyAuthData[index] !== undefined && this.classifyAuthData[index] !== null){ |
| | | Object.keys(this.classifyAuthData[index]).forEach((key) => { |
| | | if (item.prop === key) { |
| | | this.classifyAuthData[index] = Object.assign({}, this.classifyAuthData[index], { [key]: undefined }); |
| | | if (item.code === "classify_view") { |
| | | this.$set(this.classifyAuthData[index],'allDisabled',true) |
| | | } |
| | | // this.classifyAuthData[index] = Object.assign({}, this.classifyAuthData[index], {[key]: undefined}); |
| | | this.$set(this.classifyAuthData[index], item.code, true); |
| | | } |
| | | }); |
| | | } |
| | | // console.log('classifyAuthData', this.classifyAuthData) |
| | | // console.log('item', item.prop) |
| | | }) |
| | | } |
| | | }); |
| | | |
| | | //添加 “查看全部禁用条件” |
| | | this.classifyAuthData.forEach((classkey, classIndex) => { |
| | | if (classkey.classify_view) { |
| | | this.$set(this.classifyAuthData[classIndex], 'allDisabled', true) |
| | | } |
| | | }); |
| | | |
| | | //强制刷新表格 |
| | | this.itemKey = uuidv4(); |
| | | }) |
| | | }, |
| | | async selectChange(row, currentRow) { |
| | | try { |
| | | this.currentRow = currentRow; |
| | | const res = await getButtonsByRoleId({roleId: row, code: 'classifyTree'}); |
| | | |
| | | const filteredItems = this.classifyAuthButton.filter(item => { |
| | | return !res.data.data.find(x => x.id === item.id); |
| | | }); |
| | | |
| | | this.classifyAuthHeader.forEach(item => { |
| | | const isMatched = filteredItems.some(x => x.id === item.prop); |
| | | this.$nextTick(() => { |
| | | if (currentRow) { |
| | | if (isMatched) { |
| | | Object.keys(currentRow).forEach(key => { |
| | | currentRow[item.code] = item.prop === key ? false : true; |
| | | if (!currentRow.classify_view) { |
| | | currentRow.allDisabled = false; |
| | | } |
| | | }); |
| | | }) |
| | | } else { |
| | | Object.keys(currentRow).forEach(key => { |
| | | currentRow[item.code] = item.prop === key ? true : false; |
| | | if (!currentRow.classify_view) { |
| | | currentRow.allDisabled = false; |
| | | } |
| | | }, |
| | | selectChange(row,index) { |
| | | this.roleHandlerMethods(row, 'select',index.index); |
| | | }); |
| | | } |
| | | } |
| | | this.itemKey = uuidv4(); // 强制刷新表格 |
| | | }); |
| | | }); |
| | | } catch (error) { |
| | | console.error(error); |
| | | } |
| | | }, |
| | | // 关闭对话框 |
| | | closeDialog() { |
| | |
| | | this.$message.warning("当前租户不存在角色信息!"); |
| | | return; |
| | | } |
| | | this.addIndex++; |
| | | console.log('this.roleList', this.roleList) |
| | | this.addIndex++; //自定义生成添加行下标 |
| | | let item = { |
| | | roleData: this.roleList[0].id, |
| | | classifyItem: this.classifyData.label, |
| | |
| | | }) |
| | | //console.log(item) |
| | | this.classifyAuthData.push(item); |
| | | this.roleHandlerMethods('', 'add', this.addIndex) |
| | | this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex) |
| | | }, |
| | | // 删除行 |
| | | subClassifyAuth() { |