etl-cloud-ui/src/views/data/structure/dashlboard/OverallAssetStructure.vue

278 lines
9.1 KiB
Vue

<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>资产模型基本信息</span>
</div>
<el-descriptions border :column="2">
<el-descriptions-item label="表名称">{{tableName}}</el-descriptions-item>
<el-descriptions-item label="表备注">{{tableNameAnnotation}}</el-descriptions-item>
<el-descriptions-item label="数据量">{{tableDataCount}}</el-descriptions-item>
<el-descriptions-item label="是否核心">
<el-tag size="small"></el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card style=" margin-top: 20px;">
<div slot="header" class="clearfix">
<span>资产模型详细信息</span>
</div>
<el-table
:data="assetTableDetailsList"
style="width: 100%;">
<el-table-column prop="name" label="名称" />
<el-table-column prop="annotation" label="注释" />
<el-table-column prop="primaryOrNot" label="是否主键" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.primaryOrNot === 'Y' ? 'success' : 'danger'">
{{scope.row.primaryOrNot}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="type" label="类型" />
<el-table-column prop="mappingType" label="映射类型" />
<el-table-column prop="length" label="长度" />
<el-table-column prop="decimalPoint" label="小数位" />
<el-table-column prop="nullOrNot" label="是否为空" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.nullOrNot === 'Y' ? 'success' : 'danger'" >
{{scope.row.nullOrNot}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="yesNoDictionary" label="是否字典" >
<template slot-scope="scope">
<el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
{{scope.row.isDict}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="dictKey" label="映射字典" >
<template slot-scope="scope">
<el-popover
v-if="scope.row.isDict === 'Y'"
placement="left"
width="200"
trigger="hover">
<el-table :data="[
{ label: '男', value: '1' },
{ label: '女', value: '2' },
{ label: '未知', value: '0' },
]">
<el-table-column property="label" label="字典标签"/>
<el-table-column property="value" label="字典值"/>
</el-table>
<el-tag slot="reference">{{scope.row.dictKey}}</el-tag>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="id" label="操作" >
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
<el-form :model="form" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="form.name" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注释">
<el-input v-model="form.comment" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否主键">
<el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
{{form.isPrimaryKey}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据类型">
<el-input v-model="form.type" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="数据长度">
<el-input v-model="form.length" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="小数位">
<el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否为空">
<el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
{{form.isNull}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认值">
<el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="映射字段">
<el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否字典">
<el-switch
v-model="form.isDict"
active-value="Y"
inactive-value="N"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.isDict === 'Y'">
<el-col :span="24">
<el-form-item label="字典">
<el-select v-model="form.dictKey">
<el-option v-for="(value, key) in dictMap" :key="key" :label="key" :value="key"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item>
<el-table :data="dictMap[form.dictKey]" striped border>
<el-table-column property="label" label="字典标签"/>
<el-table-column property="val" label="字典值"/>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="formStatus = false"> </el-button>
<el-button type="primary" @click="formStatus = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
tableName: null,
tableNameAnnotation: null,
tableDataCount: null,
assetTableDetailsList: []
},
name: 'OverallAssetStructure',
data() {
return {
tableData: [
{
id: 1,
name: "id",
comment: "主键",
isPrimaryKey: "Y",
type: "bigint",
mappingType: "Long",
length: "-",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, {
id: 2,
name: "name",
comment: "姓名",
isPrimaryKey: "N",
type: "varchar",
mappingType: "String",
length: "64",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, {
id: 3,
name: "sex",
comment: "性别",
isPrimaryKey: "N",
type: "char",
mappingType: "String",
length: "1",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "Y",
dictKey: "system_sex",
}, {
id: 4,
name: "price",
comment: "金额",
isPrimaryKey: "N",
type: "double",
mappingType: "BigDecimal",
length: "10",
decimalPlaces: "2",
isNull: "N",
defaultValue: "0.00",
isDict: "N",
dictKey: "-",
}, {
id: 5,
name: "create_time",
comment: "创建时间",
isPrimaryKey: "N",
type: "datetime",
mappingType: "Date",
length: "-",
decimalPlaces: "-",
isNull: "Y",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, ],
form: {},
formStatus: false,
dictMap: {
"system_sex": [
{ label: '男', val: '1', isEdit: false },
{ label: '女', val: '2', isEdit: false },
{ label: '未知', val: '0', isEdit: false },
],
"system_y_n": [
{ label: '是', val: '1', isEdit: false },
{ label: '否', val: '0', isEdit: false }
],
}
}
},
methods: {
update(row) {
this.form = row;
this.formStatus = true;
}
}
}
</script>
<style scoped lang="scss">
</style>