ap-dev 1.2.12 → 1.2.14

package/dev/ConfigPanel/DevCpt.vue

@@ -0,0 +1,1028 @@
+<template>
+    <ap-container>
+        <ap-aside margin="1111" width="230px">
+            <ap-aside-tree ref="cptTree" :options.sync="treeOptions">
+                <el-form slot="form" ref="tDevCpt" :inline="true" label-width="80px"
+                         :model="tDevCptForm" :rules="tDevCptRules" class="ap-form">
+                    <div class="ap-form-row">
+                        <el-form-item label="父节点" prop='fdParentId'>
+                            <el-select v-model="tDevCptForm.fdParentId" filterable placeholder="请选择父节点">
+                                <el-option label="无" value=""/>
+                                <el-option
+                                    v-for="item in parentList"
+                                    :key="item.fdId"
+                                    :label="item.fdName"
+                                    :value="item.fdId"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div class="ap-form-row">
+                        <el-form-item label='节点类型' prop='fdType'>
+                            <el-select v-model="tDevCptForm.fdType" filterable placeholder="请选择类型">
+                                <el-option key="1" label="Tab" :value=1></el-option>
+                                <el-option key="2" label="组件分组" :value=2></el-option>
+                                <el-option key="3" label="组件" :value=3></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label='语言' prop='fdLanguage'>
+                            <el-select v-model="tDevCptForm.fdLanguage" filterable placeholder="请选择语言">
+                                <el-option key="vue" label="vue" value="vue"></el-option>
+                                <el-option key="java" label="java" value="java"></el-option>
+                                <el-option key="abap" label="abap" value="abap"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div class="ap-form-row">
+                        <el-form-item label='名称' prop='fdName'>
+                            <el-input v-model='tDevCptForm.fdName'></el-input>
+                        </el-form-item>
+                        <el-form-item label='备注' prop='fdRemark'>
+                            <el-input v-model='tDevCptForm.fdRemark'></el-input>
+                        </el-form-item>
+                    </div>
+                    <el-form-item label='编码' prop='fdCode' v-if="tDevCptForm.fdType == 3">
+                        <el-input v-model='tDevCptForm.fdCode'></el-input>
+                    </el-form-item>
+                    <el-form-item label='基础模板' prop='fdBaseId' v-if="tDevCptForm.fdType == 3">
+                        <el-select v-model="tDevCptForm.fdBaseId" filterable placeholder="请选择基础模板">
+                            <el-option label="无" value=""/>
+                            <el-option
+                                v-for="item in cptBaseList"
+                                :key="item.fdId"
+                                :label="item.fdName"
+                                :value="item.fdId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='图标' prop='fdIcon' v-if="tDevCptForm.fdType == 3">
+                        <el-input v-model='tDevCptForm.fdIcon'></el-input>
+                    </el-form-item>
+                    <el-form-item label='排序' prop='fdSort'>
+                        <el-input v-model='tDevCptForm.fdSort'></el-input>
+                    </el-form-item>
+                </el-form>
+                <span slot="tree" slot-scope="scope"
+                      :style="scope.data.fdType == 3 ? 'color: #1682e6;font-size: 14px;':''">
+                    <i :class="scope.data.fdIcon"/>
+                    {{ scope.data.fdName }}
+                </span>
+            </ap-aside-tree>
+        </ap-aside>
+        <ap-split-panel></ap-split-panel>
+        <ap-container>
+            <ap-header margin="1110" height="30%">
+                <ap-table ref="tDevCptTemplateTableRef" :options.sync="tDevCptTemplateTable">
+                    <template #slotTemplate="searchProps">
+                        <el-input v-model="searchProps.rowData.fdTemplate" type="textarea" :rows=10></el-input>
+                    </template>
+                    <template #slotDefault="searchProps">
+                        <el-input v-model="searchProps.rowData.fdDefault" type="textarea" :rows=10></el-input>
+                    </template>
+                </ap-table>
+            </ap-header>
+            <ap-container>
+                <ap-header margin="0110" height="50%">
+                    <ap-table ref="tDevCptParamTableRef" :options.sync="tDevCptParamTable">
+                        <template #slotOption="searchProps">
+                            <el-input v-model="searchProps.rowData.fdOption" type="textarea" :rows=5></el-input>
+                            <span
+                                style="color: #909399;">注1: 数组格式 [{label:"名字1", value:"值1"},{label:"名字2", value:"值2"}]</span><br>
+                            <span style="color: #909399;">注2: 对象格式 {attr1:"属性1", attr2:"属性2"}</span><br>
+                        </template>
+                    </ap-table>
+                </ap-header>
+                <ap-main margin="0110">
+                    <ap-table ref="tDevCptParamTemplateTableRef" :options.sync="tDevCptParamTemplateTable">
+                        <template #slotTemplate="searchProps">
+<!--                            <el-input v-model="searchProps.rowData.fdTemplate" type="textarea" :rows=10></el-input>-->
+                            <cpt-template v-model="searchProps.rowData.fdTemplate" :cptId="selectedCptId"></cpt-template>
+                        </template>
+                        <template #slotDefault="searchProps">
+                            <el-input v-model="searchProps.rowData.fdDefault" type="textarea" :rows=10></el-input>
+                        </template>
+                    </ap-table>
+                </ap-main>
+            </ap-container>
+        </ap-container>
+        <el-dialog
+            title="提示"
+            :visible.sync="showCopyDialog"
+            width="30%">
+            <span>复制参数、复制参数模板</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="doCopyParam()">仅复制参数</el-button>
+                <el-button type="primary" @click="doCopyParam('1')">复制参数和参数模板</el-button>
+              </span>
+        </el-dialog>
+        <el-dialog
+            title="参数脚本"
+            :visible.sync="showJsCodeDialog"
+            width="1500px">
+            <div style="width: 100%;height: 450px" class="flex-justify-start">
+                <div style="width: 400px;height: 100%">
+                    <ap-aside-tree ref="cptParamTreeRef" :options.sync="cptParamTreeOptions">
+                        <div slot="tree" slot-scope="scope" class="flex-justify-between" style="width: 100%">
+                            <div>
+                                <span @click="copyText(scope.data.fdName, $event)">{{ scope.data.fdName }} </span>
+                                <span class="ap-color-blue"
+                                      @click="copyParamValue(scope.data.fdCode, $event)">{{ scope.data.fdCode }}</span>
+                            </div>
+                            <div style="margin-right: 10px">
+                                <div class="ap-tag" style="font-size: 12px;padding: 2px 5px;"
+                                     @click="insertScript(scope.data)">
+                                    <span v-if="scope.data.fdShowType == 2">开</span>
+                                    <span v-else>不为空</span>
+                                </div>
+                            </div>
+                        </div>
+                    </ap-aside-tree>
+                </div>
+                <div class="flex-1" style="height: 100%;margin-left: 15px">
+                    <ap-table ref="tDevCptScriptRef" :options.sync="tDevCptScriptOpt"></ap-table>
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="showJsCodeDialog = false">取 消</el-button>
+              </span>
+        </el-dialog>
+        <el-dialog
+            title="参数编码/参数名称 批量更新"
+            :visible.sync="showHandleCptCodeDialog"
+            width="700px">
+            <el-form :model="replaceForm" label-width="100px" :inline="true" class="ap-form">
+                <div class="ap-form-row">
+                    <el-form-item label='旧参数名称' prop='oldName'>
+                        <el-input v-model='replaceForm.oldName'></el-input>
+                    </el-form-item>
+                    <el-form-item label='新参数名称' prop='newName'>
+                        <el-input v-model='replaceForm.newName'></el-input>
+                    </el-form-item>
+                </div>
+                <div class="ap-form-row">
+                    <el-form-item label='旧参数编码' prop='oldCode'>
+                        <el-input v-model='replaceForm.oldCode'></el-input>
+                    </el-form-item>
+                    <el-form-item label='新参数编码' prop='newCode'>
+                        <el-input v-model='replaceForm.newCode'></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="showHandleCptCodeDialog = false">取 消</el-button>
+                <el-button type="primary" @click="replaceCptNameAndCode">确认替换</el-button>
+              </span>
+        </el-dialog>
+    </ap-container>
+</template>
+
+<script>
+import clipboard from 'ap-util/util/ClipboardUtil'
+import CptTemplate from './CptTemplate'
+
+export default {
+    name: 'DevCpt',
+    components: {
+        CptTemplate
+    },
+    data() {
+
+        return {
+            // ----- 左侧树 -----
+            treeOptions: this.getTreeOption(),
+            parentList: [],
+            cptBaseList: [],
+            tDevCptForm: {},
+            tDevCptRules: {},
+            selectedCptId: "",
+            selectedCpt: {},
+            // ----- 右侧 -----
+            tDevCptTemplateTable: this.getCptTemplateTableOption(),
+            tDevCptParamTable: this.getCptParamTableOption(),
+            tDevCptParamTemplateTable: this.getCptParamTemplateTableOption(),
+            selectedParam: "",
+            template: "",
+            optionType: "",
+            showCopyDialog: false,
+            showHandleCptCodeDialog: false,
+            showJsCodeDialog: false,
+            replaceForm: {
+                oldName: "",
+                newName: "",
+                oldCode: "",
+                newCode: "",
+            },
+            cptParamTreeOptions: this.getCptParamTreeOptions(),
+            isErrorScript: "0",
+            tDevCptScriptOpt: this.getDevCptScriptOpt(),
+            insertScriptId: ""
+        }
+    },
+    mounted() {
+        this.getCptList();
+        this.getCptBaseList();
+    },
+    methods: {
+        // 左侧树：配置
+        getTreeOption() {
+            let treeOptions = {
+                title: "组件",
+                dialogWidth: "700px",
+                toolbarBtn: [{
+                    icon: "el-icon-copy", onClick: () => {
+                        this.copyCpt();
+                    }
+                }, {
+                    icon: "el-icon-bug", onClick: () => {
+                        this.clearCpt();
+                    }
+                }, "add", "edit", "del", "sort"],
+                dialogTitle: "组件信息",
+                sortByDrag: true,
+                onClick: (data, node, comp) => {
+                    this.selectedCptId = data.fdId;
+                    this.selectedCpt = data;
+                    this.selectedParam = "";
+                    this.$refs.tDevCptParamTableRef.refresh();
+                    this.$refs.tDevCptTemplateTableRef.refresh();
+                    this.$refs.tDevCptParamTemplateTableRef.refresh();
+                },
+                loadOptions: {
+                    url: "/apd/TDevCpt/getCptList",
+                    treeKey: {
+                        idKey: "fdId",
+                        parentKey: "fdParentId",
+                        childrenKey: "children",
+                        label: "fdName"
+                    },
+                    success: (response) => {
+                    },
+                },
+                editOptions: {
+                    url: "/apd/TDevCpt/getTDevCptByFdId",
+                    data: (node) => {
+                        return {
+                            fdId: node.fdId
+                        }
+                    },
+                    success: (response) => {
+                        this.tDevCptForm = response.data;
+                    },
+                    error() {
+                    },
+                },
+                insertUrl: "/apd/TDevCpt/insertTDevCpt",
+                insertData: () => {
+                    return this.tDevCptForm
+                },
+                updateUrl: "/apd/TDevCpt/updateTDevCpt",
+                updateData: () => {
+                    return this.tDevCptForm
+                },
+                deleteUrl: "/apd/TDevCpt/deleteTDevCptByFdId",
+                deleteData: (node) => {
+                    return {
+                        fdId: node.fdId
+                    }
+                },
+                updateSortUrl: '/apd/TDevCpt/updateTDevCptSort',
+                updateSortListUrl: '/apd/TDevCpt/updateTDevCptSortList',
+                sortByDrag: true,
+                resetForm: () => {
+                    this.tDevCptForm = {
+                        fdName: '',
+                        fdType: '',
+                        fdCode: '',
+                        fdParentId: '',
+                        fdBaseId: '',
+                        fdLanguage: '',
+                        fdIcon: '',
+                        fdRemark: '',
+                        fdSort: '',
+                    };
+                },
+                afterOpenAddDialog: (node) => {
+                },
+            };
+
+            return treeOptions;
+        },
+        getCptList() {
+            this.$request({
+                url: '/apd/TDevCpt/getCptList',
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.parentList = response.data
+            })
+        },
+        getCptBaseList() {
+            this.$request({
+                url: '/apd/TDevCptBase/getTDevCptBaseList',
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.cptBaseList = response.data
+            })
+        },
+        // 右侧：组件模板表格
+        getCptTemplateTableOption() {
+            let tDevCptTemplateCols = [
+                {
+                    prop: 'fdCptId',
+                    label: '所属组件',
+                    type: "select",
+                    selectOptionsRemote: "cptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    width: '80',
+                    addDefaultValue: () => {
+                        return this.selectedCptId;
+                    }
+                }, {
+                    prop: 'fdParamName',
+                    label: '参数名',
+                    type: 'input',
+                    width: '90',
+                }, {
+                    prop: 'fdTemplate',
+                    label: '组件模板',
+                    minWidth: '130',
+                    type: "search",
+                    searchTitle: "模板编辑",
+                    searchSlot: 'slotTemplate',
+                    searchConfirm: (row) => {
+                        return true
+                    },
+                    searchClear: (row) => {
+                        row.fdTemplate = '';
+                        return true;
+                    },
+                    html: (value, row) => {
+                        return this.handleTemplateHtml(value);
+                    },
+                    help: `1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>
+2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>`
+                }, {
+                    prop: 'fdAddScriptId',
+                    label: '模板添加脚本',
+                    width: '150',
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.addScript}'>${text}</span>`
+                    },
+                }, {
+                    prop: 'fdDefault',
+                    label: '默认模板',
+                    minWidth: '70',
+                    type: "search",
+                    searchTitle: "模板编辑",
+                    searchSlot: 'slotDefault',
+                    searchConfirm: (row) => {
+                        return true
+                    },
+                    searchClear: (row) => {
+                        row.fdDefault = '';
+                        return true;
+                    },
+                }, {
+                    prop: 'fdDefaultScriptId',
+                    label: '默认模板使用脚本',
+                    width: '150',
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.defaultScript}'>${text}</span>`
+                    }
+                }, {
+                    prop: 'fdLeftSpace',
+                    label: '左侧空格',
+                    type: 'input',
+                    width: '60',
+                }, {
+                    prop: 'fdSort',
+                    label: '排序',
+                    type: 'input',
+                    width: '60',
+                },
+            ];
+            let tDevCptTemplateTable = {
+                title: "组件模板",
+                columns: tDevCptTemplateCols,
+                dataUrl: "/apd/TDevCptTemplate/getTDevCptTemplateGridList",
+                saveUrl: "/apd/TDevCptTemplate/saveTDevCptTemplateGridData",
+                editPk: "fdId", //默认fdId
+                deletePk: "fdId", // 默认fdId
+                deleteUrl: "/apd/TDevCptTemplate/deleteTDevCptTemplateGridData",
+                toolbarBtn: [{
+                    btnType: "primary", text: "脚本", icon: "el-icon-collection-tag", onClick: () => {
+                        if (this.selectedCptId == null || this.selectedCptId == "") {
+                            this.$message.error("请选择组件");
+                            return;
+                        }
+                        if (this.$refs.tDevCptParamTableRef.getAddRowList().length > 0 ||
+                            this.$refs.tDevCptParamTableRef.getEditRowList().length > 0 ||
+                            this.$refs.tDevCptTemplateTableRef.getAddRowList().length > 0 ||
+                            this.$refs.tDevCptTemplateTableRef.getEditRowList().length > 0 ||
+                            this.$refs.tDevCptParamTemplateTableRef.getAddRowList().length > 0 ||
+                            this.$refs.tDevCptParamTemplateTableRef.getEditRowList().length > 0) {
+                            this.$message.error("请先保存数据");
+                            return;
+                        }
+
+                        this.showJsCodeDialog = true;
+                        this.$nextTick(() => {
+                            this.$refs.tDevCptScriptRef.refresh();
+                            this.$refs.cptParamTreeRef.reLoadTreeData();
+                        })
+                    }
+                }, "separator", {
+                    btnType: "primary", text: "编码替换", icon: "el-icon-transfer", onClick: () => {
+                        this.showHandleCptCodeDialog = true;
+                    }
+                }, "separator", "add", "edit", "del", "refresh", "save"],
+                showPagination: false,
+                params: () => {
+                    return {
+                        cptId: this.selectedCptId
+                    }
+                },
+                rowDblClickEvent: (row, column, event) => {
+                    this.$refs.tDevCptTemplateTableRef.toggleEditRow(row);
+                },
+            };
+            return tDevCptTemplateTable;
+        },
+        // 右侧：组件参数表格
+        getCptParamTableOption() {
+            let tDevCptParamCols = [
+                {
+                    prop: 'fdCptId',
+                    label: '所属组件',
+                    type: "select",
+                    selectOptionsRemote: "cptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    width: '80',
+                    addDefaultValue: () => {
+                        return this.selectedCptId;
+                    }
+                }, {
+                    prop: 'fdParentId',
+                    label: '父参数',
+                    type: "select",
+                    selectOptionsRemote: "cptParamList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    width: '80',
+                }, {
+                    prop: 'fdName',
+                    label: '参数名称',
+                    type: 'input',
+                    width: '110',
+                }, {
+                    prop: 'fdCode',
+                    label: '参数编码',
+                    type: 'input',
+                    minWidth: '120',
+                    help: `参数编码。<br>.value: 表示参数值<br>示例："\${InputType.value}"<br>click点击可复制参数取值（如："\${InputType.value}"）`
+                }, {
+                    prop: 'fdValue',
+                    label: '默认值',
+                    type: 'input',
+                    width: '80',
+                    showOverflowTooltip: true,
+                    help: `默认值格式：<br>1、非数组参数：字符串<br>2、数组参数: 可执行js，格式：[{参数编码A:"参数值1"},{参数编码B:"参数值2"}]<br>示例：[{InputA:"add"},{InputB:"自定义",InputC:"按钮"}]`
+                }, {
+                    prop: 'fdShowScriptId',
+                    label: '显示条件脚本',
+                    width: '130',
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.showScript}'>${text}</span>`
+                    },
+                    help: `判断页面是否显示组件。为空，默认显示。<br>示例："\${InputType.value}" == "textarea"`
+                }, {
+                    prop: 'fdShowType',
+                    label: '显示类型',
+                    type: 'select',
+                    width: '80',
+                    selectOptions: [{label: "input", value: 1}, {label: "开关", value: 2}, {label: "下拉单选", value: 3},
+                        {label: "数组参数", value: 4}, {label: "单选框", value: 5}, {label: "text", value: 6},
+                        {label: "计数文本", value: 7}, {label: "分割线", value: 8}, {label: "文本信息", value: 9}],
+                }, {
+                    prop: 'fdOption',
+                    label: '值选项',
+                    width: '100',
+                    showOverflowTooltip: true,
+                    type: "search",
+                    searchTitle: "选项值",
+                    searchSlot: 'slotOption',
+                    searchConfirm: (row) => {
+                        return true
+                    },
+                    searchClear: (row) => {
+                        row.fdOption = '';
+                        return true;
+                    },
+                }, {
+                    prop: 'fdMethodScriptId',
+                    label: '参数值变化脚本',
+                    width: '120',
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.methodScript}'>${text}</span>`
+                    },
+                    help: `参数值修改时，调用方法，用于直接设定其他参数值。<br>示例："\${InputType.value}" = "123"`
+                }, {
+                    prop: 'fdPlaceholder',
+                    label: '占位文本',
+                    type: 'input',
+                    width: '120',
+                    showOverflowTooltip: true
+                }, {
+                    prop: 'fdTab',
+                    label: 'tab页',
+                    type: 'input',
+                    width: '60',
+                }, {
+                    prop: 'fdTip',
+                    label: '提示',
+                    type: 'input',
+                    minWidth: '120',
+                    showOverflowTooltip: true
+                }, {
+                    prop: 'fdRemark',
+                    label: '备注',
+                    type: 'input',
+                    width: '80',
+                    showOverflowTooltip: true,
+                }, {
+                    prop: 'fdSort',
+                    label: '排序',
+                    type: 'input',
+                    width: '50',
+                },
+            ];
+            let tDevCptParamTable = {
+                title: "参数",
+                columns: tDevCptParamCols,
+                dataUrl: "/apd/TDevCptParam/getTDevCptParamGridList",
+                saveUrl: "/apd/TDevCptParam/saveTDevCptParamGridData",
+                editPk: "fdId", //默认fdId
+                deletePk: "fdId", // 默认fdId
+                deleteUrl: "/apd/TDevCptParam/deleteTDevCptParamGridData",
+                sortUrl: "/apd/TDevCptParam/updateTDevCptParamSortList",
+                toolbarBtn: [{
+                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
+                        this.copyParam()
+                    }
+                }, "separator",
+                    "sortAuto", "sortDown", "sortUp", "separator",
+                    "add", "edit", "del", "refresh", "save"],
+                showPagination: false,
+                params: () => {
+                    return {
+                        cptId: this.selectedCptId
+                    }
+                },
+                rowClickEvent: (row, column, event) => {
+                    this.selectedParam = row.fdId;
+                    this.$refs.tDevCptParamTemplateTableRef.refresh();
+                },
+                rowDblClickEvent: (row, column, event) => {
+                    this.$refs.tDevCptParamTableRef.toggleEditRow(row);
+                },
+            };
+            return tDevCptParamTable;
+        },
+        // 右侧：参数模板表格
+        getCptParamTemplateTableOption() {
+            let tDevCptParamTemplateCols = [
+                {
+                    prop: 'fdParamId',
+                    label: '所属参数',
+                    type: "select",
+                    selectOptionsRemote: "paramList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    width: '110',
+                    addDefaultValue: () => {
+                        return this.selectedParam;
+                    }
+                }, {
+                    prop: 'fdParamName',
+                    label: '参数名',
+                    type: 'input',
+                    width: '80',
+                }, {
+                    prop: 'fdTemplate',
+                    label: '参数模板',
+                    minWidth: '130',
+                    showOverflowTooltip: true,
+                    type: "search",
+                    searchTitle: "模板编辑",
+                    searchSlot: 'slotTemplate',
+                    searchWidth:"1100px",
+                    searchConfirm: (row) => {
+                        return true
+                    },
+                    searchClear: (row) => {
+                        row.fdTemplate = '';
+                        return true;
+                    },
+                    html: (value, row) => {
+                        return this.handleTemplateHtml(value);
+                    },
+                    help: `格式：参数格式必须为\${xxxx.xxx} 不能有空格`
+                }, {
+                    prop: 'fdAddScriptId',
+                    label: '模板添加脚本',
+                    width: '150',
+                    help: `判断是否添加模板。为空，表示默认添加。`,
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.addScript}'>${text}</span>`
+                    }
+                }, {
+                    prop: 'fdDefault',
+                    label: '默认模板',
+                    minWidth: '70',
+                    showOverflowTooltip: true,
+                    type: "search",
+                    searchTitle: "模板编辑",
+                    searchSlot: 'slotDefault',
+                    searchConfirm: (row) => {
+                        return true
+                    },
+                    searchClear: (row) => {
+                        row.fdDefault = '';
+                        return true;
+                    },
+                }, {
+                    prop: 'fdDefaultScriptId',
+                    label: '默认模板使用脚本',
+                    width: '140',
+                    help: `判断是否使用默认模板。为空，不使用默认模板。<br>示例："\${InputSize.value}" != ""`,
+                    type: "select",
+                    selectClearable: true,
+                    selectOptionsRemote: "scriptList",
+                    selectOptionsKey: {label: "fdName", value: "fdId"},
+                    selectHtml: (value, text, row) => {
+                        return `<span class="ap-color-blue" title='${row.defaultScript}'>${text}</span>`
+                    }
+                }, {
+                    prop: 'fdLeftSpace',
+                    label: '左侧空格',
+                    type: 'input',
+                    width: '60',
+                }
+            ];
+            let tDevCptParamTemplateTable = {
+                title: "参数模板",
+                columns: tDevCptParamTemplateCols,
+                dataUrl: "/apd/TDevCptParamTemplate/getTDevCptParamTemplateGridList",
+                saveUrl: "/apd/TDevCptParamTemplate/saveTDevCptParamTemplateGridData",
+                editPk: "fdId", //默认fdId
+                deletePk: "fdId", // 默认fdId
+                deleteUrl: "/apd/TDevCptParamTemplate/deleteTDevCptParamTemplateGridData",
+                sortUrl: "/apd/TDevCptParamTemplate/updateTDevCptParamTemplateSortList",
+                toolbarBtn: [{
+                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
+                        this.doCopyParamTemplate()
+                    }
+                }, "separator", "add", "edit", "del", "refresh", "save"],
+                showPagination: false,
+                params: () => {
+                    return {
+                        cptId: this.selectedCptId,
+                        paramId: this.selectedParam
+                    }
+                },
+                rowDblClickEvent: (row, column, event) => {
+                    this.$refs.tDevCptParamTemplateTableRef.toggleEditRow(row);
+                },
+            };
+            return tDevCptParamTemplateTable;
+        },
+        replaceCptNameAndCode() {
+            let form = this.replaceForm;
+            form.cptId = this.selectedCptId
+            this.$request({
+                url: '/apd/TDevCpt/replaceCptNameAndCode',
+                method: 'post',
+                data: form
+            }).then(response => {
+                this.$message.success("替换成功");
+                this.$refs.tDevCptParamTableRef.refresh();
+                this.$refs.tDevCptTemplateTableRef.refresh();
+                this.$refs.tDevCptParamTemplateTableRef.refresh();
+                this.showHandleCptCodeDialog = false;
+            })
+        },
+        handleTemplateHtml(str) {
+            if (str == null) {
+                return "";
+            }
+            str = str.replaceAll("<", "&lt;")
+            let html = `<div class="api-code" style="line-height: 14px;width: 100%; max-height: 80px;overflow: auto;">${str}</div>`;
+            return html;
+        },
+        clearCpt() {
+            this.$confirm(`清空无效组件配置(已删除组件的模板、脚本、参数、demo)?`, '提示', {
+                confirmButtonText: '清空',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$request({
+                    url: '/apd/TDevCpt/clearCpt',
+                    method: 'post',
+                    data: {}
+                }).then(response => {
+                    this.$message.success("清空成功");
+                    this.$refs.cptTree.reLoadTreeData();
+                })
+            })
+        },
+        copyCpt() {
+            if (this.selectedCptId == "" || this.selectedCptId == null) {
+                this.$message.error("请选择需要复制的行");
+                return;
+            }
+            this.$confirm(`确认复制【${this.selectedCpt.fdName}】组件?`, '提示', {
+                confirmButtonText: '复制',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$request({
+                    url: '/apd/TDevCpt/copyCpt',
+                    method: 'post',
+                    data: {
+                        cptId: this.selectedCptId,
+                    }
+                }).then(response => {
+                    this.$message.success("复制成功");
+                    this.$refs.cptTree.reLoadTreeData();
+                })
+            })
+        },
+        copyParam(type) {
+            this.showCopyDialog = true;
+        },
+        // 复制参数
+        doCopyParam(type) {
+            let selectedRows = this.$refs.tDevCptParamTableRef.getSelection();
+            if (selectedRows.length < 1) {
+                this.$message.error("请选择需要复制的行！");
+                return;
+            }
+            if (selectedRows.length > 1) {
+                this.$message.error("只能选择单行数据进行复制！");
+                return;
+            }
+
+            this.$request({
+                url: '/apd/TDevCptParam/copyParam',
+                method: 'post',
+                data: {
+                    paramId: selectedRows[0].fdId,
+                    copyTemplate: type
+                }
+            }).then(response => {
+                this.$message.success("复制成功");
+                this.$refs.tDevCptParamTableRef.refresh();
+                if (type == "1") {
+                    this.$refs.tDevCptParamTemplateTableRef.refresh();
+                }
+                this.showCopyDialog = false;
+            })
+
+        },
+        // 复制参数模板
+        doCopyParamTemplate() {
+            let selectedRows = this.$refs.tDevCptParamTemplateTableRef.getSelection();
+            if (selectedRows.length < 1) {
+                this.$message.error("请选择需要复制的行！");
+                return;
+            }
+            if (selectedRows.length > 1) {
+                this.$message.error("只能选择单行数据进行复制！");
+                return;
+            }
+
+            this.$request({
+                url: '/apd/TDevCptParam/copyParamTemplate',
+                method: 'post',
+                data: {
+                    templateId: selectedRows[0].fdId,
+                }
+            }).then(response => {
+                this.$message.success("复制成功");
+                this.$refs.tDevCptParamTemplateTableRef.refresh();
+            })
+
+        },
+        // 组件参数
+        getCptParamTreeOptions() {
+            let treeOptions = {
+                title: "组件参数",
+                initData: false,
+                onClick: (data, node, comp) => {
+                },
+                loadOptions: {
+                    url: "/apd/TDevCptParam/getTDevCptParamList",
+                    data: () => {
+                        return {
+                            cptId: this.selectedCptId
+                        }
+                    },
+                    treeKey: {
+                        idKey: "fdId",
+                        parentKey: "fdParentId",
+                        childrenKey: "children",
+                        label: "fdName"
+                    },
+                    success: (response) => {
+                    },
+                },
+            };
+
+            return treeOptions;
+        },
+        // 组件脚本
+        getDevCptScriptOpt() {
+            let columns = [
+                {
+                    prop: 'fdName',
+                    label: '名称',
+                    type: 'input',
+                    width: 150,
+                    help: '参数- <br>显示- <br>显示事件- <br>显示方法-'
+                }, {
+                    prop: 'fdCode',
+                    label: '变量名',
+                    type: 'input',
+                    width: 100,
+                    help: '模板中执行判断的变量名。<br>如<#if testName>'
+                }, {
+                    prop: 'fdScript',
+                    label: '脚本',
+                    type: 'input',
+                    help: 'js前段脚本。<br>示例："\${InputSize.value}" != ""'
+                }, {
+                    prop: 'fdComment',
+                    label: '备注',
+                    type: 'input',
+                    width: 100,
+                }
+            ];
+            let tableOpt = {
+                title: "组件脚本",
+                columns: columns,
+                editPk: "fdId", //默认fdId
+                deletePk: "fdId", // 默认fdId
+                dataUrl: "/apd/TDevCptScript/getTDevCptScriptGridList",
+                saveUrl: "/apd/TDevCptScript/saveTDevCptScriptGridData",
+                deleteUrl: "/apd/TDevCptScript/deleteTDevCptScriptGridData",
+                toolbarBtn: [{
+                    btnType: "primary", text: "异常筛选", icon: "el-icon-copy", onClick: () => {
+                        this.isErrorScript = "1";
+                        this.$refs.tDevCptScriptRef.refresh();
+                    }
+                }, {
+                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
+                        this.copyScript()
+                    }
+                }, "separator", "add", "edit", "del", "cancel", "refresh", "save"],
+                initData: false, // 默认false
+                showPagination: false,
+                afterLoadData: () => {
+                    this.isErrorScript = "0";
+                },
+                addDefaultObj: () => {
+                    return {
+                        fdCptId: this.selectedCptId
+                    }
+                },
+                params: () => {
+                    return {
+                        cptId: this.selectedCptId,
+                        isErrorScript: this.isErrorScript
+                    }
+                },
+                rowDblClickEvent: (row, column, event) => {
+                    this.$refs.tDevCptScriptRef.toggleEditRow(row);
+                },
+                afterSave: this.refreshScriptTable,
+                afterAll: () => {
+                    if (this.insertScriptId == null || this.insertScriptId == "") {
+                        return;
+                    }
+                    this.$refs.tDevCptScriptRef.toggleRowSelectionByRowKey(this.insertScriptId, true);
+                    this.insertScriptId = "";
+                }
+            };
+            return tableOpt;
+        },
+        // 刷新脚本相关表格
+        refreshScriptTable() {
+            console.log("刷新外部表格");
+            this.$refs.tDevCptParamTableRef.refresh();
+            this.$refs.tDevCptTemplateTableRef.refresh();
+            this.$refs.tDevCptParamTemplateTableRef.refresh();
+        },
+        copyText(text, event) {
+            clipboard(text, event);
+        },
+        copyParamValue(code, event) {
+            let str = '"${' + code + '.value}"';
+            clipboard(str, event);
+        },
+        insertScript(data) {
+            let name = "";
+            if (data.fdName.indexOf("事件") > -1) {
+                name = "显示事件-" + data.fdName.replace("事件", "");
+            } else if (data.fdCode.indexOf("Method") > -1) {
+                name = "显示方法-" + data.fdName;
+            } else {
+                name = "显示-" + data.fdName;
+            }
+
+            let script = "";
+            if (data.fdShowType == 2) {
+                // 开
+                script = '"${' + data.fdCode + '.value}" == "1"';
+            } else {
+                // 不为空
+                script = '"${' + data.fdCode + '.value}" != ""';
+            }
+            let msg = `确定添加脚本?
+                    <br><span style="font-weight: bold">名称：</span><span class="ap-color-blue">${name}</span>
+                    <br><span style="font-weight: bold">脚本：</span><span class="ap-color-blue">${script}</span>`
+            this.$confirm(msg, '提示', {
+                confirmButtonText: '确定添加',
+                cancelButtonText: '取消',
+                dangerouslyUseHTMLString: true,
+                type: 'warning'
+            }).then(() => {
+                this.$request({
+                    url: '/apd/TDevCptScript/insertTDevCptScript',
+                    method: 'post',
+                    data: {
+                        fdCptId: this.selectedCptId,
+                        fdName: name,
+                        fdScript: script,
+                    }
+                }).then(response => {
+                    this.insertScriptId = response.data;
+                    this.$message.success("添加成功：" + name);
+                    this.$refs.tDevCptScriptRef.refresh();
+                    this.refreshScriptTable();
+                })
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消添加'
+                });
+            });
+        },
+        // 复制参数模板
+        copyScript() {
+            let selectedRows = this.$refs.tDevCptScriptRef.getSelection();
+            if (selectedRows.length < 1) {
+                this.$message.error("请选择需要复制的行！");
+                return;
+            }
+            if (selectedRows.length > 1) {
+                this.$message.error("只能选择单行数据进行复制！");
+                return;
+            }
+
+            this.$request({
+                url: '/apd/TDevCptScript/copyScript',
+                method: 'post',
+                data: {
+                    scriptId: selectedRows[0].fdId,
+                }
+            }).then(response => {
+                this.$message.success("复制成功");
+                this.$refs.tDevCptScriptRef.refresh();
+            })
+
+        },
+    }
+}
+</script>
+
+<style scoped>
+</style>