monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 817e46c52ff55ea0658cb6008f213df43eed9e62 2 parents 38d582a3 329e36a3

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 17 changed files with 402 additions and 114 deletions
-- 菜单管理编辑后无法保存，数据库字段"moduleid"长度太短,导致SQL报错
ALTER TABLE sys_menu MODIFY COLUMN moduleid VARCHAR(100) COMMENT '模块id';
ALTER TABLE `user-center`.sys_menu MODIFY COLUMN moduleid VARCHAR(100) COMMENT '模块id';
... ...
INSERT INTO `user-center`.`sys_menu`(`id`, `parentId`, `menuCode`, `name`, `url`, `path`, `css`, `sort`, `createTime`, `updateTime`, `isMenu`, `hidden`, `menuDesc`, `type`, `moduleid`) VALUES (1900012, 900800, '', '回收站', NULL, 'documentationManagement/documentRecycle', 'layui-icon-menu-fill', 140400, '2021-10-25 05:10:39', '2021-10-25 05:25:39', 1, 0, '', 1, 'documentRecycle');
INSERT INTO `user-center`.`sys_role_menu`(`roleId`, `menuId`) VALUES (1, 1900012);
... ...
... ... @@ -136,7 +136,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'sessions',
field: 'flag', title: '指标标识', align: 'center', sort: true, width: 150
}, {
field: 'kpiValue', title: '指标值', align: 'center', sort: true, width: 150,
templet: '<div><span class="layui-table-link ca-unit-chart" data-resid="{{d.resId}}" data-flag="{{d.flag}}" data-kpiid="{{d.kpiId}}">{{d.kpiValue}}</span></div>'
templet: '<div><span class="layui-table-link ca-unit-chart" data-resid="{{d.resId}}" data-name="{{d.resName}}-{{d.kpiName}}" data-flag="{{d.flag}}" data-kpiid="{{d.kpiId}}">{{d.kpiValue}}</span></div>'
}, {
field: 'createUser', title: '创建人', align: 'center', sort: true, width: 150, templet: function (d) {
return d.createUserName ? d.createUserName : ''
... ... @@ -149,7 +149,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'sessions',
var params = {
kpiId: $(this).data('kpiid'),
resId: $(this).data('resid'),
flag: $(this).data('flag')
flag: $(this).data('flag'),
name: $(this).data('name')
}
let url = '/et2';
view('commonViewModel').render(url).then(function (res) {
... ...
... ... @@ -58,7 +58,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'admin',
color: '#333',
show: true,
interval: 0,
rotate: 15
formatter(value, index) {
return new Date(value).format('yyyy-MM-dd')
}
},
axisLine: {
lineStyle: {
... ... @@ -123,6 +125,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'admin',
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (param) {
var tips = new Date(param[0].axisValue).format('yyyy-MM-dd HH:mm:ss') + "<br/>";
$.each(param, function (i, v) {
tips += v.marker + " " + v.seriesName + ":" + v.value[1] + "</br>"
});
return tips;
}
},
toolbox: {
... ...
... ... @@ -62,7 +62,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
, {title: '表空间使用率', align: 'center', width:250, templet: '#predictionTpsRateTpl'}
, {title: '操作', align: 'center',width:200, fixed: 'right',
templet: '<div>' +
'<span data-id="{{d.resId}}" class="layui-table-link prediction_database_info" lay-tips="明细">明细</span>'+
'<span data-id="{{d.resId}}" data-resname="{{d.resName}}" class="layui-table-link prediction_database_info" lay-tips="明细">明细</span>'+
'</div>'
}
]
... ... @@ -71,6 +71,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
//打开明细列表
$('.prediction_database_info').unbind('click').on('click',function () {
var resId = $(this).data("id");
var resName = $(this).data("resname");
admin.req({
url:domainName + '/api-web/prediction/database/detail'
,data:{resId:resId}
... ... @@ -79,7 +80,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
var trs = '';
$.each(res.data,function (i,v){
trs += `<tr><td>${i+1}</td><td>${v.tpsName}</td><td>${v.tpsSize}</td><td>${v.tpsUsed}</td><td>${v.tpsFree}</td>
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI64B1610A" data-flag=${v.flag} data-name="使用率">${v.tpsUsedRate}</span></tr>`;
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI64B1610A" data-flag=${v.flag} data-name="${resName}-表空间使用率">${v.tpsUsedRate}</span></tr>`;
});
var tb = `<div class="layui-form" style="padding: 0 10px;">
<table class="layui-table" id="info_table">
... ...
... ... @@ -63,7 +63,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
, {title: '当前 / 推荐配置', align: 'center', width:450, colspan: 3,}
, {title: '操作', align: 'center',width:160, fixed: 'right', rowspan: 2,
templet: '<div>' +
'<span data-id="{{d.resId}}" class="layui-table-link prediction_server_info" lay-tips="明细">明细</span>'+
'<span data-id="{{d.resId}}" data-resname="{{d.resName}}" class="layui-table-link prediction_server_info" lay-tips="明细">明细</span>'+
'</div>'
}
], [
... ... @@ -137,6 +137,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
//打开明细列表
$('.prediction_server_info').unbind('click').on('click',function () {
var resId = $(this).data("id");
var resName = $(this).data("resname");
admin.req({
url:domainName + '/api-web/prediction/server/detail'
,data:{resId:resId}
... ... @@ -145,7 +146,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
var trs = '';
$.each(res.data,function (i,v){
trs += `<tr><td>${i+1}</td><td>${v.fsName}</td><td>${v.fsSize}</td><td>${v.fsUsed}</td>
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI449F5365" data-flag=${v.flag} data-name="使用率">${v.fsUsedRate}</span></td><td>${v.dailyGrowthRate == 0 ? '-' : v.dailyGrowthRate}</td><td>${v.availableDays == 0 ? '-' : v.availableDays}</td></tr>`;
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI449F5365" data-flag=${v.flag} data-name="${resName}-文件系统使用率">${v.fsUsedRate}</span></td><td>${v.dailyGrowthRate == 0 ? '-' : v.dailyGrowthRate}</td><td>${v.availableDays == 0 ? '-' : v.availableDays}</td></tr>`;
});
var tb = `<div class="layui-form" style="padding: 0 10px;">
<table class="layui-table" id="info_table">
... ...
... ... @@ -64,7 +64,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
, {title: '容量使用率', align: 'center', width:280, templet: '#predictionStorageRateTpl'}
, {title: '操作', align: 'center',width:220, fixed: 'right',
templet: '<div>' +
'<span data-id="{{d.resId}}" class="layui-table-link prediction_storage_info" lay-tips="明细">明细</span>'+
'<span data-id="{{d.resId}}" data-resname="{{d.resName}}" class="layui-table-link prediction_storage_info" lay-tips="明细">明细</span>'+
'</div>'
}
]
... ... @@ -73,6 +73,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
//打开明细列表
$('.prediction_storage_info').unbind('click').on('click',function () {
var resId = $(this).data("id");
var resName = $(this).data("resname");
admin.req({
url:domainName + '/api-web/prediction/storage/detail'
,data:{resId:resId}
... ... @@ -81,7 +82,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
var trs = '';
$.each(res.data,function (i,v){
trs += `<tr><td>${i+1}</td><td>${v.storageName}</td><td>${v.storageSize}</td><td>${v.storageUsed}</td><td>${v.storageFree}</td>
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI5E148DBE" data-flag=${v.flag} data-name="使用率">${v.storageUsedRate}</span></td></tr>`;
<td><span class="kpiSubDiv" style="cursor: pointer;text-decoration: underline;color: #1E9FFF;" data-resid=${resId} data-kpiid="KPI5E148DBE" data-flag=${v.flag} data-name="${resName}-容量使用率">${v.storageUsedRate}</span></td></tr>`;
});
var tb = `<div class="layui-form" style="padding: 0 10px;">
<table class="layui-table" id="info_table">
... ...
... ... @@ -217,12 +217,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
, method: 'POST'
, async: false
, success: function (res) {
$.each(res.data, function (i, v) {
var vl = {
name: v.ddicName, value: v.ddicCode
};
propertyList.push(vl);
});
// $.each(res.data, function (i, v) {
// var vl = {
// name: v.ddicName, value: v.ddicCode
// };
// propertyList.push(vl);
// });
propertyList = res.data
}
});
}
... ... @@ -234,9 +235,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
var content = '';
$.each(propertyList, function (i, v) {
var property = ' <div class="layui-inline ">' +
' <label class="layui-form-label">' + v.name + '</label>' +
' <label class="layui-form-label">' + v.ddicName + '</label>' +
' <div class="layui-input-inline">' +
' <input type="text" data-property="'+v.value+'" data-id="" data-username="" data-sort="" data-remark="" class="layui-input" name="' + v.value + '" autocomplete="off">' +
' <input type="text" data-property="'+v.ddicCode+'" placeholder="'+v.ddicDesc+'" data-id="" data-username="" data-sort="" data-remark="" class="layui-input" name="' + v.ddicCode + '" autocomplete="off">' +
' </div>' +
' </div>';
if (i % 2 == 0 && i != 0) {
... ... @@ -268,4 +269,4 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
});
}
})
})
\ No newline at end of file
})
... ...
... ... @@ -36,7 +36,7 @@
<!--表空间使用率-->
<script type="text/html" id="predictionTpsRateTpl">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI64B1610A" data-flag="tps" data-name="表空间使用率">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI64B1610A" data-flag="tps" data-name="{{d.resName}}-表空间使用率">
<div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-right: 10px;">
<div class="layui-progress-bar layui-bg-green"
lay-percent="{{ d.tsUsedRate }}%"
... ...
... ... @@ -47,7 +47,7 @@
<!--CPU使用率-->
<script type="text/html" id="predictionCpuRateTpl">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI7054BC34" data-flag="cpu" data-name="CPU使用率">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI7054BC34" data-flag="cpu" data-name="{{d.resName}}-CPU使用率">
<div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-right: 10px;">
<div class="layui-progress-bar layui-bg-green"
lay-percent="{{ d.cpuRate }}%"
... ... @@ -59,7 +59,7 @@
</script>
<!--内存使用率-->
<script type="text/html" id="predictionMemoryRateTpl">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI31CB8D97" data-flag="mem" data-name="内存使用率">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI31CB8D97" data-flag="mem" data-name="{{d.resName}}-内存使用率">
<div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-right: 10px;">
<div class="layui-progress-bar layui-bg-green"
lay-percent="{{ d.memRate }}%"
... ... @@ -71,7 +71,7 @@
</script>
<!--文件系统使用率-->
<script type="text/html" id="predictionFileSysStemRateTpl">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI449F5365" data-flag="fs" data-name="文件系统使用率">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI449F5365" data-flag="fs" data-name="{{d.resName}}-文件系统使用率">
<div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-right: 10px;">
<div class="layui-progress-bar layui-bg-green"
lay-percent="{{ d.fsRate }}%"
... ...
... ... @@ -36,7 +36,7 @@
<!--容量使用率-->
<script type="text/html" id="predictionStorageRateTpl">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI5E148DBE" data-flag="storage" data-name="容量使用率">
<div class="layui-progress-wrap kpiSubDiv" data-resid={{d.resId}} data-kpiid="KPI5E148DBE" data-flag="storage" data-name="{{d.resName}}-容量使用率">
<div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-right: 10px;">
<div class="layui-progress-bar layui-bg-green"
lay-percent="{{ d.storageUsedRate }}%"
... ...
... ... @@ -15,6 +15,9 @@
{{node.label }}
</div>
<div style="width: 60px;" v-if="isAdmin()">
<a @click="editType(data)" style="margin-right: 10px;">
<i class="el-icon-edit"></i>
</a>
<a @click="showFolder(true,false)" style="margin-right: 10px;">
<i class="el-icon-plus"></i>
</a>
... ... @@ -36,7 +39,7 @@
style="width: 220px;margin-right:10px" clearable/>
<el-button :size="$global.elementSize" @click="searchFile">
<i class="iconfont icon-sousuo"></i>搜索</el-button>
<el-button :size="$global.elementSize" @click="showUserDialog(true)" v-if="!isView">
<el-button :size="$global.elementSize" @click="showUserDialog(true)" v-if="!isView && !isRecycle">
<i class="iconfont icon-icon--quanxian"></i>
授权
</el-button>
... ... @@ -44,11 +47,11 @@
<i class="iconfont icon-icon--download"></i>
下载
</el-button>
<el-button :size="$global.elementSize" @click="showFolder(true,true)" v-if="canAddFolder">
<el-button :size="$global.elementSize" @click="showFolder(true,true)" v-if="canAddFolder && !isRecycle">
<i class="iconfont icon-weidaqiadewenjianjia"></i>
新增文件夹
</el-button>
<el-button type="primary" :size="$global.elementSize" @click="showUploadFile(true)">
<el-button type="primary" :size="$global.elementSize" @click="showUploadFile(true)" v-if=" !isRecycle">
<i class="iconfont icon-icon--shangchuan"></i>
上传
</el-button>
... ...
... ... @@ -200,12 +200,14 @@ export default {
// 左侧树
let getTree = () => {
// 查询条件
let params = {
recycle: props.isRecycle ? 1: 0
};
let url = `/inspection-report/file/document/tree`;
if(props.isRecycle){
url = `/inspection-report/file/document/tree/recycle`;
}
proxy.$http.get("/inspection-report/file/document/tree", {}, function (res) {
proxy.$http.get("/inspection-report/file/document/tree", params, function (res) {
if (res && res.data) {
treeData.value = res.data;
let first = res.data[0];
... ... @@ -353,6 +355,11 @@ export default {
}
addDialogTitle.value = title
}
let editType = (data) =>{
Object.assign(docForm.value,data);
addDialogVisible.value = true;
isUserFolder.value = false;
}
/**
* 添加文件夹
... ... @@ -372,7 +379,11 @@ export default {
// 新增
proxy.$http.get(`/inspection-report/file/file/insertFolder`, params, function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg("新建成功！");
let msg = res.msg;
if(!msg){
msg = "操作成功";
}
proxy.$global.showMsg(msg);
}
})
// 属性tree
... ... @@ -512,7 +523,7 @@ export default {
let isAdmin = () =>{
return localStorage.getItem('lgn') == 'admin';
return localStorage.getItem('lgn') == 'admin' && props.isRecycle == false;
}
/**
... ... @@ -521,14 +532,6 @@ export default {
* @param index
*/
let clickTopNav = (item,index) =>{
// let arr = historyNode.value;
// // 删除当前节点后面的路径
// arr.filter(function (v,i) {
// if(i > index){
// arr.splice(i,1);
// }
// })
addHistoryNode(item);
getPage(item.id);
}
... ... @@ -636,7 +639,8 @@ export default {
tagHandleClose,
isAdmin,
reNameFile,
reNameFileFlg
reNameFileFlg,
editType
}
}
... ...
... ... @@ -21,9 +21,9 @@
{{scope.row[item.prop]}}
</span>
</slot>
</template>
</el-table-column>
<slot name="tools" v-if="columns.length > 0" ></slot>
</el-table>
<!-- 分页 -->
<div style='text-align: center;background-color: white' v-if="showPage">
... ...
<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%'}" >
<div>
<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" :props="props" >
<template #default="{ node, data }">
<div style="position: relative;flex-direction: row;width: 100%;">
<div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;"
@click="handleConfigNodeClick(data)" :title="node.label">
{{node.label }}
</div>
<div style="width: 60px;float: right">
<a @click="editType(data)" style="margin-right: 10px;">
<i class="el-icon-setting"></i>
</a>
</div>
</div>
</template>
</el-tree>
</div>
</el-col>
<el-col :span="21">
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
<div style="text-align: left;padding: 3px;">
<el-dropdown split-button @click="addConfig()">
<i class="icon el-icon-plus"/>添加
<template #dropdown>
<div style="max-height: 300px;overflow-y: auto">
<el-dropdown-menu>
<el-dropdown-item v-for="(item ,index) in defList" @click="addConfig(item)">
{{item.colAlias}}
</el-dropdown-item>
</el-dropdown-menu>
</div>
<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>
</template>
</el-dropdown>
<el-button type="primary" @click="saveConfig" style="margin-left: 10px">保存</el-button>
</div>
<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>
<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>
</template>
</cm-table-page>
</div>
</el-col>
</el-row>
<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="getColType(row)" 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">
<span v-if="Object.keys(fieldsObj).length == 0 || fieldsObj.propertyType == 'INPUT' || row.colType == 'INPUT'"> - </span>
<el-select v-else-if="fieldsObj.propertyType == 'LIST'" placeholder="请选择扩展属性"
size="small" style="width: 100%"
@change="getColTypeExtVal(row)" v-model="row.colTypeQueryFields"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option v-for="(value,key) in fieldsObj.object" :key="index"
:label="value[fieldsObj.text]"
:value="value[fieldsObj.value]">
</el-option>
</el-select>
</div>
<div v-else-if="prop == 'colTypeVal'">
<span v-if="fieldsValueObj == undefined || fieldsValueObj[row.id] == undefined || Object.keys(fieldsValueObj) == 0"> - </span>
<el-button v-else icon="el-icon-setting" @click="showSettingCmDialog(true,row)" size="mini"
style="margin-left: 10px"></el-button>
</div>
<div v-else>
<el-input @blur="changeProperty(row,prop,column)"
:type="['colSort','colWidth'].indexOf(prop) != -1 ? 'number' : 'text'"
size="small" placeholder="请填写"v-model="row[prop]">
<template #suffix>
<i class="el-icon-edit" style="color: #409EFF" v-if="editColProps[prop] && editColProps[prop] == true"/>
<i class="el-icon-circle-check" v-else-if="editColProps[prop] && editColProps[prop] == false" />
<i class="el-icon-edit-outline" v-else />
</template>
</el-input>
</div>
</div>
</template>
<template #tools>
<el-table-column fixed="right" label="操作" width="80" align="center">
<template #default="scope">
<el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>
</el-table-column>
</template>
</cm-table-page>
</div>
</el-col>
</el-row>
<cm-dialog title="属性配置" width="500px" :showDialogVisible="settingCmDialogFlg" @hidedialog="showSettingCmDialog" @okfunc="getSettingDetail">
<template v-slot>
<div style="padding: 10px" style="display: flex">
<div v-for="(v,k) in fieldsValueObj[currentRow.id].props" style="width: 50%">
<div style="text-align: left;padding-left: 10px;">{{v}}</div>
<el-select v-model="settingVal[currentRow.id][k]" :placeholder="v" style="margin: 3px">
<el-option v-for="(value ,index) in fieldsValueObj[currentRow.id].object"
:key="index"
:label="value[fieldsValueObj[currentRow.id].text]"
:value="value[fieldsValueObj[currentRow.id].value]" >
</el-option>
</el-select>
</div>
</div>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -2,19 +2,99 @@
* 配置页面编辑属性
* @returns {{editColProps: {}}}
*/
let configPageEdit = () =>{
let configPageEdit = () => {
const {proxy} = Vue.getCurrentInstance();
// 编辑属性
let editColProps = Vue.ref({});
let fieldsObj = Vue.ref({});
let fieldsValueObj = Vue.ref({});
let settingCmDialogFlg = Vue.ref(false);
let currentRow = Vue.ref({});
let settingVal = Vue.ref({});
// 配置行编辑
let changeProperty = (row,prop,column) =>{
/**
* 配置行编辑
*
* 作者： Wang
* 时间：2021/10/27 14:34
*/
let changeProperty = (row, prop, column) => {
let isAdd = row.isAdd;
// if(isAdd && isAdd == 1){
// // 新增编辑
// }
editColProps.value[prop] = true;
}
/**
* 属性配置
*
* 作者： Wang
* 时间：2021/10/27 14:34
*/
let getColType = (row) => {
// 获取属性标识的配置
let code = row.colType;
proxy.$http.get(`/api-web/v32/res/list/detail/col/${code}`, {}, function (res) {
if (res && res.object) {
fieldsObj.value = res.object;
row.colTypeQueryFields = '';
}
});
}
/**
* 属性配置扩展值
*
* 作者： Wang
* 时间：2021/10/27 14:34
*/
let getColTypeExtVal = (row) => {
// 获取属性标识的配置
let params = {
colType: row.colType,
colTypeQueryFields: row.colTypeQueryFields
}
proxy.$http.get(`/api-web/v32/res/list/detail/setting`, params, function (res) {
if (res && res.object) {
fieldsValueObj.value[row.id] = res.object;
settingVal.value[row.id] = {};
}
});
}
let showSettingCmDialog = (flg, row) => {
settingCmDialogFlg.value = flg;
if (flg == true && row) {
currentRow.value = row;
// 记载已配置的属性
if(row.setting && row.setting[row.id]){
settingVal.value[row.id] = row.setting[row.id]
}
}
}
let getSettingDetail = () => {
showSettingCmDialog(false)
// 标记为已设置
currentRow.value['setting'] = settingVal.value[currentRow.value.id];
}
return {
editColProps,changeProperty
editColProps,
changeProperty,
getColType,
fieldsObj,
fieldsValueObj,
getColTypeExtVal,
settingCmDialogFlg,
showSettingCmDialog,
getSettingDetail,
currentRow,
settingVal
}
}
... ... @@ -44,12 +124,39 @@ export default {
let dataList = Vue.ref([]);
let columns = Vue.ref([]);
let colTypes = Vue.ref({});
let defList = Vue.ref([]);
// 单元格编辑
const {
editColProps,
changeProperty,
getColType,
fieldsObj,
fieldsValueObj,
getColTypeExtVal,
settingCmDialogFlg,
showSettingCmDialog,
getSettingDetail,
currentRow,
settingVal
} = configPageEdit()
// 获取左侧树结构
let loadTree = () => {
proxy.$http.get("/api-web/v32/res/list/config/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data
let arr = [];
res.data.forEach(function (v){
arr.push({
id:v.id,
label:v.label,
children:v.children
});
})
treeData.value = arr
//treeData.value = res.data;
currentNode.value = res.data[0];
getConfigData();
... ... @@ -61,18 +168,29 @@ export default {
if (currentNode.value) {
// 查询参数
let params = {
treeNodeId: currentNode.value.id
treeNodeId: currentNode.value.id,
loadDefault: defList.value.length == 0 ? 1 : 0
}
proxy.$http.get(`/api-web/v32/res/list/config`, params, function (res) {
if (res && res.object) {
columns.value = res.object.columns;
dataList.value = res.object.datas;
colTypes.value = res.object.colTypes;
let arr = res.object.defaultList;
if (arr && arr.length > 0) {
defList.value = arr;
}
}
});
}
}
/**
* 左侧树，树节点点击
*
* 作者： Wang
* 时间：2021/10/28 17:55
*/
let handleConfigNodeClick = (data) => {
if (data) {
currentNode.value = data;
... ... @@ -80,6 +198,66 @@ export default {
}
}
/**
* 添加列
*
* 作者： Wang
* 时间：2021/10/26 17:33
*/
let addConfig = (item) => {
if (!item) {
let data = {};
// 增加一个空行
columns.value.forEach(function (v) {
data[v.prop] = '';
})
data['id'] = (new Date()).getTime();
data['colType'] = "INPUT";
data['colWidth'] = 100;
data['isFilter'] = 1;
data['isQuery'] = 1;
data['colIsTd'] = 1;
data['status'] = 0;
// 新增状态
data['isAdd'] = 1;
// 添加第一个
dataList.value.splice(0, 0, data);
return;
}
let isExistArr = dataList.value.filter(function (v) {
if (v.colKey == item.colKey) {
return v;
}
})
if (isExistArr.length > 0) {
proxy.$global.showMsg("已存在相同的标识，请修改后在添加！", 'warning')
return;
}
// 添加
dataList.value.splice(0, 0, item);
}
// 保存
let saveConfig = () => {
console.log(dataList.value)
}
/**
* 删除
*
* 作者： Wang
* 时间：2021/10/26 19:47
*/
let deleteRow = (index) => {
proxy.$global.confirm("确认删除该行配置吗？", function () {
dataList.value.splice(index, 1);
proxy.$global.showMsg("删除成功！")
})
}
// 挂载完
Vue.onMounted(() => {
loadTree();
... ... @@ -88,12 +266,27 @@ export default {
return {
height,
dataList,
defList,
columns,
colTypes,
treeData,
currentNode,
handleConfigNodeClick,
changeProperty
addConfig,
deleteRow,
saveConfig,
// 单元格编辑
editColProps,
changeProperty,
getColType,
fieldsObj,
fieldsValueObj,
getColTypeExtVal,
settingCmDialogFlg,
showSettingCmDialog,
getSettingDetail,
currentRow,
settingVal
}
}
}
... ...
<div class="container">
<cm-document></cm-document>
<cm-document :isRecycle="true"></cm-document>
</div>
... ...