diff --git a/src/api/DesignForm/type.ts b/src/api/DesignForm/type.ts
index 46bc2f0..c3b865a 100644
--- a/src/api/DesignForm/type.ts
+++ b/src/api/DesignForm/type.ts
@@ -117,7 +117,7 @@ export interface formTabelStruct{
 	type:string;
 	attribute:string;
 	collation:string;
-	null:string;
+	nullVal:string;
 	key:string;
 	default:string;
 	extra:string;
diff --git a/src/api/date/apidate.ts b/src/api/date/apidate.ts
index 7acd115..1cf922a 100644
--- a/src/api/date/apidate.ts
+++ b/src/api/date/apidate.ts
@@ -1,5 +1,9 @@
 import request from '@/utils/request';
-
+import { AxiosPromise } from 'axios';
+import {
+	gainDatabaseInfo,
+	havesDatabaseInfo,
+  } from "@/api/date/type";
 export function getOrPostDate(methodStr:string,data?: any) {
 	return request({
 		url: "/systemapi/dataCenter/gaindataCenter",
@@ -14,3 +18,11 @@ export function postSaveData(data?: any) {
 		data: data
 	});
 }
+//获取数据表
+export function gainDataTable(data?: gainDatabaseInfo): AxiosPromise<havesDatabaseInfo>  {
+	return request({
+		url: "/systemapi/dataCenter/gainDataTable",
+		method: "POST",
+		data: data
+	});
+}
diff --git a/src/api/date/type.ts b/src/api/date/type.ts
index 2ac503e..34b3425 100644
--- a/src/api/date/type.ts
+++ b/src/api/date/type.ts
@@ -288,3 +288,36 @@ export interface appMatrix{
 	outcomeName: string;
 	outcomeid: number;
 }
+//获取数据源参数
+export interface gainDatabaseInfo{
+	id: string;
+	type: string;
+	dataBaseName: string;
+	ip: string;
+	port: number;
+	userName: string;
+	password: string;
+}
+
+//接收数据库列表
+export interface havesDatabaseInfo{
+	tableName: string;
+	tableKey: string;
+	fields?: fieldList[];
+}
+//数据表结构
+export interface fieldList{
+	fieldes:string;
+	types:string;
+	attribute:string;
+	collation:string;
+	nullVal:string;
+	key:string;
+	defaultVal:string;
+	extra:string;
+	privileges:string;
+	comment:string;
+	pattern:string;
+	classify: string;
+	auxiliary: string;
+}
diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue
index 1e3e04c..2ee1f77 100644
--- a/src/components/DesignForm/formControlPropertiNew.vue
+++ b/src/components/DesignForm/formControlPropertiNew.vue
@@ -31,6 +31,7 @@ import LayoutPage from "@/components/DesignForm/layoutPage/index.vue";
 import { Plus } from "@element-plus/icons-vue";
 
 import Draggable from "vuedraggable-es";
+import { dataBaseStruct } from "@/api/date/type";
 
 const props = withDefaults(
   //接收父级参数
@@ -83,6 +84,8 @@ const controlDataStyls = computed(() => {
   return store.controlAttr.styles;
 });
 
+const openDataSourceBox = ref(false);
+
 const dataSourceOption = ref([]);
 const designType = inject("formDesignType");
 const state = reactive({
@@ -157,12 +160,31 @@ const numberUinrVerfy = reactive([...validateInt]);
 const formAttr = computed(() => {
   const isSearch = state.isSearch;
   return [
+    {
+      label: "数据源",
+      placeholder: "请选择引用的数据源",
+      value: 1,
+      key: "dataSourceSetup",
+      type: "dataSourceSetup",
+      hide: isSearch,
+      options: [
+        {
+          label: "无",
+          value: "no",
+        },
+        {
+          label: "引用数据源",
+          value: "yes",
+        },
+      ],
+    },
     {
       label: "表单名称",
       placeholder: "用于保存的表单名称",
       value: props.formOtherData.formName,
       key: "formName",
       hide: isSearch,
+      disabled: false,
     },
     {
       label: "数据源",
@@ -180,6 +202,7 @@ const formAttr = computed(() => {
       placeholder: "表单唯一标识，可为空",
       key: "name",
       hide: isSearch,
+      disabled: false,
     },
     // {
     // 	label: '表单标签宽度',
@@ -324,7 +347,7 @@ const attrList = computed(() => {
       {
         label: "字段标识",
         value: name,
-        type: Object.keys(state.dataSourceList).length > 0 ? "select" : "text",
+        type: Object.keys(state.dataSourceList).length > 0 ? "selectDataSoure" : "text",
         placeholder: "字段唯一标识，对应数据库",
         dict: state.dataSourceList,
         path: "name",
@@ -1693,8 +1716,12 @@ defineExpose({ getFormFieldBySource, saveRefreshFormControlAttr });
 //判断输入框是否可写
 const isNotWrite = (val: any) => {
   // console.log("判断输入框是否可写--->",val,props.customerformid)
-  if (val.key === "name" && props.customerformid != "") {
+  if (val.disabled) {
     return true;
+  } else {
+    if (val.key === "name" && props.customerformid != "") {
+      return true;
+    }
   }
   return false;
 };
@@ -3568,15 +3595,102 @@ const radioChangeSet = (val: any) => {
     });
   }
 };
+
+watch(
+  () => formData.value.dataSource,
+  (val: string) => {
+    if (val == "yes") {
+      formAttr.value.forEach((item) => {
+        console.log(item.label, "item.", item.type);
+        if (!item.hide) {
+          if (!item.type) {
+            // console.log(item.label, "item.", item.type);
+            item.disabled = true;
+          }
+        }
+      });
+    } else {
+
+			formData.value.dataSourceConfig.id = "";
+  		formData.value.dataSourceConfig.dataBaseName = "";
+ 	 		formData.value.dataSourceConfig.tableName = "";
+  		formData.value.dataSourceConfig.tableKey = "";
+  		formData.value.dataSourceConfig.dsn = {
+				dataBaseName: "",
+				ip: "",
+				port: 0,
+				userName: "",
+				password: "",
+			};
+
+
+      formAttr.value.forEach((item) => {
+        console.log(item.label, "item.", item.type);
+        if (!item.hide) {
+          if (!item.type) {
+            // console.log(item.label, "item.", item.type);
+            item.disabled = false;
+          }
+        }
+      });
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-23 10:39:48
+@ 功能: 打开数据源设定
+*/
+const openSetDataSource = () => {
+  openDataSourceBox.value = true;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-23 16:36:16
+@ 功能: 关闭数据源
+*/
+const closeDataSource = () => {
+  openDataSourceBox.value = false;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-26 16:26:06
+@ 功能: 设定关联数据
+*/
+// const dataList = ref<dataBaseStruct[]>([]);
+const updataBase = (val: any) => {
+  console.log("设定关联数据", val);
+  formData.value.dataSourceConfig.id = val.id;
+  formData.value.dataSourceConfig.dataBaseName = val.dataBaseName;
+  formData.value.dataSourceConfig.tableName = val.tableName;
+  formData.value.dataSourceConfig.tableKey = val.tableKey;
+  formData.value.dataSourceConfig.dsn = val.dsn;
+  // dataList.value = val.fields;
+  state.dataSourceList = val.fields;
+
+  console.log("设定关联数据------1-------》", state.dataSourceList);
+  console.log("设定关联数据------2-------》", val.fields);
+  console.log("设定关联数据------3-------》", state.dataSourceList);
+};
 </script>
 <template>
+  <DataSourcePage
+    v-model:isShow="openDataSourceBox"
+    @closeDataSource="closeDataSource"
+    @updataBase="updataBase"
+  />
+
   <div class="sidebar-tools">
     <el-tabs v-model="state.tabsName">
       <el-tab-pane label="字段配置" name="first">
         <el-form size="small" class="form">
           <!-- <div class=""><h3>通用属性</h3></div> -->
           <el-divider content-position="left">通用属性</el-divider>
-          {{ attrList }}
+
           <template v-for="(item, index) in attrList" :key="index">
             <el-form-item :label="item.label" class="form_cont">
               <el-select
@@ -3595,6 +3709,24 @@ const radioChangeSet = (val: any) => {
                   :label="item.path === 'name' ? `${opt.label}(${opt.name})` : opt"
                 />
               </el-select>
+
+              <el-select
+                v-if="item.type === 'selectDataSoure'"
+                :placeholder="item.placeholder"
+                v-model="item.value"
+                :filterable="item.path === 'name'"
+                :allow-create="item.path === 'name'"
+                :clearable="item.clearable"
+                @change="controlChange(item, $event)"
+              >
+                <el-option
+                  v-for="(opt, key) in item.dict"
+                  :key="key"
+                  :value="item.path === 'name' ? opt.fieldes : key"
+                  :label="item.path === 'name' ? `${opt.comment}(${opt.fieldes})` : opt"
+                />
+              </el-select>
+
               <el-switch
                 v-else-if="item.type === 'switch'"
                 v-model="item.value"
@@ -4488,6 +4620,8 @@ const radioChangeSet = (val: any) => {
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="表单配置" name="second">
+        {{ formData }}<br />
+        {{ formData.dataSource }}
         <el-form size="small" class="form">
           <el-divider content-position="left">基础配置</el-divider>
           <el-form-item v-if="formConfig.classify != 4" class="form_cont">
@@ -4531,6 +4665,26 @@ const radioChangeSet = (val: any) => {
                 :value="formatNumber(opt.value ?? opt.id)"
               />
             </el-select>
+
+            <div v-else-if="item.type === 'dataSourceSetup'">
+              <el-radio-group v-model="formData.dataSource" size="small">
+                <el-radio-button
+                  v-for="optVal in item.options"
+                  :label="optVal.label"
+                  :value="optVal.value"
+                />
+                <!-- <el-radio-button label="Washington" value="Washington" />
+								<el-radio-button label="Los Angeles" value="Los Angeles" />
+								<el-radio-button label="Chicago" value="Chicago" /> -->
+              </el-radio-group>
+              <div v-if="formData.dataSource == 'yes'" @click="openSetDataSource">
+                <el-text v-if="formData.dataSourceConfig.tableName != ''">
+                  {{ formData.dataSourceConfig.dataBaseName }} /
+                  {{ formData.dataSourceConfig.tableName }}
+                </el-text>
+                <el-text v-else>请选择数据源</el-text>
+              </div>
+            </div>
             <el-switch
               v-else-if="item.type === 'switch'"
               v-model="item.value"
@@ -5666,4 +5820,9 @@ li::before {
     padding: 0 5px;
   }
 }
+.contentBetween {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
diff --git a/src/components/dataSource/index.vue b/src/components/dataSource/index.vue
new file mode 100644
index 0000000..e112780
--- /dev/null
+++ b/src/components/dataSource/index.vue
@@ -0,0 +1,304 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-12-24 08:34:02
+@ 备注: 数据源
+-->
+<script lang="ts" setup>
+//数据源
+import { getOrPostDate, postSaveData, gainDataTable } from "@/api/date/apidate";
+import {
+  dateTypes,
+  dataSourceTypes,
+  interfaceTypes,
+  dataBaseStruct,
+  gainDatabaseInfo,
+  havesDatabaseInfo,
+  fieldList,
+} from "@/api/date/type";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+
+const props = defineProps({
+  isShow: {
+    type: Boolean,
+    default: false,
+  },
+  dataInfo: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+const emits = defineEmits(["update:isShow", "closeDataSource", "updataBase"]);
+//获取显示初始显示卡数据
+const isOpen = computed({
+  get() {
+    if (props.isShow) {
+      gainDateList();
+    }
+    return props.isShow;
+  },
+  set(val: boolean) {
+    emits("update:isShow", val);
+  },
+});
+const fieldIsShow = ref(false);
+const dataLoading = ref(false);
+const dataList = ref<dataBaseStruct[]>([]);
+const searchData = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  databaseName: "",
+  dataType: "",
+  total: 0,
+});
+//获取数据库
+const dataBaseLiskt = reactive<gainDatabaseInfo>({
+  id: "",
+  type: "",
+  dataBaseName: "",
+  ip: "",
+  port: 0,
+  userName: "",
+  password: "",
+});
+const pickTable = reactive<havesDatabaseInfo>({
+  tableName: "",
+  tableKey: "",
+  fields: [],
+});
+const lookTable = reactive<havesDatabaseInfo>({
+  tableName: "",
+  tableKey: "",
+  fields: [],
+});
+const tableListField = ref<havesDatabaseInfo[]>([]);
+const tableLoading = ref(false);
+//获取数据库表及相应表字段
+const getDatabaseTable = () => {
+  tableLoading.value = true;
+  gainDataTable(dataBaseLiskt)
+    .then((data) => {
+      tableListField.value = data.data;
+    })
+    .finally(() => {
+      tableLoading.value = false;
+    });
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-23 16:50:37
+@ 功能: 获取数据源
+*/
+const gainDateList = () => {
+  dataLoading.value = true;
+  let sendData = {
+    url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/page",
+    methodType: "GET",
+    where:
+      "pageNum=" +
+      searchData.pageNum +
+      "&pageSize=" +
+      searchData.pageSize +
+      "&databaseName=" +
+      searchData.databaseName +
+      "&dataType=" +
+      searchData.dataType,
+  };
+  getOrPostDate("POST", sendData).then((data: any) => {
+    searchData.total = data.data.total;
+    if (data.data.records && data.data.records.length > 0) {
+      data.data.records.forEach((item: any) => {
+        dateTypes.forEach((items: any) => {
+          if (items.value == item.dataType) {
+            item.dataTypeName = items.label;
+          }
+        });
+        dataSourceTypes.forEach((itemsd: any) => {
+          if (itemsd.value == item.datasourceType) {
+            item.datasourceTypeName = itemsd.label;
+          }
+        });
+        interfaceTypes.forEach((interItem: any) => {
+          if (interItem.value == item.interfaceType) {
+            item.interfaceTypeName = interItem.label;
+          }
+        });
+      });
+    }
+    dataList.value = data.data.records;
+    // console.log("获取数据=====>",searchData)
+    dataLoading.value = false;
+  });
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-24 09:04:14
+@ 功能: 关闭数据源选择
+*/
+const closeDataSourcePage = () => {
+  fieldIsShow.value = false;
+  lookTable.tableName = "";
+  lookTable.tableKey = "";
+  lookTable.fields = [];
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-24 09:38:31
+@ 功能: 选择的数据源
+*/
+const handleCurrentChange = (val: dataBaseStruct) => {
+  console.log("选择的数据源", val);
+  dataBaseLiskt.id = val.id;
+  dataBaseLiskt.type = val.datasourceTypeName;
+  dataBaseLiskt.dataBaseName = val.databaseName;
+  dataBaseLiskt.dataTypeName = val.dataSourceDes;
+  dataBaseLiskt.ip = val.ipAddress;
+  dataBaseLiskt.port = val.port;
+  dataBaseLiskt.userName = val.account;
+  dataBaseLiskt.password = val.password;
+  getDatabaseTable();
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-26 09:09:31
+@ 功能: 选择数据库表
+*/
+const handleChangeTable = (val: havesDatabaseInfo) => {
+  console.log("选择数据库表", val);
+  pickTable.tableName = val.tableName;
+  pickTable.tableKey = val.tableKey;
+  pickTable.fields = val.fields;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-26 14:07:23
+@ 功能: 查看表结构
+*/
+const lookTableField = (val: havesDatabaseInfo) => {
+  console.log("查看表结构", val);
+  lookTable.tableName = val.tableName;
+  lookTable.tableKey = val.tableKey;
+  lookTable.fields = val.fields;
+  fieldIsShow.value = true;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-12-26 14:25:47
+@ 功能: 关闭选择数据源
+*/
+const closeTableForm = () => {
+  lookTable.tableName = "";
+  lookTable.tableKey = "";
+  lookTable.fields = [];
+  tableListField.value = [];
+  dataList.value = [];
+  emits("closeDataSource", false);
+};
+//选定数据库
+const pickData = () => {
+  let databaseConfig = {
+    id: dataBaseLiskt.id,
+    dataBaseName: dataBaseLiskt.dataTypeName,
+    tableName: pickTable.tableName,
+    tableKey: pickTable.tableKey,
+    fields: pickTable.fields,
+    dsn: {
+      dataBaseName: dataBaseLiskt.dataBaseName,
+      ip: dataBaseLiskt.ip,
+      port: dataBaseLiskt.port,
+      userName: dataBaseLiskt.userName,
+      password: dataBaseLiskt.password,
+    },
+  };
+  emits("updataBase", databaseConfig);
+  closeTableForm();
+};
+</script>
+<template>
+  <el-dialog
+    v-model="isOpen"
+    title="选择数据源"
+    width="800"
+    :before-close="closeTableForm"
+    draggable
+  >
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-table
+          ref="singleTableRef"
+          :data="dataList"
+          highlight-current-row
+          style="width: 100%; height: 400px"
+          @row-click="handleCurrentChange"
+          small
+          border
+        >
+          <el-table-column property="databaseName" label="数据源" />
+          <el-table-column property="dataSourceDes" label="描述" />
+        </el-table>
+
+        <el-pagination
+          prev-text="上一页"
+          next-text="下一页"
+          layout="prev, next"
+          :total="searchData.total"
+          v-model:current-page="searchData.pageNum"
+          size="small"
+        />
+      </el-col>
+      <el-col :span="14">
+        <el-table
+          ref="singleTableRef"
+          :data="tableListField"
+          highlight-current-row
+          style="width: 100%; height: 400px"
+          @row-click="handleChangeTable"
+          small
+          border
+          v-loading="tableLoading"
+        >
+          <el-table-column property="tableKey" label="数据表" />
+          <el-table-column property="tableName" label="描述" />
+          <el-table-column width="60" align="center" title="查看表结构">
+            <template #header> 操作 </template>
+            <template #default="scope">
+              <el-tooltip placement="right" content="查看表结构">
+                <svg-icon
+                  icon-class="eye-open"
+                  @click.native.stop="lookTableField(scope.row)"
+                />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeTableForm">取消</el-button>
+        <el-button type="primary" @click="pickData">确定</el-button>
+      </div>
+    </template>
+    <!--查看表结构-->
+    <el-dialog
+      v-model="fieldIsShow"
+      width="400"
+      :title="lookTable.tableName"
+      append-to-body
+      :before-close="closeDataSourcePage"
+    >
+      <el-table
+        :data="lookTable.fields"
+        style="width: 100%; height: 400px; min-height: 100px"
+        small
+        border
+      >
+        <el-table-column property="fieldes" label="字段" />
+        <el-table-column property="types" label="类型" />
+        <el-table-column property="comment" label="描述" />
+      </el-table>
+    </el-dialog>
+  </el-dialog>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/views/date/assets.vue b/src/views/date/assets.vue
index c01653e..d3747b9 100644
--- a/src/views/date/assets.vue
+++ b/src/views/date/assets.vue
@@ -3,340 +3,398 @@
 @ 时间: 2024-04-18 14:52:06
 @ 备注: 数据资源
 -->
-<script lang='ts' setup>
-import { getOrPostDate,postSaveData } from "@/api/date/apidate"
-import { dateTypes,dataSourceTypes,interfaceTypes,dataBaseStruct } from "@/api/date/type"
+<script lang="ts" setup>
+import { getOrPostDate, postSaveData } from "@/api/date/apidate";
+import {
+  dateTypes,
+  dataSourceTypes,
+  interfaceTypes,
+  dataBaseStruct,
+} from "@/api/date/type";
 
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 11:50:16
 @ 功能: 引入页面
 */
-import  EditAssets  from "@/views/date/editAssets.vue"
+import EditAssets from "@/views/date/editAssets.vue";
 
-const editAssetsOpen = ref(false)
-const editAssetsInfo = reactive<dataBaseStruct>({})
-const dataLoading = ref(false)
-const dataList = ref<dataBaseStruct[]>([])
+const editAssetsOpen = ref(false);
+const editAssetsInfo = reactive<dataBaseStruct>({});
+const dataLoading = ref(false);
+const dataList = ref<dataBaseStruct[]>([]);
 const searchData = reactive({
-	pageNum: 1,
-	pageSize: 10,
-	databaseName:"",
-	dataType:"",
-	total:0
-})
+  pageNum: 1,
+  pageSize: 10,
+  databaseName: "",
+  dataType: "",
+  total: 0,
+});
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-18 14:57:24
 @ 功能: 获取数据
 */
-const gainDateList = () =>{
-	dataLoading.value = true;
-	let sendData = {
-		url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/page",
-		methodType:"GET",
-		where:"pageNum="+searchData.pageNum+"&pageSize="+searchData.pageSize+"&databaseName="+searchData.databaseName+"&dataType="+searchData.dataType
-	}
-	getOrPostDate("POST",sendData)
-		.then((data:any)=>{
-			
-			searchData.total = data.data.total
-			if(data.data.records&&data.data.records.length > 0){
-				data.data.records.forEach((item:any)=>{
-					dateTypes.forEach((items:any)=>{
-						if(items.value == item.dataType){
-							item.dataTypeName = items.label
-						}
-					})
-					dataSourceTypes.forEach((itemsd:any)=>{
-						if(itemsd.value == item.datasourceType){
-							item.datasourceTypeName = itemsd.label
-						}
-					})
-					interfaceTypes.forEach((interItem:any)=>{
-						if(interItem.value == item.interfaceType){
-							item.interfaceTypeName = interItem.label
-						}
-					})
-				})
-			}
-			dataList.value = data.data.records
-			// console.log("获取数据=====>",searchData)
-			dataLoading.value = false
-		})
-		
-}
+const gainDateList = () => {
+  dataLoading.value = true;
+  let sendData = {
+    url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/page",
+    methodType: "GET",
+    where:
+      "pageNum=" +
+      searchData.pageNum +
+      "&pageSize=" +
+      searchData.pageSize +
+      "&databaseName=" +
+      searchData.databaseName +
+      "&dataType=" +
+      searchData.dataType,
+  };
+  getOrPostDate("POST", sendData).then((data: any) => {
+    searchData.total = data.data.total;
+    if (data.data.records && data.data.records.length > 0) {
+      data.data.records.forEach((item: any) => {
+        dateTypes.forEach((items: any) => {
+          if (items.value == item.dataType) {
+            item.dataTypeName = items.label;
+          }
+        });
+        dataSourceTypes.forEach((itemsd: any) => {
+          if (itemsd.value == item.datasourceType) {
+            item.datasourceTypeName = itemsd.label;
+          }
+        });
+        interfaceTypes.forEach((interItem: any) => {
+          if (interItem.value == item.interfaceType) {
+            item.interfaceTypeName = interItem.label;
+          }
+        });
+      });
+    }
+    dataList.value = data.data.records;
+    // console.log("获取数据=====>",searchData)
+    dataLoading.value = false;
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 08:09:40
 @ 功能: 判断数据库类型
 */
-function dataBaseType  (val:any)  {
-	// console.log("判断数据库类型-->",val,dateTypes,val.dataType)
-	let titleVal = ""
-	if(val.dataType){
-		try{
-			dateTypes.forEach((item:any)=>{
-				// console.log("判断数据库类型-1->",item.value,val.dataType,item.value==val.dataType)
-				if(item.value == val.dataType){
-					// console.log("判断数据库类型-3->",item.value,val.dataType,item.value==val.dataType,item.label) 
-					titleVal = item.label
-					// return item.label
-					throw item.label
-				}
-			})
-		} catch(e) {
-			// console.log("判断数据库类型-12->",e) 
-		}
-		
-	}
-	// console.log("判断数据库类型-2->",titleVal) 
-	return titleVal
+function dataBaseType(val: any) {
+  // console.log("判断数据库类型-->",val,dateTypes,val.dataType)
+  let titleVal = "";
+  if (val.dataType) {
+    try {
+      dateTypes.forEach((item: any) => {
+        // console.log("判断数据库类型-1->",item.value,val.dataType,item.value==val.dataType)
+        if (item.value == val.dataType) {
+          // console.log("判断数据库类型-3->",item.value,val.dataType,item.value==val.dataType,item.label)
+          titleVal = item.label;
+          // return item.label
+          throw item.label;
+        }
+      });
+    } catch (e) {
+      // console.log("判断数据库类型-12->",e)
+    }
+  }
+  // console.log("判断数据库类型-2->",titleVal)
+  return titleVal;
 }
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 09:21:09
 @ 功能: 重置查询条件
 */
-const resuct = () =>{
-	searchData.pageNum=1
-	searchData.pageSize=10
-	searchData.databaseName=""
-	searchData.dataType=""
-	gainDateList()
-}
+const resuct = () => {
+  searchData.pageNum = 1;
+  searchData.pageSize = 10;
+  searchData.databaseName = "";
+  searchData.dataType = "";
+  gainDateList();
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 09:28:53
 @ 功能: 选择每页显示几条数据
 */
 const handleSizeChange = (val: number) => {
-	searchData.pageSize=val
-	gainDateList()
-}
+  searchData.pageSize = val;
+  gainDateList();
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 09:28:53
 @ 功能: 翻页操作
 */
 const handleCurrentChange = (val: number) => {
-	searchData.pageNum=val
-	gainDateList()
-}
+  searchData.pageNum = val;
+  gainDateList();
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 10:44:53
 @ 功能: 连接
 */
-const openLink = (val:any) => {
-	
-	let sendData = {
-		url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/test",
-		methodType:"GET",
-		where:"databaseName="+val.databaseName+"&port="+val.port+"&ipAddress="+val.ipAddress+"&datasourceType="+val.datasourceType+"&dataType="+val.dataType+"&interfaceType="+val.interfaceType+"&account="+val.account+"&password="+val.password+"&id="+val.id+"&redashDatasourceId="+val.redashDatasourceId
-	}
-	// console.log("连接-1->",sendData)
-	getOrPostDate("POST",sendData)
-		.then((data:any)=>{
-			// console.log("连接-->",data)
-			if(data.code == 200){
-				ElMessage.success(data.msg)
-			}else{
-				ElMessage.error(data.msg)
-			}
-			gainDateList()
-		})
-}
-onMounted(()=>{
-	
-	gainDateList()
-})
+const openLink = (val: any) => {
+  let sendData = {
+    url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/test",
+    methodType: "GET",
+    where:
+      "databaseName=" +
+      val.databaseName +
+      "&port=" +
+      val.port +
+      "&ipAddress=" +
+      val.ipAddress +
+      "&datasourceType=" +
+      val.datasourceType +
+      "&dataType=" +
+      val.dataType +
+      "&interfaceType=" +
+      val.interfaceType +
+      "&account=" +
+      val.account +
+      "&password=" +
+      val.password +
+      "&id=" +
+      val.id +
+      "&redashDatasourceId=" +
+      val.redashDatasourceId,
+  };
+  // console.log("连接-1->",sendData)
+  getOrPostDate("POST", sendData).then((data: any) => {
+    // console.log("连接-->",data)
+    if (data.code == 200) {
+      ElMessage.success(data.msg);
+    } else {
+      ElMessage.error(data.msg);
+    }
+    gainDateList();
+  });
+};
+onMounted(() => {
+  gainDateList();
+});
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 11:54:12
 @ 功能: 重置
 */
 const resettingHandel = () => {
-	editAssetsOpen.value = false
-	editAssetsInfo.databaseName  = "";
-	editAssetsInfo.port  = "";
-	editAssetsInfo.ipAddress  = "";
-	editAssetsInfo.datasourceType  = "";
-	editAssetsInfo.dataType  = "";
-	editAssetsInfo.interfaceType  = "";
-	editAssetsInfo.account  = "";
-	editAssetsInfo.password  = "";
-	editAssetsInfo.id  = "";
-	editAssetsInfo.redashDatasourceId  = "";
-	editAssetsInfo.author  = ""
-	gainDateList()
-}
+  editAssetsOpen.value = false;
+  editAssetsInfo.databaseName = "";
+  editAssetsInfo.port = "";
+  editAssetsInfo.ipAddress = "";
+  editAssetsInfo.datasourceType = "";
+  editAssetsInfo.dataType = "";
+  editAssetsInfo.interfaceType = "";
+  editAssetsInfo.account = "";
+  editAssetsInfo.password = "";
+  editAssetsInfo.id = "";
+  editAssetsInfo.redashDatasourceId = "";
+  editAssetsInfo.author = "";
+  gainDateList();
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 12:59:18
 @ 功能: 新增数据源
 */
 const addDataBase = () => {
-	editAssetsInfo.id = ""
-	editAssetsOpen.value = true
-}
+  editAssetsInfo.id = "";
+  editAssetsOpen.value = true;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 13:35:02
 @ 功能: 编辑数据源
 */
-const editDataBase = (val:dataBaseStruct) => {
-	editAssetsInfo.databaseName  = val.databaseName;
-	editAssetsInfo.port  = val.port;
-	editAssetsInfo.ipAddress  = val.ipAddress;
-	editAssetsInfo.datasourceType  = val.datasourceType;
-	editAssetsInfo.dataType  = val.dataType;
-	editAssetsInfo.interfaceType  = val.interfaceType;
-	editAssetsInfo.account  = val.account;
-	editAssetsInfo.password  = val.password;
-	editAssetsInfo.id  = val.id;
-	editAssetsInfo.redashDatasourceId  = val.redashDatasourceId;
-	editAssetsInfo.author  = val.author
-	editAssetsOpen.value = true
-}
+const editDataBase = (val: dataBaseStruct) => {
+  editAssetsInfo.databaseName = val.databaseName;
+  editAssetsInfo.port = val.port;
+  editAssetsInfo.ipAddress = val.ipAddress;
+  editAssetsInfo.datasourceType = val.datasourceType;
+  editAssetsInfo.dataType = val.dataType;
+  editAssetsInfo.interfaceType = val.interfaceType;
+  editAssetsInfo.account = val.account;
+  editAssetsInfo.password = val.password;
+  editAssetsInfo.id = val.id;
+  editAssetsInfo.redashDatasourceId = val.redashDatasourceId;
+  editAssetsInfo.author = val.author;
+  editAssetsInfo.dataSourceDes = val.dataSourceDes;
+  editAssetsOpen.value = true;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 14:26:27
 @ 功能: 删除数据
 */
-const delDataBase = (val:dataBaseStruct) => {
-	ElMessageBox.confirm("确认删除<"+val.databaseName+">此数据项?一经删除！数据将不可恢复！", "警告", {
-		confirmButtonText: "确定",
-		cancelButtonText: "取消",
-		type: "warning",
-	}).then(() => {
-		let sendData = {
-			url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/delete",
-			dataInfo:val
-		}
-		postSaveData(sendData)
-			.then((data:any)=>{
-				if(data.code == 0){
-					ElMessage.success(data.msg)
-					gainDateList()
-				}else{
-					ElMessage.error(data.msg)
-				}
-			})
-	});
-}
+const delDataBase = (val: dataBaseStruct) => {
+  ElMessageBox.confirm(
+    "确认删除<" + val.databaseName + ">此数据项?一经删除！数据将不可恢复！",
+    "警告",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  ).then(() => {
+    let sendData = {
+      url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/delete",
+      dataInfo: val,
+    };
+    postSaveData(sendData).then((data: any) => {
+      if (data.code == 0) {
+        ElMessage.success(data.msg);
+        gainDateList();
+      } else {
+        ElMessage.error(data.msg);
+      }
+    });
+  });
+};
 </script>
 <template>
-	<div class="dataBox">
-		<EditAssets v-model:is-show="editAssetsOpen" :data-info="editAssetsInfo" @setResetting="resettingHandel" />
-		<el-card style="width: 100%">
-			<template #header>
-				<div class="card_header">
-					<div>
-						<el-form :inline="true" :model="formInline" class="demo-form-inline">
-							<el-form-item label="数据源名称">
-								<el-input v-model="searchData.databaseName" placeholder="请输入" clearable />
-							</el-form-item>
-							<el-form-item label="数据源类型">
-								<el-select v-model="searchData.dataType" placeholder="请选择" clearable style="width: 180px;">
-									<el-option
-										v-for="item in dateTypes"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-									/>
-								</el-select>
-							</el-form-item>
-						</el-form>
-					</div>
-					<div>
-						<el-button type="primary" @click="gainDateList"><el-space wrap><i class="fa fa-search "></i>查询</el-space></el-button>
-						<el-button plain @click="resuct">重置</el-button>
-					</div>
-				</div>
-			</template>
-			<el-row class="newAddBox">
-				<el-col :span="24">
-					<el-button type="primary" @click="addDataBase"><el-space wrap><i class="fa fa-plus "></i>新增数据源</el-space></el-button>
-					<el-button plain>导出数据源</el-button>
-				</el-col>
-			</el-row>
-			<el-table :data="dataList" v-loading="dataLoading" stripe :header-cell-style="{'background':'#f5f8fd'}" style="width: 100%">
-				<el-table-column fixed type="selection" width="50"  align="center" />
-				<el-table-column fixed label="序号" type="index" width="60" align="center" />
-				<el-table-column prop="datasourceTypeName" label="数据库产品"  width="120" />
-				<el-table-column prop="dataTypeName" label="数据库类型"  width="160" />
-				<el-table-column prop="databaseName" label="数据库名称"   width="160" />
-				<el-table-column prop="interfaceTypeName" label="接口方式"   width="100" />
-				<el-table-column prop="ipAddress" label="IP地址"   width="160" />
-				<el-table-column prop="port" label="端口"   align="center" />
-				<el-table-column prop="account" label="帐号"  width="160" />
-				<el-table-column prop="author" label="帐号权限" width="100"  align="center" />
-				<el-table-column prop="status" label="状态"  width="100" align="center">
-					<template #default="scope">
-						<el-text v-if="scope.row.status==1" class="mx-1" type="primary">已连接</el-text>
-						<el-text v-else class="mx-1" type="danger">连接失败</el-text>
-					</template>
-				</el-table-column>
-				<el-table-column fixed="right" label="操作" width="250" align="center">
-					<template #default="scope">
-						<el-button class="oper-btn" plain @click="openLink(scope.row)">连接</el-button>
-						<el-button class="oper-btn" plain @click="editDataBase(scope.row)">编辑</el-button>
-						<el-button class="oper-btn" plain @click="delDataBase(scope.row)">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<el-row>
-				<el-col :span="24"  class="pageSetUp">
-					<el-pagination
-						:small="small"
-						:total="searchData.total"
-						layout="total"
-					/>
-					<el-pagination
-						v-model:current-page="searchData.pageNum"
-						v-model:page-size="searchData.pageSize"
-						:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
-						:small="small"
-						:background="true"
-						:total="searchData.total"
-						layout="sizes, prev, pager,next,jumper"
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-					/>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
+  <div class="dataBox">
+    <EditAssets
+      v-model:is-show="editAssetsOpen"
+      :data-info="editAssetsInfo"
+      @setResetting="resettingHandel"
+    />
+    <el-card style="width: 100%">
+      <template #header>
+        <div class="card_header">
+          <div>
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+              <el-form-item label="数据源名称">
+                <el-input
+                  v-model="searchData.databaseName"
+                  placeholder="请输入"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="数据源类型">
+                <el-select
+                  v-model="searchData.dataType"
+                  placeholder="请选择"
+                  clearable
+                  style="width: 180px"
+                >
+                  <el-option
+                    v-for="item in dateTypes"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div>
+            <el-button type="primary" @click="gainDateList"
+              ><el-space wrap><i class="fa fa-search"></i>查询</el-space></el-button
+            >
+            <el-button plain @click="resuct">重置</el-button>
+          </div>
+        </div>
+      </template>
+      <el-row class="newAddBox">
+        <el-col :span="24">
+          <el-button type="primary" @click="addDataBase"
+            ><el-space wrap><i class="fa fa-plus"></i>新增数据源</el-space></el-button
+          >
+          <el-button plain>导出数据源</el-button>
+        </el-col>
+      </el-row>
+      <el-table
+        :data="dataList"
+        v-loading="dataLoading"
+        stripe
+        :header-cell-style="{ background: '#f5f8fd' }"
+        style="width: 100%"
+      >
+        <el-table-column fixed type="selection" width="50" align="center" />
+        <el-table-column fixed label="序号" type="index" width="60" align="center" />
+        <el-table-column prop="datasourceTypeName" label="数据库产品" width="120" />
+        <el-table-column prop="dataTypeName" label="数据库类型" width="160" />
+        <el-table-column prop="databaseName" label="数据库名称" width="160" />
+        <el-table-column prop="dataSourceDes" label="描述" width="160" />
+        <el-table-column prop="interfaceTypeName" label="接口方式" width="100" />
+        <el-table-column prop="ipAddress" label="IP地址" width="160" />
+        <el-table-column prop="port" label="端口" align="center" />
+        <el-table-column prop="account" label="帐号" width="160" />
+        <el-table-column prop="author" label="帐号权限" width="100" align="center" />
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="scope">
+            <el-text v-if="scope.row.status == 1" class="mx-1" type="primary"
+              >已连接</el-text
+            >
+            <el-text v-else class="mx-1" type="danger">连接失败</el-text>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="250" align="center">
+          <template #default="scope">
+            <el-button class="oper-btn" plain @click="openLink(scope.row)"
+              >连接</el-button
+            >
+            <el-button class="oper-btn" plain @click="editDataBase(scope.row)"
+              >编辑</el-button
+            >
+            <el-button class="oper-btn" plain @click="delDataBase(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="24" class="pageSetUp">
+          <el-pagination :small="small" :total="searchData.total" layout="total" />
+          <el-pagination
+            v-model:current-page="searchData.pageNum"
+            v-model:page-size="searchData.pageSize"
+            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
+            :small="small"
+            :background="true"
+            :total="searchData.total"
+            layout="sizes, prev, pager,next,jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
 </template>
-<style  lang='scss' scoped>
-.dataBox{
-	padding: 10px;
-	.el-table .el-table__header td {
-		background:#f5f8fd;
-	}
-	.newAddBox{
-		margin-bottom: 20px;
-	}
-	.card_header{
-		display: flex;
-		align-items: center;
-  		justify-content: space-between;
-	}
-	.el-form-item{
-		margin-bottom: 0px;
-	}
-	.pageSetUp{
-		display: flex;
-		align-items: center;
-  		justify-content: space-between;
-		padding: 20px 0 10px 0;
-		height: 55px;
-	}
+<style lang="scss" scoped>
+.dataBox {
+  padding: 10px;
+  .el-table .el-table__header td {
+    background: #f5f8fd;
+  }
+  .newAddBox {
+    margin-bottom: 20px;
+  }
+  .card_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .el-form-item {
+    margin-bottom: 0px;
+  }
+  .pageSetUp {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0 10px 0;
+    height: 55px;
+  }
 }
-.oper-btn{
-    background: rgba(61,127,255,0.1);
-    border: 1px solid rgba(61,127,255,0.6);
-    color: #3D7FFF;
+.oper-btn {
+  background: rgba(61, 127, 255, 0.1);
+  border: 1px solid rgba(61, 127, 255, 0.6);
+  color: #3d7fff;
 }
 </style>
diff --git a/src/views/date/editAssets.vue b/src/views/date/editAssets.vue
index 36a5c73..f47a1bd 100644
--- a/src/views/date/editAssets.vue
+++ b/src/views/date/editAssets.vue
@@ -3,51 +3,57 @@
 @ 时间: 2024-04-19 11:37:41
 @ 备注: 编辑数据源
 -->
-<script lang='ts' setup>
-import { dateTypes,dataSourceTypes,interfaceTypes,dataBaseStruct } from "@/api/date/type"
-import { getOrPostDate,postSaveData } from "@/api/date/apidate"
+<script lang="ts" setup>
+import {
+  dateTypes,
+  dataSourceTypes,
+  interfaceTypes,
+  dataBaseStruct,
+} from "@/api/date/type";
+import { getOrPostDate, postSaveData } from "@/api/date/apidate";
 
 const props = defineProps({
-	isShow:{
-		type:Boolean,
-		default:false
-	},
-	dataInfo:{
-		type:Object,
-		default(){
-			return {}
-		}
-	}
+  isShow: {
+    type: Boolean,
+    default: false,
+  },
+  dataInfo: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
 });
 const ruleFormRef = ref(ElForm); // 用户表单
-const formData = reactive<dataBaseStruct>({})
+const formData = reactive<dataBaseStruct>({});
 
-const emits = defineEmits(["update:isShow","setResetting"]);
-const tipTitle = ref("增加数据源")
-const isOpen =  computed({
-	get() {
-		if(props.isShow){
-			formData.id = props.dataInfo.id
-			formData.databaseName  = props.dataInfo.databaseName;
-			formData.port  = props.dataInfo.port;
-			formData.ipAddress  = props.dataInfo.ipAddress;
-			formData.datasourceType  = props.dataInfo.datasourceType;
-			formData.dataType  = props.dataInfo.dataType;
-			formData.interfaceType  = props.dataInfo.interfaceType;
-			formData.author  = props.dataInfo.author
-			formData.account  = props.dataInfo.account;
-			formData.password  = props.dataInfo.password;
-			formData.id  = props.dataInfo.id;
-			formData.redashDatasourceId  = props.dataInfo.redashDatasourceId;
-			if(props.dataInfo.id && props.dataInfo.id != ""){
-				tipTitle.value = "编辑数据源"
-			}
-		}
-		return props.isShow
-	},
-	set(val: boolean) {
-		emits('update:isShow', val)
-	}
+const emits = defineEmits(["update:isShow", "setResetting"]);
+const tipTitle = ref("增加数据源");
+const isOpen = computed({
+  get() {
+    if (props.isShow) {
+      formData.id = props.dataInfo.id;
+      formData.databaseName = props.dataInfo.databaseName;
+      formData.port = props.dataInfo.port;
+      formData.ipAddress = props.dataInfo.ipAddress;
+      formData.datasourceType = props.dataInfo.datasourceType;
+      formData.dataType = props.dataInfo.dataType;
+      formData.interfaceType = props.dataInfo.interfaceType;
+      formData.author = props.dataInfo.author;
+      formData.account = props.dataInfo.account;
+      formData.password = props.dataInfo.password;
+      formData.id = props.dataInfo.id;
+      formData.dataSourceDes = props.dataInfo.dataSourceDes;
+      formData.redashDatasourceId = props.dataInfo.redashDatasourceId;
+      if (props.dataInfo.id && props.dataInfo.id != "") {
+        tipTitle.value = "编辑数据源";
+      }
+    }
+    return props.isShow;
+  },
+  set(val: boolean) {
+    emits("update:isShow", val);
+  },
 });
 /**
 @ 作者: 秦东
@@ -55,192 +61,233 @@ const isOpen =  computed({
 @ 功能: 关闭
 */
 const handleClose = () => {
-	emits('setResetting')
-}
+  emits("setResetting");
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 13:08:37
 @ 功能: 保存数据
 */
 const saveData = () => {
-	ruleFormRef.value.validate((valid: any) => {
-		if (valid){
-
-			if(formData.id != "" && formData.id != 0 && formData.id != "0"){	//编辑
-				// console.log("编辑---->保存数据--->",formData);
-				let sendData = {
-					url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/update",
-					dataInfo:formData
-				}
-				// console.log("编辑---->保存数据-1-->",sendData);
-				postSaveData(sendData)
-					.then((data:any)=>{
-						if(data.code == 0){
-							ElMessage.success(data.msg)
-							handleClose()
-						}else{
-							ElMessage.error(data.msg)
-						}
-					})
-
-			}else{	//新增
-				// console.log("新增---->保存数据--->",formData);
-				let sendData = {
-					url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/save",
-					dataInfo:formData
-				}
-				postSaveData(sendData)
-					.then((data:any)=>{
-						if(data.code == 0){
-							ElMessage.success(data.msg)
-							handleClose()
-						}else{
-							ElMessage.error(data.msg)
-						}
-					})
-			}
-
-		}
-	});
-}
+  ruleFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (formData.id != "" && formData.id != 0 && formData.id != "0") {
+        //编辑
+        // console.log("编辑---->保存数据--->",formData);
+        let sendData = {
+          url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/update",
+          dataInfo: formData,
+        };
+        // console.log("编辑---->保存数据-1-->",sendData);
+        postSaveData(sendData).then((data: any) => {
+          if (data.code == 0) {
+            ElMessage.success(data.msg);
+            handleClose();
+          } else {
+            ElMessage.error(data.msg);
+          }
+        });
+      } else {
+        //新增
+        // console.log("新增---->保存数据--->",formData);
+        let sendData = {
+          url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/save",
+          dataInfo: formData,
+        };
+        postSaveData(sendData).then((data: any) => {
+          if (data.code == 0) {
+            ElMessage.success(data.msg);
+            handleClose();
+          } else {
+            ElMessage.error(data.msg);
+          }
+        });
+      }
+    }
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 13:09:12
 @ 功能: 测试连接
 */
 const openLink = () => {
-	ruleFormRef.value.validate((valid: any) => {
-		if (valid){
-			let sendData = {
-				url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/test",
-				methodType:"GET",
-				where:"databaseName="+formData.databaseName+"&port="+formData.port+"&ipAddress="+formData.ipAddress+"&datasourceType="+formData.datasourceType+"&dataType="+formData.dataType+"&interfaceType="+formData.interfaceType+"&account="+formData.account+"&password="+formData.password+"&id="+formData.id+"&redashDatasourceId="+formData.redashDatasourceId
-			}
-			// console.log("连接-1->",sendData)
-			getOrPostDate("POST",sendData)
-				.then((data:any)=>{
-					// console.log("连接-->",data)
-					if(data.code == 200){
-						ElMessage.success(data.msg)
-					}else{
-						ElMessage.error(data.msg)
-					}
-				})
-		}
-	});
-	
-}
+  ruleFormRef.value.validate((valid: any) => {
+    if (valid) {
+      let sendData = {
+        url: import.meta.env.VITE_APP_SJZT_URL + "/database/app/datasource/test",
+        methodType: "GET",
+        where:
+          "databaseName=" +
+          formData.databaseName +
+          "&port=" +
+          formData.port +
+          "&ipAddress=" +
+          formData.ipAddress +
+          "&datasourceType=" +
+          formData.datasourceType +
+          "&dataType=" +
+          formData.dataType +
+          "&interfaceType=" +
+          formData.interfaceType +
+          "&account=" +
+          formData.account +
+          "&password=" +
+          formData.password +
+          "&id=" +
+          formData.id +
+          "&redashDatasourceId=" +
+          formData.redashDatasourceId,
+      };
+      // console.log("连接-1->",sendData)
+      getOrPostDate("POST", sendData).then((data: any) => {
+        // console.log("连接-->",data)
+        if (data.code == 200) {
+          ElMessage.success(data.msg);
+        } else {
+          ElMessage.error(data.msg);
+        }
+      });
+    }
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-19 13:13:18
 @ 功能: 表单验证规则
 */
 const dataFormRules = reactive({
-	datasourceType: [{ required: true, message: "请选择数据库产品", trigger: "blur" }],
-	dataType: [{ required: true, message: "请选择数据类型", trigger: "blur" }],
-	databaseName: [{ required: true, message: "请输入数据库名称", trigger: "blur" }],
-	interfaceType: [{ required: true, message: "请选择接口方式", trigger: "blur" }],
-	ipAddress: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
-	port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
-	author: [{ required: true, message: "请输入账号权限", trigger: "blur" }],
-	account: [{ required: true, message: "请输入账号", trigger: "blur" }],
-	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-})
-
+  datasourceType: [{ required: true, message: "请选择数据库产品", trigger: "blur" }],
+  dataType: [{ required: true, message: "请选择数据类型", trigger: "blur" }],
+  databaseName: [{ required: true, message: "请输入数据库名称", trigger: "blur" }],
+  interfaceType: [{ required: true, message: "请选择接口方式", trigger: "blur" }],
+  ipAddress: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+  port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
+  author: [{ required: true, message: "请输入账号权限", trigger: "blur" }],
+  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+});
 </script>
 <template>
-	<el-dialog
-		v-model="isOpen"
-		:title="tipTitle"
-		width="50%"
-		:before-close="handleClose"
-	>	
-		<el-form
-			ref="ruleFormRef"
-			style="width: 100%"
-			:model="formData"
-			:rules="dataFormRules"
-			label-width="auto"
-			class="demo-ruleForm"
-		>
-			<el-row gutter="20">
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="数据库产品:" prop="datasourceType">
-						<el-select v-model="formData.datasourceType" placeholder="请选择数据库产品" style="width: 240px" clearable >
-							<el-option
-								v-for="item in dataSourceTypes"
-								:key="item.value"
-								:label="item.label"
-								:value="item.value"
-							/>
-						</el-select>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="数据类型:" prop="dataType">
-						<el-select v-model="formData.dataType" placeholder="请选择数据类型" clearable >
-							<el-option
-								v-for="item in dateTypes"
-								:key="item.value"
-								:label="item.label"
-								:value="item.value"
-							/>
-						</el-select>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="数据库名称:" prop="databaseName">
-						<el-input v-model="formData.databaseName" placeholder="请输入数据库名称" clearable />
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="接口方式:" prop="interfaceType">
-						<el-select v-model="formData.interfaceType" placeholder="请选择接口方式" clearable >
-							<el-option
-								v-for="item in interfaceTypes"
-								:key="item.value"
-								:label="item.label"
-								:value="item.value"
-							/>
-						</el-select>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="IP地址:" prop="ipAddress">
-						<el-input v-model="formData.ipAddress" placeholder="请输入IP地址" clearable />
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="端口号:" prop="port">
-						<el-input v-model="formData.port" placeholder="请输入端口号" clearable />
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="账号权限:" prop="author">
-						<el-input v-model="formData.author" placeholder="请输入账号权限" clearable />
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="账号:" prop="account">
-						<el-input v-model="formData.account" placeholder="请输入账号" clearable autocomplete="off" />
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-					<el-form-item label="密码:" prop="password">
-						<el-input type="new-password" show-password v-model="formData.password" placeholder="请输入密码" clearable autocomplete="off" />
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button type="primary" @click="openLink">连接</el-button>
-				<el-button @click="handleClose">取消</el-button>
-				<el-button type="primary" @click="saveData">保存</el-button>
-			</div>
-		</template>
-	</el-dialog>
+  <el-dialog v-model="isOpen" :title="tipTitle" width="50%" :before-close="handleClose">
+    <el-form
+      ref="ruleFormRef"
+      style="width: 100%"
+      :model="formData"
+      :rules="dataFormRules"
+      label-width="auto"
+      class="demo-ruleForm"
+    >
+      <el-row gutter="20">
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="数据库产品:" prop="datasourceType">
+            <el-select
+              v-model="formData.datasourceType"
+              placeholder="请选择数据库产品"
+              style="width: 240px"
+              clearable
+            >
+              <el-option
+                v-for="item in dataSourceTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="数据类型:" prop="dataType">
+            <el-select v-model="formData.dataType" placeholder="请选择数据类型" clearable>
+              <el-option
+                v-for="item in dateTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="数据库名称:" prop="databaseName">
+            <el-input
+              v-model="formData.databaseName"
+              placeholder="请输入数据库名称"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="数据库描述:" prop="dataSourceDes">
+            <el-input
+              v-model="formData.dataSourceDes"
+              placeholder="请输入数据库描述"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="接口方式:" prop="interfaceType">
+            <el-select
+              v-model="formData.interfaceType"
+              placeholder="请选择接口方式"
+              clearable
+            >
+              <el-option
+                v-for="item in interfaceTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="IP地址:" prop="ipAddress">
+            <el-input v-model="formData.ipAddress" placeholder="请输入IP地址" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="端口号:" prop="port">
+            <el-input v-model="formData.port" placeholder="请输入端口号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="账号权限:" prop="author">
+            <el-input v-model="formData.author" placeholder="请输入账号权限" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="账号:" prop="account">
+            <el-input
+              v-model="formData.account"
+              placeholder="请输入账号"
+              clearable
+              autocomplete="off"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <el-form-item label="密码:" prop="password">
+            <el-input
+              type="new-password"
+              show-password
+              v-model="formData.password"
+              placeholder="请输入密码"
+              clearable
+              autocomplete="off"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="openLink">连接</el-button>
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="saveData">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
-<style  lang='scss' scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/sysworkflow/codepage/index.ts b/src/views/sysworkflow/codepage/index.ts
index 403d875..74ff9b7 100644
--- a/src/views/sysworkflow/codepage/index.ts
+++ b/src/views/sysworkflow/codepage/index.ts
@@ -5,6 +5,7 @@ import Screen from '@/components/DesignForm/public/form/components/screen.vue'
 import akPageList from '@/components/DesignForm/tableListPage/index.vue'
 import AppPageList from '@/components/DesignForm/app/index.vue'
 import AppFormPage from '@/components/DesignForm/app/formPage.vue'
+import DataSourcePage from '@/components/dataSource/index.vue'
 
 export default (app: any) => {
   app.component('AkForm', formDesign)
@@ -14,4 +15,5 @@ export default (app: any) => {
 	app.component('AkPageList', akPageList)
 	app.component('AppPageList', AppPageList)
 	app.component('AppFormPage', AppFormPage)
+	app.component('DataSourcePage', DataSourcePage)
 }
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
index 5c3ba08..e558793 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -3,244 +3,297 @@
 @ 时间: 2024-05-07 11:26:40
 @ 备注: 编辑表单
 -->
-<script lang='ts' setup>
-import { useRoute, useRouter } from 'vue-router'
-import { formStruct } from '@/api/DesignForm/types'
-import { customerFormConfig } from '@/api/DesignForm/type'
-import { getProductionMarkForm } from '@/api/DesignForm/requestapi'
+<script lang="ts" setup>
+import { useRoute, useRouter } from "vue-router";
+import { formStruct } from "@/api/DesignForm/types";
+import { customerFormConfig } from "@/api/DesignForm/type";
+import { getProductionMarkForm } from "@/api/DesignForm/requestapi";
 
-import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
-import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
-import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
+import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue";
+import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue";
+import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue";
 const props = defineProps({
-	appCont:{
-		type:Object,
-		default(){
-			return {}
-		}
-	},
-	isShow:{
-		type: Boolean,
-		default: false,
-	},
-	isNew:{
-		type: Boolean,
-		default: false,
-	},
-	drawerWith:{
-		type:Number,
-		default:0
-	},
-	formKey:{
-		type:String,
-		default:""
-	},
-	groupKey:{
-		type:String,
-		default:""
-	},
-	menuId:{
-		type:String,
-		default:""
-	},
-	appPageKey:{
-		type:String,
-		default:""
-	}
+  appCont: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  isShow: {
+    type: Boolean,
+    default: false,
+  },
+  isNew: {
+    type: Boolean,
+    default: false,
+  },
+  drawerWith: {
+    type: Number,
+    default: 0,
+  },
+  formKey: {
+    type: String,
+    default: "",
+  },
+  groupKey: {
+    type: String,
+    default: "",
+  },
+  menuId: {
+    type: String,
+    default: "",
+  },
+  appPageKey: {
+    type: String,
+    default: "",
+  },
 });
-const emits = defineEmits(["update:isShow","update:isNew","update:appPageKey","gainSunAppContent","updateInit"]);
-const tabsActive = ref(1)
-const route: any = useRoute().query || {}
+const emits = defineEmits([
+  "update:isShow",
+  "update:isNew",
+  "update:appPageKey",
+  "gainSunAppContent",
+  "updateInit",
+]);
+const tabsActive = ref(1);
+const route: any = useRoute().query || {};
 const formConfigCont = reactive<customerFormConfig>({
-	formName:"",
-	formlogo:"",
-	signCode:""
-})
-const appPageKey =  computed({
-	get() {
-		return props.appPageKey
-	},
-	set(val: any) {
-		emits('update:appPageKey', val)
-	}
+  formName: "",
+  formlogo: "",
+  signCode: "",
+});
+const appPageKey = computed({
+  get() {
+    return props.appPageKey;
+  },
+  set(val: any) {
+    emits("update:appPageKey", val);
+  },
 });
 //表单版本ID
-const formVersion = ref<string>("")
-const formPageId = ref<string>("")
+const formVersion = ref<string>("");
+const formPageId = ref<string>("");
 const state = reactive<formStruct>({
-    formData: {
-		list: [],
-		form: {
-			size: 'default',
-			name:'',
-			formName: formConfigCont.formName,
-			dataTitle: [],
-			labelPosition: "left"
-		},
-		config: {
-			groupKey:props.formKey,
-			classify:4
-		},
-		styles:{
-			divStyle:{},
-			labelStyle:{},
-			inputStyle:{}
-		},
-		purview:[]
+  formData: {
+    list: [],
+    form: {
+      size: "default",
+      name: "",
+      formName: formConfigCont.formName,
+      dataTitle: [],
+      labelPosition: "left",
+      dataSource: "no",
+      dataSourceConfig: {
+        id: "",
+        dataBaseName: "",
+        tableName: "",
+        tableKey: "",
+        dsn: {},
+      },
     },
-    editor: {},
-    loading: false,
-    formDataPreview: {},
-    previewVisible: false, // 预览窗口
-    designType: route.type, // 当前页面设计类型，有效值search
-    formDict: {},
-    formOtherData: {
-		source: route.source || '',
-		formName: formConfigCont.formName
-    }
-})
-const appPageInfo = ref()
+    config: {
+      groupKey: props.formKey,
+      classify: 4,
+    },
+    styles: {
+      divStyle: {},
+      labelStyle: {},
+      inputStyle: {},
+    },
+    purview: [],
+  },
+  editor: {},
+  loading: false,
+  formDataPreview: {},
+  previewVisible: false, // 预览窗口
+  designType: route.type, // 当前页面设计类型，有效值search
+  formDict: {},
+  formOtherData: {
+    source: route.source || "",
+    formName: formConfigCont.formName,
+  },
+});
+const appPageInfo = ref();
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-07 15:11:24
 @ 功能: 关闭页面
 */
-const closeSavePageForm = () =>{
-	emits("update:isShow",false)
-	emits("gainSunAppContent")
-	emits("updateInit")
-	emits("update:isNew",false)
-	// console.log("appPageInfo.value",appPageInfo.value)
-	if(tabsActive.value == 1){
-		appPageInfo.value.gainTableForm()
-	}
-	
-}
+const closeSavePageForm = () => {
+  emits("update:isShow", false);
+  emits("gainSunAppContent");
+  emits("updateInit");
+  emits("update:isNew", false);
+  // console.log("appPageInfo.value",appPageInfo.value)
+  if (tabsActive.value == 1) {
+    appPageInfo.value.gainTableForm();
+  }
+};
 
 onBeforeMount(() => {
-	// console.log("onBeforeMount",props.isNew)
-	// console.log("onBeforeMount--->appPageKey",props.appPageKey)
-	let send = {
-		types:3
-	}
-	if(props.isNew){
-		props.appPageKey = ""
-		state.formData.list= []
-		formVersion.value = ""
-		appPageKey.value = ""
-		getProductionMarkForm(send)
-			.then(({data})=>{
-				formConfigCont.formlogo = data.formlogo
-				formConfigCont.formName = data.formname
-				formConfigCont.signCode = data.signCode
-				state.formData.form.name = data.formlogo
-				state.formData.form.formName = data.formname
-				state.formOtherData.formName = data.formname
-			})
-			.finally(()=>{
-				
-			})
-	}
-	// console.log("onBeforeMount",props.isNew)
-	// console.log("onBeforeMount--2->appPageKey",props.appPageKey)
-	if(props.appPageKey == ""){
-		getProductionMarkForm(send)
-			.then(({data})=>{
-				formConfigCont.formlogo = data.formlogo
-				formConfigCont.formName = data.formname
-				formConfigCont.signCode = data.signCode
-				state.formData.form.name = data.formlogo
-				state.formData.form.formName = data.formname
-				state.formOtherData.formName = data.formname
-			})
-			.finally(()=>{
-				
-			})
-	}
-	// console.log("state------------>",state)
-})
+  // console.log("onBeforeMount",props.isNew)
+  // console.log("onBeforeMount--->appPageKey",props.appPageKey)
+  let send = {
+    types: 3,
+  };
+  if (props.isNew) {
+    props.appPageKey = "";
+    state.formData.list = [];
+    formVersion.value = "";
+    appPageKey.value = "";
+    getProductionMarkForm(send)
+      .then(({ data }) => {
+        formConfigCont.formlogo = data.formlogo;
+        formConfigCont.formName = data.formname;
+        formConfigCont.signCode = data.signCode;
+        state.formData.form.name = data.formlogo;
+        state.formData.form.formName = data.formname;
+        state.formOtherData.formName = data.formname;
+      })
+      .finally(() => {});
+  }
+  // console.log("onBeforeMount",props.isNew)
+  // console.log("onBeforeMount--2->appPageKey",props.appPageKey)
+  if (props.appPageKey == "") {
+    getProductionMarkForm(send)
+      .then(({ data }) => {
+        formConfigCont.formlogo = data.formlogo;
+        formConfigCont.formName = data.formname;
+        formConfigCont.signCode = data.signCode;
+        state.formData.form.name = data.formlogo;
+        state.formData.form.formName = data.formname;
+        state.formOtherData.formName = data.formname;
+      })
+      .finally(() => {});
+  }
+  // console.log("state------------>",state)
+});
 </script>
 <template>
-	<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
-		<div class="common-layout">
-			<el-container>
-				<el-header class="headerBox">
-					<div class="headLeft">
-						<el-space wrap>
-							<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
-							<el-tooltip
-								class="box-item"
-								effect="dark"
-								:content="props.appCont.appName"
-								placement="bottom"
-							>
-								<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text>
-							</el-tooltip>
-							<i class="fa fa-angle-right"></i>
-							<el-tooltip
-								class="box-item"
-								effect="dark"
-								:content="state.formData.form.formName"
-								placement="bottom"
-							>
-								<el-text class="w-150px mb-2" truncated>{{ state.formData.form.formName }}</el-text>
-							</el-tooltip>
-						</el-space>
-					</div>
-					<div>
-						<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
-								<el-tab-pane label="① 页面管理" :name="1">
-								</el-tab-pane>
-								<el-tab-pane label="② 流程设计" :name="2">
-								</el-tab-pane>
-								<el-tab-pane label="③ 列表设计" :name="3">
-								</el-tab-pane>
-						</el-tabs>
-					</div>
-					<div class="headRight">
-						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
-					</div>
-				</el-header>
-				<el-container>
-					<PageForm ref="appPageInfo" v-if="tabsActive==1" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey" v-model:state="state" v-model:form-version="formVersion" :formconfigcont="formConfigCont" v-model:app-page-key="appPageKey" />
-					<PageFlow v-if="tabsActive==2" v-model:state="state" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey"  v-model:app-page-key="appPageKey" v-model:form-version="formVersion"  />
-					<PageList v-if="tabsActive==3" v-model:state="state" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey" v-model:app-page-key="appPageKey" v-model:form-version="formVersion" />
-				</el-container>
-			</el-container>
-		</div>
-	</el-drawer>
+  <el-drawer
+    v-model="props.isShow"
+    title="设置/编辑自定义表单"
+    :with-header="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :size="props.drawerWith"
+  >
+    <div class="common-layout">
+      <el-container>
+        <el-header class="headerBox">
+          <div class="headLeft">
+            <el-space wrap>
+              <el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="props.appCont.appName"
+                placement="bottom"
+              >
+                <el-text class="w-150px mb-2" truncated>{{
+                  props.appCont.appName
+                }}</el-text>
+              </el-tooltip>
+              <i class="fa fa-angle-right"></i>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="state.formData.form.formName"
+                placement="bottom"
+              >
+                <el-text class="w-150px mb-2" truncated>{{
+                  state.formData.form.formName
+                }}</el-text>
+              </el-tooltip>
+            </el-space>
+          </div>
+          <div>
+            <el-tabs
+              v-model="tabsActive"
+              @tab-click="handleClick"
+              :stretch="true"
+              class="tabsMain"
+            >
+              <el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
+              <el-tab-pane label="② 流程设计" :name="2"> </el-tab-pane>
+              <el-tab-pane label="③ 列表设计" :name="3"> </el-tab-pane>
+            </el-tabs>
+          </div>
+          <div class="headRight">
+            <el-button type="danger" size="small" @click="closeSavePageForm"
+              >关闭</el-button
+            >
+          </div>
+        </el-header>
+        <el-container>
+          <PageForm
+            ref="appPageInfo"
+            v-if="tabsActive == 1"
+            :form-Key="props.formKey"
+            :app-cont="props.appCont"
+            :menu-id="menuId"
+            :group-key="props.groupKey"
+            v-model:state="state"
+            v-model:form-version="formVersion"
+            :formconfigcont="formConfigCont"
+            v-model:app-page-key="appPageKey"
+          />
+          <PageFlow
+            v-if="tabsActive == 2"
+            v-model:state="state"
+            :form-Key="props.formKey"
+            :app-cont="props.appCont"
+            :menu-id="menuId"
+            :group-key="props.groupKey"
+            v-model:app-page-key="appPageKey"
+            v-model:form-version="formVersion"
+          />
+          <PageList
+            v-if="tabsActive == 3"
+            v-model:state="state"
+            :form-Key="props.formKey"
+            :app-cont="props.appCont"
+            :menu-id="menuId"
+            :group-key="props.groupKey"
+            v-model:app-page-key="appPageKey"
+            v-model:form-version="formVersion"
+          />
+        </el-container>
+      </el-container>
+    </div>
+  </el-drawer>
 </template>
-<style  lang='scss' scoped>
-.headerBox{
-	padding: 0px;
-	border-bottom: 2px solid #ECECEC;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	.headLeft{
-		width: 300px;
-		padding-left: 5px;
-		span{
-			max-width:100px;
-		}
-	}
-	.headRight{
-		width: 300px;
-		text-align: right;
-		padding-right: 5px;
-	}
-	.tabsMain{
-		::v-deep .el-tabs__header{
-			margin: 0px;
-		}
-		::v-deep .el-tabs__nav-scroll{
-			margin: 0 auto!important;
-		}
+<style lang="scss" scoped>
+.headerBox {
+  padding: 0px;
+  border-bottom: 2px solid #ececec;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .headLeft {
+    width: 300px;
+    padding-left: 5px;
+    span {
+      max-width: 100px;
+    }
+  }
+  .headRight {
+    width: 300px;
+    text-align: right;
+    padding-right: 5px;
+  }
+  .tabsMain {
+    ::v-deep .el-tabs__header {
+      margin: 0px;
+    }
+    ::v-deep .el-tabs__nav-scroll {
+      margin: 0 auto !important;
+    }
 
-		::v-deep .el-drawer__body{
-			padding: 0;
-		}
-	}
+    ::v-deep .el-drawer__body {
+      padding: 0;
+    }
+  }
 }
-
 </style>