Authored by 王涛

资产视图优化

${AnsiColor.BRIGHT_YELLOW}
${application.title} ${application.version} Base On Spring Boot ${spring-boot.version}
----------------------------------------------------------------------------------------------------------
\\\ /// .-. \\\ ///wW Ww(o)__(o) .-. )) (O)) ((O) _ 2022
((O) (O)) c(O_O)c ((O)(O))(O)(O)(__ __)c(O_O)c (Oo)-. || || wWw /||_
| \ / | ,'.---.`, | \ || (..) ( ) ,'.---.`, | (_)) || /\ || (O)_ /`_)
||\\//||/ /|_|_|\ \||\\|| || )( / /|_|_|\ \ | .' ||//\\|| .' __)| `.
|| \/ ||| \_____/ ||| \ | _||_ ( )| \_____/ | )|\\ / / \ \( _) | (_))
|| ||'. `---' .`|| || (_/\_) )/ '. `---' .`(/ \) ( / \ )`.__) (.'-'
(_/ \_) `-...-' (_/ \_) ( `-...-' ) ) ( )
______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______
|______|______|______|______|______|______|______|______|______|______|______|______|______|______|______|
... ...
<div style="display: flex;flex-wrap: nowrap">
<div style="width: calc(100% - 50px)">
<div style="width: calc(100% - 10px)">
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="textValue"
:status="status">
<span>{{textValue == '' ? ' ' : textValue + '%' }}</span>
:percentage="textString"
status="success">
<div style="color: black">{{textString == '' ? ' ' : textString + '%' }}</div>
</el-progress>
</div>
<div style="width: 50px">{{textString == '' ? '' : textString }} </div>
<!-- <div style="width: 50px">{{textString == '' ? '' : textString }} </div>-->
<!--
<el-progress :text-inside="true" :stroke-width="26" :percentage="textString" >
<span>{{textString == '' ? ' ' : textString + '%' }}</span>
</el-progress>
-->
</div>
... ...
... ... @@ -3,12 +3,6 @@ export default {
template: '',
components: {},
props: {
// 百分比数字,例如:50%,percentage= 50
textValue: {
type: Number,
default: 0
},
// 状态 success/exception/warning
status: {
type: String,
... ... @@ -20,7 +14,7 @@ export default {
},
// 文本
textString: {
type: String,
type: Number,
default: 0
},
optionData: {
... ...
... ... @@ -154,18 +154,23 @@
<template v-slot>
<div style="padding: 10px" style="display: flex;flex-wrap: wrap">
<div v-for="(v,k) in fieldsValueObj[currentRow.id].props" style="width: 50%">
<div style="text-align: left;padding-left: 10px;">{{v}}</div>
<div v-if="k.indexOf('_msg') != -1" style="text-align: left;padding-left: 10px;width: 100%">
{{v}}
</div>
<div v-else style="text-align: left;padding-left: 10px;">{{v}}</div>
<div v-if="k.indexOf('_input') != -1">
<el-input v-model="settingVal[currentRow.id][k]" :placeholder="v"></el-input>
</div>
<el-select v-else v-model="settingVal[currentRow.id][k]" :placeholder="v" style="margin: 3px">
<el-select clearable v-else-if="k.indexOf('_input') == -1 && k.indexOf('_msg') == -1" 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>
... ...
... ... @@ -15,7 +15,15 @@
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item v-for="searchInfo in obj.searchList" :label="searchInfo.name">
<el-input v-if="searchInfo.type == 'INPUT'" v-model="searchForm[searchInfo.key]" :placeholder="'请输入' + searchInfo.name"></el-input>
<el-input v-else v-model="searchForm[searchInfo.key]" :placeholder="'请输入' + searchInfo.name"></el-input>
<el-select v-else v-model="searchForm[searchInfo.key]" :placeholder="'请选择' + searchInfo.name" clearable >
<el-option
v-for="item in searchItem[searchInfo.key]"
:key="item.val"
:label="item.label"
:value="item.val"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
... ...
... ... @@ -72,6 +72,8 @@ export default {
let total = Vue.ref(0);
let searchItem = Vue.ref({});
// 计算减去左侧树的宽度
let max = (function (){
let right = window.innerWidth;
... ... @@ -114,6 +116,9 @@ export default {
if (res && res.object) {
obj.value = res.object
total.value = res.count;
// 查询搜索下拉
getSearchItem(res.object.searchList);
} else {
obj.value.maps = [];
}
... ... @@ -133,30 +138,26 @@ export default {
dialogFlg.value = flg;
}
let cellClick = (row, prop, column) => {
openCabinet(true);
showDialog(true);
cellDetail.value['prop'] = prop;
cellDetail.value['row'] = row;
cellDetail.value['title'] = column.label + '详情';
}
let cabinetNoSrc = Vue.ref('');
let openCabinet = (isInit) => {
if (isInit) {
cabinetNoSrc.value = "/vue3/src/assets/images/res/img01.jpg"
} else {
cabinetNoSrc.value = "/vue3/src/assets/images/res/img03.jpg"
}
}
let getPage = (pageInfo) =>{
page.value = pageInfo.page;
limit.value = pageInfo.limit;
loadResList()
}
let isManager = () => {
let getSearchItem = (searchList) => {
if(!searchList){
return;
}
searchList.forEach(function (v){
if(v.type == 'TABLE_REL'){
//searchItem
proxy.$http.get(`/api-web/v32/res/search/${v.treeNodeId}/${v.key}`, {}, function (res) {
if (res && res.data && res.data.length > 0) {
searchItem.value[v.key] = res.data;
}
});
}
})
}
... ... @@ -166,8 +167,6 @@ export default {
// 挂载完
Vue.onMounted(() => {
loadTree();
openCabinet(true);
})
... ... @@ -176,6 +175,7 @@ export default {
currentNode,
treeData,
searchForm,
searchItem,
height,
obj,
handleNodeClick,
... ... @@ -183,10 +183,7 @@ export default {
dialogFlg,
showDialog,
cellDetail,
cellClick,
openCabinet,
cabinetNoSrc,
total,
max,
getPage,
... ...