<template>
|
<yw-dialog v-model="isShow" :showFooter="false" width="500" :title="title">
|
<el-form :label-width="labelWidth" v-if="item.config">
|
<el-form-item label="用户名">
|
<el-input v-model="item.config.user" readonly />
|
</el-form-item>
|
<el-form-item label="驱动">
|
<el-input v-model="item.config.driver" readonly />
|
</el-form-item>
|
<el-form-item label="地址">
|
<el-input v-model="item.config.url" readonly />
|
</el-form-item>
|
</el-form>
|
</yw-dialog>
|
</template>
|
|
<script setup lang="ts" name="DataSourceConfigDlg">
|
import _ from 'lodash';
|
import { computed, ref, watch } from 'vue';
|
import ywDialog from '/@/components/dialog/yw-dialog.vue';
|
|
const props = defineProps(['item']);
|
const isShow = defineModel({
|
type: Boolean,
|
});
|
|
const title = computed(() => props.item?.title + '——数据源配置');
|
|
// 计算最长的label宽度
|
const labelWidth = computed(() => {
|
const labels = ['驱动', '地址', '用户名'];
|
const maxLengthLabel = labels.reduce((prev, current) => {
|
return prev.length > current.length ? prev : current;
|
}, '');
|
// 每个中文字符按16px计算,额外加20px留白
|
return `${maxLengthLabel.length * 16 + 20}px`;
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
position: relative;
|
}
|
</style>
|
