|
|
|
<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'hidden','padding':'0px'}">
|
|
|
|
<el-row :gutter="5">
|
|
|
|
<el-col :span="4" >
|
|
|
|
<div class="card-item">
|
|
|
|
<div class="filter-view">
|
|
|
|
<el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
|
|
|
|
</div>
|
|
|
|
<div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
|
|
|
|
<el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
|
|
|
|
<template #default="{ node, data }">
|
|
|
|
<div class="tree-node">
|
|
|
|
<div class="tree-node-label">{{ node.label }}</div>
|
|
|
|
<div class="tree-node-tools">
|
|
|
|
<a @click="append(data)">
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
</a>
|
|
|
|
<a @click="remove(node, data)">
|
|
|
|
<i class="el-icon-delete"></i>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</el-tree>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="20" >
|
|
|
|
<div class="card-item">
|
|
|
|
<div style="padding: 3px 6px;">
|
|
|
|
<el-button type="primary" @click="showDialog">添加</el-button>
|
|
|
|
<span class="iconfont icon-wenjianjia"></span>
|
|
|
|
</div>
|
|
|
|
<el-table :data="tableData" style="width: 100%">
|
|
|
|
<el-table-column fixed prop="date" label="Date" width="150" />
|
|
|
|
<el-table-column prop="name" label="Name" width="120" />
|
|
|
|
<el-table-column prop="state" label="State" width="120" />
|
|
|
|
<el-table-column prop="city" label="City" width="120" />
|
|
|
|
<el-table-column prop="address" label="Address" width="600" />
|
|
|
|
<el-table-column prop="zip" label="Zip" width="120" />
|
|
|
|
<el-table-column fixed="right" label="Operations" width="120">
|
|
|
|
<template #default>
|
|
|
|
<el-button type="text" size="small" @click="handleClick">Detail</el-button>
|
|
|
|
<el-button type="text" size="small">Edit</el-button>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="5" >
|
|
|
|
<el-col :span="3" >
|
|
|
|
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
|
|
|
|
<div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
|
|
|
|
<el-link type="info" :underline="false"><i class="iconfont icon-liebiao"></i> 资源类型</el-link>
|
|
|
|
</div>
|
|
|
|
<el-tree :data="treeData" :default-expanded-keys="[1]" node-key="id" @node-click="handleConfigNodeClick"/>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="21" >
|
|
|
|
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" >
|
|
|
|
|
|
|
|
<el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
|
|
|
|
<el-tabs v-model="dialog.activeName" @tab-click="handleClick">
|
|
|
|
<el-tab-pane label="基本信息" name="jbxx">
|
|
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="基本信息1" name="jbxx1">
|
|
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="基本信息2" name="jbxx2">
|
|
|
|
</el-tab-pane>
|
|
|
|
</el-tabs>
|
|
|
|
</el-dialog>
|
|
|
|
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
|
|
|
|
:showBorder="true" :currentPage="currentPage" :loading="false"
|
|
|
|
:showPage="false" :height="(height - 20)">
|
|
|
|
<template #default="{row,prop,column}">
|
|
|
|
<span v-if="prop == 'resListId'" >{{currentNode.label}}</span>
|
|
|
|
<div v-else>
|
|
|
|
<div v-if="['showUsers'].indexOf(prop) != -1">
|
|
|
|
showUsers
|
|
|
|
</div>
|
|
|
|
<div v-else-if="['colSort','colWidth'].indexOf(prop) != -1">
|
|
|
|
<el-input @blur="changeProperty(row,prop,column)" type="number" size="small" placeholder="请填写"
|
|
|
|
v-model="row[prop]">
|
|
|
|
<!--<template #suffix>
|
|
|
|
<i class="el-icon-edit"/>
|
|
|
|
</template>-->
|
|
|
|
</el-input>
|
|
|
|
</div>
|
|
|
|
<div v-else-if="['colIsTd','isQuery','isFilter','status'].indexOf(prop) != -1">
|
|
|
|
<!-- 展示下拉选项 -->
|
|
|
|
<el-select placeholder="请选择" size="small" style="width: 100%"
|
|
|
|
@change="changeProperty(row,prop,column)" v-model="row[prop]" :multiple="false"
|
|
|
|
collapse-tags clearable filterable placeholder="请选择">
|
|
|
|
<el-option label="是" :value="0"> </el-option>
|
|
|
|
<el-option label="否" :value="1"> </el-option>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
<div v-else-if="['colType'].indexOf(prop) != -1">
|
|
|
|
<el-select placeholder="选择类型" size="small" style="width: 100%"
|
|
|
|
@change="changeProperty(row,prop,column)" v-model="row.colType" :multiple="false"
|
|
|
|
collapse-tags clearable filterable placeholder="请选择">
|
|
|
|
<el-option v-for="(value,key) in colTypes" :key="index"
|
|
|
|
:label="value"
|
|
|
|
:value="key">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
<div v-else-if="['colTypeQueryFields'].indexOf(prop) != -1">
|
|
|
|
colTypeQueryFields
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-dialog top="2vh" title="添加节点" v-model="addDialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
|
|
|
|
{{data}}
|
|
|
|
</el-dialog>
|
|
|
|
<div v-else>
|
|
|
|
<el-input @blur="changeProperty(row,prop,column)" size="small" placeholder="请填写"
|
|
|
|
prefix-icon="el-icon-edit" v-model="row[prop]">
|
|
|
|
<!--<template #suffix>
|
|
|
|
<i class="el-icon-loading"/>
|
|
|
|
<i class="el-icon-edit"/>
|
|
|
|
</template>-->
|
|
|
|
</el-input>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</cm-table-page>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row> |
...
|
...
|
|
