<template>
|
<el-container>
|
<el-main>
|
<basic-container>
|
<avue-crud ref="crud" v-model="form" :data="data" :option="option" :page.sync="page"
|
:permission="permissionList"
|
style="height: calc(100vh - 148px)"
|
@on-load="onLoad" @refresh-change="refreshChange" @row-click="rowClick">
|
<template slot="radio" slot-scope="{row}">
|
<el-radio v-model="selectRow" :label="row.$index">
|
</el-radio>
|
</template>
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button v-if="permissionList.editBtn" icon="el-icon-edit" size="small" type="text"
|
@click="updateSave(row,index)">编辑
|
</el-button>
|
<el-button v-if="permissionList.delBtn" icon="el-icon-delete" size="small" type="text"
|
@click="deleteSave(row,index)">删除
|
</el-button>
|
</template>
|
<template slot="menuLeft">
|
<div>
|
<el-button v-if="permissionList.addBtn" icon="el-icon-plus" size="small" type="primary" @click="addSave">新 增
|
</el-button>
|
<el-button v-if="permissionList.apply" icon="el-icon-zoom-in" plain size="small" type="primary"
|
@click="applyRangeOpen">查看使用范围
|
</el-button>
|
<span style="width: 200px;display: inline-block">
|
<el-select slot="prepend" v-model="oriValue" placeholder="请选择" size="small">
|
<el-option v-for="item in oriData" :key="item.prop" :label="item.label" :value="item.prop"
|
></el-option>
|
</el-select>
|
</span>
|
<span>
|
<el-input v-model="searchId" class="attrSearch" clearable placeholder="请输入内容"
|
prefix-icon="el-icon-search"
|
size="small" type="text" @change="doSearch"></el-input>
|
<el-button icon="el-icon-search" plain size="small" type="primary" @click="doSearch"> 搜索</el-button>
|
</span>
|
</div>
|
</template>
|
<template slot="typeValue" slot-scope="{row}">
|
<el-tag>{{ row.typeValue }}</el-tag>
|
</template>
|
</avue-crud>
|
<!-- <el-dialog :visible.sync="applyRange.display" append-to-body :title="applyRange.title" width="600px"
|
@close="applyRangeClose">
|
<avue-crud v-model="applyRange.model" :option="applyRange.option" :data="applyRange.data" class="applyRangeTable"
|
></avue-crud>
|
</el-dialog> -->
|
<Versionpackage ref="applyRange" :rangeData="applyRangeData"></Versionpackage>
|
</basic-container>
|
</el-main>
|
<el-aside>
|
<basic-container class="itemForm">
|
<div style="height: 44vh">
|
<el-descriptions :column="1" border class="margin-top" size="medium" title="属性项">
|
<el-descriptions-item>
|
<template slot="label">
|
属性编号
|
</template>
|
{{ itemForm.itemData.id }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
属性名称
|
</template>
|
{{ itemForm.itemData.name }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
属性类型
|
</template>
|
{{ itemForm.itemData.typeValue }}
|
</el-descriptions-item>
|
<!-- <el-descriptions-item>
|
<template slot="label">
|
标签
|
</template>
|
{{ itemForm.itemData.hashtag }}
|
</el-descriptions-item>-->
|
<el-descriptions-item>
|
<template slot="label">
|
默认值
|
</template>
|
{{ itemForm.itemData.defaultValue }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
允许为空
|
</template>
|
{{ 'true' == itemForm.itemData.nullable ? '是' : '否' }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
长度
|
</template>
|
{{ itemForm.itemData.maxLength }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
描述
|
</template>
|
{{ itemForm.itemData.description }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div style=" height: 40vh">
|
<el-descriptions :column="1" border class="margin-top" size="medium" title="属性配置"></el-descriptions>
|
<el-tabs v-model="itemForm.activeName" stretch="true" style="height:235px" @tab-click="handleClick">
|
<el-tab-pane label="参照" name="referTab">
|
<el-descriptions :column="1" border class="margin-top" size="medium">
|
<el-descriptions-item>
|
<template slot="label">
|
使用参照
|
</template>
|
{{ itemForm.itemData.referTypeValue ? '是' : '否' }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
参照类型
|
</template>
|
{{ itemForm.itemData.referTypeValue }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
参照名称
|
</template>
|
{{ itemForm.itemData.referToName }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-tab-pane>
|
<el-tab-pane label="枚举" name="enumTab">
|
<el-descriptions :column="1" :size="small" border class="margin-top">
|
<el-descriptions-item>
|
<template slot="label">
|
使用枚举
|
</template>
|
{{ itemForm.itemData.usingDict ? '是' : '否' }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
枚举类型
|
</template>
|
{{ itemForm.itemData.dictValue }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</basic-container>
|
</el-aside>
|
<originalAdd ref="originalAdd" :attribute="editAttribute" @refreshTable="refreshChange"></originalAdd>
|
</el-container>
|
</template>
|
|
<script>
|
import {
|
getList,
|
remove,
|
add,
|
update, getPage, getApplyRange
|
} from "@/api/omd/OmdAttribute";
|
import Versionpackage from "./Versionpackage.vue";
|
import {getDictionary} from "@/api/omd/enum";
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "original",
|
data() {
|
return {
|
oriData: [
|
{
|
label: "属性编号",
|
prop: "id",
|
align: "left",
|
display: false,
|
width: 200,
|
required: true
|
}, {
|
label: "属性名称",
|
prop: "name",
|
align: "left",
|
display: false
|
}
|
],
|
oriValue: "id",
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 100
|
},
|
selectRow: "",
|
data: [],
|
form: {},
|
attribute: {
|
nullable: true
|
},
|
editAttribute: {},
|
applyRangeData: [],
|
option: {
|
height: 'auto',
|
calcHeight: 20,
|
headerAlign: "center",
|
border: true,
|
index: true,
|
rowKey: "id",
|
tabs: true,
|
stripe: true,
|
indexFixed: false,
|
menuWidth: 150,
|
highlightCurrentRow: true,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
columnBtn: false,
|
column: [{
|
label: "选择",
|
prop: "radio",
|
width: 60,
|
hide: false,
|
display: false
|
}, {
|
label: "属性编号",
|
prop: "id",
|
align: "left",
|
display: false,
|
width: 200,
|
required: true
|
}, {
|
label: "属性名称",
|
prop: "name",
|
align: "left",
|
display: false
|
},/* {
|
label: "标签",
|
prop: "hashtag",
|
// hide: true,
|
display: false
|
},*/ {
|
label: "是否使用枚举",
|
prop: "usingDict",
|
type: "switch",
|
hide: true,
|
labelWidth: 132,
|
display: false,
|
dicData: [{
|
label: "是",
|
value: "true"
|
}, {
|
label: "否",
|
value: "false"
|
}]
|
}, {
|
label: "属性类型",
|
prop: "typeValue",
|
display: false,
|
// hide: true
|
}, {
|
label: "默认值",
|
prop: "defaultValue",
|
display: false
|
}, {
|
label: "允许为空",
|
prop: "nullable",
|
type: "switch",
|
display: false,
|
hide: true,
|
labelWidth: 132,
|
dicData: [{
|
label: "否",
|
value: "false"
|
}, {
|
label: "是",
|
value: "true"
|
}]
|
}, {
|
label: "长度",
|
prop: "maxLength",
|
hide: true,
|
display: false
|
}, {
|
label: "描述",
|
prop: "description",
|
type: "textarea",
|
display: false
|
},
|
]
|
},
|
itemForm: {
|
itemData: {},
|
activeName: "referTab",
|
enumInitFlag: false,
|
referInitFlag: false,
|
form: {}
|
},
|
searchId: '',
|
};
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.modeling_original.original_add, false),
|
apply: this.vaildData(this.permission.modeling_original.original_applyopen, false),
|
delBtn: this.vaildData(this.permission.modeling_original.original_delete, false),
|
editBtn: this.vaildData(this.permission.modeling_original.original_edit, false),
|
}
|
},
|
},
|
created() {
|
},
|
methods: {
|
refreshChange() {
|
this.onLoad(this.pageParent, this.query);
|
},
|
addSave() {
|
this.$refs.originalAdd.showSubmitDialog = true;
|
const newAttr = {};
|
newAttr.nullable = true;
|
this.$refs.originalAdd.attribute = newAttr;
|
},
|
updateSave(row, index) {
|
this.selectRow = index;
|
var json = JSON.stringify(row);
|
this.editAttribute = JSON.parse(json);
|
this.editAttribute.nullable = row.nullable == 'true' ? true : false;
|
this.$refs.originalAdd.attribute = this.editAttribute;
|
this.$refs.originalAdd.showSubmitDialog = true;
|
this.checkUsingReferDict(row);
|
this.$refs.originalAdd.activeName = this.itemForm.activeName;
|
this.$refs.originalAdd.enumInitFlag = this.itemForm.enumInitFlag;
|
this.$refs.originalAdd.referInitFlag = this.itemForm.referInitFlag;
|
// this.refreshChange()
|
},
|
deleteSave(row, index) {
|
this.$confirm("删除元数据将无法被恢复, 是否继续?", "提示", {
|
iconClass: 'el-icon-question',
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
showClose: true,
|
type: "warning"
|
}).then(() => {
|
remove(row.oid).then(res => {
|
this.$message.success("删除成功");
|
this.refreshChange();
|
});
|
});
|
},
|
onLoad(page, params = {}) {
|
this.loading = true;
|
getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
|
const data = res.data.data;
|
this.page.total = data.total;
|
this.data = data.records;
|
this.loading = false;
|
this.data = res.data.data.records;
|
this.itemData = this.data[0];
|
});
|
},
|
rowClick(row) {
|
this.itemForm.itemData = row;
|
this.selectRow = row.$index;
|
this.attribute = row;
|
this.checkUsingReferDict(row);
|
},
|
checkUsingReferDict(row) {
|
if (row.referToId !== null && row.referToId !== "") {
|
this.itemForm.activeName = 'referTab';
|
this.itemForm.referInitFlag = true;
|
this.itemForm.enumInitFlag = false;
|
} else if (row.usingDict === 'true') {
|
this.itemForm.activeName = 'enumTab';
|
this.itemForm.referInitFlag = false;
|
this.itemForm.enumInitFlag = true;
|
getDictionary({code: row.dictCode}).then(res => {
|
this.editAttribute.dictValue = res.data.data[0].label;
|
this.itemForm.itemData.dictValue = this.editAttribute.dictValue;
|
this.$refs.originalAdd.dictEnums = res.data.data;
|
})
|
} else {
|
this.itemForm.activeName = 'referTab';
|
this.itemForm.referInitFlag = true;
|
this.itemForm.enumInitFlag = false;
|
}
|
},
|
selectBtmType() {
|
this.referType.display = true;
|
this.referType.title = "请选择" + this.referType.value;
|
},
|
applyRangeOpen() {
|
if (!this.selectRow && this.selectRow != 0) {
|
this.$message({
|
type: "warning",
|
message: "请先选择属性"
|
});
|
}
|
var oid = this.data[this.selectRow].oid;
|
getApplyRange(oid).then(res => {
|
this.applyRangeData = res.data.data;
|
this.$refs.applyRange.rangeData = this.applyRangeData;
|
this.$refs.applyRange.showDialog = true;
|
|
});
|
},
|
doSearch() {
|
|
var params = {[this.oriValue + "_like"]: this.searchId};
|
this.onLoad(this.page, params);
|
}
|
},
|
components: {Versionpackage}
|
}
|
</script>
|
|
<style lang="scss">
|
.applyRangeTable > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
|
display: none !important;
|
}
|
|
.attrSearch {
|
width: 201px;
|
}
|
|
.attrSearch > .el-input__inner {
|
width: 200px;
|
}
|
</style>
|
