TBA_GXPT/ruoyi-ui/src/views/register/modelData/dataSource.vue

<template>
  <div style="width: 99%;display: flex;background-color: white;margin-left: 1%;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="width: 100%;margin-left: 1%;">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;margin-left:0%;">
            <div style="display: flex;width: 50%;align-items: center;">
                <div>
                    名称
                </div>
                <el-input size="mini" v-model="dsTitle" style="width: 20%;margin-left: 1%;" placeholder="" />
                <el-button type="primary" @click="getTable" size="mini" style="margin-left:1%;">查询 </el-button>
            </div>
            <el-button type="primary" @click="showAdd" size="mini" style="margin-right:1%;">新增</el-button>
        </div>
      <el-table 
        :data="tableData" 
        style="width: 99%;margin-left: 0%;margin-top: 0.5%;"
        :cell-style="{ padding:'5px' }"
        :header-cell-style="{height: heightAll*0.01+'px',}"
        :row-style="{ fontSize: '16px',textAlign:'center'}"
        border 
        :height="tableheight">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="dsTitle" label="数据源名称">
        </el-table-column>
        <el-table-column prop="dsDbname" label="数据库文名"/>
        <el-table-column prop="dsType" label="数据源类型"/>
        <el-table-column prop="ipAll" label="IP/PORT">
        </el-table-column>
        <el-table-column prop="dsNode" label="说明" width="140">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="140">
            <template #default="scope">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 1%;">编辑</el-button>
                    <el-button @click="delRow(scope.row)" type="danger" text size="mini" style="margin-left: 1%;">删除</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
      <!-- <div style="float: right;margin-top: 0.5%;margin-right: 1%;">
          <el-pagination
            small
            v-model='currentPage'
            @current-change="changePage"
            background
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
          />
        </div> -->
    </div>
  </div>
  <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="30%"  destroy-on-close :key="tableKey">
    <el-form :label-width="100" label-position="right" :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;"  :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
      <el-form-item label="数据源名称:" prop="dsTitle" style="">
        <el-input v-model="formZu.dsTitle" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="数据源类型:" prop="dsType" style="">
        <el-input v-model="formZu.dsType" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="数据库文名:" prop="dsDbname" style="">
        <el-input v-model="formZu.dsDbname" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="数据库IP:" prop="dsIp" style="">
        <el-input v-model="formZu.dsIp" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="端口号:" prop="dsPort" style="">
        <el-input v-model="formZu.dsPort" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="用户名:" prop="dsUser">
        <el-input v-model="formZu.dsUser" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="密码:" prop="dsPass">
        <el-input v-model="formZu.dsPass" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="说明:" prop="dsNode">
        <el-input v-model="formZu.dsNode" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button v-if="isAddTa" type="primary" @click="addData" size="mini">
          提交
        </el-button>
        <el-button v-if="!isAddTa" type="primary" @click="saveEditTa" size="mini">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script   setup>
import { reactive } from 'vue'
import { getDataSourceList,addDataSource,delDataSource,editDataSource,getDataSourceDe } from "@/api/register/regCom.js";
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
    data:{}
});
const data =  ref([
    {
        label:'数据源',
        value:'dataSource'
    },
    {
        label:'元数据',
        value:'metaData'
    },
    {
        label:'数据集',
        value:'dataUn'
    },
])
const title =  ref([])
const titleTree =  ref([])
const currentPage =  ref(1)
const total =  ref(1)
const tableData = ref([])
const tableheight = window.innerHeight*0.78
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');
const dsTitle =ref('')
const formZu = ref({
  dsTitle:'',
  dsType:'',
  dsDbname:'',
  dsIp:'',
  dsPort:'',
  dsUser:'',
  dsPass:'',
  dsNode:'',
});
const rulesZu = reactive({
  dsTitle: [{ required: true, message: '必填', trigger: 'blur' }]
});
const formRefZu = ref();

const formTree = ref({
  itemName:'',
  catePid:'',
  itemNo:'',
  itemNotes:''
});
const rulesTree = reactive({
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  catePid: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();

function clearForm(){
  formZu.value = {
    dsTitle:'',
    dsType:'',
    dsDbname:'',
    dsIp:'',
    dsPort:'',
    dsUser:'',
    dsPass:'',
    dsNode:'',
  }
}
function getTable(){
  var par = {
    pageNum:currentPage.value,
    pageSize:15,
    dsTitle:dsTitle.value
  }
  getDataSourceList(par).then(res=>{
    tableData.value = res.rows
    tableData.value.forEach(item=>{
        item.ipAll = item.dsIp + ':' + item.dsPort
    })
    total.value = res.total
  })
}
function showAdd(){
  isAddTa.value = true
  title.value = '新增'
  dialogVisible.value = true
}
function showEdit(row){
  isAddTa.value = false
  title.value = '编辑'
  dialogVisible.value = true
  getDataSourceDe(row.dsCode).then(res=>{
    formZu.value = res.data
  })
}
function addData(){
  formRefZu.value.validate(async (valid) => {
    if(valid){
        addDataSource(formZu.value).then(res=>{
            if(res.code===200){
                proxy.$modal.msgSuccess("新增成功");
                getTable()
                dialogVisible.value = false
            }
        })
    }
  });
}
function saveEditTa(){
  formRefZu.value.validate(async (valid) => {
    if(valid){
        editDataSource(formZu.value).then(res=>{
            if(res.code===200){
                proxy.$modal.msgSuccess("新增成功");
                getTable()
                dialogVisible.value = false
            }
        })
    }
  });
}
function delRow(row) {
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delDataSource(row.dsCode);
  }).then(() => {
    getTable();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};
onMounted(() => {
  getTable()
});

</script>
<style scoped>
:deep(.el-table__body tr:hover > td) {
  background-color: #eaf7ff !important;
}
:deep(.treeLeft) .el-tree-node__content {
  display: flex !important;
  height: 40px;                  /* 按设计稿调整高度 */
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #ecf5ff;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: #d9ecff !important;
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }

.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center; 
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>