<template>
    <ap-container>
        <ap-aside margin="1111" class="flex flex-direction-column template-aside" width="1000px">
            <div class="flex-1">
                <div class="ctn-title">
                    <span><i class="el-icon-mokuai4"/>&nbsp;&nbsp;前端</span>
                </div>
                <el-radio-group v-model="pageType" style="padding-left:5px;">
                    <el-radio :label="1">单表</el-radio>
                    <el-radio :label="2">多表</el-radio>
                </el-radio-group>
                <div class="ap-split-line"/>
                <el-form v-show="pageType == 1" ref="singleTableRef" :inline="true" class="ap-form template-form" style="padding-left: 10px"
                         :model="singleTableForm" :rules="singleTableFormRules" label-position="left" label-width="75px">
                    <div class="ap-form-row">
                        <el-form-item label="表名" prop="tableName">
                            <el-select v-model="singleTableForm.tableName" placeholder="请选择表" filterable class="template-select" @change="singleTableChangeEvent">
                                <el-option v-for="item in singleTableList" :key="item.tableSchema + '.' + item.tableName" :label="item.tableName + '  ' + item.tableComment" :value="item.tableSchema + '.' + item.tableName"/>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="ap-form-row">
                        <el-form-item label="显示列" prop="showColumns">
                            <el-select v-model="singleTableForm.showColumns" placeholder="请选择显示列" class="template-select" filterable multiple collapse-tags>
                                <el-option v-for="item in singleTableColumnList" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="ap-form-row">
                        <el-form-item label="搜索栏">
                            <el-switch v-model="singleTableForm.showHeader" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                        <el-form-item label="搜索字段" prop="headerSearchColumns">
                            <el-select v-model="singleTableForm.headerSearchColumns" placeholder="模糊匹配字段" class="template-select" filterable multiple collapse-tags>
                                <el-option v-for="item in singleTableColumnList" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="ap-form-row">
                        <el-form-item label="表单编辑" prop="isForm">
                            <el-switch v-model="singleTableForm.isForm" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                        <el-form-item label="表单字段" prop="formItems">
                            <el-select v-model="singleTableForm.formItems" placeholder="请选择表单内容" class="template-select" filterable multiple collapse-tags>
                                <el-option v-for="item in singleTableColumnList" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                            </el-select>
                        </el-form-item>
                    </div>


                </el-form>

                <el-form v-show="pageType == 2" ref="multiTableRef" :inline="true" class="ap-form template-form" :model="multiTableForm" :rules="multiTableFormRules" :inline-message="true" label-position="left" label-width="75px">
                    <div class="ap-form-row">
                        <el-form-item label="布局">
                            <el-radio-group v-model="multiTableForm.layoutType" style="width: 250px">
                                <el-radio label="t3">左侧树</el-radio>
                                <el-radio label="t4">左右</el-radio>
                                <el-radio label="t5">上下</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div class="ap-split-line"/>
                    </div>
                    <template v-if="multiTableForm.layoutType == 't3'">
                        <div class="ap-form-row">
                            <el-form-item label="左侧树" prop="tableNameA">
                                <el-select v-model="multiTableForm.tableNameA" placeholder="请选择表" class="template-select" filterable @change="multiTableChangeEvent">
                                    <el-option v-for="item in multiTableListA" :key="item.tableSchema + '.' + item.tableName" :label="item.tableName + '  ' + item.tableComment" :value="item.tableSchema + '.' + item.tableName"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="树显示值" prop="treeLabelA">
                                <el-select v-model="multiTableForm.treeLabelA" placeholder="树显示属性" class="template-select" filterable>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName2" :label="item.columnName2 + '  ' + item.columnComment" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="树-id" prop="treeIdKeyA">
                                <el-select v-model="multiTableForm.treeIdKeyA" placeholder="树id(唯一)" class="template-select" filterable>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName2" :label="item.columnName2" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="树-父id" prop="treeParentKeyA">
                                <el-select v-model="multiTableForm.treeParentKeyA" placeholder="树父id" class="template-select" filterable>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName2" :label="item.columnName2" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="多选">
                                <el-switch v-model="multiTableForm.isMultiSelectA" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="可编辑">
                                <el-switch v-model="multiTableForm.isEditA" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="表单字段" prop="showColumnsA">
                                <el-select v-model="multiTableForm.formItemsA" placeholder="请选择显示列" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-split-line"/>
                        <div class="ap-form-row">
                            <el-form-item label="右侧表" prop="tableNameB">
                                <el-select v-model="multiTableForm.tableNameB" placeholder="请选择表" class="template-select" filterable @change="multiTableChangeEvent">
                                    <el-option v-for="item in multiTableListB" :key="item.tableSchema + '.' + item.tableName" :label="item.tableName + '  ' + item.tableComment" :value="item.tableSchema + '.' + item.tableName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="显示列" prop="showColumnsB">
                                <el-select v-model="multiTableForm.showColumnsB" placeholder="请选择显示列" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="搜索栏">
                                <el-switch v-model="multiTableForm.showHeaderB" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="搜索字段" prop="headerSearchColumnsB">
                                <el-select v-model="multiTableForm.headerSearchColumnsB" placeholder="模糊匹配字段" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="表单编辑">
                                <el-switch v-model="multiTableForm.isFormB" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="表单字段" prop="formItemsB">
                                <el-select v-model="multiTableForm.formItemsB" placeholder="请选择表单内容" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                    </template>
                    <template v-if="multiTableForm.layoutType == 't4'|| multiTableForm.layoutType == 't5'">
                        <div class="ap-form-row">
                            <el-form-item label="左侧表" prop="tableNameA">
                                <el-select v-model="multiTableForm.tableNameA" placeholder="请选择表" class="template-select" filterable @change="multiTableChangeEvent">
                                    <el-option v-for="item in multiTableListA" :key="item.tableSchema + '.' + item.tableName" :label="item.tableSchema + '.' + item.tableName + '  ' + item.tableComment" :value="item.tableSchema + '.' + item.tableName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="显示列" prop="showColumnsA">
                                <el-select v-model="multiTableForm.showColumnsA" placeholder="请选择显示列" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="搜索栏">
                                <el-switch v-model="multiTableForm.showHeaderA" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="搜索字段" prop="headerSearchColumnsA">
                                <el-select v-model="multiTableForm.headerSearchColumnsA" placeholder="模糊匹配字段" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="表单编辑" prop="isFormA">
                                <el-switch v-model="multiTableForm.isFormA" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="表单字段" prop="formItemsA">
                                <el-select v-model="multiTableForm.formItemsA" placeholder="请选择表单内容" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-split-line"/>
                        <div class="ap-form-row">
                            <el-form-item label="右侧表" prop="tableNameB">
                                <el-select v-model="multiTableForm.tableNameB" placeholder="请选择表" class="template-select" filterable @change="multiTableChangeEvent">
                                    <el-option v-for="item in multiTableListB" :key="item.tableSchema + '.' + item.tableName" :label="item.tableSchema + '.' + item.tableName + '  ' + item.tableComment" :value="item.tableSchema + '.' + item.tableName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="显示列" prop="showColumnsB">
                                <el-select v-model="multiTableForm.showColumnsB" placeholder="请选择显示列" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="ap-form-row">
                            <el-form-item label="表单编辑">
                                <el-switch v-model="multiTableForm.isFormB" :active-value="1" :inactive-value="0"/>
                            </el-form-item>
                            <el-form-item label="表单字段" prop="formItemsB">
                                <el-select v-model="multiTableForm.formItemsB" placeholder="请选择表单内容" class="template-select" filterable multiple collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName"/>
                                </el-select>
                            </el-form-item>
                        </div>
                    </template>
                    <template v-if="multiTableForm.layoutType == 't3'|| multiTableForm.layoutType == 't4'|| multiTableForm.layoutType == 't5'">
                    <div class="ap-split-line"/>
                        <div class="ap-form-row">
                            <el-form-item label="联动ID-左" prop="linkA">
                                <el-select v-model="multiTableForm.linkA" placeholder="左侧选择值" class="template-select" filterable collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName2" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="联动-显示" prop="linkNameA">
                                <el-select v-model="multiTableForm.linkNameA" placeholder="左侧显示值" class="template-select" filterable collapse-tags>
                                    <el-option v-for="item in multiTableColumnListA" :key="item.columnName2" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="联动ID-右" prop="linkB">
                                <el-select v-model="multiTableForm.linkB" placeholder="右侧联动值" class="template-select" filterable collapse-tags>
                                    <el-option v-for="item in multiTableColumnListB" :key="item.columnName2" :label="item.columnName + '  ' + item.columnComment" :value="item.columnName2"/>
                                </el-select>
                            </el-form-item>
                        </div>
                    </template>

                </el-form>

            </div>
            <div class="ap-split-line" style="height: 5px;background-color: #e9ecf1;"/>
            <div style="height: 150px;">
                <div class="ctn-title">
                    <span><i class="el-icon-mokuai4"/>&nbsp;&nbsp;后台</span>
                </div>
                <div class="item-ctn title-span flex-justify-start">
                    <span>后台表：</span>
                    <el-checkbox-group v-show="pageType == 1" v-model="singleTableCheckbox">
                        <el-checkbox v-if="singleTableForm.tableName" :label="singleTableForm.tableName">{{ singleTableForm.tableName }}</el-checkbox>
                    </el-checkbox-group>
                    <el-checkbox-group v-show="pageType == 2" v-model="multiTableCheckbox">
                        <el-checkbox v-if="multiTableForm.tableNameA" :label="multiTableForm.tableNameA">{{ multiTableForm.tableNameA }}</el-checkbox>
                        <el-checkbox v-if="multiTableForm.tableNameB" :label="multiTableForm.tableNameB">{{ multiTableForm.tableNameB }}</el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="item-ctn title-span flex-justify-start">
                    <span>生成内容：</span>
                    <div class="create-item-span">entity：</div>
                    <el-switch v-model="createEntity" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">entityFD：</div>
                    <el-switch v-model="createEntityFD" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">entityTF：</div>
                    <el-switch v-model="createEntityTF" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">controller：</div>
                    <el-switch v-model="createController" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">service：</div>
                    <el-switch v-model="createService" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">dao：</div>
                    <el-switch v-model="createDao" :active-value="1" :inactive-value="0"/>
                    <div class="create-item-span">xml：</div>
                    <el-switch v-model="createXml" :active-value="1" :inactive-value="0"/>
                </div>

                <div class="item-ctn">
                    <div class="title-span flex-justify-start">

                    </div>
                </div>
            </div>
        </ap-aside>
        <ap-main margin="1110" class="flex-col">
            <div class="flex-justify-start">
                <div style="width: 50%">
                    <div>
                        <span>后端访问地址(请求代码生成)：</span>
                        <span class="ap-color-red">{{ userConfig.fdJavaHref }}</span>
                    </div>
                    <div>
                        <span>后端项目路径(生成文件)：</span>
                        <span class="ap-color-red">{{ userConfig.fdJavaPath }}</span>
                    </div>
                    <div>
                        <span>前端项目路径(生成文件)：</span>
                        <span class="ap-color-red">{{ userConfig.fdVuePath }}</span>
                    </div>
                </div>

                <div class="flex-1 flex flex-center" style="margin-bottom: 5px;border-left: 2px solid #e9ecf1;">
                    <el-button type="primary" icon="el-icon-magic-stick" circle style="padding: 15px;font-size: 30px;" @click="generateAllCode"/>
                </div>
            </div>
            <div class="ap-split-line"/>
            <div style="color: #1890ff;height: 150px;overflow: auto">
                <div class="ctn-title" style="color: #ffba00;">
                    <span><i class="el-icon-info"/>&nbsp;&nbsp;提示信息</span>
                </div>
                <div v-html="vueMsg" style="font-size: 14px;" class="ap-color-green"/>
                <div v-html="backgroundMsg" style="font-size: 14px;"/>
            </div>
            <div class="ap-split-line" style="height: 5px;background-color: #e9ecf1;"/>
            <div class="flex-1 template-content" v-loading="iframeLoading">
                <iframe v-if="showIframe" id="iframeId" :src="userConfig.fdVueHref + 'GeneratorPage?comp=' + currentVueComp"
                        style="width: 100%;height: 100%;border: 0px;vertical-align: top;">
                </iframe>
            </div>
        </ap-main>
    </ap-container>
</template>

<script>
import {getLocalData, setLocalData} from './../dev/DevUtil'
import BackgroundBase from './../BackgroundPanel/BackgroundBase.vue'

export default {
    name: 'TemplatePanel',
    extends: BackgroundBase,
    data() {
        return {
            iframeLoading: true,
            showIframe: true,
            // -------- 通用 --------
            pageType: 1,
            currentVueComp: getLocalData('currentComp').name,
            vueMsg: "",
            isTableNameFirstLoad: true,
            isTableNameAFirstLoad: true,
            isTableNameBFirstLoad: true,
            // -------- 单表 --------
            singleTableList: [],
            singleTableColumnList: [],
            singleTableForm: {
                layoutType: 't1',
                tableName: '',
                showColumns: '',
                formItems: '',
                headerSearchColumns: '',
                isForm: 0,
                showHeader: 1
            },
            singleTableFormRules: {
                tableName: [{required: true, message: '请选择表', trigger: 'blur'}],
                showColumns: [{required: true, message: '请选择需要显示的列', trigger: 'blur'}]
            },
            // -------- 多表 --------
            multiTableListA: [],
            multiTableColumnListA: [],
            multiTableListB: [],
            multiTableColumnListB: [],
            multiTableForm: {
                layoutType: 't3',
                tableNameA: '',
                showColumnsA: '',
                treeIdKeyA: '',
                treeLabelA: '',
                treeParentKeyA: '',
                isMultiSelectA: 1,
                isEditA: 1,
                showHeaderA: 1,
                headerSearchColumnsA: '',
                isFormA: 0,
                linkA: '',
                linkNameA: '',
                formItemsA: '',

                tableNameB: '',
                showColumnsB: '',
                formItemsB: '',
                showHeaderB: 1,
                headerSearchColumnsB: '',
                isFormB: 0,
                linkB: ''
            },
            multiTableFormRules: {
                tableNameA: [{required: true, message: '必填', trigger: 'blur'}],
                linkA: [{required: true, message: '必填', trigger: 'blur'}],
                linkNameA: [{required: true, message: '必填', trigger: 'blur'}],
                treeLabelA: [{required: true, message: '必填', trigger: 'blur'}],
                treeIdKeyA: [{required: true, message: '必填', trigger: 'blur'}],
                tableNameB: [{required: true, message: '必填', trigger: 'blur'}],
                linkB: [{required: true, message: '必填', trigger: 'blur'}],
                showColumnsB: [{required: true, message: '必填', trigger: 'blur'}],
            },
            singleTableCheckbox: [],
            multiTableCheckbox: [],
        }
    },
    watch: {
        'singleTableForm.tableName'(value) {
            this.initTableColumnList(this.singleTableForm.tableName, 'singleTableColumnList');
            if (!this.isTableNameFirstLoad) {
                this.singleTableForm.showColumns = ''
                this.singleTableForm.formItems = ''
                this.singleTableForm.headerSearchColumns = ''
            }
            this.isTableNameFirstLoad = false
        },
        'multiTableForm.tableNameA'(value) {
            this.multiTableForm.treeIdKeyA = "";
            this.multiTableForm.treeParentKeyA = "";
            this.initTableColumnList(this.multiTableForm.tableNameA, 'multiTableColumnListA').then(() => {
                // 判断列是否有fdId,设定树id的默认值
                if (this.hasCol(this.multiTableColumnListA, "fdId")) {
                    this.multiTableForm.treeIdKeyA = "fdId";
                }
                // 判断列是否有fdParentId,设定树父id的默认值
                if (this.hasCol(this.multiTableColumnListA, "fdParentId")) {
                    this.multiTableForm.treeParentKeyA = "fdParentId";
                }
                // 判断列是否有fdParentId,设定树父id的默认值
                if (this.hasCol(this.multiTableColumnListA, "fdName")) {
                    this.multiTableForm.treeLabelA = "fdName";
                } else {
                    // 存在name的类似列
                    this.multiTableForm.treeLabelA = this.likeCol(this.multiTableColumnListA, "name");
                }
            })
            if (!this.isTableNameAFirstLoad) {
                this.multiTableForm.showColumnsA = ''
                this.multiTableForm.headerSearchColumnsA = ''
                this.multiTableForm.headerSearchColumnsB = ''
            }
            this.isTableNameAFirstLoad = false
        },
        'multiTableForm.tableNameB'(value) {
            this.initTableColumnList(this.multiTableForm.tableNameB, 'multiTableColumnListB')
            if (!this.isTableNameBFirstLoad) {
                this.multiTableForm.showColumnsB = ''
                this.multiTableForm.formItemsB = ''
            }
            this.isTableNameBFirstLoad = false
        }
    },
    created() {
        this.initTableList()
        // todo 临时测试注释
        this.currentVueComp = this.initDefaultData('currentComp', getLocalData('currentComp').name)
        this.singleTableForm = this.initDefaultData('singleTableForm', getLocalData('singleTableForm'))
        this.multiTableForm = this.initDefaultData('multiTableForm', getLocalData('multiTableForm'))
    },
    mounted() {
        this.addIframeOnload();
    },
    methods: {
        addIframeOnload() {
            const iframe = document.querySelector('#iframeId')
            // 处理兼容行问题
            if (iframe.attachEvent) {
                iframe.attachEvent('onload', () => {
                    this.iframeLoading = false;
                    console.log("模版加载完成");
                })
            } else {
                iframe.onload = () => {
                    this.iframeLoading = false;
                    console.log("模版加载完成");
                }
            }
        },
        singleTableChangeEvent() {
            this.singleTableCheckbox = [];
        },
        multiTableChangeEvent() {
            this.multiTableCheckbox = [];
        },
        // 判断是否存在列:驼峰
        hasCol(list, col) {
            for (let i = 0; i < list.length; i++) {
                if (list[i].columnName2 == col) {
                    return true;
                }
            }
            return false;
        },
        // 判断是否存在类似的列
        likeCol(list, col) {
            for (let i = 0; i < list.length; i++) {
                if (list[i].columnName2.toLowerCase().includes(col.toLowerCase())) {
                    return list[i].columnName2;
                }
            }
            return "";
        },
        // 设定默认参数
        initDefaultData(formName, localData) {
            if (localData == null || localData == '') {
                return this[formName]
            }
            for (const key in this[formName]) {
                let hasKey = false
                for (const oldKey in localData) {
                    if (oldKey == key) {
                        if (localData[key] == null) {
                            localData[key] = this[formName][key]
                        }
                        hasKey = true
                        break
                    }
                }
                if (!hasKey) {
                    localData[key] = this[formName][key]
                }
            }

            return localData
        },
        splitTableStr(tableInfo) {
            if (tableInfo == null || tableInfo.length < 1) {
                return {}
            }
            const arr = tableInfo.split('.')
            return {
                tableSchema: arr[0],
                tableName: arr[1]
            }
        },
        // 表格下拉列表
        initTableList() {
            this.$request({
                url: '/apd/db/DevDbTable/getTableSelect',
                method: 'post',
                data: {
                    sourceId: this.userConfig.fdSourceId
                }
            }).then(response => {
                this.singleTableList = response.data;
                this.multiTableListA = response.data;
                this.multiTableListB = response.data;
            })
        },
        // 表格列下拉列表
        initTableColumnList(tableInfo, prop) {
            return new Promise((resolve, reject) => {
                const tableObj = this.splitTableStr(tableInfo)
                this.$request({
                    url: '/apd/db/DevDbTable/getTableColumns',
                    method: 'post',
                    data: {
                        tableSchema: tableObj.tableSchema,
                        tableName: tableObj.tableName,
                        sourceId: this.userConfig.fdSourceId
                    }
                }).then(response => {
                    this[prop] = response.data
                }).finally(() => {
                    resolve()
                })
            })
        },
        // 代码生成入口
        generateAllCode() {
            // 前端代码生成
            const vueUrl = this.userConfig.fdVuePath
            const projectName = this.userConfig.fdJavaHref
            if (vueUrl == null || vueUrl == '' || projectName == null || projectName == '') {
                this.$message.error('请先配置共通参数。【顶栏】->【配置】')
                return
            }
            let ref = "";
            let tableCheckbox = [];
            if (this.pageType == 1) {
                ref = "singleTableRef";
                tableCheckbox = this.singleTableCheckbox;
            } else {
                ref = "multiTableRef";
                tableCheckbox = this.multiTableCheckbox;
            }

            this.$refs[ref].validate((valid) => {
                if (!valid) {
                    return false
                }
                if (tableCheckbox.length > 0) {
                    // 后端代码校验
                    const javaUrl = this.userConfig.fdJavaPath
                    if (javaUrl == null || javaUrl == '') {
                        this.$message.error('请先配置共通参数。【顶栏】->【配置】')
                        return
                    }
                    console.log(tableCheckbox);
                    this.$confirm(`确定在【${javaUrl}】下生成后台文件?`, '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        // 后端代码生成
                        this.selectedTables = [];
                        for (let i = 0; i < tableCheckbox.length; i++) {
                            let arr = tableCheckbox[i].split(".");
                            this.selectedTables.push({
                                tableName: arr[1],
                                tableSchema: arr[0]
                            })
                        }
                        // 前端代码生成
                        if (this.pageType == 1) {
                            this.generateSingleTable();
                        } else {
                            this.generateMultiTable();
                        }
                        this.doGenerateCode();
                    });
                } else {
                    this.$confirm(`确定只生成前端文件,不生成后台文件?`, '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        // 前端代码生成
                        if (this.pageType == 1) {
                            this.generateSingleTable();
                        } else {
                            this.generateMultiTable();
                        }
                    });
                }
            })
        },
        createVueFile(projectName, list) {
            this.showIframe = false;
            this.iframeLoading = true;
            this.$request({
                url: '/apd/dev/DevGenerateCode/createFile',
                method: 'post',
                data: {
                    list: JSON.stringify(list),
                    projectName: projectName
                }
            }).then(response => {
                const msg = response.data
                // 重置
                this.currentVueComp = msg.split('.vue')[0]
                setLocalData('currentComp', {name: this.currentVueComp})
                this.vueMsg = msg;
                console.log('当前组件：' + this.currentVueComp)
                this.showIframe = true;
                this.$nextTick(() => {
                    this.addIframeOnload(iframeId);
                })

                this.$message.success("前端 " + msg.replace(/<br>/g, ''))
            })
        },
        // 生成请求
        doCreateVueCode(params) {
            // 共通参数
            params.vueUrl = this.userConfig.fdVuePath
            params.projectName = this.userConfig.fdJavaHref

            const tableObj = this.splitTableStr(params.tableName)
            params.tableSchema = tableObj.tableSchema
            params.tableName = tableObj.tableName
            const tableObjA = this.splitTableStr(params.tableNameA)
            params.tableSchemaA = tableObjA.tableSchema
            params.tableNameA = tableObjA.tableName
            const tableObjB = this.splitTableStr(params.tableNameB)
            params.tableSchemaB = tableObjB.tableSchema
            params.tableNameB = tableObjB.tableName
            params.sourceId = this.userConfig.fdSourceId;
            // 后台代码生成参数
            params.isTemplate = true;
            this.backgroundOtherParam = params;
            console.log(params);
            this.$request({
                url: '/apd/dev/DevGenerateCode/getVueCode',
                method: 'post',
                data: params
            }).then(response => {
                // 生成文件
                this.createVueFile(params.projectName, response.data)
            })
        },
        // 单表生成
        generateSingleTable() {
            setLocalData('singleTableForm', this.singleTableForm)

            // 默认表单一致
            const params = JSON.parse(JSON.stringify(this.singleTableForm));
            params.showColumns = (this.singleTableForm.showColumns || []).join();
            params.formItems = (this.singleTableForm.formItems || []).join();
            params.headerSearchColumns = (this.singleTableForm.headerSearchColumns || []).join();
            if (params.layoutType == 't1') {
                params.createVueType = 'vueA'
            }
            this.doCreateVueCode(params)
        },
        // 多表生成
        generateMultiTable() {
            setLocalData('multiTableForm', this.multiTableForm)

            // 默认表单一致
            const params = JSON.parse(JSON.stringify(this.multiTableForm))
            params.showColumnsA = (this.multiTableForm.showColumnsA || []).join();
            params.formItemsA = (this.multiTableForm.formItemsA || []).join();
            params.headerSearchColumnsA = (this.multiTableForm.headerSearchColumnsA || []).join();

            params.showColumnsB = this.multiTableForm.showColumnsB.join()
            params.formItemsB = (this.multiTableForm.formItemsB || []).join();
            params.headerSearchColumnsB =  (this.multiTableForm.headerSearchColumnsB || []).join();

            // 左侧树
            if (params.layoutType == 't3') {
                params.createVueType = 'vueB'
            }
            // 上下/左右
            if (params.layoutType == 't4' || params.layoutType == 't5') {
                params.createVueType = 'vueC'
            }
            params.isVertical = params.layoutType == 't5' ? 1 : 0;
            console.log(params.createVueType);
            this.doCreateVueCode(params)
        }
    }

}
</script>

<style scoped>
.ctn-title {
    padding: 10px 0 10px 0;
    line-height: 20px;
    color: #497fd5;
    font-size: 15px;
    font-weight: bold;
}

.template-content {
    border: 2px solid #3d76d3;
    background-color: #e9ecf1;
    padding: 0px;
}

.template-aside {
    margin: 0px;
    width: 270px;
    padding: 0px 5px;
}

.template-aside .el-form-item {
    margin-bottom: 5px;
}

.template-input {
    //width: 140px;
}

.template-select {
    //width: 200px;
}

.ap-split-line {
    background-color: #f0f1f2;
}

.create-item {
    padding: 5px;
    float: left;
}

.create-item-span {
    margin-left: 10px;
    font-weight: normal;
}

.item-ctn {
    line-height: 28px;
}

.title-span {
    font-size: 14px;
    font-weight: bold;
}

.template-form {
    padding-left: 15px;
}

.template-form /deep/ .el-form-item__content {
    width: 140px;
}

.template-form /deep/ .el-form-item__label {
    padding: 0;
}

.template-form /deep/ .el-form-item {
    margin-right: 20px;
}

.template-form /deep/ .el-select__tags {
    flex-wrap: nowrap !important; /* 禁止标签换行 */
    overflow-x: auto !important; /* 允许横向滚动 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    white-space: nowrap;
}

.template-form /deep/ .el-select__tags-text {
    display: inline-block;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.template-form /deep/ .el-tag__close {
    display: none;
}
</style>
