sasp-admin 0.2.57

package/src/views/complex/config/complex.vue

@@ -0,0 +1,501 @@
+<template>
+    <el-container style="height: 100%">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" size="small" class="demo-form-inline"
+                         @submit.native.prevent="crud.doSearch()">
+                    <el-form-item label="视图名称">
+                        <el-input v-model="crud.searchForm.viewName" placeholder="视图名称"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="crud.doSearch()">查询</el-button>
+                        <el-button icon="el-icon-close" @click="crud.resetSearch()">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+
+        <el-main id="tableMain" style="height: 100%">
+            <el-container style="height:100%" class="table-list-container">
+                <el-header style="height: auto;" size="medium">
+                    <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="add()">新增
+                    </el-button>
+                    <el-button type="danger" size="small" round icon="el-icon-delete" @click="remove()">删除
+                    </el-button>
+                </el-header>
+                <el-main style="height: 100%;" ref="tableMain">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"
+                              header-row-class-name="list-default-row"
+                              style="width: 100%;" @row-dblclick="beginRowEdit">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="视图名称" prop="viewName" align="center">
+                            <template slot-scope="scope">
+                                <el-input v-model="scope.row.viewName" v-if="scope.row.editing"></el-input>
+
+                                <div v-else>{{scope.row.viewName}}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="自动刷新" prop="viewName" align="center">
+                            <template slot-scope="scope">
+                                <el-radio-group v-model="scope.row.autoRefresh" v-if="scope.row.editing">
+                                    <el-radio :label="'1'">是</el-radio>
+                                    <el-radio :label="'0'">否</el-radio>
+                                </el-radio-group>
+                                <div v-else>
+                                    <div v-if="scope.row.autoRefresh == '1'">{{'是'}}</div>
+                                    <div v-else>{{'否'}}</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="说明" prop="remark" align="center">
+                            <template slot-scope="scope">
+                                <el-input v-model="scope.row.remark" v-if="scope.row.editing"></el-input>
+                                <div v-else>{{scope.row.remark}}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="300">
+                            <template slot-scope="scope">
+                                <div v-if="scope.row.editing">
+                                    <el-button type="primary" @click="save(scope.row)" size="mini"
+                                               icon="el-icon-success">保存
+                                    </el-button>
+                                    <el-button type="primary" @click="cancelAdd(scope.row)" size="mini"
+                                               icon="el-icon-error">取消
+                                    </el-button>
+                                </div>
+                                <div v-else>
+                                    <el-button type="primary" @click="setting(scope.row)" size="mini"
+                                               icon="el-icon-edit">配置
+                                    </el-button>
+                                    <el-button type="primary" @click="complexPreview(scope.row)" icon="el-icon-tickets"
+                                               size="mini">预览
+                                    </el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange()"
+                    @current-change="crud.currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+        <el-dialog :close-on-click-modal=false :title="'【' + currentRow.viewName + '】预览'" class="preview-complex"
+                   :visible.sync="previewDialog" width="90%" height="80%" top="5vh">
+            <complex-view-rendering
+                    v-if="previewDialog"
+                    :resource-id="resourceId"
+                    :data-permis="dataPermis"
+                    :operate-permis="operatePermis">
+
+            </complex-view-rendering>
+        </el-dialog>
+        <el-dialog :close-on-click-modal=false :title="'【' + currentRow.viewName + '】配置'" class="preview-complex"
+                   :visible.sync="settingDialog" width="90%" height="80%" top="5vh">
+            <complex-setting
+                    @registeredResource="registeredResource"
+                    :view-obj="currentRow"
+                    :resource-id="resourceId"
+                    :url-type-option-arr="urlTypeOptionArr"
+                    :url-type-option-obj="urlTypeOptionObj"
+                    :complex-preview="complexPreview"
+                    v-if="settingDialog"></complex-setting>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script>
+    import ComplexSetting from "./complexSetting";
+    import ComplexViewRendering from "../../../components/complexViewRendering";
+
+    export default {
+        name: "complex",
+        components: {ComplexViewRendering, ComplexSetting},
+        data() {
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "complex",
+                    url: this.api.complex.url,
+                    afterRemoveSuccess: this.afterRemoveSuccess,
+                    searchForm:{order:"UPDATE_TIME DESC,CREATE_TIME DESC"},
+                    noClearSearchColumns:['order']
+                }),
+                currentRow: {},
+                previewDialog: false,
+                settingDialog: false,
+                urlTypeOptionArr: [], //链接类型-从资源池中获取（可用对象）
+                urlTypeOptionObj: {},//链接类型对应对象（可用对象）
+                allResouceArr: [], //所有资源池对象
+                rSourceTypeObj: {
+                    "singleForm": "单表表单",
+                    "form": "智能建表",
+                    "flow": "工作流",
+                    "statRep": "统计报表",
+                    "url": "url资源",
+                    "sysFea": "自定义功能",
+                    "sysFun": "系统功能"
+                },
+
+                resourceId: '', //预览资源id
+                operatePermis: "", //预览操作权限
+                dataPermis: "", //预览数据权限
+                deleteIdArr: [],//删除id
+                eidtRow: [],
+                editStatus: false
+            }
+        },
+        created() {
+            //从资源池中获取链接类型
+            this.initurlTypeOptionArr();
+        },
+        watch: {
+            previewDialog() { //监听配置弹窗，如果弹窗关闭则执行查询方法·
+                if (!this.previewDialog) {
+                    this.crud.search();
+                }
+            }
+        },
+
+        methods: {
+            /**
+             * 添加
+             */
+            add() {
+                let vm = this;
+                let rows = vm.crud.dataStore.records;
+                if (rows.length > 0 && !rows[0].id) {
+                    vm.$message('请先完成当前的数据添加！');
+                    return;
+                }
+                let newData = {
+                    "viewName": "",
+                    "remark": "",
+                    autoRefresh:"0",
+                    editing: true
+                };
+                rows.unshift(newData);
+            },
+
+            /**
+             * 删除
+             */
+            remove() {
+                //删除事件
+                this.deleteIdArr = [];
+                let selection = this.$refs[this.crud.tableRef].selection || [];
+                selection.forEach(item => {
+                    this.deleteIdArr.push(item.id);
+                });
+
+                this.crud.remove();
+            },
+
+            /**
+             * 取消添加
+             */
+            cancelAdd(row) {
+                let vm = this;
+                let rows = vm.crud.dataStore.records;
+                if (row["id"]) {
+                    this.$set(row, "editing", false);
+                    vm.crud.dataStore.records = JSON.parse(JSON.stringify(this.eidtRow));
+                } else {
+                    rows.splice(rows.indexOf(row), 1);
+                }
+                this.editStatus = false;
+            },
+            /**
+             * 修改
+             * @param row
+             */
+            beginRowEdit(row) {
+                if (this.editStatus) {
+                    this.$message("请先结束当前编辑行！");
+                    return;
+                } else {
+                    this.editStatus = true;
+                }
+                this.eidtRow = JSON.parse(JSON.stringify(this.crud.dataStore.records));
+                this.$set(row, "editing", true);
+            },
+            /**
+             * 保存
+             * * @param row
+             */
+            save(row) {
+                let vm = this;
+                if (!row["viewName"]) {
+                    vm.$message({
+                        message: "视图名称不能为空！",
+                        duration: 1000
+                    });
+                    return;
+                }
+                let submitObj = {
+                    "viewName": row["viewName"],
+                    "remark": row["remark"],
+                    "autoRefresh": row["autoRefresh"],
+                    "id": row["id"] || "",
+                };
+                let url = row["id"] ? this.api.complex.update : this.api.complex.add;
+                vm.axios.post(url, submitObj).then(res => {
+                    vm.$message({
+                        duration: 1500,
+                        type: 'success',
+                        message: res.data.operateMessage
+                    });
+                    if (res.data.operateSuccess) { // 保存 or 更新成功保存到资源池
+                        //更新rName
+                        this.updateResources(res.data.operateObj);
+                    }
+                    vm.editStatus = false;
+                    vm.crud.search();
+                })
+            },
+
+
+            /**
+             * 注册or保存到资源池
+             */
+            async registeredResource(obj, run) {
+                //根据资源类型
+                //根据当前资源查询 子复合视图 并获取所有 子页面的 数据权限和 操作权限
+                let resourceParam = {
+                    rType: 'page', //url页面资源
+                    rName: obj.viewName, //功能名称
+                    rKey: obj.id, //唯一
+                    externalAccess: '1',
+                    noLoginRequired: '1',//默认不需要登录
+                    passSwitch: '0',
+                    rSource: 'cview', //资源类型 复合视图
+                    rClass: '复合视图',
+                    rClassId: '-1',
+                    operatePermis: obj.optArr, //操作权限
+                    dataPermis: obj.dataArr, //数据权限
+                    rStatus: '1'
+                };
+                await this.axios.post(this.api.resources.saveResources, resourceParam); //注册or更新到资源池
+            },
+
+            /**
+             *
+             */
+            setting(row) {
+                this.currentRow = row;
+
+                this.resourceId = ''; //资源池id
+                this.operatePermis = []; //操作权限
+                this.dataPermis = []; //数据权限
+                let resourceArr = this.allResouceArr.filter(resource => {
+                    return resource.rkey == row.id && resource.rsource == 'cview';
+                });
+                let resourceObj = resourceArr.length > 0 ? resourceArr[0] : {};
+                if (!this.isEmptyObject(resourceObj)) {
+                    this.resourceId = resourceObj.id;
+                }
+                this.settingDialog = true;
+            },
+            /**
+             *
+             * @param row
+             */
+            complexPreview(row) {
+                this.resourceId = ''; //资源池id
+                let resourceObj = {};
+                this.allResouceArr.some(item =>{
+                    if(item.rkey == row.id && item.rsource == "cview"){
+                        resourceObj = item;
+                        return false;
+                    }
+                });
+                this.currentRow = row;
+                if(!resourceObj.id){ // 不存在时刚添加没刷新数据
+                    this.initurlTypeOptionArr().then(() => {
+                        resourceObj = {};
+                        this.allResouceArr.forEach(resource => {
+                            if(resource.rkey == row.id && resource.rsource == 'cview'){
+                                resourceObj = resource;
+                            }
+                        });
+                        this.openPreviewDialog(resourceObj);
+                    });
+                }else{
+                    this.openPreviewDialog(resourceObj);
+                }
+            },
+            openPreviewDialog(resourceObj){
+                this.operatePermis = "";
+                this.dataPermis = "";
+                if (!this.isEmptyObject(resourceObj)) {
+                    this.resourceId = resourceObj.id;
+                    let optArr = [];
+                    let dataArr = [];
+                    (resourceObj.operatePermisList || []).forEach(item => {
+                        optArr.push(item.id);
+                    });
+                    (resourceObj.dataPermisList || []).forEach(item => {
+                        dataArr.push(item.id);
+                    });
+                    this.dataPermisList = dataArr.join(",");
+                    this.operatePermis = optArr.join(",");
+                }
+                this.previewDialog = true;
+
+            },
+
+            /**
+             * 从资源池中获取资源类型
+             */
+            initurlTypeOptionArr() {
+                let vm = this;
+                //查询资源来源是复合视图的
+                let allResourcesArr = [];
+                vm.urlTypeOptionArr = []; //绑定资源数据
+                vm.urlTypeOptionObj = {};
+                vm.allResouceArr = []; //所有资源池
+                return new Promise(resolve => {
+                    vm.axios.post(this.api.resources.findResources, {rTypes: "page,menu,href", rStatus: '1'}).then(res => { //获取绑定资源数据
+                        if (res.data && res.data.operateObj) {
+                            (res.data.operateObj || []).forEach(item => {
+                                if (item.rsource != 'cview' && item.rsource != 'singleForm') { //禁止套娃
+                                    // （复合视图类型和自定义单表表单资源不能使用）
+                                    allResourcesArr.push(item);
+                                    vm.urlTypeOptionObj[item.id] = item;
+                                }
+                                vm.allResouceArr.push(item);
+                            });
+                        }
+
+                        //对资源池总数据根据数据来源分组  rSource
+                        let sourceData = this.getrSource(allResourcesArr);
+                        sourceData.forEach(item => {
+                            let childData = this.getrClass(item['children'] || []);
+                            this.$set(item, 'children', childData || []);
+                        });
+                        sourceData = JSON.parse(JSON.stringify(sourceData).replace(/id/g, 'value').replace(/rname/g, 'label'));
+
+                        //根据
+                        vm.urlTypeOptionArr = sourceData;
+                        resolve();
+                    });
+                })
+            },
+
+            /**
+             *  根据 rSource 的分组
+             * @param dataArr
+             */
+            getrSource(dataArr) {
+                let map = {},
+                    dest = [];
+                dataArr.forEach(ai => {
+                    if (!map[ai.rsource]) {
+                        dest.push({
+                            value: ai.rsource,
+                            label: this.rSourceTypeObj[ai.rsource],
+                            children: [ai]
+                        });
+                        map[ai.rsource] = ai;
+                    } else {
+                        dest.forEach(dj => {
+                            if (dj.value == ai.rsource) {
+                                dj.children.push(ai);
+                            }
+                        });
+                    }
+                });
+                return dest;
+            },
+
+            /**
+             * 根据 rCalssId 分组
+             */
+            getrClass(dataArr) {
+                let map = {},
+                    dest = [];
+                dataArr.forEach(ai => {
+                    if (!map[ai.rclassId]) {
+                        dest.push({
+                            value: ai.rclassId,
+                            label: ai.rclass,
+                            children: [ai]
+                        });
+                        map[ai.rclassId] = ai;
+                    } else {
+                        dest.forEach(dj => {
+                            if (dj.value == ai.rclassId) {
+                                dj.children.push(ai);
+                            }
+                        });
+                    }
+                });
+                return dest;
+            },
+
+            /**
+             * 判断obj对象是否为空
+             * @param obj
+             * @returns {boolean}
+             */
+            isEmptyObject(obj) {
+                for (let key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        return false;//返回false，不为空对象
+                    }
+                }
+                return true;//返回true，为空对象
+            },
+
+            /**
+             * 删除对应的资源池
+             */
+            afterRemoveSuccess() {
+                //同步删除资源池信息
+                this.axios.post(this.api.resources.deleteResources, {
+                    'rkeys': this.deleteIdArr.join(","),
+                    'rsouces': 'cview'
+                }).then(res => {
+                    this.initurlTypeOptionArr(); //重新刷新资源池
+                });
+            },
+
+            /**
+             * 更新资源池
+             */
+            updateResources(data){
+                let obj = {
+                    rKey : data.id,
+                    rSource : 'cview',
+                    rName : data.viewName,
+                    rType : "page",
+                    externalAccess : "0",
+                    noLoginRequired : "0",
+                    passSwitch : "0",
+                    rClass : "复合视图",
+                    rClassId : "-1",
+                    rStatus : "1"
+                }
+                this.axios.post(this.api.resources.updateResources, obj);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .preview-complex /deep/ .el-dialog__body {
+        height: calc(100% - 90px);
+        overflow-y: hidden !important;
+    }
+</style>