ap-dev 1.2.24 → 1.2.25

package/dev/DbDesignPanel/DevDbSync.vue

@@ -1,644 +1,468 @@
 <template>
-  <ap-container>
-    <ap-aside margin="1111">
-      <div class="layout-aside-header">
-        <div class="layout-aside-header-title">
-          字段类型
-        </div>
-        <div class="layout-aside-header-icon">
-          <i class="el-icon-plus" @click="addTable" />
-          <i class="el-icon-edit-outline" @click="editTable" />
-          <i class="el-icon-delete" @click="deleteTable" />
-          <el-popover ref="popoverRef" placement="bottom" trigger="click">
-            <el-button-group>
-              <el-button type="primary" icon="el-icon-top" @click="sortTypeBefore">上移</el-button>
-              <el-button type="primary" icon="el-icon-bottom" @click="sortTypeAfter">下移</el-button>
-              <el-button type="primary" icon="el-icon-s-operation" @click="sortTypeByIndex">
-                一键排序
-              </el-button>
-            </el-button-group>
-            <i slot="reference" class="el-icon-sort" />
-          </el-popover>
-        </div>
-      </div>
-      <div>
-        <el-input v-model="filterText" placeholder="关键字过滤" />
-      </div>
-      <div v-loading="loadingTreeFlag" class="layout-aside-content">
-        <el-tree
-          ref="typeTree"
-          class="filter-tree"
-          node-key="fdId"
-          :data="typeTreeList"
-          :props="defaultProps"
-          default-expand-all
-          show-checkbox
-          :check-on-click-node="true"
-          :highlight-current="true"
-          :expand-on-click-node="false"
-          :check-strictly="false"
-          :filter-node-method="filterNode"
-          @check="nodeClickEvent"
-        />
-      </div>
-    </ap-aside>
-    <ap-split-panel />
     <ap-container>
-      <ap-header margin="1110">
-        <el-form
-          ref="searchFormRef"
-          :model="searchForm"
-          :inline="true"
-          class="layout-header-form"
-        >
-          <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
-            <el-input v-model="searchForm.likeStr" placeholder="字段名/注释" />
-          </el-form-item>
-        </el-form>
-        <el-button type="primary" @click="searchEvent">查询</el-button>
-      </ap-header>
-      <ap-main margin="0110">
-        <ap-table ref="devDbFieldGrid" :options.sync="tableOpt" />
-      </ap-main>
-    </ap-container>
+        <ap-main margin="1111" class="flex-justify-start">
+            <div class="flex-col" style="height: 100%;width: 1000px;">
+                <div class="flex-justify-start">
+                    <div style="width: 60px;"></div>
+                    <div class="flex-justify-start flex-1">
+                        <div style="width: 230px">
+                            <span style="font-weight: bold;">来源库：</span>
+                            <el-select v-model="sourceId" placeholder="来源数据库" filterable style="width: 120px">
+                                <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
+                            </el-select>
+                        </div>
+                        <div class="flex-1 flex-justify-start">
+                            <div>
+                                <span style="font-weight: bold;">目标库：</span><br>
+                                <span style="font-size: 12px;" class="ap-color-gray">要操作的库</span>
+                            </div>
+                            <el-select v-model="targetId" placeholder="目标数据库" filterable style="width: 120px" @change="targetChange">
+                                <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
+                            </el-select>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-1 flex-col" style="overflow-y: scroll;border: 1px solid #cccccc;">
+                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
+                        <div class="flex-center operate-type ap-bg-green">创<br/>建<br/>表</div>
+                        <div class="flex-1">
+                            <template v-for="item in addList">
+                                <div class="flex-justify-start flex-1  row">
+                                    <div class="operate">
+                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
+                                    </div>
+                                    <div class="source-ctn"> {{ item.tableName }}</div>
+                                    <div class="flex-1 ap-color-green new-table" @click="showTableCol(item.tableName)">
+                                        <i class="el-icon-circle-plus-outline"/>
+                                        <span class="table-name">{{ item.tableName }}</span>
+                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
+                                    </div>
+                                </div>
+                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
+                                    <div class="operate"></div>
+                                    <div class="source-ctn"></div>
+                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
+                                        <div class="row-cell-col">
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfo"></div>
+                                    </div>
+                                </div>
 
+                            </template>
+                        </div>
+                    </div>
+                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
+                        <div class="flex-center operate-type ap-bg-red">删<br/>除<br/>表</div>
+                        <div class="flex-1">
+                            <template v-for="item in delList">
+                                <div class="flex-justify-start flex-1  row">
+                                    <div class="operate">
+                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
+                                    </div>
+                                    <div class="source-ctn"></div>
+                                    <div class="flex-1 ap-color-red new-table" @click="showTableCol(item.tableName)">
+                                        <i class="el-icon-trash-o"/>
+                                        <span class="table-name">{{ item.tableName }}</span>
+                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
+                                    </div>
+                                </div>
+                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
+                                    <div class="operate"></div>
+                                    <div class="source-ctn"></div>
+                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
+                                        <div class="row-cell-col">
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfo"></div>
+                                    </div>
+                                </div>
 
-    <el-dialog
-      :title="dialogTitle"
-      :visible.sync="dialogVisible"
-      width="35%"
-    >
-      <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-width="80px">
+                            </template>
+                        </div>
+                    </div>
+                    <div class="flex-justify-start ctn" style="border-bottom: 1px solid #cccccc;">
+                        <div class="flex-center operate-type ap-bg-blue">更<br/>新<br/>表</div>
+                        <div class="flex-1">
+                            <template v-for="item in updateList">
+                                <div class="flex-justify-start row">
+                                    <div class="operate">
+                                        <el-checkbox v-model="checkedTable" :label="item.tableName"></el-checkbox>
+                                    </div>
+                                    <div class="source-ctn">{{ item.tableName }}</div>
+                                    <div class="flex-1 ap-color-blue new-table" @click="showTableCol(item.tableName)">
+                                        <i class="el-icon-transfer"/>
+                                        <span class="table-name">{{ item.tableName }} </span>
+                                        <span v-html="showTableComment(item)"></span>
+                                    </div>
+                                </div>
+                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumnsUpdate" class="flex-justify-start row-col">
+                                    <div class="operate"></div>
+                                    <div class="source-ctn"></div>
+                                    <!-- 0相同 1添加 2修改 3删除-->
+                                    <div v-if="col.compareType==0" class="flex-1 flex-justify-start row-cell ap-color-gray">
+                                        <div class="row-cell-col">
+                                            <i class="el-icon-denghao"/>
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfoCompare"></div>
+                                    </div>
+                                    <div v-if="col.compareType==1" class="flex-1 flex-justify-start row-cell ap-color-green">
+                                        <div class="row-cell-col">
+                                            <i class="el-icon-plus"/>
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfoCompare"></div>
+                                    </div>
+                                    <div v-if="col.compareType==2" :title="col.compareStr" class="flex-1 flex-justify-start row-cell ap-color-gray">
+                                        <div class="row-cell-col ap-color-blue">
+                                            <i class="el-icon-edit-outline"/>
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfoCompare"></div>
+                                    </div>
+                                    <div v-if="col.compareType==3" class="flex-1 flex-justify-start row-cell ap-color-red">
+                                        <div class="row-cell-col">
+                                            <i class="el-icon-close"/>
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfo"></div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="flex-justify-start flex-1 ctn">
+                        <div class="flex-center operate-type ap-bg-gray">相<br/>同<br/>表</div>
+                        <div class="flex-1">
+                            <template v-for="item in sameList">
+                                <div class="flex-justify-start flex-1  row">
+                                    <div class="operate">
+                                    </div>
+                                    <div class="source-ctn ap-color-gray"> {{ item.tableName }}</div>
+                                    <div class="flex-1 ap-color-gray new-table" @click="showTableCol(item.tableName)">
+                                        <i class="el-icon-denghao"/> {{ item.tableName }}
+                                        <span class="dev-table-comment">{{ item.tableComment }}</span>
+                                    </div>
+                                </div>
+                                <div v-if="currentTable == item.tableName" v-for="col in item.tableColumns" class="flex-justify-start row-col">
+                                    <div class="operate"></div>
+                                    <div class="source-ctn"></div>
+                                    <div class="flex-1 flex-justify-start row-cell ap-color-gray">
+                                        <div class="row-cell-col">
+                                            {{ col.columnName }}
+                                        </div>
+                                        <div v-html="col.colInfo"></div>
+                                    </div>
+                                </div>
 
-        <el-form-item label="父类别">
-          <el-select v-model="dialogForm.fdParentId" filterable placeholder="请选择父节点">
-            <el-option label="无" value="" />
-            <el-option
-              v-for="item in typeList"
-              :key="item.fdId"
-              :label="item.fdName"
-              :value="item.fdId"
-            />
-          </el-select>
-        </el-form-item>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex-col" style="padding: 0 5px">
+                <div>
+                    <ap-button type="primary" :click="doCompare" icon="el-icon-exchange">结构比对</ap-button>
+                </div>
+                <div style="margin-top: 10px">
+                    <ap-button type="primary" :click="getSql" icon="el-icon-tickets">生成脚本</ap-button>
+                </div>
+                <div style="margin-top: 10px">
+                    <ap-button type="primary" :click="doTableUpdate" icon="el-icon-upload">脚本部署</ap-button>
+                </div>
+            </div>
+            <div class="flex-1 flex-col" style="height: 100%">
+                <div style="height: 38px" class="flex-justify-start">
+                    <span style="font-weight: bold;">{{ targetName }}</span><span v-html="msg"></span>
+                </div>
+                <div class="flex-1 sql-str" style="height: 100%;width: 100%">
+                    <el-input v-model="sqlStr" type="textarea" rows=4 style="height: 100%;width: 100%"></el-input>
+                </div>
+            </div>
+        </ap-main>
+    </ap-container>
+</template>
 
-        <el-form-item label="类别名称" prop="fdName">
-          <el-input v-model="dialogForm.fdName" />
-        </el-form-item>
+<script>
 
-        <el-form-item label="排序" prop="fdSort">
-          <el-input-number v-model="dialogForm.fdSort" controls-position="right" />
-        </el-form-item>
-      </el-form>
+export default {
+    name: 'DevDbSync',
+    data() {
+        return {
+            sourceId: "",
+            targetId: "",
+            targetName: "",
+            dbSourceList: [],
+            addList: [],
+            delList: [],
+            sameList: [],
+            updateList: [],
+            checkedTable: [],
+            currentTable: "",
+            msg: "",
+            sqlStr: "",
 
+        }
+    },
+    watch: {},
+    created() {
+        this.initDbSource()
+    },
+    methods: {
+        initDbSource() {
+            this.$request({
+                url: '/apd/db/TDevDbAuth/getDbSourceList',
+                method: 'post'
+            }).then(response => {
+                this.dbSourceList = response.data;
+            })
+        },
+        getCompareFlag() {
+            return hasSource && hasTarget;
+        },
+        hasTable(list, tableName) {
+            if (list == null) {
+                return false;
+            }
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].tableName == tableName) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        getTableByName(list, name) {
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].tableName == name) {
+                    return list[i];
+                }
+            }
+            return null;
+        },
+        showTableComment(item) {
+            let oldTableComment = item.oldTableComment;
+            let tableComment = item.tableComment;
+            if (tableComment == oldTableComment) {
+                return `<span class="ap-color-gray dev-table-comment"> ${tableComment}</span>`
+            }
+            if (oldTableComment == null || oldTableComment == "") {
+                return `<span class="ap-color-green dev-table-comment"> ${tableComment}</span>`
+            }
+            return `<span class="ap-color-blue dev-table-comment"> ${tableComment}</span>`
+        },
+        targetChange(val) {
+            let list = this.dbSourceList;
+            for (let i = 0; i < list.length; i++) {
+                if (val == list[i].fdId) {
+                    this.targetName = list[i].fdName + "：";
+                    return;
+                }
+            }
+            this.targetName = "";
+        },
+        showTableCol(table) {
+            if (this.currentTable == table) {
+                this.currentTable = "";
+                return;
+            }
+            this.currentTable = table;
+        },
+        getSql() {
+            return new Promise((resolve) => {
+                let tables = this.checkedTable;
+                if (tables == null || tables.length < 1) {
+                    this.$message.error("请先选择需要同步的表");
+                    resolve()
+                    return;
+                }
 
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="saveTable">确 定</el-button>
-      </span>
-    </el-dialog>
-  </ap-container>
-</template>
+                let addCount = 0;
+                let delCount = 0;
+                let updateCount = 0;
+                for (let i = 0; i < tables.length; i++) {
+                    let item = tables[i];
+                    if (this.hasTable(this.addList, item)) {
+                        addCount++;
+                        continue;
+                    }
+                    if (this.hasTable(this.delList, item)) {
+                        delCount++;
+                        continue;
+                    }
+                    if (this.hasTable(this.updateList, item)) {
+                        updateCount++;
+                        continue;
+                    }
+                }
+                let msg = "";
+                if (addCount > 0) {
+                    msg += "<span class='ap-color-green' style='font-weight: bold;margin-right: 15px'>创建 " + addCount + " 个</span>";
+                }
+                if (delCount > 0) {
+                    msg += "<span class='ap-color-red' style='font-weight: bold;margin-right: 15px'>删除 " + delCount + " 个</span>";
+                }
+                if (updateCount > 0) {
+                    msg += "<span class='ap-color-blue' style='font-weight: bold;margin-right: 15px'>更新 " + updateCount + " 个</span>";
+                }
+                this.msg = msg;
 
-<script>
-import { convertToArrayData, convertToTreeData } from 'ap-util/util/DataUtil'
+                this.$request({
+                    url: '/apd/db/DevDbTable/getSyncSql',
+                    method: 'post',
+                    data: {
+                        sourceId: this.sourceId,
+                        targetId: this.targetId,
+                        tables: JSON.stringify(this.checkedTable)
+                    }
+                }).then(response => {
+                    this.sqlStr = response.data;
+                }).finally(() => {
+                    resolve()
+                });
+
+            });
 
-export default {
-  name: 'DevDbField',
-  data() {
-    const columns = [
-      {
-        prop: 'fdFieldTypeId',
-        label: '字段类型',
-        type: 'select',
-        addDefaultValue: this.addDefaultValueFn,
-        selectOptionsRemote: 'typeList',
-        selectOptionsKey: { label: 'fdName', value: 'fdId' },
-        rules: [
-          { required: true, message: '请选择类型' }
-        ]
-      },
-      {
-        prop: 'fdName',
-        label: '字段名称',
-        type: 'input',
-        rules: [
-          { required: true, message: '字段名称必填' },
-          { min: 1, max: 30, message: '长度在 1 到 30 个字符' }
-        ]
-      },
-      {
-        prop: 'fdComment',
-        label: '默认注释',
-        type: 'input',
-        rules: [
-          { required: true, message: '字段注释必填' },
-          { min: 1, max: 30, message: '长度在 1 到 30 个字符' }
-        ]
-      }, {
-        prop: 'fdDataType',
-        label: '数据类型',
-        type: 'select',
-        selectOptions: [
-          {
-            label: '常用',
-            options: [
-              { label: 'char(255)', value: 'char' },
-              { label: 'varchar(6.5万)', value: 'varchar' },
-              { label: 'tinyint(255)', value: 'tinyint' },
-              { label: 'datetime(年月日时分秒)', value: 'datetime' }
-            ]
-          },
-          {
-            label: '字符串',
-            options: [
-              { label: 'char(255)', value: 'char' },
-              { label: 'varchar(6.5万)', value: 'varchar' },
-              { label: 'text(长文本)', value: 'text' }
-            ]
-          },
-          {
-            label: '整型数值',
-            options: [
-              { label: 'tinyint(255)', value: 'tinyint' },
-              { label: 'smallint(6.5万)', value: 'smallint' },
-              { label: 'mediumint(1.6千万)', value: 'mediumint' },
-              { label: 'int(4.2亿)', value: 'int' },
-              { label: 'bigint(极大)', value: 'bigint' }
-            ]
-          },
-          {
-            label: '浮点数值',
-            options: [
-              { label: 'float(单精度)', value: 'float' },
-              { label: 'double(双精度)', value: 'double' },
-              { label: 'decimal(小数值)', value: 'decimal' }
-            ]
-          },
-          {
-            label: '日期时间',
-            options: [
-              { label: 'date(年月日)', value: 'date' },
-              { label: 'time(时分秒)', value: 'time' },
-              { label: 'year(年)', value: 'year' },
-              { label: 'datetime(年月日时分秒)', value: 'datetime' },
-              { label: 'timestamp(时间戳)', value: 'timestamp' }
-            ]
-          }
-        ],
-        selectFilterable: true,
-        selectIsGroup: true,
-        selectPlaceholder: '选择数据类型',
-        rules: [
-          { required: true, message: '数据类型必选' }
-        ]
-      }, {
-        prop: 'fdSort',
-        label: '排序',
-        type: 'inputNumber',
-        inputNumberMin: 0,
-        // inputNumberMax: 10,
-        sortable: true,
-        rules: [
-          { required: true, message: '请输入排序' }
-        ],
-        addDefaultValue: 0
-      }, {
-        prop: 'fdDeleted',
-        label: '删除',
-        type: 'input',
-        hide: true,
-        addDefaultValue: 0
-      }]
-    const tableOpt = {
-      title: '字段列表',
-      columns: columns,
-      pagination: {
-        pageSizes: [30, 60, 90],
-        pageSize: 30
-      },
-      dataUrl: '/apd/db/DevDbField/getTDevDbFieldGridList',
-      saveUrl: '/apd/db/DevDbField/saveTDevDbFieldGridData',
-      editPk: 'fdId',
-      deletePk: 'fdId',
-      deleteUrl: '/apd/db/DevDbField/deleteTDevDbFieldByFdId',
-      toolbarBtn: ['add', 'edit', 'del', 'cancel', 'refresh', 'save', 'separator',
-        {
-          btnType: 'primary',
-          text: '上移',
-          icon: 'el-icon-top',
-          onClick: () => {
-            this.sortBefore()
-          }
         },
-        {
-          btnType: 'primary',
-          text: '下移',
-          icon: 'el-icon-bottom',
-          onClick: () => {
-            this.sortAfter()
-          }
+        doCompare() {
+            return new Promise((resolve) => {
+                if (this.sourceId == null || this.sourceId == '' || this.targetId == null || this.targetId == '') {
+                    this.$message.error("请先选择数据源");
+                    resolve()
+                    return;
+                }
+                this.$request({
+                    url: '/apd/db/DevDbTable/getTableCompareList',
+                    method: 'post',
+                    data: {
+                        sourceId: this.sourceId,
+                        targetId: this.targetId
+                    }
+                }).then(response => {
+                    let res = response.data;
+                    this.addList = res.addList;
+                    this.delList = res.delList;
+                    this.sameList = res.sameList;
+                    this.updateList = res.updateList;
+                }).finally(() => {
+                    resolve()
+                });
+            });
         },
-        {
-          btnType: 'primary',
-          text: '一键排序',
-          icon: 'el-icon-s-operation',
-          onClick: () => {
-            this.doSortByIndex()
-          }
-        }, , {
-          btnType: 'info',
-          text: '帮助',
-          icon: 'el-icon-question',
-          onClick: () => {
-            this.openHelp()
-          }
-        }],
-      initData: false,
-      beforeAdd: this.beforeAddFn,
-      params: () => {
-        return {
-          fdFieldTypeIds: this.selectedFieldTypeIds,
-          likeStr: this.searchForm.likeStr
+        doTableUpdate() {
+            return new Promise((resolve) => {
+                let sqlStr = this.sqlStr;
+                if (sqlStr == null || sqlStr == "") {
+                    this.$message.error("SQL脚本为空，请先【生成脚本】");
+                    resolve()
+                    return;
+                }
+
+                this.$confirm(`确定要同步表架构?`, '提示', {
+                    confirmButtonText: '确定同步',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.$request({
+                        url: '/apd/db/DevDbTable/updateTableStruct',
+                        method: 'post',
+                        data: {
+                            targetId: this.targetId,
+                            sqlStr: sqlStr
+                        }
+                    }).then(response => {
+                        this.$message.success(`同步成功！`);
+                        this.sqlStr = "";
+                        this.checkedTable = [];
+                        this.doCompare();
+                        this.msg = "";
+                        this.currentTable = "";
+                    }).finally(() => {
+                        resolve()
+                    });
+                }).finally(() => {
+                    resolve()
+                });
+            });
         }
-      }
-    }
 
-    return {
-      // ----- 左侧树 -----
-      loadingTreeFlag: false,
-      filterText: '',
-      typeTreeList: [],
-      defaultProps: {
-        children: 'children',
-        label: 'fdName'
-      },
-      selectedFieldTypeIds: '',
-      // ----- dialog -----
-      typeList: [],
-      dialogVisible: false,
-      dialogTitle: '', // dialog标题
-      isAddDialog: true, // 添加类型dialog
-      dialogForm: {
-        fdName: '',
-        fdParentId: '',
-        fdId: '',
-        fdSort: undefined
-      },
-      dialogFormRules: {
-        fdSort: [
-          { type: 'number', message: '请输入数字', trigger: 'change' }
-        ],
-        fdName: [
-          { required: true, message: '请输入类型名称', trigger: 'blur' },
-          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
-        ]
-      },
-      // ----- 表格 -----
-      searchForm: {
-        listStr: ''
-      },
-      tableOpt: tableOpt
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.typeTree.filter(val)
     }
-  },
-  created() {
-    this.loadTreeData()
-  },
-  methods: {
-    // 左侧树：加载数据
-    loadTreeData() {
-      this.loadingTreeFlag = true
-      this.$request({
-        url: '/apd/db/DevDbField/getDbFieldTypeList',
-        method: 'post'
-      }).then(response => {
-        this.typeList = JSON.parse(JSON.stringify(response.data))
-        this.typeTreeList = convertToTreeData(response.data, {
-          idKey: 'fdId',
-          parentKey: 'fdParentId',
-          childrenKey: 'children'
-        })
-      }).finally(() => {
-        this.loadingTreeFlag = false
-      })
-    },
-    // 左侧树：初始化数据
-    initTreeData() {
-      // 重置当前选择节点
-      this.$refs.typeTree.setCurrentKey()
-      this.loadTreeData()
-    },
-    // 左侧树：过滤节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.fdName.indexOf(value) !== -1
-    },
-    // 选择勾选事件
-    nodeClickEvent(data, node, comp) {
-      const parentKeys = this.$refs.typeTree.getHalfCheckedKeys()
-      const selectKeys = this.$refs.typeTree.getCheckedKeys(false)
-      this.selectedFieldTypeIds = parentKeys.concat(selectKeys).join(',')
-      this.$refs.devDbFieldGrid.refresh()
-    },
-    // dialog：重置表单
-    resetDialogForm() {
-      this.dialogForm = {
-        fdName: '',
-        fdParentId: '',
-        fdId: '',
-        fdSort: null
-      }
-    },
-    getCurrentNode() {
-      return this.$refs.typeTree.getCurrentNode() || {}
-    },
-    // dialog：添加数据
-    addTable() {
-      this.resetDialogForm()
-      this.dialogVisible = true
-      this.dialogTitle = '添加字段类型'
-      this.isAddDialog = true
-      this.dialogForm.fdParentId = this.getCurrentNode().fdId
-    },
-    // dialog：编辑数据
-    editTable() {
-      const currentNodeFdId = this.getCurrentNode().fdId
-      if (!currentNodeFdId) {
-        this.$message.error('请选择需要编辑的数据！')
-        return
-      }
+}
+</script>
 
-      this.resetDialogForm()
-      this.dialogVisible = true
-      this.dialogTitle = '编辑字段类型'
-      this.isAddDialog = false
-      this.dialogForm.fdId = currentNodeFdId
+<style scoped>
+.board {
+    border: 1px solid #cccccc;
+}
 
-      this.$request({
-        url: '/apd/db/DevDbField/getDbFieldTypeByFdId',
-        method: 'post',
-        data: {
-          fdId: currentNodeFdId
-        }
-      }).then(response => {
-        this.dialogForm.fdId = response.data.fdId
-        this.dialogForm.fdName = response.data.fdName
-        this.dialogForm.fdParentId = response.data.fdParentId
-        this.dialogForm.fdSort = response.data.fdSort
-      })
-    },
-    // 删除类型数据
-    deleteTable() {
-      const currentNode = this.getCurrentNode()
-      const currentNodeFdId = currentNode.fdId
-      if (!currentNodeFdId) {
-        this.$message.error('请选择需要删除的数据！')
-        return
-      }
+.ctn {
+    align-items: stretch;
+    border-right: 1px solid #cccccc;
+}
 
-      this.$confirm(`确定要删除【${currentNode.fdName}】?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$request({
-          url: '/apd/db/DevDbField/deleteDbFieldType',
-          method: 'post',
-          data: {
-            fdId: currentNodeFdId
-          }
-        }).then(response => {
-          this.$message.success(`删除成功！已删除${response.data}条数据！`)
-          this.initTreeData()
-        })
-      })
-    },
-    checkTypeSort() {
-      const currentNode = this.getCurrentNode()
-      if (currentNode == null) {
-        this.$message.error(`请选择需要操作的节点！`)
-        return null
-      }
-      return currentNode
-    },
-    // 修改排序
-    doTypeSortChange(rowFdId, rowFdSort, exchangeRowFdId, exchangeRowFdSort) {
-      this.$request({
-        url: '/apd/db/DevDbField/updateDbFieldTypeSort',
-        method: 'post',
-        data: { rowFdId, rowFdSort, exchangeRowFdId, exchangeRowFdSort }
-      }).then(response => {
-        this.$message.success(`修改成功！`)
-        this.$refs.popoverRef.doClose()
-        this.loadTreeData()
-      })
-    },
-    // 排序调整：向上
-    sortTypeBefore() {
-      const currentNode = this.checkTypeSort()
-      if (currentNode == null) {
-        return
-      }
+.row {
+    padding: 3px;
+    align-items: stretch;
+}
 
-      const arrayData = convertToArrayData(this.typeTreeList)
-      let currentNodeIndex = 0
-      for (let i = 0; i < arrayData.length; i++) {
-        if (arrayData[i].fdId == currentNode.fdId) {
-          currentNodeIndex = i
-          break
-        }
-      }
-      if (currentNodeIndex == 0) {
-        this.$message.success(`已经是第一个啦！`)
-        return
-      }
+.row-col {
+    font-size: 12px;
+    padding: 1px 0;
+}
 
-      const exchangeRow = arrayData[currentNodeIndex - 1]
+.row-cell {
+    margin-left: 30px;
+    border-bottom: 1px solid #f3f3f3;
+}
 
-      this.doTypeSortChange(currentNode.fdId, exchangeRow.fdSort, exchangeRow.fdId, currentNode.fdSort)
-    },
-    // 排序调整：向下
-    sortTypeAfter() {
-      const currentNode = this.checkTypeSort()
-      if (currentNode == null) {
-        return
-      }
-      const arrayData = convertToArrayData(this.typeTreeList)
-      let currentNodeIndex = 0
-      for (let i = 0; i < arrayData.length; i++) {
-        if (arrayData[i].fdId == currentNode.fdId) {
-          currentNodeIndex = i
-          break
-        }
-      }
+.row-cell-col {
+    width: 150px;
+}
 
-      if (currentNodeIndex == arrayData.length - 1) {
-        this.$message.success(`字段已经是最后一个啦！`)
-        return
-      }
+.col {
+    margin-left: 20px;
+}
 
-      const exchangeRow = arrayData[currentNodeIndex + 1]
+.source-ctn {
+    width: 230px;
+    overflow: hidden;
+}
 
-      this.doTypeSortChange(currentNode.fdId, exchangeRow.fdSort, exchangeRow.fdId, currentNode.fdSort)
-    },
-    // 一键排序
-    sortTypeByIndex() {
-      const arrayData = convertToArrayData(this.typeTreeList)
-      const list = []
-      for (let i = 0; i < arrayData.length; i++) {
-        list.push({
-          fdId: arrayData[i].fdId,
-          fdSort: i + 1
-        })
-      }
-      this.$request({
-        url: '/apd/db/DevDbField/updateDbFieldTypeSortList',
-        method: 'post',
-        data: { list: JSON.stringify(list) }
-      }).then(response => {
-        this.$message.success(`排序成功！`)
-        this.$refs.popoverRef.doClose()
-        this.loadTreeData()
-      })
-    },
-    // dialog：保存类型数据
-    saveTable() {
-      this.$refs.dialogForm.validate((valid) => {
-        if (!valid) {
-          this.$message.error(`数据校验失败，请重新填写信息！`)
-          return false
-        }
-        if (this.isAddDialog) {
-          // 添加数据
-          this.$request({
-            url: '/apd/db/DevDbField/insertDbFieldType',
-            method: 'post',
-            data: this.dialogForm
-          }).then(response => {
-            this.$message.success(`添加成功！已添加${response.data}条数据！`)
-            this.dialogVisible = false
-            this.initTreeData()
-          })
-        } else {
-          // 更新数据
-          this.$request({
-            url: '/apd/db/DevDbField/updateDbFieldType',
-            method: 'post',
-            data: this.dialogForm
-          }).then(response => {
-            this.$message.success(`更新成功！已更新${response.data}条数据！`)
-            this.dialogVisible = false
-            this.initTreeData()
-          })
-        }
-      })
-    },
-    // 添加行：数据类型默认值
-    beforeAddFn() {
-      const fdFieldTypeIds = this.selectedFieldTypeIds
-      if (fdFieldTypeIds == null || fdFieldTypeIds == '') {
-        this.$message.error(`请先选择字段类型！`)
-        return false
-      }
-      return true
-    },
-    addDefaultValueFn() {
-      return this.getCurrentNode().fdId
-    },
-    checkSort() {
-      const selection = this.$refs.devDbFieldGrid.getSelection()
-      if (selection.length == 0) {
-        this.$message.error(`请选择需要操作的行！`)
-        return null
-      } else if (selection.length > 1) {
-        this.$message.error(`只能选择一行！`)
-        return null
-      }
-      return selection[0]
-    },
-    // 修改排序
-    doSortChange(rowFdId, rowFdSort, exchangeRowFdId, exchangeRowFdSort) {
-      this.$request({
-        url: '/apd/db/DevDbField/updateDbFieldSort',
-        method: 'post',
-        data: { rowFdId, rowFdSort, exchangeRowFdId, exchangeRowFdSort }
-      }).then(response => {
-        this.$message.success(`修改成功！`)
-        this.$refs.devDbFieldGrid.refresh()
-      })
-    },
-    // 排序调整：向上
-    sortBefore() {
-      const rowData = this.checkSort()
-      if (rowData == null) {
-        return
-      }
-      const dataIdx = rowData.dataIdx
-      if (dataIdx == 1) {
-        this.$message.success(`字段已经是第一个啦！`)
-        return
-      }
+.table-name {
+    font-weight: bold;
+    margin-left: 5px;
+}
 
-      const exchangeRow = this.tableOpt.data[dataIdx - 2]
+.operate-type {
+    width: 30px;
+    font-size: 13px;
+    padding: 3px;
+}
 
-      this.doSortChange(rowData.fdId, exchangeRow.fdSort, exchangeRow.fdId, rowData.fdSort)
-    },
-    // 排序调整：向下
-    sortAfter() {
-      const rowData = this.checkSort()
-      if (rowData == null) {
-        return
-      }
-      const dataIdx = rowData.dataIdx
-      if (dataIdx >= this.tableOpt.data.length) {
-        this.$message.success(`字段已经是最后一个啦！`)
-        return
-      }
-      const exchangeRow = this.tableOpt.data[dataIdx]
+.operate {
+    width: 25px;
+}
 
-      this.doSortChange(rowData.fdId, exchangeRow.fdSort, exchangeRow.fdId, rowData.fdSort)
-    },
-    doSortByIndex() {
-      const data = this.$refs.devDbFieldGrid.getData()
-      const list = []
-      for (let i = 0; i < data.length; i++) {
-        list.push({
-          fdId: data[i].fdId,
-          fdSort: data[i].dataIdx
-        })
-      }
-      this.$request({
-        url: '/apd/db/DevDbField/updateDbFieldSortList',
-        method: 'post',
-        data: { list: JSON.stringify(list) }
-      }).then(response => {
-        this.$message.success(`排序成功！`)
-        this.$refs.devDbFieldGrid.refresh()
-      })
-    },
-    searchEvent() {
-      this.$refs.devDbFieldGrid.refresh()
-    },
-    openHelp() {
-      const msg = `
-                <b>一、通用字段：</b><br>
-                1、标识类型(0、1)：放在【默认-标识】下。<br>
-                2、日期：放在【默认-日期】下。<br>
-                3、字符串、数字：放在【默认-常用】下。<br>
-                注意：只要是比较通用的字段，都应该放在【默认】的分类下。<br>
-                <b>二、特殊字段：</b><br>
-                1、字段是业务模块特有的，放在【业务】下的模块。如：固定资产编码fd_asset_type_code，应该放在固定资产下。<br>
-                `
-      this.$alert(msg, '字段规范说明', { dangerouslyUseHTMLString: true })
-    }
-  }
+.operate /deep/ .el-checkbox__label {
+    display: none;
 }
-</script>
 
-<style scoped>
+.new-table:hover {
+    cursor: pointer;
+}
+
+.sql-str /deep/ .el-textarea__inner {
+    width: 100%;
+    height: 100%;
+}
+</style>
+<style>
+.left-7 {
+    margin-left: 7px;
+}
+
+.dev-table-comment {
+    font-size: 13px;
+    margin-left: 10px;
+}
 </style>