From b25e9b38c8d4cba8a848c5d769cdc1b49694be1f Mon Sep 17 00:00:00 2001
From: ijiuyueya <2628619875@qq.com>
Date: Fri, 12 Apr 2024 12:54:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=80=E9=83=A8=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
WebSite/src/api/sourceApi.js | 28 +-
.../views/configure-data-sources/index.vue | 270 +++++++++++++++---
2 files changed, 263 insertions(+), 35 deletions(-)
diff --git a/WebSite/src/api/sourceApi.js b/WebSite/src/api/sourceApi.js
index ecd6bb9..8242eed 100644
--- a/WebSite/src/api/sourceApi.js
+++ b/WebSite/src/api/sourceApi.js
@@ -9,13 +9,13 @@
import request from '@/core/base/request';
class SourceApi {
- //1.鏌ヨ鍑烘墍鏈夌殑鏁版嵁婧�
+ //1.鏌ヨ鍑烘墍鏈夌殑鏁版嵁婧�
static dataSourceList() {
return request.post('/dataSource/pc/v1/dataSourceList');
}
//2.鏍规嵁鏁版嵁婧愬悕绉拌幏鍙栭泦鍚�
static listByDataSourceName(data) {
- return request.post('/datamodel/pc/v1/listByDataSourceName',data);
+ return request.post('/datamodel/pc/v1/listByDataSourceName', data);
}
//3.鏍规嵁鏁版嵁婧愬悕绉版煡璇㈡暟鎹�
static getEntityByName(data) {
@@ -25,6 +25,30 @@ class SourceApi {
static testDataConfigurationIsOk(data) {
return request.post(`/dataSource/pc/v1/testDataConfigurationIsOk?name=${data}`);
}
+ //5.鏂板鏁版嵁婧�
+ static create(data) {
+ return request.post('/dataSource/pc/v1/create', data);
+ }
+ //6.缂栬緫鏁版嵁婧�
+ static update(data) {
+ return request.post('/dataSource/pc/v1/update', data);
+ }
+ //7.鏇存柊鏄惁鍙负绌�
+ static updateCanEmpty(data) {
+ return request.get(`/datamodel/pc/v1/updateCanEmpty/{id}?id=${data}`);
+ }
+ //8.鏇存柊鍞竴鍊�
+ static updateCanUnique(data) {
+ return request.get(`/datamodel/pc/v1/updateCanUnique/{id}?id=${data}`);
+ }
+ //9.鏂板瀛楁
+ static createField(data) {
+ return request.post('/datamodel/pc/v1/create', data);
+ }
+ //10.缂栬緫瀛楁
+ static updateField(data) {
+ return request.post('/dataSource/pc/v1/update', data);
+ }
}
export default SourceApi;
diff --git a/WebSite/src/views/configure-data-sources/index.vue b/WebSite/src/views/configure-data-sources/index.vue
index 8c30ae8..7b886bc 100644
--- a/WebSite/src/views/configure-data-sources/index.vue
+++ b/WebSite/src/views/configure-data-sources/index.vue
@@ -16,7 +16,9 @@
stripe
border
max-height="840px"
- @row-click="handleClick"
+ @current-change="handleClick"
+ @row-dblclick="handleClickdb"
+ highlight-current-row
>
<el-table-column label="鏁版嵁婧愬悕绉�" prop="name" align="center">
</el-table-column>
@@ -29,7 +31,7 @@
<el-button
type="danger"
circle
- @click="handleDeleteSource(scope.row)"
+ @click.stop="handleDeleteSource(scope.row)"
>
<el-icon><Delete /></el-icon>
</el-button>
@@ -45,9 +47,15 @@
<div class="top">
<div class="title">褰撳墠閫変腑鏁版嵁婧愬悕绉帮細{{ formDate.name }}</div>
<div class="topBtn">
- <el-button type="primary">瀵煎叆</el-button>
- <el-button type="primary">瀵煎嚭</el-button>
- <el-button type="success">淇濆瓨</el-button>
+ <el-button
+ type="primary"
+ @click="uploadFile()"
+ v-if="formOut.dataSourceType == 'Excel'"
+ >瀵煎叆</el-button
+ >
+ <el-button type="success" @click="saveDataSource()"
+ >淇濆瓨</el-button
+ >
<el-button type="primary" @click="testDataConfigurationIsOk()"
>娴嬭瘯杩炴帴</el-button
>
@@ -57,6 +65,7 @@
v-model="formDate"
label-width="110px"
label-position="left"
+ v-if="formOut.dataSourceType != 'Excel'"
>
<el-form-item label="鏁版嵁搴撻摼鎺ワ細" prop="sqlConnect">
<el-input
@@ -89,6 +98,9 @@
/>
</el-form-item>
</el-form>
+ <el-form v-model="formOut" v-if="formOut.dataSourceType == 'Excel'">
+ <el-form-item label="澶栭儴鏂囦欢閾炬帴锛�" prop="url"> </el-form-item>
+ </el-form>
<el-table
:data="tableDataDetail"
style="width: 100%; margin-top: 10px"
@@ -101,41 +113,66 @@
:cell-style="{ height: '40px', fontSize: '14px' }"
max-height="570px"
>
- <el-table-column label="瀛楁" prop="a" align="center">
+ <el-table-column label="瀛楁" prop="dataField" align="center">
<template #default="scope">
- <div v-if="!scope.row.isChange">{{ scope.row.a }}</div>
+ <div v-if="!scope.row.isChange">
+ {{ scope.row.dataField }}
+ </div>
<el-input
- v-model="scope.row.a"
+ v-model="scope.row.dataField"
v-if="scope.row.isChange"
></el-input>
</template>
</el-table-column>
- <el-table-column label="瀛楁鍚嶇О" prop="b" align="center">
+ <el-table-column
+ label="瀛楁鍚嶇О"
+ prop="dataFieldName"
+ align="center"
+ >
<template #default="scope">
- <div v-if="!scope.row.isChange">{{ scope.row.b }}</div>
+ <div v-if="!scope.row.isChange">
+ {{ scope.row.dataFieldName }}
+ </div>
<el-input
- v-model="scope.row.b"
+ v-model="scope.row.dataFieldName"
v-if="scope.row.isChange"
></el-input>
</template>
</el-table-column>
- <el-table-column label="澶栭儴瀵瑰簲瀛楁" prop="c" align="center">
+ <el-table-column
+ label="澶栭儴瀵瑰簲瀛楁"
+ prop="externalDataField"
+ align="center"
+ >
<template #default="scope">
- <div v-if="!scope.row.isChange">{{ scope.row.c }}</div>
+ <div v-if="!scope.row.isChange">
+ {{ scope.row.externalDataField }}
+ </div>
<el-input
- v-model="scope.row.c"
+ v-model="scope.row.externalDataField"
v-if="scope.row.isChange"
></el-input>
</template>
</el-table-column>
- <el-table-column label="鍙互涓虹┖鍊�" prop="d" align="center">
+ <el-table-column
+ label="鍙互涓虹┖鍊�"
+ prop="canEmpty"
+ align="center"
+ >
<template #default="scope">
- <el-switch v-model="scope.row.d" />
+ <el-switch
+ v-model="scope.row.canEmpty"
+ @change="updateCanEmpty"
+ />
</template>
</el-table-column>
- <el-table-column label="璁剧疆鍏宠仈鍊�" prop="e" align="center">
+ <el-table-column
+ label="璁剧疆鍏宠仈鍊�"
+ prop="canUnique"
+ align="center"
+ >
<template #default="scope">
- <el-switch v-model="scope.row.e" />
+ <el-switch v-model="scope.row.canUnique" />
</template>
</el-table-column>
<el-table-column
@@ -166,12 +203,68 @@
</div>
</el-col>
</el-row>
+ <!-- 鏂板鏁版嵁婧愬脊绐� -->
+ <el-dialog title="鏂板鏁版嵁婧�" v-model="dialogFormVisible" width="340px">
+ <el-form :model="formAdd" label-width="100px">
+ <el-form-item label="鏁版嵁婧愮被鍨嬶細" prop="dataSourceType">
+ <el-select v-model="formAdd.dataSourceType" style="width: 100%">
+ <el-option
+ v-for="item in typeList"
+ :key="item"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏁版嵁婧愬悕绉帮細" prop="name">
+ <el-input v-model="formAdd.name" style="width: 100%"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="dialogFormVisible = false">
+ 纭
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <!-- 鏌ヨ寮圭獥 -->
+ <el-dialog
+ :title="formSearch.id ? '淇敼鏁版嵁婧愬悕绉�' : '鏌ユ壘鏁版嵁婧�'"
+ v-model="dialogFormSearch"
+ width="340px"
+ >
+ <el-form :model="formSearch" label-width="100px">
+ <el-form-item label="鏁版嵁婧愬悕绉帮細" prop="name">
+ <el-input v-model="formSearch.name" style="width: 100%"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogFormSearch = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="dialogFormSearch = false">
+ 纭
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <!-- 瀵煎叆 -->
+ <UploadFile
+ :modelValue="dialogUploadFile"
+ title="瀵煎叆鏁版嵁婧�"
+ :limit="1"
+ :acceptType="acceptType"
+ :sigleFile="sigleFile"
+ @upload-handler="uploadHandler"
+ @update:modelValue="updateDialogFormVisible"
+ />
</div>
</template>
<script>
import { toRefs, reactive, onMounted } from 'vue';
import SourceApi from '@/api/sourceApi.js';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
export default {
setup() {
const data = reactive({
@@ -232,6 +325,13 @@ export default {
sqlAccountUserName: '',
sqlAccountPwd: '',
sqlStr: '',
+ sourceId: '',
+ dataSourceType: '',
+ },
+ formOut: {
+ dataSourceType: '',
+ url: '',
+ name: '',
},
tableDataDetail: [
{
@@ -416,6 +516,28 @@ export default {
pageNo: 1,
pageSize: 10,
},
+ dialogFormVisible: false,
+ dialogFormSearch: false,
+ dialogUploadFile: false,
+ formAdd: {
+ dataSourceType: '',
+ name: '',
+ },
+ formSearch: {
+ id: '',
+ name: '',
+ },
+ typeList: [
+ {
+ value: '1',
+ label: '澶栭儴鏂囦欢涓婁紶',
+ },
+ {
+ value: '2',
+ label: '鏁版嵁搴撹繛鎺�',
+ },
+ ],
+ acceptType: ['jpg', 'jpeg', 'png', 'tif', 'gif', 'pdf', 'ofd'],
});
onMounted(() => {
getTableDate();
@@ -430,19 +552,41 @@ export default {
};
//鑾峰彇瀛楁
const listByDataSourceName = () => {
- SourceApi.listByDataSourceName({
- dataSourceName: data.formDate.name,
- }).then((res) => {
- data.tableDataDetail = res.data;
- });
+ if (data.formOut.dataSourceType == 'Excel') {
+ SourceApi.listByDataSourceName({
+ dataSourceName: data.formOut.name,
+ }).then((res) => {
+ data.tableDataDetail = res.data;
+ });
+ } else {
+ SourceApi.listByDataSourceName({
+ dataSourceName: data.formDate.name,
+ }).then((res) => {
+ data.tableDataDetail = res.data;
+ });
+ }
};
//鐐瑰嚮姣忎竴琛�
const handleClick = (row) => {
SourceApi.getEntityByName(row.name).then((res) => {
- data.formDate = res.data[0];
+ if (res.data[0].dataSourceType == 'Excel') {
+ data.formOut = res.data[0];
+ data.formDate = [];
+ } else {
+ data.formDate = res.data[0];
+ data.formOut = [];
+ }
listByDataSourceName();
});
};
+ //鍙屽嚮淇敼
+ const handleClickdb = (row) => {
+ data.formSearch = {
+ id: JSON.parse(JSON.stringify(row.sourceId)),
+ name: JSON.parse(JSON.stringify(row.name)),
+ };
+ data.dialogFormSearch = true;
+ };
//鍒嗛〉
const handlePageChange = (v) => {
data.query.pageNo = v.page;
@@ -450,11 +594,9 @@ export default {
listByDataSourceName();
};
//澧炲姞鏁版嵁婧�
- const add = (v) => {
+ const openAdd = (v) => {
if (v == 1) {
- data.tableDateSource.push({
- name: '',
- });
+ data.dialogFormVisible = true;
} else {
data.tableDataDetail.push({
a: '',
@@ -466,13 +608,35 @@ export default {
});
}
};
+ //鏌ユ壘鏁版嵁婧�
+ const openSearch = () => {
+ data.dialogFormSearch = true;
+ };
//鍒犻櫎鏁版嵁婧�
- const handleDeleteSource = () => {};
+ const handleDeleteSource = () => {
+ ElMessageBox.confirm('鍒犻櫎鏁版嵁婧愬悗鎵€鏈夌殑鏁版嵁閮戒細娓呴櫎', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ })
+ .then(() => {
+ ElMessage.success('鍒犻櫎鎴愬姛');
+ })
+ .catch(() => {
+ ElMessage.info('鍙栨秷鍒犻櫎');
+ });
+ };
//鏂板鏁版嵁婧�
const renderHeader = () => {
return (
<div>
- <el-icon onClick={() => add(1)} style="font-size: 30px;">
+ <el-icon
+ onClick={() => openSearch()}
+ style="font-size: 18px;margin-right:4px"
+ >
+ <Search />
+ </el-icon>
+ <el-icon onClick={() => openAdd(1)} style="font-size: 18px;">
<CirclePlus />
</el-icon>
</div>
@@ -483,7 +647,7 @@ export default {
return (
<div>
<span>鎿嶄綔</span>
- <el-icon onClick={() => add(2)} style="margin-left:8px">
+ <el-icon onClick={() => openAdd(2)} style="margin-left:8px">
<CirclePlus />
</el-icon>
</div>
@@ -505,11 +669,46 @@ export default {
});
});
};
+ //淇濆瓨
+ const saveDataSource = () => {
+ if (data.formDate.sourceId) {
+ SourceApi.create().then(() => {});
+ } else {
+ SourceApi.update().then(() => {});
+ }
+ };
+ //鏄惁鍙互涓虹┖鍊�
+ const updateCanEmpty = (v) => {
+ console.log(v);
+ };
+ //瀵煎叆
+ const uploadFile = () => {
+ ElMessageBox.confirm('瀵煎叆鍚庡皢瑕嗙洊涔嬪墠鐨勬枃浠舵暟鎹�', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ })
+ .then(() => {
+ data.dialogUploadFile = true;
+ })
+ .catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '鍙栨秷瀵煎叆',
+ });
+ });
+ };
+ //涓婁紶
+ const uploadHandler = (file) => {
+ const formData = new FormData();
+ formData.append('file', file);
+ };
return {
...toRefs(data),
getTableDate,
listByDataSourceName,
handleClick,
+ handleClickdb,
handleDeleteSource,
handleDelete,
handleEdit,
@@ -517,8 +716,13 @@ export default {
handlePageChange,
renderHeader,
renderHeaderTable,
- add,
testDataConfigurationIsOk,
+ saveDataSource,
+ updateCanEmpty,
+ openAdd,
+ openSearch,
+ uploadFile,
+ uploadHandler,
};
},
};
--
GitLab