增加数据中心的多语言基础配置

src/i18n/pages/dateCenter/en.ts

@@ -0,0 +1,94 @@
+export default {
+  tabs: {
+    info: 'Source Info',
+    nodes: 'Data Nodes',
+    viewData: 'View Data',
+    baseInfo: 'Basic Info',
+    ruleExpr: 'Rule Expression',
+    reqParams: 'Request Params',
+    sourceConfig: 'Source Config',
+  },
+  labels: {
+    sourceNameTitle: 'Source Name:',
+    sourceStatus: 'Status',
+    sourceKey: 'Source Key',
+    sourceName: 'Source Name',
+    sourceDesc: 'Source Description',
+    sourceFrom: 'Source From',
+    deviceKey: 'Device Key',
+    productKey: 'Product Key',
+    dbType: 'Source From',
+    host: 'Host',
+    port: 'Port',
+    user: 'Username',
+    password: 'Password',
+    dbName: 'Database Name',
+    tableName: 'Table Name',
+    pk: 'Primary Key',
+    num: 'Batch Size',
+    cronExpression: 'Cron Expression',
+    expression: 'Expression',
+    param: 'Param',
+    method: 'Method',
+    url: 'URL',
+    interval: 'Update Interval',
+    paramType: 'Param Type',
+    paramTitle: 'Param Title',
+    paramKey: 'Param Key',
+    paramValue: 'Param Value',
+  },
+  columns: {
+    id: 'ID',
+    key: 'Key',
+    name: 'Name',
+    dataType: 'Data Type',
+    value: 'Value Items',
+    createdAt: 'Created At',
+    action: 'Actions',
+    sourceId: 'ID',
+    from: 'Source Type',
+  },
+  actions: {
+    publish: 'Publish',
+    disable: 'Disable',
+    add: 'Add',
+    edit: 'Edit',
+    delete: 'Delete',
+    detail: 'Detail',
+    records: 'Records',
+    search: 'Search',
+    createSource: 'New Source',
+    batchDelete: 'Batch Delete',
+    copy: 'Copy',
+  },
+  status: {
+    published: 'Published',
+    unpublished: 'Unpublished',
+    all: 'All',
+  },
+  options: {
+    all: 'All',
+    api: 'API Import',
+    db: 'Database',
+    file: 'File',
+    device: 'Device',
+  },
+  messages: {
+    opSuccess: 'Operation succeeded',
+    deleteConfirmSelected: 'Are you sure to delete selected data?',
+    deleteNodeConfirm: 'This will permanently delete node: "{name}". Continue?',
+    pleaseSelectToDelete: 'Please select data to delete.',
+    tip: 'Tip',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    deleteSuccess: 'Deleted successfully',
+    copyConfirm: 'Confirm to copy this data?',
+    copySuccess: 'Copied successfully',
+    batchDeleteConfirm: 'Confirm to batch delete these data?',
+    deleteRowConfirm: 'This will delete: "{name}". Continue?',
+  },
+  placeholders: {
+    input: 'Please enter',
+    sourceType: 'Source Type',
+  },
+};

src/i18n/pages/dateCenter/zh-cn.ts

@@ -0,0 +1,94 @@
+export default {
+  tabs: {
+    info: '数据源信息',
+    nodes: '数据节点',
+    viewData: '查看数据',
+    baseInfo: '基本信息',
+    ruleExpr: '规则表达式',
+    reqParams: '请求参数',
+    sourceConfig: '数据源配置',
+  },
+  labels: {
+    sourceNameTitle: '数据源名称：',
+    sourceStatus: '状态',
+    sourceKey: '数据源标识',
+    sourceName: '数据源名称',
+    sourceDesc: '数据源描述',
+    sourceFrom: '数据来源',
+    deviceKey: '设备key',
+    productKey: '产品key',
+    dbType: '数据来源',
+    host: '主机地址',
+    port: '端口号',
+    user: '用户名',
+    password: '密码',
+    dbName: '数据库名称',
+    tableName: '表名称',
+    pk: '主键字段',
+    num: '每次获取数量',
+    cronExpression: '任务表达式',
+    expression: '表达式',
+    param: '参数',
+    method: '请求方法',
+    url: '请求地址',
+    interval: '更新时间',
+    paramType: '参数类型',
+    paramTitle: '参数标题',
+    paramKey: '参数名',
+    paramValue: '参数值',
+  },
+  columns: {
+    id: 'ID',
+    key: '数据标识',
+    name: '数据名称',
+    dataType: '数据类型',
+    value: '数据取值项',
+    createdAt: '创建时间',
+    action: '操作',
+    sourceId: 'ID',
+    from: '数据源类型',
+  },
+  actions: {
+    publish: '发布',
+    disable: '停用',
+    add: '添加',
+    edit: '修改',
+    delete: '删除',
+    detail: '详情',
+    records: '数据记录',
+    search: '查询',
+    createSource: '新增数据源',
+    batchDelete: '批量删除',
+    copy: '复制',
+  },
+  status: {
+    published: '已发布',
+    unpublished: '未发布',
+    all: '全部',
+  },
+  options: {
+    all: '全部',
+    api: 'api导入',
+    db: '数据库',
+    file: '文件',
+    device: '设备',
+  },
+  messages: {
+    opSuccess: '操作成功',
+    deleteConfirmSelected: '你确定要删除所选数据？',
+    deleteNodeConfirm: '此操作将永久删除数据节点：“{name}”，是否继续?',
+    pleaseSelectToDelete: '请选择要删除的数据。',
+    tip: '提示',
+    confirm: '确认',
+    cancel: '取消',
+    deleteSuccess: '删除成功',
+    copyConfirm: '确定要复制该数据吗？',
+    copySuccess: '复制成功',
+    batchDeleteConfirm: '是否确认要批量删除这些数据吗?',
+    deleteRowConfirm: '此操作将删除：“{name}”，是否继续?',
+  },
+  placeholders: {
+    input: '请输入',
+    sourceType: '数据源类型',
+  },
+};

src/i18n/pages/dateCenter/zh-tw.ts

@@ -0,0 +1,94 @@
+export default {
+  tabs: {
+    info: '資料源資訊',
+    nodes: '資料節點',
+    viewData: '查看資料',
+    baseInfo: '基本資訊',
+    ruleExpr: '規則表示式',
+    reqParams: '請求參數',
+    sourceConfig: '資料源配置',
+  },
+  labels: {
+    sourceNameTitle: '資料源名稱：',
+    sourceStatus: '狀態',
+    sourceKey: '資料源標識',
+    sourceName: '資料源名稱',
+    sourceDesc: '資料源描述',
+    sourceFrom: '資料來源',
+    deviceKey: '設備 key',
+    productKey: '產品 key',
+    dbType: '資料來源',
+    host: '主機地址',
+    port: '埠號',
+    user: '使用者名',
+    password: '密碼',
+    dbName: '資料庫名稱',
+    tableName: '表名稱',
+    pk: '主鍵欄位',
+    num: '每次獲取數量',
+    cronExpression: '排程表示式',
+    expression: '表示式',
+    param: '參數',
+    method: '請求方法',
+    url: '請求地址',
+    interval: '更新間隔',
+    paramType: '參數類型',
+    paramTitle: '參數標題',
+    paramKey: '參數名',
+    paramValue: '參數值',
+  },
+  columns: {
+    id: 'ID',
+    key: '資料標識',
+    name: '資料名稱',
+    dataType: '資料型別',
+    value: '取值項',
+    createdAt: '建立時間',
+    action: '操作',
+    sourceId: 'ID',
+    from: '資料源類型',
+  },
+  actions: {
+    publish: '發布',
+    disable: '停用',
+    add: '新增',
+    edit: '修改',
+    delete: '刪除',
+    detail: '詳情',
+    records: '資料記錄',
+    search: '查詢',
+    createSource: '新增資料源',
+    batchDelete: '批次刪除',
+    copy: '複製',
+  },
+  status: {
+    published: '已發布',
+    unpublished: '未發布',
+    all: '全部',
+  },
+  options: {
+    all: '全部',
+    api: 'API 導入',
+    db: '資料庫',
+    file: '檔案',
+    device: '設備',
+  },
+  messages: {
+    opSuccess: '操作成功',
+    deleteConfirmSelected: '確定要刪除所選資料嗎？',
+    deleteNodeConfirm: '此操作將永久刪除資料節點：「{name}」，是否繼續？',
+    pleaseSelectToDelete: '請選擇要刪除的資料。',
+    tip: '提示',
+    confirm: '確認',
+    cancel: '取消',
+    deleteSuccess: '刪除成功',
+    copyConfirm: '確定要複製該資料嗎？',
+    copySuccess: '複製成功',
+    batchDeleteConfirm: '是否確認要批次刪除這些資料？',
+    deleteRowConfirm: '此操作將刪除：「{name}」，是否繼續？',
+  },
+  placeholders: {
+    input: '請輸入',
+    sourceType: '資料源類型',
+  },
+};

src/views/system/datahub/source/detail.vue

@@ -1,492 +1,489 @@
 <template>
-	<div class="page page-full">
-		<el-card shadow="never">
-			<div class="content">
-				<div class="cont_box">
-					<div class="title">数据源名称：{{ detail.name }}</div>
-					<div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
-					<div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? '停用' : '发布' }}</div>
-				</div>
-			</div>
-			<!--  page-full page-full-part -->
-			<div class="content-box">
-				<el-tabs v-model="activeName" @tab-click="handleClick">
-					<el-tab-pane label="数据源信息" name="1">
-						<el-form label-width="110px" inline>
-							<el-divider content-position="left">基本信息</el-divider>
-
-							<el-form-item label="数据源标识:">
-								{{ detail.key }}
-							</el-form-item>
-
-							<el-form-item label="数据源名称:">
-								{{ detail.name }}
-							</el-form-item>
-							<el-form-item label="数据源描述:">
-								{{ detail.desc }}
-							</el-form-item>
-							<el-form-item label="数据来源:">
-								<span v-if="detail.from == 1">api导入</span>
-								<span v-if="detail.from == 2">数据库</span>
-								<span v-if="detail.from == 3">文件</span>
-								<span v-if="detail.from == 4">设备</span>
-							</el-form-item>
-
-
-							<div v-if="detail.from == 4">
-								<el-divider content-position="left">数据源配置</el-divider>
-								<el-form-item label="设备key:" prop="deviceKey">
-									{{ detail.deviceConfig.deviceKey }}
-								</el-form-item>
-								<el-form-item label="产品key:" prop="productKey">
-									{{ detail.deviceConfig.productKey }}
-								</el-form-item>
-							</div>
-
-							<div v-if="detail.from == 2">
-								<el-divider content-position="left">数据源配置</el-divider>
-								<el-form-item label="数据来源:" prop="type">
-									{{ detail.dbConfig.type }}
-								</el-form-item>
-
-								<el-form-item label="主机地址:" prop="host">
-									{{ detail.dbConfig.host }}
-								</el-form-item>
-
-								<el-form-item label="端口号:" prop="port">
-									{{ detail.dbConfig.port }}
-								</el-form-item>
-
-								<el-form-item label="用户名:" prop="user">
-									{{ detail.dbConfig.user }}
-								</el-form-item>
-								<el-form-item label="密码:" prop="passwd">
-									{{ detail.dbConfig.passwd }}
-								</el-form-item>
-								<el-form-item label="数据库名称:" prop="dbName">
-									{{ detail.dbConfig.dbName }}
-								</el-form-item>
-
-								<el-form-item label="表名称:" prop="tableName">
-									{{ detail.dbConfig.tableName }}
-								</el-form-item>
-								<el-form-item label="主键字段:" prop="pk">
-									{{ detail.dbConfig.pk }}
-								</el-form-item>
-
-								<el-form-item label="每次获取数量:" prop="num">
-									{{ detail.dbConfig.num }}
-								</el-form-item>
-
-								<el-form-item label="任务表达式:" prop="cronExpression">
-									{{ detail.dbConfig.cronExpression }}
-								</el-form-item>
-
-							</div>
-							<div v-if="detail.from == 1">
-
-								<el-divider content-position="left">规则表达式</el-divider>
-
-								<div v-for="(item, index) in rule" :key="index">
-									<el-form-item label="表达式:">
-										{{ item.expression }}
-									</el-form-item>
-
-									<el-form-item label="参数:"> {{ item.params.name }}~ {{ item.params.value }} </el-form-item>
-
-									<el-divider content-position="left">数据源配置</el-divider>
-
-									<el-form-item label="请求方法:" prop="method">
-										{{ config.method }}
-									</el-form-item>
-									<el-form-item label="请求地址:" prop="method">
-										{{ config.url }}
-									</el-form-item>
-									<el-form-item label="更新时间:" prop="method">
-										{{ config.interval }}
-										{{ config.intervalUnit }}
-									</el-form-item>
-
-									<el-divider content-position="left">请求参数</el-divider>
-
-									<div class="content-f" v-for="(item, index) in requestParams" :key="index" style="    border: 1px solid #d9d9d9; padding: 10px;margin-bottom: 10px;">
-
-										<div v-for="(aa) in item" :key="aa.type">
-											<el-form-item label="参数类型:">
-												{{ aa.type }}
-											</el-form-item>
-											<el-form-item label="参数标题:">
-												{{ aa.name }}
-											</el-form-item>
-											<el-form-item label="参数名:">
-												{{ aa.key }}
-											</el-form-item>
-											<el-form-item label="参数值:">
-												{{ aa.value }}
-											</el-form-item>
-										</div>
-									</div>
-								</div>
-
-							</div>
-						</el-form>
-					</el-tab-pane>
-
-					<el-tab-pane label="数据节点" name="2">
-						<div class="flex-row flex-end mb-4">
-							<el-button type="primary" size="small" @click="onOpenEdit()" v-if="developer_status == 0" v-auth="'add'">添加</el-button>
-						</div>
-						<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-							<el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
-							<el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
-							<el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
-							<el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
-							<el-table-column label="数据取值项" prop="value" min-width="120" show-overflow-tooltip v-col="'value'" />
-							<el-table-column prop="createdAt" label="创建时间" min-width="160" align="center" v-col="'createdAt'" width="180"></el-table-column>
-							<el-table-column label="操作" width="200" align="center" fixed="right">
-								<template #default="scope">
-									<el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
-									<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-						<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
-					</el-tab-pane>
-					<el-tab-pane label="查看数据" name="3">
-						<JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
-					</el-tab-pane>
-				</el-tabs>
-			</div>
-			<EditDic ref="editDicRef" @typeList="typeList" />
-		</el-card>
-	</div>
-</template>            
+  <div class="page page-full">
+    <el-card shadow="never">
+      <div class="content">
+        <div class="cont_box">
+          <div class="title">数据源名称：{{ detail.name }}</div>
+          <div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? "已发布" : "未发布" }}</div>
+          <div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? "停用" : "发布" }}</div>
+        </div>
+      </div>
+      <!--  page-full page-full-part -->
+      <div class="content-box">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="数据源信息" name="1">
+            <el-form label-width="110px" inline>
+              <el-divider content-position="left">基本信息</el-divider>
+
+              <el-form-item label="数据源标识:">
+                {{ detail.key }}
+              </el-form-item>
+
+              <el-form-item label="数据源名称:">
+                {{ detail.name }}
+              </el-form-item>
+              <el-form-item label="数据源描述:">
+                {{ detail.desc }}
+              </el-form-item>
+              <el-form-item label="数据来源:">
+                <span v-if="detail.from == 1">api导入</span>
+                <span v-if="detail.from == 2">数据库</span>
+                <span v-if="detail.from == 3">文件</span>
+                <span v-if="detail.from == 4">设备</span>
+              </el-form-item>
+
+              <div v-if="detail.from == 4">
+                <el-divider content-position="left">数据源配置</el-divider>
+                <el-form-item label="设备key:" prop="deviceKey">
+                  {{ detail.deviceConfig.deviceKey }}
+                </el-form-item>
+                <el-form-item label="产品key:" prop="productKey">
+                  {{ detail.deviceConfig.productKey }}
+                </el-form-item>
+              </div>
+
+              <div v-if="detail.from == 2">
+                <el-divider content-position="left">数据源配置</el-divider>
+                <el-form-item label="数据来源:" prop="type">
+                  {{ detail.dbConfig.type }}
+                </el-form-item>
+
+                <el-form-item label="主机地址:" prop="host">
+                  {{ detail.dbConfig.host }}
+                </el-form-item>
+
+                <el-form-item label="端口号:" prop="port">
+                  {{ detail.dbConfig.port }}
+                </el-form-item>
+
+                <el-form-item label="用户名:" prop="user">
+                  {{ detail.dbConfig.user }}
+                </el-form-item>
+                <el-form-item label="密码:" prop="passwd">
+                  {{ detail.dbConfig.passwd }}
+                </el-form-item>
+                <el-form-item label="数据库名称:" prop="dbName">
+                  {{ detail.dbConfig.dbName }}
+                </el-form-item>
+
+                <el-form-item label="表名称:" prop="tableName">
+                  {{ detail.dbConfig.tableName }}
+                </el-form-item>
+                <el-form-item label="主键字段:" prop="pk">
+                  {{ detail.dbConfig.pk }}
+                </el-form-item>
+
+                <el-form-item label="每次获取数量:" prop="num">
+                  {{ detail.dbConfig.num }}
+                </el-form-item>
+
+                <el-form-item label="任务表达式:" prop="cronExpression">
+                  {{ detail.dbConfig.cronExpression }}
+                </el-form-item>
+              </div>
+              <div v-if="detail.from == 1">
+                <el-divider content-position="left">规则表达式</el-divider>
+
+                <div v-for="(item, index) in rule" :key="index">
+                  <el-form-item label="表达式:">
+                    {{ item.expression }}
+                  </el-form-item>
+
+                  <el-form-item label="参数:"> {{ item.params.name }}~ {{ item.params.value }} </el-form-item>
+
+                  <el-divider content-position="left">数据源配置</el-divider>
+
+                  <el-form-item label="请求方法:" prop="method">
+                    {{ config.method }}
+                  </el-form-item>
+                  <el-form-item label="请求地址:" prop="method">
+                    {{ config.url }}
+                  </el-form-item>
+                  <el-form-item label="更新时间:" prop="method">
+                    {{ config.interval }}
+                    {{ config.intervalUnit }}
+                  </el-form-item>
+
+                  <el-divider content-position="left">请求参数</el-divider>
+
+                  <div class="content-f" v-for="(item, index) in requestParams" :key="index" style="border: 1px solid #d9d9d9; padding: 10px; margin-bottom: 10px">
+                    <div v-for="aa in item" :key="aa.type">
+                      <el-form-item label="参数类型:">
+                        {{ aa.type }}
+                      </el-form-item>
+                      <el-form-item label="参数标题:">
+                        {{ aa.name }}
+                      </el-form-item>
+                      <el-form-item label="参数名:">
+                        {{ aa.key }}
+                      </el-form-item>
+                      <el-form-item label="参数值:">
+                        {{ aa.value }}
+                      </el-form-item>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-form>
+          </el-tab-pane>
+
+          <el-tab-pane label="数据节点" name="2">
+            <div class="flex-row flex-end mb-4">
+              <el-button type="primary" size="small" @click="onOpenEdit()" v-if="developer_status == 0" v-auth="'add'">添加</el-button>
+            </div>
+            <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
+              <el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
+              <el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
+              <el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
+              <el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
+              <el-table-column label="数据取值项" prop="value" min-width="120" show-overflow-tooltip v-col="'value'" />
+              <el-table-column prop="createdAt" label="创建时间" min-width="160" align="center" v-col="'createdAt'" width="180"></el-table-column>
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template #default="scope">
+                  <el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
+                  <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
+          </el-tab-pane>
+          <el-tab-pane label="查看数据" name="3">
+            <JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <EditDic ref="editDicRef" @typeList="typeList" />
+    </el-card>
+  </div>
+</template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import { useRoute } from 'vue-router';
+import { toRefs, reactive, onMounted, ref, defineComponent } from "vue";
+import { Edit } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { useRoute } from "vue-router";
 import "vue3-json-viewer/dist/index.css";
 
-import EditDic from './component/editNode.vue';
-import api from '/@/api/datahub';
+import EditDic from "./component/editNode.vue";
+import api from "/@/api/datahub";
 
 interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: [];
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			name: string;
-			deviceType: string;
-			status: string;
-			dateRange: string[];
-		};
-	};
+  ids: number[];
+  tableData: {
+    data: [];
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      name: string;
+      deviceType: string;
+      status: string;
+      dateRange: string[];
+    };
+  };
 }
 export default defineComponent({
-	name: 'dataDetail',
-	components: { EditDic },
-	setup() {
-		const editDicRef = ref();
-
-		const route = useRoute();
-		const state = reactive<TableDataState>({
-			config: {},
-			jsonData: {},
-			ruledata: [
-				{
-					expression: '',
-					params: {},
-				},
-			],
-			rule: [
-				{
-					expression: '',
-					params: {
-						name: '',
-						value: '',
-					},
-				},
-			],
-			requestParams: [
-				{
-					type: '',
-					key: '',
-					name: '',
-					value: '',
-				},
-			],
-
-			isShowDialog: false,
-			detail: [],
-			activeName: '1',
-			developer_status: 0,
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 20,
-					sourceId: route.params && route.params.sourceId,
-					status: '',
-					dateRange: [],
-				},
-			},
-		});
-
-		onMounted(() => {
-			const ids = route.params && route.params.sourceId;
-			api.common.detail(ids).then((res: any) => {
-				state.detail = res.data;
-				state.developer_status = res.data.status;
-				state.config = res.data.apiConfig;
-				state.requestParams = res.data.apiConfig.requestParams;
-			});
-
-			typeList();
-		});
-
-		const typeList = () => {
-			state.tableData.loading = true;
-			api.node.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.list;
-				state.tableData.total = res.Total;
-			}).finally(() => (state.tableData.loading = false));
-		};
-
-		const CkOption = () => {
-			if (state.developer_status == 1) {
-				api.common.undeploy({ sourceId: route.params.sourceId }).then(() => {
-					ElMessage.success('操作成功');
-					state.developer_status = 0;
-				});
-			} else {
-				api.common.deploy({ sourceId: route.params.sourceId }).then(() => {
-					ElMessage.success('操作成功');
-					state.developer_status = 1;
-				});
-			}
-		};
-		const handleClick = (tab: any) => {
-			if (tab.props.name == 3) {
-				if (state.detail.from == 1) {
-					api.common.api(state.detail.sourceId).then((res: any) => {
-						state.jsonData = JSON.parse(res.data);
-					})
-				} else if (state.detail.from == 4) {
-					api.common.devapi(state.detail.sourceId).then((res: any) => {
-						state.jsonData = JSON.parse(res.data);
-					})
-				} else if (state.detail.from == 2) {
-					api.common.devdb(state.detail.sourceId).then((res: any) => {
-						state.jsonData = JSON.parse(res.data);
-					})
-				}
-			}
-		};
-
-		const onRowDel = (row: any) => {
-			let msg = '你确定要删除所选数据？';
-			let ids: number[] = [];
-			if (row) {
-				msg = `此操作将永久删除数据节点：“${row.name}”，是否继续?`;
-				ids = row.nodeId;
-			} else {
-				ids = state.ids;
-			}
-			if (ids.length === 0) {
-				ElMessage.error('请选择要删除的数据。');
-				return;
-			}
-			ElMessageBox.confirm(msg, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					api.node.delete(ids).then(() => {
-						ElMessage.success('删除成功');
-						typeList();
-					});
-				})
-		};
-
-		// 打开修改数据源弹窗
-		const onOpenEdit = () => {
-			editDicRef.value.openDialog({ sourceId: route.params.sourceId, nodeId: 0, isPk: 0 });
-		};
-		const onOpenEdit1 = (row: any) => {
-			editDicRef.value.openDialog(row);
-		};
-
-		return {
-			Edit,
-			editDicRef,
-			typeList,
-			onRowDel,
-			onOpenEdit,
-			onOpenEdit1,
-			handleClick,
-			CkOption,
-			...toRefs(state),
-		};
-	},
+  name: "dataDetail",
+  components: { EditDic },
+  setup() {
+    const editDicRef = ref();
+
+    const route = useRoute();
+    const state = reactive<TableDataState>({
+      config: {},
+      jsonData: {},
+      ruledata: [
+        {
+          expression: "",
+          params: {},
+        },
+      ],
+      rule: [
+        {
+          expression: "",
+          params: {
+            name: "",
+            value: "",
+          },
+        },
+      ],
+      requestParams: [
+        {
+          type: "",
+          key: "",
+          name: "",
+          value: "",
+        },
+      ],
+
+      isShowDialog: false,
+      detail: [],
+      activeName: "1",
+      developer_status: 0,
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 20,
+          sourceId: route.params && route.params.sourceId,
+          status: "",
+          dateRange: [],
+        },
+      },
+    });
+
+    onMounted(() => {
+      const ids = route.params && route.params.sourceId;
+      api.common.detail(ids).then((res: any) => {
+        state.detail = res.data;
+        state.developer_status = res.data.status;
+        state.config = res.data.apiConfig;
+        state.requestParams = res.data.apiConfig.requestParams;
+      });
+
+      typeList();
+    });
+
+    const typeList = () => {
+      state.tableData.loading = true;
+      api.node
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.list;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+
+    const CkOption = () => {
+      if (state.developer_status == 1) {
+        api.common.undeploy({ sourceId: route.params.sourceId }).then(() => {
+          ElMessage.success("操作成功");
+          state.developer_status = 0;
+        });
+      } else {
+        api.common.deploy({ sourceId: route.params.sourceId }).then(() => {
+          ElMessage.success("操作成功");
+          state.developer_status = 1;
+        });
+      }
+    };
+    const handleClick = (tab: any) => {
+      if (tab.props.name == 3) {
+        if (state.detail.from == 1) {
+          api.common.api(state.detail.sourceId).then((res: any) => {
+            state.jsonData = JSON.parse(res.data);
+          });
+        } else if (state.detail.from == 4) {
+          api.common.devapi(state.detail.sourceId).then((res: any) => {
+            state.jsonData = JSON.parse(res.data);
+          });
+        } else if (state.detail.from == 2) {
+          api.common.devdb(state.detail.sourceId).then((res: any) => {
+            state.jsonData = JSON.parse(res.data);
+          });
+        }
+      }
+    };
+
+    const onRowDel = (row: any) => {
+      let msg = "你确定要删除所选数据？";
+      let ids: number[] = [];
+      if (row) {
+        msg = `此操作将永久删除数据节点：“${row.name}”，是否继续?`;
+        ids = row.nodeId;
+      } else {
+        ids = state.ids;
+      }
+      if (ids.length === 0) {
+        ElMessage.error("请选择要删除的数据。");
+        return;
+      }
+      ElMessageBox.confirm(msg, "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        api.node.delete(ids).then(() => {
+          ElMessage.success("删除成功");
+          typeList();
+        });
+      });
+    };
+
+    // 打开修改数据源弹窗
+    const onOpenEdit = () => {
+      editDicRef.value.openDialog({ sourceId: route.params.sourceId, nodeId: 0, isPk: 0 });
+    };
+    const onOpenEdit1 = (row: any) => {
+      editDicRef.value.openDialog(row);
+    };
+
+    return {
+      Edit,
+      editDicRef,
+      typeList,
+      onRowDel,
+      onOpenEdit,
+      onOpenEdit1,
+      handleClick,
+      CkOption,
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 <style scoped>
 .jv-jv-dark.boxed {
-	border: 1px solid #eee;
+  border: 1px solid #eee;
 }
 .content {
-	width: 100%;
+  width: 100%;
 }
 
 .content-box {
-	width: 100%;
+  width: 100%;
 }
 
 .cont_box {
-	display: flex;
+  display: flex;
 }
 
 .cont_box .title {
-	font-size: 18px;
+  font-size: 18px;
 }
 
 .cont_box .pro-status {
-	line-height: 30px;
-	margin-left: 30px;
+  line-height: 30px;
+  margin-left: 30px;
 }
 
 .cont_box .pro-status .on {
-	background: #52c41a;
+  background: #52c41a;
 }
 
 .cont_box .pro-status .off {
-	background: #c41a1a;
+  background: #c41a1a;
 }
 
 .cont_box .pro-status span {
-	position: relative;
-	top: -1px;
-	display: inline-block;
-	width: 6px;
-	height: 6px;
-	vertical-align: middle;
-	border-radius: 50%;
-	margin-right: 5px;
+  position: relative;
+  top: -1px;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  vertical-align: middle;
+  border-radius: 50%;
+  margin-right: 5px;
 }
 
 .cont_box .pro-option {
-	line-height: 30px;
-	margin-left: 10px;
-	color: #1890ff;
-	cursor: pointer;
+  line-height: 30px;
+  margin-left: 10px;
+  color: #1890ff;
+  cursor: pointer;
 }
 
 .content-box .pro-box {
-	display: flex;
-	padding: 10px;
+  display: flex;
+  padding: 10px;
 }
 
 .content-box .pro-box .protitle {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 35px;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 35px;
 }
 
 .content-box .pro-box .buttonedit {
-	border: 0px;
-	color: #1890ff;
+  border: 0px;
+  color: #1890ff;
 }
 
 table {
-	border-collapse: collapse;
-	text-indent: initial;
-	border-spacing: 2px;
+  border-collapse: collapse;
+  text-indent: initial;
+  border-spacing: 2px;
 }
 
 tbody {
-	box-sizing: border-box;
-	display: table-row-group;
-	vertical-align: middle;
-	border-color: inherit;
+  box-sizing: border-box;
+  display: table-row-group;
+  vertical-align: middle;
+  border-color: inherit;
 }
 
 tr {
-	display: table-row;
-	vertical-align: inherit;
-	border-color: inherit;
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
 }
 
 .ant-descriptions-view {
-	width: 100%;
-	overflow: hidden;
-	border-radius: 4px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
 }
 
 .ant-descriptions-view {
-	border: 1px solid #e8e8e8;
+  border: 1px solid #e8e8e8;
 }
 
 .ant-descriptions-view table {
-	width: 100%;
-	table-layout: fixed;
+  width: 100%;
+  table-layout: fixed;
 }
 
-.ant-descriptions-view>table {
-	table-layout: auto;
+.ant-descriptions-view > table {
+  table-layout: auto;
 }
 
 .ant-descriptions-row {
-	border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
 }
 
 .ant-descriptions-item-label {
-	color: rgba(0, 0, 0, 0.85);
-	font-weight: 400;
-	font-size: 14px;
-	line-height: 1.5;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .ant-descriptions-item-label {
-	padding: 16px 24px;
-	border-right: 1px solid #e8e8e8;
+  padding: 16px 24px;
+  border-right: 1px solid #e8e8e8;
 }
 
 .ant-descriptions-item-label {
-	background-color: #fafafa;
+  background-color: #fafafa;
 }
 
 .ant-descriptions-item-content {
-	padding: 16px 24px;
-	border-right: 1px solid #e8e8e8;
-	display: table-cell;
-	color: rgba(0, 0, 0, 0.65);
-	font-size: 14px;
-	line-height: 1.5;
+  padding: 16px 24px;
+  border-right: 1px solid #e8e8e8;
+  display: table-cell;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .wu-box {
-	border: #e8e8e8 solid 1px;
-	padding: 20px;
-	width: 100%;
+  border: #e8e8e8 solid 1px;
+  padding: 20px;
+  width: 100%;
 }
 
 .wu-box .wu-title {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	padding: 20px;
-	border-bottom: #e8e8e8 1px solid;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 20px;
+  border-bottom: #e8e8e8 1px solid;
 }
 
 .wu-box .wu-title .title {
-	font-size: 18px;
+  font-size: 18px;
 }
-</style>
+</style>