sasp-admin 0.2.57

package/src/views/resources/tabs/pageResources.vue

@@ -0,0 +1,970 @@
+<template>
+    <el-container style="height: 100%">
+        <el-aside width="200px" style="position:relative;">
+             <div class="tree-box">
+                <el-input
+                          placeholder="输入关键字进行过滤"
+                          v-model="filterTreeText"></el-input>
+                    <el-tree
+                            class="filter-tree"
+                            :data="resourceData"
+                            :highlight-current="true"
+                            :props="defaultProps"
+                            node-key="id"
+                            :expand-on-click-node="false"
+                            :default-expanded-keys="treeDefaultExpandedKeys"
+                            @node-click="treeNodeClick"
+                            :filter-node-method="filterNode"
+                            ref="tree">
+                    </el-tree>
+            </div>
+        </el-aside>
+        <el-main style="padding:0;">
+            <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"
+                                 @keyup.enter.native="crud.doSearch()" onSubmit="return false;">
+                            <el-form-item label="资源名称">
+                                <el-input v-model="crud.searchForm.rName" style="width:130px;"></el-input>
+                            </el-form-item>
+
+                             <el-form-item label="代理地址">
+                                <el-input v-model="crud.searchForm.rAgentUrl"  style="width:130px;"></el-input>
+                            </el-form-item>
+
+
+        <!--                        <el-form-item label="资源来源">-->
+
+        <!--                            <el-cascader v-model="crud.searchForm.rSourceAndClassArr" style="width:165px;"-->
+        <!--                                         :options="rClassOptions"-->
+        <!--                                         @change="rSourceAndClassChange"-->
+        <!--                                         :props="{value:'id', label:'name', expandTrigger:'hover', checkStrictly:true}"-->
+        <!--                                         clearable></el-cascader>-->
+        <!--                        </el-form-item>-->
+                            <el-form-item label="允许外部访问">
+                                <el-select v-model="crud.searchForm.externalAccess" style="width:88px;">
+                                    <el-option v-for="item in rCommon.arrWhether" :label="item.name" :value="item.id"
+                                               :key="item.id">
+                                        {{item.name}}
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+
+
+                            <el-form-item label="资源状态">
+                                <el-select v-model="crud.searchForm.rStatus" style="width:88px;">
+                                    <el-option v-for="item in rCommon.arrRStatus" :label="item.name" :value="item.id"
+                                               :key="item.id">
+                                        {{item.name}}
+                                    </el-option>
+                                </el-select>
+                            </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="warning" size="mini" class="saspiconfont pl-icon-ziyuanchi pointer font-18" @click="registerResources()">
+                                    注册表单
+                                </el-button>
+                        </el-header>
+                        <el-main style="height: 100%;" ref="tableMain">
+                            <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"
+                                      style="width: 100%;">
+                                <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="rname"></el-table-column>
+                                <el-table-column label="代理地址" prop="ragentUrl"></el-table-column>
+        <!--                            <el-table-column label="资源类型" prop="rtype">-->
+        <!--                                <template slot-scope="scope">-->
+        <!--                                    {{rCommon.MapRTypeDatas[scope.row.rtype]}}-->
+        <!--                                </template>-->
+        <!--                            </el-table-column>-->
+                                <el-table-column label="资源来源" align="center" prop="rsource" width="100">
+                                    <template slot-scope="scope">
+                                        {{rCommon.objRSource[scope.row.rsource]}}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="资源分类" prop="rclass"></el-table-column>
+
+                                <el-table-column label="允许外部访问" align="center" prop="externalAccess" width="110">
+                                    <template slot-scope="scope">
+                                        <el-tag :type="rCommon.objWhetherTag[scope.row.externalAccess]">
+                                            {{rCommon.objWhether[scope.row.externalAccess]}}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+
+
+                                <el-table-column label="资源状态" align="center" prop="rstatus" width="90">
+                                    <template slot-scope="scope">
+                                        <el-tag :type="rCommon.objRStatusTag[scope.row.rstatus]||'danger'">
+                                            {{rCommon.objRStatus[scope.row.rstatus]||'禁用'}}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+
+                                <el-table-column label="操作" align="center" width="220">
+                                    <template slot-scope="scope">
+        <!--                                    <el-button size="mini" icon="el-icon-edit" type="primary"-->
+        <!--                                               @click="crud.update(scope.row)">-->
+        <!--                                        修改-->
+        <!--                                    </el-button>-->
+
+                                        <el-button size="mini" icon="el-icon-view" type=""
+                                                   @click="viewData(scope.row)">
+                                            查看
+                                        </el-button>
+
+        <!--                                    <el-button size="mini" icon="el-icon-notebook-2" type="warning"-->
+        <!--                                               @click="previewRes(scope.row)">-->
+        <!--                                        预览-->
+        <!--                                    </el-button>-->
+
+                                        <template v-if="scope.row.rstatus=='1'">
+                                            <el-popconfirm title="是否确定禁用此项资源？"
+                                                           @confirm="switchStatus(scope.row.id, '0')">
+                                                <el-button size="mini" icon="el-icon-error" style="margin-left: 10px;"
+                                                           slot="reference"
+                                                           type="danger">
+                                                    禁用
+                                                </el-button>
+                                            </el-popconfirm>
+                                        </template>
+
+                                        <template v-else>
+                                            <el-popconfirm title="是否确定启用此项资源？"
+                                                           @confirm="switchStatus(scope.row.id,'1')">
+                                                <el-button size="mini" icon="el-icon-success" style="margin-left: 10px;"
+                                                           type="primary"
+                                                           slot="reference">
+                                                    启用
+                                                </el-button>
+                                            </el-popconfirm>
+                                        </template>
+
+                                    </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-container>
+        </el-main>
+    <!--        </el-main>-->
+        <el-dialog title="页面资源" :visible.sync="crud.dialogVisible"
+                   :close-on-press-escape="false"
+                   :close-on-click-modal="false" top="5vh" width="70%"
+                   height="90%" lock-scroll>
+            <el-form :ref="crud.addFormRef" :model="crud.formData" label-width="160px"
+                     :size="setting.formSize"
+                     style="width:95%;">
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">基础信息</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="资源名称" prop="rname">
+                            <el-input v-model="crud.formData.rname"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="crud.formData.rtype=='data'">
+<!--                    <el-col :span="12">-->
+<!--                        <el-form-item label="资源key" prop="rKey">-->
+<!--                            <el-input v-model="crud.formData.rKey"></el-input>-->
+<!--                        </el-form-item>-->
+<!--                    </el-col>-->
+                    <el-col :span="24">
+                        <el-form-item label="资源方法" prop="rMethodName">
+                            <el-input v-model="crud.formData.rMethodName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="资源来源" prop="rsource">
+                            <el-select v-model="crud.formData.rsource">
+                                <el-option v-for="item in rCommon.arrRSource"
+                                           :label="item.name" :value="item.id"
+                                           :key="item.id">
+                                    {{item.name}}
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="资源类型" prop="rtype" >
+                            <el-select v-model="crud.formData.rtype" disabled>
+                                <el-option v-for="item in rCommon.arrRTypeDatas"
+                                           :label="item.name" :value="item.id"
+                                           :key="item.id">
+                                    {{item.name}}
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+
+                    <el-col :span="12">
+                        <el-form-item label="资源分类" prop="rclass">
+                            <el-input v-model="crud.formData.rclass"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="资源分类ID" prop="rclassId">
+                            <el-input v-model="crud.formData.rclassId"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="资源状态" prop="rtype">
+                            <el-radio-group v-model="crud.formData.rstatus">
+                                <el-radio-button v-for="item in rCommon.arrRStatus"
+                                                 :key="item.id" :label="item.id">
+                                    {{item.name}}
+                                </el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">权限信息</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="操作权限" prop="rOperationAuthoritys">
+                            <el-input v-model="crud.formData.rOperationAuthoritys"
+                                      type="textarea" :rows="6"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="数据权限" prop="rDataAuthoritys">
+                            <el-input v-model="crud.formData.rDataAuthoritys"
+                                      type="textarea" :rows="6"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">参数信息</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="是否限制入参" prop="rIfRestrictedParams">
+                            <el-switch
+                                    v-model="crud.formData.rIfRestrictedParams"
+                                    active-text="是"
+                                    active-value="1"
+                                    inactive-text="否"
+                                    inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="参数列表" prop="rParamLists">
+                            <el-input v-model="crud.formData.rParamLists" type="textarea"
+                                      :rows="10"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">外部访问</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="允许外部访问" prop="externalAccess">
+                            <el-switch
+                                    v-model="crud.formData.externalAccess"
+                                    active-text="是"
+                                    active-value="1"
+                                    inactive-text="否"
+                                    inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :span="12">
+                        <el-form-item v-if="crud.formData && crud.formData.externalAccess=='1'" label="代理地址" prop="ragentUrl">
+                            <el-input v-model="crud.formData.ragentUrl"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row v-if="crud.formData && crud.formData.externalAccess=='1'">
+                    <el-col :span="12">
+                        <el-form-item label="外部访问是否需登录" prop="noLoginRequired">
+                            <el-switch
+                                    v-model="crud.formData.noLoginRequired"
+                                    active-text="是"
+                                    active-value="0"
+                                    inactive-text="否"
+                                    inactive-value="1">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item v-if="crud.formData && crud.formData.noLoginRequired=='1'" label="凭密码访问" prop="passSwitch">
+                            <el-switch
+                                    v-model="crud.formData.passSwitch"
+                                    active-text="开"
+                                    active-value="1"
+                                    inactive-text="关"
+                                    inactive-value="0">
+                            </el-switch>
+                            <div v-if="crud.formData && crud.formData.passSwitch=='1'"
+                                 style="width: calc(100% - 110px);float: right;display: inline-block;">
+                                <el-input placeholder="外部访问密码"
+                                          v-model="crud.formData.externalAccessPwd"></el-input>
+                            </div>
+
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="crud.formSubmit()">确 定</el-button>
+                <el-button @click="crud.dialogVisible = false">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 查看资源 -->
+         <el-dialog :visible.sync="viewDialogVisible" top="5vh" width="80%"
+                   height="90%"  lock-scroll>
+            <span slot="title">
+                查看资源
+                <template v-if="viewFormData.externalAccess=='1'&&viewFormData.ragentUrl&&viewFormData.rstatus=='1'">
+                    （资源链接地址：<a :href="pageUrl(viewFormData)" target="view_window">{{pageUrl(viewFormData)}}</a>）
+                </template>
+            </span>
+            <el-form label-width="160px" :disabled="true"
+                     :size="setting.formSize"
+                     style="width:100%;">
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">基础信息</h2>
+                    </el-col>
+                </el-row>
+
+
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="资源名称" prop="rname">
+                            <el-input v-model="viewFormData.rname"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row  v-if="viewFormData.rtype=='data'">
+                    <el-col :span="24">
+                        <el-form-item label="资源方法" prop="rMethodName">
+                            <el-input v-model="viewFormData.rMethodName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="资源来源" prop="rsource">
+                            <el-select v-model="viewFormData.rsource">
+                                <el-option v-for="item in rCommon.arrRSource"
+                                           :label="item.name" :value="item.id"
+                                           :key="item.id">
+                                    {{item.name}}
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="资源类型" prop="rtype" >
+                            <el-select v-model="viewFormData.rtype">
+                                <el-option v-for="item in rCommon.arrRTypeDatas"
+                                           :label="item.name" :value="item.id"
+                                           :key="item.id">
+                                    {{item.name}}
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="资源分类" prop="rclass">
+                            <el-input v-model="viewFormData.rclass"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="资源分类ID" prop="rclassId">
+                            <el-input v-model="viewFormData.rclassId"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="资源状态" prop="rtype">
+<!--                            <el-radio-group v-model="viewFormData.rstatus">-->
+<!--                                <el-radio-button v-for="item in rCommon.arrRStatus"-->
+<!--                                                 :key="item.id" :label="item.id">-->
+<!--                                    {{item.name}}-->
+<!--                                </el-radio-button>-->
+<!--                            </el-radio-group>-->
+                            <el-tag :type="rCommon.objRStatusTag[viewFormData.rstatus]||'danger'">
+                                {{rCommon.objRStatus[viewFormData.rstatus]||'禁用'}}
+                            </el-tag>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">权限信息</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12">
+
+                        <el-card class="page-resources-auth-card" style="margin-right:10px;">
+                            <div slot="header" class="clearfix">
+                                <h3>操作权限</h3>
+                            </div>
+                            <div style="height: 150px;overflow: auto">
+
+                                <div v-if="rCommon.getArrROperationAuthoritys(viewFormData).length==0"
+                                     style="padding-top:25px;text-align: center;color:#999;">
+                                    暂无数据
+                                </div>
+
+                                <el-tree v-else :data="rCommon.getArrROperationAuthoritys(viewFormData)" default-expand-all
+                                         :props="{children: 'children', label: 'name'}">
+                                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                                        <span>{{ data.powerName }}（{{data.powerCode}}） <span class="custom-tree-node-type">({{rCommon.formatterOpearteType(data)}})</span></span>
+
+<!--                                        <span style="float:right;color:#409EFF;" v-if="data.type">-->
+<!--                                            {{data.type}}-->
+<!--                                        </span>-->
+                                    </span>
+                                </el-tree>
+
+                                <!--<el-tag v-for="item in rCommon.getArrROperationAuthoritys(viewFormData)" :key="item.key"
+                                        type="danger"
+                                        style="margin-right:15px;">
+                                    {{`${item.key}-${item.name}`}}
+                                </el-tag>-->
+                            </div>
+                        </el-card>
+                    </el-col>
+
+                    <el-col :span="12">
+                        <el-card style="margin-left:10px;">
+                            <div slot="header" class="clearfix">
+                                <h3>数据权限</h3>
+                            </div>
+                            <div style="height: 150px;overflow: auto">
+                                <el-tree :data="rCommon.getArrRDataAuthoritys(viewFormData)" default-expand-all
+                                         :props="{children: 'children', label: 'name'}">
+                                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                                        <span>{{ data.powerName }}（{{data.powerCode}}）</span>
+<!--                                        <span style="float:right;color:#409EFF;" v-if="data.type">-->
+<!--                                            {{data.type}}-->
+<!--                                        </span>-->
+                                    </span>
+                                </el-tree>
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+
+                <el-row v-if="viewFormData.rtype=='data'">
+                    <el-col :span="24" >
+                        <h2 style="text-align: center;line-height: 50px;">参数信息</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row v-if="viewFormData.rtype=='data'">
+                    <el-col :span="24">
+                        <el-form-item label="是否限制入参" prop="rIfRestrictedParams">
+                            <el-switch
+                                    v-model="viewFormData.rIfRestrictedParams"
+                                    active-text="是"
+                                    active-value="1"
+                                    inactive-text="否"
+                                    inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="viewFormData.rtype=='data'">
+                    <el-col :span="24">
+
+                        <el-table :data="rCommon.getArrRParamLists(viewFormData)" stripe border height="100%"
+                                  style="width: 100%;">
+                            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+
+                            <el-table-column label="参数名称" align="center" min-width="80" prop="key"></el-table-column>
+                            <el-table-column label="参数描述" align="center" min-width="80" prop="name"></el-table-column>
+                            <el-table-column label="对应列" align="center" min-width="80" prop="column"></el-table-column>
+                            <el-table-column label="参数类型" align="center" min-width="100">
+                                <template slot-scope="scope">
+                                    {{scope.row.mode}}（{{scope.row.modeDesc}}）
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-row>
+
+
+                <el-row>
+                    <el-col :span="24">
+                        <h2 style="text-align: center;line-height: 50px;">外部访问</h2>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="允许外部访问" prop="externalAccess">
+                            <el-switch
+                                    v-model="viewFormData.externalAccess"
+                                    active-text="是"
+                                    active-value="1"
+                                    inactive-text="否"
+                                    inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :span="12">
+                        <el-form-item v-if="viewFormData && viewFormData.externalAccess=='1'" label="代理地址" prop="ragentUrl">
+                            <el-input v-model="viewFormData.ragentUrl"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row v-if="viewFormData && viewFormData.externalAccess=='1'">
+                    <el-col :span="12">
+                        <el-form-item label="外部访问是否需登录" prop="rsource">
+                            <el-switch
+                                    v-model="viewFormData.noLoginRequired"
+                                    active-text="是"
+                                    active-value="0"
+                                    inactive-text="否"
+                                    inactive-value="1">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="凭密码访问" prop="passSwitch">
+                            <el-switch
+                                    v-model="viewFormData.passSwitch"
+                                    active-text="开"
+                                    active-value="1"
+                                    inactive-text="关"
+                                    inactive-value="0">
+                            </el-switch>
+                            <div v-if="viewFormData && viewFormData.passSwitch=='1'"
+                                 style="width: calc(100% - 110px);float: right;display: inline-block;">
+                                <el-input placeholder="外部访问密码"
+                                          v-model="viewFormData.externalAccessPwd"></el-input>
+                            </div>
+
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+<!--                <el-button @click="previewRes(viewFormData)" type="primary">-->
+<!--                    预 览-->
+<!--                </el-button>-->
+                <el-button @click="viewDialogVisible = false">关 闭</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 预览资源 -->
+        <el-dialog :title="`${previewFormData.rname}-资源预览`" :visible.sync="previewDialogVisible" top="3vh" width="96%"
+                   height="96%" lock-scroll>
+            <page-res-preview v-if="previewDialogVisible" :preview-form-data="previewFormData"></page-res-preview>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="previewDialogVisible = false">关 闭</el-button>
+            </div>
+        </el-dialog>
+
+        <!--注册到资源池-->
+        <el-dialog :close-on-click-modal="false"
+                   append-to-body
+                   title="表单资源注册"
+                   class="resouceClass"
+                   :visible.sync="registerResourceDialog"
+                   :width="'75%'" height="75%" top="8vh">
+            <page-res-register v-if="registerResourceDialog" @initResourceData="initResourceData">
+            </page-res-register>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script>
+    import rCommon from "../js/resourcesCommon";
+    import PageResPreview from "./comp/pageResPreview";
+    import PageResRegister from "./comp/pageResRegister";
+
+    export default {
+        name: "page-resources",
+        components: {PageResRegister, PageResPreview},
+        props: {},
+        data() {
+            let vm = this;
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    url: this.api.resources.url,
+                    searchForm: {
+                        rTypes: "page,menu",
+                        order:"R_SOURCE,R_CLASS"
+                    },
+                    noClearSearchColumns: ["rTypes","rClass","rSource","order"],
+                    afterSubmit() {
+                        vm.initRClassOptions();
+                    },
+                    afterRemoveSuccess() {
+                        vm.initRClassOptions();
+                    },
+                    addDefaultData: {
+                        rtype: "page",
+                        rstatus: "1",
+                        externalAccess: "1",
+                        noLoginRequired: "1",
+                        passSwitch: "1",
+                        rIfRestrictedParams: "0"
+                    },
+
+                }),
+                resourceData:[],
+                viewDialogVisible: false,
+                viewFormData: {},
+                projUrl: location.href.replace(this.$route.fullPath, "/"),
+                rCommon: rCommon,
+                rClassOptions: [],
+                filterTreeText: "",//树搜索
+                previewDialogVisible: false,
+                previewFormData: {},
+                defaultProps:{"children":"children","label":"label"},//树数据显示配置
+                currentPowerArr:[],
+                treeDefaultExpandedKeys:[],
+                registerResourceDialog: false
+            };
+        },
+
+        created() {
+            this.init();
+        },
+        watch: {
+            filterTreeText(val) {
+                this.$refs.tree.filter(val);
+            },
+        },
+        methods: {
+            init() {
+                this.initResourceData();
+                // this.initRClassOptions();
+            },
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
+            /**
+             * 树节点点击事件
+             *
+             */
+            treeNodeClick(data) {
+                let vm = this;
+                if(data.id == "all") {
+                    delete this.crud.searchForm["rClass"];
+                    delete this.crud.searchForm["rSource"];
+                }else{
+                    if(data.parentId=="all"){
+                        this.crud.searchForm["rSource"]=data["id"];
+                        delete this.crud.searchForm["rClass"];
+                    }else{
+                        this.crud.searchForm["rSource"]=data["parentId"];
+                        this.crud.searchForm["rClass"]=data["id"];
+                    }
+                }
+                this.crud.doSearch();
+            },
+            initResourceData(){
+                let vm = this;
+                let param = Object.assign({},this.crud.searchForm);
+                param["groupField"]="R_SOURCE,R_CLASS";
+                this.axios.post(this.api.resources.find, param).then(res => {
+                    if (res && res.data) {
+                        let treeArr = [];
+                        treeArr.push({"id": "all", "label": "全部", "value": "全部", "parentId": "-1"});
+                        let treeData = res.data;
+                        let treeDefineArr = ["rsource","rclass"];
+                        let dataMap = {};
+                        let fieldDataMap = {};
+                        let fieldDataMapTemp = {};
+                        for (let i = 0; i < treeDefineArr.length; i++) {
+                            let cjmap = new Map();
+                            for (let j = 0; j < treeData.length; j++) {
+                                let label = "空";
+                                let value = "eq(null)";
+                                let tmpId = "";
+                                if (treeData[j] && treeData[j][treeDefineArr[i]]) {
+                                    let val = treeData[j][treeDefineArr[i]];
+                                    tmpId = val;
+                                    if(treeDefineArr[i]=="rsource"){
+                                        val = vm.rCommon.objRSource[val]||val;
+                                    }
+                                    if (val.indexOf("nocombo") > -1) {
+                                        value = val.split(":")[2];
+                                        label = val.split(":")[1];
+                                    } else if (val.indexOf("combo") > -1) {
+                                        value = val;
+                                        label = val.split(":")[1];
+                                    } else {
+                                        label = val;
+                                        value = val;
+                                    }
+                                }
+                                let fieldmap = {};
+                                fieldmap[treeDefineArr[i]] = value;
+                                //第一轮，上级是all
+                                if (i == 0) {
+                                    dataMap[j] = tmpId;
+                                    fieldDataMap[j] = Object.assign({}, fieldmap);
+                                    if ((i == 0 && !cjmap.has(value) || (i > 0 && !cjmap.has(dataMap[j] + "_" + tmpId)))) {
+                                        cjmap.set(value, j);
+                                        treeArr.push({
+                                            "id": tmpId,
+                                            "parentId": "all",
+                                            "label": label,
+                                            "value": value,
+                                            "field": treeDefineArr[i],
+                                            "fielddata": fieldmap
+                                        });
+                                    }
+
+                                } else {
+                                    fieldDataMap[j] = Object.assign(fieldDataMap[j], fieldmap);
+                                    fieldDataMapTemp[j] =   Object.assign({},fieldDataMap[j]);
+
+                                    if ((i == 0 && !cjmap.has(value) || (i > 0 && !cjmap.has(dataMap[j] + "_" + tmpId)))) {
+                                        cjmap.set(dataMap[j] + "_" + value, j);
+                                        if(label == "空"){
+                                            continue;
+                                        }
+                                        treeArr.push({
+                                            "id": tmpId,
+                                            "parentId": dataMap[j],
+                                            "label": label,
+                                            "value": value,
+                                            "field": treeDefineArr[i],
+                                            "fielddata": fieldDataMapTemp[j]
+                                        });
+                                    }
+                                    dataMap[j] = value;
+                                }
+                            }
+                        }
+                        // function compareSort(a,b){
+                        //     let sortA = Number(knowledgeObj[a['value']]);
+                        //     let sortB = Number(knowledgeObj[b['value']]);
+                        //     return sortA - sortB;
+                        // }
+                        // treeArr = treeArr.sort(compareSort);
+                        vm.resourceData = vm.COMMON_FUNC.buildElTree(treeArr);
+                        //默认展开根节点
+                        vm.treeDefaultExpandedKeys.push(vm.resourceData[0].id);
+                    }
+                 });
+            },
+            /**
+             * 初始化资源分类option数据
+             */
+            initRClassOptions(){
+                this.axios.post(this.api.resources.getPageClass).then(res => {
+                    let setSources = new Set();
+                    let objSources = {};
+                    res.data.forEach(data => {
+                        setSources.add(data.rsource);
+
+                        if (!objSources[data.rsource]) {
+                            objSources[data.rsource] = [];
+                        }
+                        data.id = data.rclass;
+                        data.name = data.rclass;
+                        objSources[data.rsource].push(data);
+                    });
+                    let rClassOptions = [...this.rCommon.arrRSource];
+                    for (let i = rClassOptions.length - 1; i >= 0; i--) {
+                        if (!setSources.has(rClassOptions[i].id)) {
+                            rClassOptions.splice(i, 1);
+                        } else {
+                            (objSources[rClassOptions[i].id]) && (rClassOptions[i].children = objSources[rClassOptions[i].id]);
+                        }
+                    }
+
+                    this.rClassOptions = rClassOptions;
+                });
+            },
+
+            /**
+             * 资源来源分类查询条件触发的方法
+             */
+            rSourceAndClassChange() {
+                this.crud.searchForm.rSourceAndClass = '';
+                if (this.crud.searchForm.rSourceAndClassArr.length > 0) {
+                    this.crud.searchForm.rSourceAndClass = this.crud.searchForm.rSourceAndClassArr[this.crud.searchForm.rSourceAndClassArr.length - 1];
+                }
+            },
+
+            /**
+             * 切换资源状态
+             */
+            switchStatus(id, rstatus) {
+                this.axios.post(this.api.resources.update, {"id":id, "rStatus":rstatus}).then(res => {
+                    if (!res.data.operateSuccess) {
+                        this.$message.error("修改失败");
+                        return;
+                    }
+                    this.crud.search();
+                    this.$message({
+                        duration: 1000,
+                        type: 'success',
+                        message: `已${rstatus == '0' ? '禁用' : '启用'}资源`
+                    });
+                });
+            },
+
+            /**
+             * 查看数据
+             * @param data
+             */
+            viewData(data) {
+                this.viewFormData = data;
+                this.axios.post(this.api.resources.findResources,{'id':data.id}).then(res =>{ //获取绑定资源数据
+                    if(res.data && res.data.operateObj&& res.data.operateObj.length>0){
+                        this.viewFormData = res.data.operateObj[0];
+                        let operatePermis = this.viewFormData.operatePermisList ||[]; //操作权限
+                        let dataPermis = this.viewFormData.dataPermisList || []; //数据权限
+                        let paramSetting = {};
+                        paramSetting["id"] = "id";
+                        paramSetting["parentTree"] = "parentTree";
+                        paramSetting["pId"] = "parentId"; //上级数据
+                        paramSetting["children"] = "children"; // 设置children可配置
+                        this.viewFormData.rOperationAuthoritys = JSON.stringify(this.COMMON_FUNC.buildElTree(operatePermis,paramSetting)|| []);
+                        this.viewFormData.rDataAuthoritys = JSON.stringify(this.COMMON_FUNC.buildElTree(dataPermis,paramSetting)|| []);
+                    }
+                });
+                this.viewDialogVisible = true;
+            },
+
+            /**
+             * 获取页面地址的方法
+             */
+            pageUrl(data) {
+                if(data.ragentUrl){
+                    if(data.ragentUrl.indexOf("http://")==0||data.ragentUrl.indexOf("https://")==0){
+                        return  data.ragentUrl;
+                    }else{
+                        if(data.ragentUrl.indexOf("/")==0){
+                            return this.projUrl +"resView"+  data.ragentUrl;
+                        }else{
+                            return this.projUrl +"resView/"+  data.ragentUrl;
+                        }
+                    }
+                }else{
+                    return "";
+                }
+            },
+
+            /**
+             * 资源预览
+             * @param formData
+             */
+            previewRes(formData) {
+                this.previewDialogVisible = true;
+                this.previewFormData = formData;
+            },
+
+            /**
+             * 注册表单资源
+             */
+            registerResources(){
+                this.registerResourceDialog = true;
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .custom-tree-node {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        padding-right: 8px;
+
+        .custom-tree-node-type{
+            margin-left: 2px;
+            font-size: 11px;
+            color: #409EFF;
+        }
+    }
+
+    #leftTreeController {
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        bottom: 10px;
+    }
+</style>