204 lines
10 KiB
Vue
204 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<el-container id="method" class="text-general-color" v-loading="loading">
|
|||
|
|
<el-header :style="{height: headerHeight}">
|
|||
|
|
<el-row :style="{height: headerHeight}">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div :style="{height: headerHeight, 'line-height': headerHeight}" style="vertical-align: middle;">
|
|||
|
|
<span>建模方法： </span>
|
|||
|
|
<el-dropdown
|
|||
|
|
placement="bottom-end"
|
|||
|
|
>
|
|||
|
|
<span class="el-dropdown-link">
|
|||
|
|
<span class="text-linker-color" style="cursor: pointer;">{{activeMethod.name}}</span>
|
|||
|
|
<i class="awsui-iconfont" style="font-size:12px;cursor: pointer;"></i>
|
|||
|
|
</span>
|
|||
|
|
<el-dropdown-menu slot="dropdown" style="min-width: 200px;max-height: 500px;overflow-y: auto;">
|
|||
|
|
<template v-for="item in methodData">
|
|||
|
|
<el-dropdown-item v-if="item.type=='group'" :disabled=true style="font-size: 12px;color: #000;height: 80%;"><b>{{item.name}}</b></el-dropdown-item>
|
|||
|
|
<el-dropdown-item v-else @click.native="changeMethod(item.id, item.name)">{{item.name}}</el-dropdown-item>
|
|||
|
|
</template>
|
|||
|
|
<el-dropdown-item class="text-linker-color" divided @click.native="createMethod()"><i class="awsui-iconfont" style="font-size: 12px;"></i>新增建模方法</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div :style="{height: headerHeight, 'line-height': headerHeight}" style="text-align: center;vertical-align: middle;">
|
|||
|
|
<div :class="{'button-general-color': activeType == 'methodObject', 'text-color-white': activeType == 'methodObject'}"
|
|||
|
|
style="display: inline-block;border-radius: 2px;padding: 0 15px;width: 70px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
|
|||
|
|
@click="changeMethodType('methodObject')">
|
|||
|
|
<span>建模对象</span>
|
|||
|
|
</div>
|
|||
|
|
<div :class="{'button-general-color': activeType == 'methodAttribute', 'text-color-white': activeType == 'methodAttribute'}"
|
|||
|
|
style="display: inline-block;border-radius: 2px;margin: 0 20px;width: 70px;padding: 0 15px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
|
|||
|
|
@click="changeMethodType('methodAttribute')">
|
|||
|
|
<span>数据特性</span>
|
|||
|
|
</div>
|
|||
|
|
<div :class="{'button-general-color': activeType == 'methodLink', 'text-color-white': activeType == 'methodLink'}"
|
|||
|
|
style="display: inline-block;border-radius: 2px;padding: 0 15px;width: 70px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
|
|||
|
|
@click="changeMethodType('methodLink')">
|
|||
|
|
<span>连线关系</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div v-if="activeType == 'methodObject'" :style="{height: headerHeight, 'line-height': headerHeight}" style="text-align: right;vertical-align: middle;">
|
|||
|
|
<el-input
|
|||
|
|
style="width: 300px;"
|
|||
|
|
placeholder="请输入形状名称进行检索"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
v-model="searchInput"
|
|||
|
|
@input="search()"
|
|||
|
|
size="small"
|
|||
|
|
clearable>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="activeType == 'methodAttribute'" :style="{height: headerHeight, 'line-height': headerHeight}" style="vertical-align: middle;text-align: right;">
|
|||
|
|
<el-dropdown
|
|||
|
|
placement="bottom-start"
|
|||
|
|
trigger="click"
|
|||
|
|
>
|
|||
|
|
<span class="el-dropdown-link">
|
|||
|
|
<span class="text-general-color" style="cursor: pointer;">{{methodAttribute.value.name}}</span>
|
|||
|
|
<i class="awsui-iconfont" style="font-size:12px;cursor: pointer;"></i>
|
|||
|
|
</span>
|
|||
|
|
<el-dropdown-menu slot="dropdown" style="min-width: 120px;max-height: 500px;overflow-y: auto;">
|
|||
|
|
<template v-for="item in methodAttribute.opts">
|
|||
|
|
<el-dropdown-item class="el-dropdown-row" @click.native="changeAttrScope(item)"><div style="height: 100%;width: 100%;font-size: 14px;">{{item.name}}</div></el-dropdown-item>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-header>
|
|||
|
|
<el-main>
|
|||
|
|
<MethodObject v-if="activeType== 'methodObject'" ref="methodObject" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput"/>
|
|||
|
|
<MethodAttribute v-if="activeType== 'methodAttribute'" ref="methodObject" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput" :methodDataType="methodAttribute.value.id"/>
|
|||
|
|
<MethodLink v-if="activeType== 'methodLink'" ref="methodLink" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput"/>
|
|||
|
|
</el-main>
|
|||
|
|
</el-container>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import MethodAttribute from "./MethodAttribute";
|
|||
|
|
import MethodLink from "./MethodLink";
|
|||
|
|
import MethodObject from "./MethodObject";
|
|||
|
|
import awsuiAxios from "../../awsuiAxios";
|
|||
|
|
export default {
|
|||
|
|
name: "Method",
|
|||
|
|
components: {MethodObject, MethodLink, MethodAttribute},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: true,
|
|||
|
|
headerHeight: '40px',
|
|||
|
|
activeMethod: {
|
|||
|
|
id: '',
|
|||
|
|
name: ''
|
|||
|
|
},
|
|||
|
|
methodData: [],
|
|||
|
|
activeType: '',
|
|||
|
|
searchInput: '',
|
|||
|
|
methodAttribute: {
|
|||
|
|
value: {id: 'all', name: '全部'},
|
|||
|
|
opts: [
|
|||
|
|
{id: 'all', name: '全部'},
|
|||
|
|
{id: 'file', name: '文件属性'},
|
|||
|
|
{id: 'shape', name: '形状属性'}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initPage();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initPage() {// 初始化页面数据
|
|||
|
|
// 建模方法
|
|||
|
|
const that = this;
|
|||
|
|
const params = {
|
|||
|
|
url:'jd',
|
|||
|
|
data:{
|
|||
|
|
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_data_query',
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
|
|||
|
|
that.loading = false;
|
|||
|
|
if (ro.result == 'ok') {
|
|||
|
|
that.methodData = ro.data;
|
|||
|
|
that.changeMethodType('methodObject');
|
|||
|
|
for (let i = 0; i < that.methodData.length; i++) {
|
|||
|
|
if (that.methodData[i].type != 'group') {
|
|||
|
|
that.changeMethod(that.methodData[i].id, that.methodData[i].name);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alert('请求响应错误');
|
|||
|
|
}
|
|||
|
|
}).catch(error=>{
|
|||
|
|
console.log(error);
|
|||
|
|
that.loading = false;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeMethod(methodId, name) {
|
|||
|
|
this.searchInput = '';
|
|||
|
|
this.activeMethod.id = methodId;
|
|||
|
|
this.activeMethod.name = name;
|
|||
|
|
const temp = this.activeType;
|
|||
|
|
this.activeType = '';
|
|||
|
|
this.methodAttribute.value = this.methodAttribute.opts[0];
|
|||
|
|
this.$nextTick(function(){
|
|||
|
|
this.activeType = temp;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
changeMethodType(type) {
|
|||
|
|
this.searchInput = '';
|
|||
|
|
this.methodAttribute.value = this.methodAttribute.opts[0];
|
|||
|
|
this.activeType = type;
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
if (this.activeType == 'methodObject') {// 模型对象
|
|||
|
|
this.$refs.methodObject.search(this.searchInput);
|
|||
|
|
} else if (this.activeType == 'methodAttribute') {// 数据属性
|
|||
|
|
this.$refs.methodAttribute.search('');// 无搜索
|
|||
|
|
} else if (this.activeType == 'methodLink') {// 连线
|
|||
|
|
this.$refs.methodLink.search('');// 无搜索
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeAttrScope(item) {
|
|||
|
|
this.methodAttribute.value = item;
|
|||
|
|
},
|
|||
|
|
createMethod() {// 新建建模方法
|
|||
|
|
this.$message('敬请期待');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
listenTopMainHeight() {
|
|||
|
|
return this.$store.getters.getTopMainHeightFn;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
listenTopMainHeight: function (newd, old) {
|
|||
|
|
// this.tableHeight = (parseInt(newd)) - parseInt(this.headerHeight) + 'px';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
#method >>> .el-main {
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
.text-color-white {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.el-dropdown-row {
|
|||
|
|
height: 46px;
|
|||
|
|
line-height: 46px;
|
|||
|
|
}
|
|||
|
|
.el-dropdown-row :hover {
|
|||
|
|
color: #4E7FF9 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|