@arkxos/arkos-system 0.1.0

package/src/views/collect/task.vue

@@ -0,0 +1,898 @@
+<template>
+  <div class="page-container">
+    <!--表格内容栏-->
+    <ac-table
+      ref="dataTable"
+      pkName="id"
+      :filters="filters"
+      :filterFields="filterFields"
+      :columns="columns"
+      @handleTableOperator="handleTableOperator"
+      @handleCellOperator="handleCellOperator"
+    />
+
+    <!--新增/编辑/查看界面-->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :close-on-click-modal="false"
+      class="dialog-box no-padding"
+      destroy-on-close
+      draggable
+      fullscreen
+    >
+      <div class="page-container">
+        <el-form
+          :model="formData"
+          ref="dataForm"
+          label-width="120px"
+          label-position="right"
+          style="padding: 10px"
+          :disabled="!dialogEdit"
+          :rules="rules"
+          :hide-required-asterisk="!dialogEdit"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="任务名称" prop="name">
+                <el-input v-model="formData.name"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="同时采集数量" prop="syncCount">
+                <ac-number v-model="formData.syncCount" point="0" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="采集方式" prop="syncMode">
+                <ac-buttons v-model="formData.syncMode" options="自动,手动" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="formData.syncMode === '自动'">
+            <el-col :span="8">
+              <el-form-item label="采集类型" prop="syncType">
+                <ac-buttons
+                  v-model="formData.syncType"
+                  options="每天,每周,每月,自定义"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" v-if="formData.syncType !== '自定义'">
+              <el-form-item label="采集时间" prop="syncTime">
+                <el-time-picker v-model="formData.syncTime" value-format="HH:mm:ss" placeholder="时间" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="formData.syncType === '每周'">
+              <el-form-item label="采集周期" prop="syncPeriod">
+                <ac-checkbox
+                  v-model="formData.syncPeriod"
+                  options="星期一,星期二,星期三,星期四,星期五,星期六,星期天"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="formData.syncType === '每月'">
+              <el-form-item label="采集周期" prop="syncPeriod">
+                <ac-checkbox
+                  v-model="formData.syncPeriod"
+                  options="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" v-if="formData.syncType === '自定义'">
+              <el-form-item label="采集表达式" prop="syncExpression">
+                <template #label>
+                  <div>
+                    <span>表达式</span>
+                    <el-tooltip placement="right">
+                      <template #content>
+                        <p>cron表达式格式: [秒] [分] [小时] [日] [月] [周] [年]</p>
+                        <p>以秒为示例：</p>
+                        <p style="text-indent: 28px">单值取值示例：5 * * * * ? *</p>
+                        <p style="text-indent: 28px">多值取值示例：0,5,12 * * * * ? *</p>
+                        <p style="text-indent: 28px">连续取值示例：0-12 * * * * ? *</p>
+                        <p style="text-indent: 28px">每隔五秒示例：0/5 * * * * ? *</p>
+                        <p>取值范围：秒(0~59)，分(0~59)，小时(0~23)，日(1~31)，月(0~11，0为1月)，周(1~7，1为星期日)，年(1970~2099)</p>
+                        <p>示例：0 0/10 9-10 * * ?</p>
+                        <p style="text-indent: 28px">每天上午9点到11点之间每10分钟触发一次</p>
+                        <p>* 匹配所有可能的值</p>
+                        <p>- 指定范围</p>
+                        <p>/ 指定间隔值</p>
+                        <p>? 不指定值，只能用在日周中</p>
+                        <p>, 指定枚举值</p>
+                        <p>L 表示最后，只能用在日和周中</p>
+                        <p>W 工作日，只能用在日中</p>
+                        <p>LW 月中最后一个工作日，只能用在日中</p>
+                        <p># 月中第几个星期几：3#4 表示月的第三个星期四，只能用在周中</p>
+                      </template>
+                      <ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-input v-model="formData.syncExpression" auto-complete="off"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="来源数据源" prop="originDatasourceId">
+                <ac-remote-select
+                  v-model="formData.originDatasourceId"
+                  dataUrl="/system/datasource/queryPage"
+                  :option="{id: formData.originDatasourceId, name: formData.originDatasourceName}"
+                  @change="changeOriginDatasource"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="目标数据源" prop="targetDatasourceId">
+                <ac-remote-select
+                  v-model="formData.targetDatasourceId"
+                  dataUrl="/system/datasource/queryPage"
+                  :option="{id: formData.targetDatasourceId, name: formData.targetDatasourceName}"
+                  @change="changeTargetDatasource"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" v-if="formData.syncMode === '自动'">
+              <el-form-item label="状态" prop="status">
+                <ac-radio
+                  v-model="formData.status"
+                  options="正常,暂停"
+                ></ac-radio>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="!dialogEdit">
+            <el-col :span="8">
+              <el-form-item label="更新时间" prop="updateTime">
+                <ac-datetime v-model="formData.updateTime" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="创建时间" prop="createTime">
+                <ac-datetime v-model="formData.createTime" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <div class="table-select-box">
+            <div class="table-name-box" v-if="dialogEdit">
+              <div class="table-name-box-line">
+                <div class="table-name-tips">可选表 </div>
+                <el-input v-model="filterValue" />
+              </div>
+              <div class="table-name-select">
+                <el-checkbox-group
+                  v-model="checkedList"
+                  @change="checkboxChange"
+                >
+                  <div v-for="(table, index) in checkboxList" :key="index">
+                    <el-checkbox
+                      :label="table.tableName"
+                      :value="table.tableName"
+                    />
+                  </div>
+                </el-checkbox-group>
+              </div>
+            </div>
+            <div class="table-box">
+              <div class="table-header">
+                <span class="table-name-tips">已选表</span>
+                <span class="table-tool" v-if="dialogEdit">
+                  <span style="display: inline-flex; margin-right: 8px">同步表配置</span>
+                  <ac-buttons v-model="syncType" options="全量,增量" @change="changeSyncType" />
+                  <ac-buttons v-model="writeMode" options="更新,删除重写" @change="changeWriteMode" />
+                  <ac-number style="width: 150px" v-model="readCount" point="0" @change="changeReadCount" />
+                  <el-input style="width: 150px" v-model="tablePrefix" placeholder="目标表前缀" @change="fillTargetInfo" />
+                </span>
+              </div>
+              <!--表格栏-->
+              <el-table
+                ref="collectTable"
+                class="edit-table"
+                width="100%"
+                border
+                :data="formData.tableList"
+              >
+                <el-table-column
+                  header-align="center"
+                  prop="originTable"
+                  label="来源表"
+                  min-width="120"
+                  :show-overflow-tooltip="{
+                    'effect': 'light',
+                    'raw-content': false,
+                    'placement': 'bottom',
+                    'popper-class': 'padding-10-15'
+                  }"
+                />
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  prop="targetTable"
+                  label="目标表"
+                  min-width="120"
+                >
+                  <template #default="{ row }">
+                    <ac-select
+                      v-model="row.targetTable"
+                      :options="targetTableOptions"
+                      @change="changeTargetTable(row)"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  prop="syncType"
+                  label="同步类型"
+                  width="80"
+                >
+                  <template #default="{ row }">
+                    <ac-select v-model="row.syncType" options="全量,增量" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  prop="writeMode"
+                  label="写入模式"
+                  width="110"
+                >
+                  <template #default="{ row }">
+                    <ac-select v-model="row.writeMode" options="更新,删除重写" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  prop="readCount"
+                  label="读取数量"
+                  width="90"
+                >
+                  <template #default="{ row }">
+                    <ac-number v-model="row.readCount" point="0" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="增量字段"
+                  width="100"
+                >
+                  <template #default="{ row }">
+                    <ac-select
+                      v-if="row.syncType === '增量'"
+                      v-model="row.incrementField"
+                      :options="row.timeFields"
+                      allow-create
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="增量开始时间"
+                  width="160"
+                >
+                  <template #default="{ row }">
+                    <ac-datetime v-if="row.syncType === '增量'" v-model="row.incrementEndTime" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="来源表主键字段"
+                  width="120"
+                >
+                  <template #default="{ row }">
+                    <el-input v-model="row.originPrimaryKey" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="目标表主键字段"
+                  width="120"
+                >
+                  <template #default="{ row }">
+                    <el-input v-model="row.targetPrimaryKey" />
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="字段配置"
+                  width="100"
+                >
+                  <template #header>
+                    <span style="margin-right: 5px">字段配置</span>
+                    <el-tooltip>
+                      <template #content>
+                        <div>不配置字段时，来源表字段必须与目标表字段一致，包括字段数量与及字段类型都需要一致</div>
+                        <div>配置同步字段时，根据配置的字段映射关系进行同步</div>
+                      </template>
+                      <ac-icon iconId="018dca8ec9890493be26" />
+                    </el-tooltip>
+                  </template>
+                  <template #default="{ row }">
+                    <el-button link type="primary" @click="configSyncField(row)">配置</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button
+          v-if="dialogEdit"
+          size="default"
+          type="info"
+          @click="dialogVisible=false"
+        >取消</el-button>
+        <el-button
+          v-if="dialogEdit"
+          size="default"
+          type="primary"
+          @click="submitForm"
+          :loading="editLoading"
+        >提交</el-button>
+        <el-button
+          v-if="!dialogEdit"
+          size="default"
+          type="info"
+          @click="dialogVisible=false"
+        >关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 字段编辑 -->
+    <el-dialog
+      v-model="fieldVisible"
+      width="1200px"
+      title="同步字段配置"
+      :close-on-click-modal="false"
+      class="dialog-box no-padding"
+      destroy-on-close
+      draggable
+    >
+      <div class="page-container">
+        <div style="margin-bottom: 5px">
+          <span>
+            <span>新增&nbsp;</span>
+            <el-input
+              v-model.number="fieldRow"
+              auto-complete="off"
+              style="width:50px"
+            ></el-input>
+            <span>&nbsp;行&nbsp;</span>
+          </span>
+          <el-button type="success" @click="addField">确定</el-button>
+          <el-button type="success" @click="loadAll">加载所有字段</el-button>
+        </div>
+        <el-table
+          ref="collectTable"
+          class="edit-table"
+          width="100%"
+          border
+          :data="fieldList"
+        >
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="originColumn"
+            label="来源字段"
+            min-width="160"
+          >
+            <template #default="{ row }">
+              <ac-select
+                v-model="row.originColumn"
+                :options="originColumns"
+                @change="changeOriginColumn(row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="originColumnType"
+            label="来源字段类型"
+            width="200"
+          />
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="targetColumn"
+            label="目标字段"
+            min-width="160"
+          >
+            <template #default="{ row }">
+              <ac-select
+                v-model="row.targetColumn"
+                :options="targetColumns"
+                @change="changeTargetColumn(row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="targetColumnType"
+            label="目标字段类型"
+            width="200"
+          />
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="dataConvert"
+            label="数据转换"
+            width="120"
+          >
+            <template #default="{ row }">
+              <ac-select v-model="row.dataConvert" options="不转换,默认值,日期格式化,时间转秒,时间转毫秒,秒转时间,毫秒转时间" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            prop="dataConvert"
+            label="转换参数"
+            width="180"
+          >
+            <template #default="{ row }">
+              <ac-input v-model="row.convertParam" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="操作"
+            width="70"
+          >
+            <template #default="{ $index }">
+              <el-button link type="danger" @click="removeField($index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="fieldVisible=false"
+        >取消</el-button>
+        <el-button
+          size="default"
+          type="primary"
+          @click="configSyncFieldSubmit"
+        >确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+
+const filters = ref({
+  name: '',
+  status: ''
+});
+
+const filterFields = ref([
+  { prop: 'name', label: '任务名称' },
+  { prop: 'status', label: '状态', type: 'select', options: '正常,暂停' },
+]);
+
+const columns = ref([
+  { prop: 'name', label: '任务名称', minWidth: 200, click: true },
+  { prop: 'syncCount', label: '同时采集数量', type: 'number', width: 140 },
+  { prop: 'syncMode', label: '采集方式', width: 100 },
+  { prop: 'syncType', label: '采集类型', width: 100 },
+  { prop: 'syncTime', label: '采集时间', width: 120 },
+  { prop: 'syncExpression', label: '采集表达式', width: 120 },
+  { prop: 'originDatasourceName', label: '来源数据源', width: 160 },
+  { prop: 'targetDatasourceName', label: '目标数据源', width: 160 },
+  { prop: 'status', label: '状态', width: 100 },
+  { prop: 'updateTime', label: '更新时间', width: 160, type: 'datetime' },
+  { prop: 'createTime', label: '创建时间', width: 160, type: 'datetime' },
+]);
+
+const rules = ref({
+  name: [
+    { required: true, message: '请输入名称', trigger: 'change' },
+    { max: 100, message: '长度必须小于等于 100 个字符！', trigger: 'change' }
+  ],
+  syncCount: [
+    { required: true, message: '请输入同时采集数量', trigger: 'change' }
+  ],
+  syncMode: [
+    { required: true, message: '请输入采集方式', trigger: 'change' },
+    { max: 10, message: '长度必须小于等于 10 个字符！', trigger: 'change' }
+  ],
+  syncType: [
+    { required: true, message: '请输入采集类型', trigger: 'change' },
+    { max: 10, message: '长度必须小于等于 10 个字符！', trigger: 'change' }
+  ],
+  syncTime: [
+    { required: true, message: '请输入采集时间', trigger: 'change' }
+  ],
+  syncPeriod: [
+    { required: true, message: '请输入采集周期', trigger: 'change' }
+  ],
+  syncExpression: [
+    { required: true, message: '请输入采集表达式', trigger: 'change' },
+    { max: 50, message: '长度必须小于等于 50 个字符！', trigger: 'change' }
+  ],
+  originDatasourceId: [
+    { required: true, message: '请输入来源数据源', trigger: 'change' },
+    { max: 20, message: '长度必须小于等于 20 个字符！', trigger: 'change' }
+  ],
+  targetDatasourceId: [
+    { required: true, message: '请输入目标数据源', trigger: 'change' },
+    { max: 20, message: '长度必须小于等于 20 个字符！', trigger: 'change' }
+  ],
+  status: [
+    { required: true, message: '请选择状态', trigger: 'change' },
+  ],
+});
+
+const dataTable = ref();
+const dataForm = ref();
+const formData = ref({});
+const tableList = ref([]);
+const checkedList = ref([]);
+const dialogTitle = ref('');
+const dialogVisible = ref(false);
+const editLoading = ref(false);
+const dialogEdit = ref(false);
+
+const syncType = ref('全量');
+const writeMode = ref('删除重写');
+const readCount = ref(3000);
+const tablePrefix = ref('');
+const collectTable = ref();
+const targetTableOptions = ref([]);
+const filterValue = ref('');
+
+const fieldVisible = ref(false);
+const fieldRow = ref(1);
+const fieldList = ref([]);
+const currentTable = ref({});
+const originColumns = ref('');
+const targetColumns = ref('');
+
+const handleCellOperator = async(property, value, row) => {
+  formData.value = Object.assign({}, await loadData(row.id));
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+  dialogTitle.value = '查看';
+  tableList.value = [];
+  checkedList.value = [];
+  filterValue.value = '';
+
+  await nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+  });
+};
+
+const handleTableOperator = async(button, row) => {
+  syncType.value = '全量';
+  writeMode.value = '删除重写';
+  readCount.value = 3000;
+  tablePrefix.value = '';
+  tableList.value = [];
+  checkedList.value = [];
+  filterValue.value = '';
+
+  dialogVisible.value = true;
+  dialogEdit.value = true;
+  dialogTitle.value = button.name;
+
+  if (button.buttonType === 'edit') {
+    formData.value = Object.assign({}, await loadData(row.id), { button: button });
+    await nextTick(async () => {
+      await loadTableList(formData.value.originDatasourceId);
+      changeTargetDatasource({ id: formData.value.targetDatasourceId });
+      formData.value.tableList.forEach(table => {
+        checkedList.value.push(table.originTable);
+      });
+    });
+  } else {
+    formData.value = { syncMode: '自动', syncType: '每天', status: '正常', tableList: [], syncCount: 10, button: button };
+  }
+
+  await nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+  });
+};
+
+const loadData = async(id) => {
+  const res = await api.post('/system/collectTask/queryBy', { id: id });
+  return res.data || {};
+};
+
+const loadTableList = async(datasourceId) => {
+  if (!datasourceId) return;
+
+  const res = await api.post('/system/datasource/queryColumnList', { id: datasourceId });
+  tableList.value = res.data || [];
+  formData.value.tableList.forEach(row => {
+    const table = tableList.value.find(item => item.tableName === row.originTable);
+    row.timeFields = table.fieldList.map(column => column.columnName).join(',');
+  });
+};
+
+const checkboxChange = (checkList) => {
+  formData.value.tableList.forEach((item, index) => {
+    if (checkList.indexOf(item.originTable) < 0) {
+      formData.value.tableList.splice(index, 1);
+    }
+  });
+
+  for (const tableName of checkList) {
+    const index = formData.value.tableList.findIndex(item => item.originTable === tableName);
+    if (index < 0) {
+      const table = tableList.value.find(item => item.tableName === tableName);
+      const targetTable = targetTableList.value.find(item => item.tableName === tablePrefix.value + tableName);
+      formData.value.tableList.push({
+        originTable: table.tableName,
+        originPrimaryKey: table.pkIdName || '',
+        targetTable: targetTable ? targetTable.tableName : '',
+        targetPrimaryKey: targetTable ? targetTable.pkIdName : '',
+        syncType: syncType.value,
+        writeMode: writeMode.value,
+        readCount: readCount.value,
+        timeFields: table.fieldList.map(column => column.columnName).join(',')
+      });
+    }
+  }
+};
+
+const changeTargetTable = (row) => {
+  if (!row.targetTable) return;
+  row.targetPrimaryKey = targetTableList.value
+    .find(table => table.tableName === row.targetTable).pkIdName;
+};
+
+const configSyncField = (row) => {
+  if (!row.originTable) {
+    ElMessage.error('请选择来源表！');
+    return;
+  }
+  if (!row.targetTable) {
+    ElMessage.error('请选择目标表！');
+    return;
+  }
+
+  currentTable.value = row;
+  originColumns.value = tableList.value.find(table => table.tableName === row.originTable).fieldList.map(field => field.columnName).join(',');
+  targetColumns.value = targetTableList.value.find(table => table.tableName === row.targetTable).fieldList.map(field => field.columnName).join(',');
+  fieldList.value = currentTable.value.columnList || [];
+  fieldVisible.value = true;
+};
+
+const addField = () => {
+  for (let i = 0; i < fieldRow.value; i++) {
+    fieldList.value.push({});
+  }
+};
+
+const loadAll = () => {
+  const originFieldList = tableList.value.find(table => table.tableName === currentTable.value.originTable).fieldList;
+  originFieldList.forEach(field => {
+    if (!fieldList.value.find(item => item.originColumn === field.columnName)) {
+      const targetColumn = targetTableList.value
+        .find(table => table.tableName === currentTable.value.targetTable)
+        .fieldList.find(item => item.columnName === field.columnName);
+
+      fieldList.value.push({
+        originColumn: field.columnName,
+        originColumnType: field.columnType,
+        targetColumn: targetColumn?.columnName,
+        targetColumnType: targetColumn?.columnType,
+      });
+    }
+  });
+};
+
+const removeField = (index) => {
+  fieldList.value.splice(index, 1);
+};
+
+const changeOriginColumn = (row) => {
+  if (!row.originColumn) return;
+  row.originColumnType = tableList.value
+    .find(table => table.tableName === currentTable.value.originTable)
+    .fieldList.find(field => field.columnName === row.originColumn).columnType;
+};
+
+const changeTargetColumn = (row) => {
+  if (!row.targetColumn) return;
+  row.targetColumnType = targetTableList.value
+    .find(table => table.tableName === currentTable.value.targetTable)
+    .fieldList.find(field => field.columnName === row.targetColumn).columnType;
+};
+
+const configSyncFieldSubmit = () => {
+  const originColumnName = new Set();
+  const targetColumnName = new Set();
+  for (const column of fieldList.value) {
+    if (!column.originColumn && column.dataConvert !== '默认值') {
+      ElMessage.error('来源字段不能为空！');
+      return;
+    }
+    if (!column.targetColumn) {
+      ElMessage.error('目标字段不能为空！');
+      return;
+    }
+
+    if (originColumnName.has(column.originColumn)) {
+      ElMessage.error('来源字段【' + column.originColumn + '】重复，请删除其中一个！');
+      return;
+    }
+    originColumnName.add(column.originColumn);
+
+    if (targetColumnName.has(column.targetColumn)) {
+      ElMessage.error('目标字段【' + column.targetColumn + '】重复，请删除其中一个！');
+      return;
+    }
+    targetColumnName.add(column.targetColumn);
+  }
+
+  currentTable.value.columnList = fieldList.value || [];
+  fieldVisible.value = false;
+};
+
+const changeOriginDatasource = (data) => {
+  checkedList.value = [];
+  formData.value.tableList = [];
+  if (!data || !data.id) return;
+
+  api.post('/system/datasource/queryColumnList', { id: data.id }).then(res => {
+    tableList.value = res.data || [];
+  });
+};
+
+const checkboxList = computed(() => {
+  if (filterValue.value) {
+    return tableList.value.filter(table => table.tableName.indexOf(filterValue.value) >= 0);
+  } else {
+    return tableList.value;
+  }
+});
+
+const targetTableList = ref([]);
+const changeTargetDatasource = (data) => {
+  targetTableList.value = [];
+  targetTableOptions.value = [];
+  if (!data || !data.id) return;
+
+  api.post('/system/datasource/queryColumnList', { id: data.id }).then(res => {
+    targetTableList.value = res.data || [];
+    fillTargetInfo();
+  });
+};
+
+const fillTargetInfo = () => {
+  targetTableList.value.forEach(item => {
+    const row = formData.value.tableList.find(table =>
+      item.tableName === tablePrefix.value + table.originTable && table.targetTable === '');
+    if (row) {
+      row.targetTable = row.targetTable || item.tableName;
+      row.targetPrimaryKey = row.targetPrimaryKey || item.pkIdName || '';
+    }
+    targetTableOptions.value.push({
+      key: item.tableName,
+      value: item.tableName
+    });
+  });
+};
+
+const changeSyncType = (syncType) => {
+  formData.value.tableList.forEach(table => table.syncType = syncType);
+};
+
+const changeWriteMode = (writeMode) => {
+  formData.value.tableList.forEach(table => table.writeMode = writeMode);
+};
+
+const changeReadCount = (readCount) => {
+  formData.value.tableList.forEach(table => table.readCount = readCount);
+};
+
+const submitForm = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        editLoading.value = true;
+        const data = tool.deepClone(formData.value);
+        api.post(formData.value.button.dataDestUrl, data).then(res => {
+          ElMessage.success(res.message);
+          dialogVisible.value = false;
+          dataTable.value.findPage();
+          editLoading.value = false;
+        }).catch(() => {
+          editLoading.value = false;
+        })
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  })
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-box .page-container {
+  :deep(.el-form) {
+    display: flex;
+    flex-direction: column;
+    height: 1px;
+    flex-grow: 1;
+  }
+  .table-select-box {
+    height: 1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+  }
+  .table-name-box {
+    width: 250px;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #b2b2b2;
+    .table-name-box-line {
+      display: flex;
+      flex-direction: row;
+      border-bottom: 1px solid #b2b2b2;
+      padding: 0 8px 8px 0;
+      .table-name-tips {
+        flex-shrink: 0;
+        font-weight: bolder;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        padding-right: 8px;
+      }
+    }
+    .table-name-select {
+      overflow-x: auto;
+      margin-top: 10px;
+    }
+  }
+  .table-box {
+    width: 1px;
+    flex-grow: 1;
+    .table-header {
+      display: flex;
+      flex-direction: row;
+      .table-name-tips {
+        font-weight: bolder;
+        font-size: 18px;
+        padding: 5px 0 10px 0;
+      }
+      .table-tool {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 5px;
+        margin-left: 10px;
+      }
+      .table-tool > * {
+        margin-right: 8px;
+      }
+    }
+    .edit-table :deep(td):first-child .cell {
+      padding: 0 12px!important;
+      display: block;
+    }
+  }
+}
+</style>