sasp-admin 0.2.57

package/src/views/resources/tabs/comp/pageResPreview.vue

@@ -0,0 +1,309 @@
+<template>
+    <el-container style="width:100%;height:100%;" id="pageResPreviewContainer">
+        <el-aside width="300px">
+            <el-card class="page-resources-auth-card" style="margin-right:10px;height:34%;">
+                <div slot="header" class="clearfix">
+                    <h3 style="display: inline-block">操作权限</h3>
+
+                    <el-checkbox v-if="arrROperationAuthoritys.length>0"
+                                 style="float:right;padding-top:3px;"
+                                 :indeterminate="optAuthKeysIsIndeterminate"
+                                 v-model="checkAllOptAuthKeys"
+                                 @change="handleOptAuthCheckAllChange">全选
+                    </el-checkbox>
+                </div>
+                <div style="height: 100%;overflow: auto">
+                    <div v-if="arrROperationAuthoritys.length==0"
+                         style="padding-top:25px;text-align: center;color:#999;">
+                        暂无数据
+                    </div>
+
+                    <el-tree ref="optAuthTreeRef"
+                             :data="arrROperationAuthoritys"
+                             default-expand-all
+                             show-checkbox
+                             node-key="key"
+                             @check="optAuthTreeChange"
+                             :props="{children: 'childrens', label: 'name'}">
+                                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                                        <span>{{ data.name }}</span>
+                                    </span>
+                    </el-tree>
+
+                </div>
+            </el-card>
+
+            <el-card class="page-resources-auth-card" style="margin-right:10px;height:34%;margin-top:2%;">
+                <div slot="header" class="clearfix">
+                    <h3 style="display: inline-block">数据权限</h3>
+
+                    <el-checkbox v-if="arrRDataAuthoritys.length>0" style="float:right;padding-top:3px;"
+                                 :indeterminate="dataAuthKeysIsIndeterminate"
+                                 v-model="checkAllDataAuthKeys"
+                                 @change="handleDataAuthCheckAllChange">全选
+                    </el-checkbox>
+                </div>
+                <div style="height: 100%;overflow: auto">
+                    <el-tree ref="dataAuthTreeRef"
+                             :data="arrRDataAuthoritys"
+                             default-expand-all
+                             show-checkbox
+                             node-key="key"
+                             @check="dataAuthTreeChange"
+                             :props="{children: 'childrens', label: 'name'}">
+                                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                                        <span>{{ data.name }}</span>
+                                    </span>
+                    </el-tree>
+                </div>
+            </el-card>
+
+            <el-card class="page-resources-auth-card" style="margin-right:10px;height:28%;margin-top:2%;">
+                <div slot="header" class="clearfix">
+                    <h3>参数信息</h3>
+                </div>
+                <div style="height: 100%;overflow: auto">
+                    <div v-if="arrRParamLists.length==0" style="padding-top:25px;text-align: center;color:#999;">
+                        暂无数据
+                    </div>
+                    <el-form label-width="80px">
+                        <el-form-item v-for="item in arrRParamLists" :key="item.key" :label="item.name">
+                            <el-input v-model="item.value" @input="paramChange"></el-input>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </el-card>
+        </el-aside>
+    </el-container>
+</template>
+
+<script>
+    import rCommon from '../../js/resourcesCommon';
+
+    export default {
+        name: "page-res-preview",
+        props: {
+            previewFormData: {
+                type: Object,
+                default() {
+                    return {};
+                }
+            }
+        },
+
+        data() {
+            return {
+                rCommon: rCommon,
+
+                previewLoaded: true,
+
+                // 操作权限全选按钮状态
+                optAuthKeysIsIndeterminate: false,
+
+                // 操作权限全选按钮
+                checkAllOptAuthKeys: false,
+
+                // 数据权限全选按钮状态
+                dataAuthKeysIsIndeterminate: false,
+
+                // 数据权限全选按钮
+                checkAllDataAuthKeys: false,
+
+                // 操作权限选中值
+                checkOptAuthKeys: [],
+
+                // 操作权限选中对象
+                checkOptAuthObjs: {},
+
+                // 数据权限选中对象
+                checkDataAuthObjs: {},
+
+                // 参数信息
+                paramDatas: {},
+
+                // 操作权限对应PID
+                objOptAuthKeyAndPid: [],
+
+                // 数据权限key对应的pid
+                objDataAuthKeyAndPid: {},
+
+                arrROperationAuthoritys: [],
+                arrRDataAuthoritys: [],
+                arrRParamLists: [],
+
+                arrROperationAuthorityKeys: [],
+                arrRDataAuthorityKeys: [],
+            }
+        },
+
+        created() {
+            this.init();
+        },
+
+
+        methods: {
+            init() {
+                this.arrROperationAuthoritys = rCommon.getArrROperationAuthoritys(this.previewFormData);
+                this.arrRDataAuthoritys = rCommon.getArrRDataAuthoritys(this.previewFormData);
+                this.arrRParamLists = rCommon.getArrRParamLists(this.previewFormData);
+
+                this.arrROperationAuthorityKeys = this.getArrKeys(this.arrROperationAuthoritys);
+                this.arrRDataAuthorityKeys = this.getArrKeys(this.arrRDataAuthoritys);
+
+                this.objDataAuthKeyAndPid = {};
+                this.arrRDataAuthoritys.forEach(data => {
+                    this.objDataAuthKeyAndPid[data.key] = "-1";
+                    data.childrens && data.childrens.forEach(dataCh => {
+                        this.objDataAuthKeyAndPid[dataCh.key] = data.key;
+                    });
+                });
+
+                this.objOptAuthKeyAndPid = {};
+                this.arrROperationAuthoritys.forEach(data => {
+                    this.objOptAuthKeyAndPid[data.key] = "-1";
+                    data.childrens && data.childrens.forEach(dataCh => {
+                        this.objOptAuthKeyAndPid[dataCh.key] = data.key;
+                    });
+                });
+            },
+
+            /**
+             * 获取key数组
+             * @param arr
+             * @returns {[]}
+             */
+            getArrKeys(arr) {
+                let arrResults = [];
+                arr.forEach(data => {
+                    arrResults.push(data.key);
+
+                    data.childrens && data.childrens.forEach(dataCh => {
+                        arrResults.push(dataCh.key);
+                    });
+                });
+                return arrResults;
+            },
+
+            /**
+             * 操作权限全选时触发
+             * @param val
+             */
+            handleOptAuthCheckAllChange(val) {
+                this.optAuthKeysIsIndeterminate = false;
+                if (val) {
+                    this.$refs["optAuthTreeRef"].setCheckedKeys(this.arrROperationAuthorityKeys);
+                } else {
+                    this.$refs["optAuthTreeRef"].setCheckedKeys([]);
+                }
+                this.$nextTick(() => {
+                    this.optAuthTreeChange();
+                    this.refreshPreview();
+                });
+            },
+
+            /**
+             * 数据权限全选时触发
+             * @param val
+             */
+            handleDataAuthCheckAllChange(val) {
+                this.dataAuthKeysIsIndeterminate = false;
+                if (val) {
+                    this.$refs["dataAuthTreeRef"].setCheckedKeys(this.arrRDataAuthorityKeys);
+                } else {
+                    this.$refs["dataAuthTreeRef"].setCheckedKeys([]);
+                }
+                this.$nextTick(() => {
+                    this.dataAuthTreeChange();
+                    this.refreshPreview();
+                });
+            },
+
+
+            /**
+             * 数据权限树节点选择时触发
+             */
+            dataAuthTreeChange() {
+                let arrCheckLeafKeys = this.$refs["dataAuthTreeRef"].getCheckedKeys(true);
+
+                let checkedCount = this.$refs["dataAuthTreeRef"].getCheckedKeys().length;
+                this.checkAllDataAuthKeys = (checkedCount == this.arrRDataAuthorityKeys.length);
+                this.dataAuthKeysIsIndeterminate = checkedCount > 0 && checkedCount < this.arrRDataAuthorityKeys.length;
+
+                this.checkDataAuthObjs = {};
+
+                arrCheckLeafKeys && arrCheckLeafKeys.forEach(key => {
+                    let keyPid = this.objDataAuthKeyAndPid[key];
+                    if (keyPid == "-1") {
+                        this.checkDataAuthObjs[key] = [];
+                    } else {
+                        (!this.checkDataAuthObjs[keyPid]) && (this.checkDataAuthObjs[keyPid] = []);
+                        this.checkDataAuthObjs[keyPid].push(key);
+                    }
+                });
+                this.refreshPreview();
+            },
+
+            /**
+             * 操作权限树节点选择时触发
+             */
+            optAuthTreeChange() {
+                let arrCheckLeafKeys = this.$refs["optAuthTreeRef"].getCheckedKeys(true);
+
+                let checkedCount = this.$refs["optAuthTreeRef"].getCheckedKeys().length;
+                this.checkAllOptAuthKeys = (checkedCount == this.arrROperationAuthorityKeys.length);
+                this.optAuthKeysIsIndeterminate = checkedCount > 0 && checkedCount < this.arrROperationAuthorityKeys.length;
+
+                this.checkOptAuthObjs = {};
+
+                arrCheckLeafKeys && arrCheckLeafKeys.forEach(key => {
+                    let keyPid = this.objOptAuthKeyAndPid[key];
+                    if (keyPid == "-1") {
+                        this.checkOptAuthObjs[key] = [];
+                    } else {
+                        (!this.checkOptAuthObjs[keyPid]) && (this.checkOptAuthObjs[keyPid] = []);
+                        this.checkOptAuthObjs[keyPid].push(key);
+                    }
+                });
+                this.refreshPreview();
+            },
+
+            /**
+             * 参数发生变化时触发的方法
+             */
+            paramChange() {
+                this.paramDatas = {};
+                this.arrRParamLists && this.arrRParamLists.forEach(data => {
+                    data.value && (this.paramDatas[data.key] = data.value);
+                });
+                this.refreshPreview();
+            },
+
+            /**
+             * 刷新预览区
+             */
+            refreshPreview() {
+                this.previewLoaded = false;
+                this.$nextTick(() => {
+                    this.previewLoaded = true;
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    #pageResPreviewContainer {
+        /deep/ {
+            .el-card__header {
+                padding: 10px 20px;
+            }
+
+            .el-card__body {
+                position: relative;
+                margin: 10px;
+                padding: 0;
+                height: calc(100% - 60px);
+            }
+        }
+    }
+</style>