ap-dev 1.2.13 → 1.2.15

package/dev/ConfigPanel/DevCpt.vue

@@ -1,6 +1,6 @@
 <template>
     <ap-container>
-        <ap-aside margin="1111" width="220px">
+        <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">
@@ -95,7 +95,8 @@
                 <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>
+<!--                            <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>
@@ -114,6 +115,37 @@
                 <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"
@@ -145,9 +177,14 @@
 </template>
 
 <script>
+import clipboard from 'ap-util/util/ClipboardUtil'
+import CptTemplate from './CptTemplate'
 
 export default {
     name: 'DevCpt',
+    components: {
+        CptTemplate
+    },
     data() {
 
         return {
@@ -168,12 +205,17 @@ export default {
             optionType: "",
             showCopyDialog: false,
             showHandleCptCodeDialog: false,
+            showJsCodeDialog: false,
             replaceForm: {
                 oldName: "",
                 newName: "",
                 oldCode: "",
                 newCode: "",
             },
+            cptParamTreeOptions: this.getCptParamTreeOptions(),
+            isErrorScript: "0",
+            tDevCptScriptOpt: this.getDevCptScriptOpt(),
+            insertScriptId: ""
         }
     },
     mounted() {
@@ -184,13 +226,17 @@ export default {
         // 左侧树：配置
         getTreeOption() {
             let treeOptions = {
-                title: "组件列表",
+                title: "组件",
                 dialogWidth: "700px",
                 toolbarBtn: [{
                     icon: "el-icon-copy", onClick: () => {
                         this.copyCpt();
                     }
-                }, "add", "edit", "del"],
+                }, {
+                    icon: "el-icon-bug", onClick: () => {
+                        this.clearCpt();
+                    }
+                }, "add", "edit", "del", "sort"],
                 dialogTitle: "组件信息",
                 sortByDrag: true,
                 onClick: (data, node, comp) => {
@@ -241,6 +287,7 @@ export default {
                 },
                 updateSortUrl: '/apd/TDevCpt/updateTDevCptSort',
                 updateSortListUrl: '/apd/TDevCpt/updateTDevCptSortList',
+                sortByDrag: true,
                 resetForm: () => {
                     this.tDevCptForm = {
                         fdName: '',
@@ -295,7 +342,7 @@ export default {
                     prop: 'fdParamName',
                     label: '参数名',
                     type: 'input',
-                    width: '80',
+                    width: '90',
                 }, {
                     prop: 'fdTemplate',
                     label: '组件模板',
@@ -313,13 +360,20 @@ export default {
                     html: (value, row) => {
                         return this.handleTemplateHtml(value);
                     },
-                    help: `1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>
-2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>`
+                    help: "1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>" +
+                        "2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>" +
+                        "3、if判断：<br><#if>xxxx&lt/#if>"
                 }, {
-                    prop: 'fdAddCondition',
-                    label: '模板添加条件',
-                    type: 'input',
-                    minWidth: '150',
+                    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: '默认模板',
@@ -335,10 +389,16 @@ export default {
                         return true;
                     },
                 }, {
-                    prop: 'fdDefaultCondition',
-                    label: '默认模板使用条件',
-                    type: 'input',
-                    minWidth: '70',
+                    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: '左侧空格',
@@ -360,6 +420,28 @@ export default {
                 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;
                     }
@@ -400,13 +482,13 @@ export default {
                     prop: 'fdName',
                     label: '参数名称',
                     type: 'input',
-                    width: '100',
+                    width: '110',
                 }, {
                     prop: 'fdCode',
                     label: '参数编码',
                     type: 'input',
                     minWidth: '120',
-                    help: `参数编码。<br>.value: 表示参数值<br>示例："\${InputType.value}"`
+                    help: `参数编码。<br>.value: 表示参数值<br>示例："\${InputType.value}"<br>click点击可复制参数取值（如："\${InputType.value}"）`
                 }, {
                     prop: 'fdValue',
                     label: '默认值',
@@ -415,21 +497,25 @@ export default {
                     showOverflowTooltip: true,
                     help: `默认值格式：<br>1、非数组参数：字符串<br>2、数组参数: 可执行js，格式：[{参数编码A:"参数值1"},{参数编码B:"参数值2"}]<br>示例：[{InputA:"add"},{InputB:"自定义",InputC:"按钮"}]`
                 }, {
-                    prop: 'fdShowCondition',
-                    label: '显示条件',
-                    type: 'input',
-                    minWidth: '120',
+                    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: 3}, {label: "数组参数", value: 4},
-                        {label: "text", value: 6}, {label: "计数文本", value: 7}, {label: "开关", value: 2}, {
-                            label: "单选框",
-                            value: 5
-                        }],
+                    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: '值选项',
@@ -446,16 +532,22 @@ export default {
                         return true;
                     },
                 }, {
-                    prop: 'fdChangeMethod',
-                    label: '参数值变化执行方法',
-                    type: 'input',
-                    minWidth: '120',
+                    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: '60',
+                    width: '120',
                     showOverflowTooltip: true
                 }, {
                     prop: 'fdTab',
@@ -466,21 +558,14 @@ export default {
                     prop: 'fdTip',
                     label: '提示',
                     type: 'input',
-                    width: '60',
+                    minWidth: '120',
                     showOverflowTooltip: true
                 }, {
                     prop: 'fdRemark',
                     label: '备注',
                     type: 'input',
-                    width: '60',
-                }, {
-                    prop: 'fdShowLine',
-                    label: '分割线',
-                    type: 'select',
-                    width: '60',
-                    help: '参数tab页分块，参数底部显示分割线',
-                    selectOptions: [{label: "隐藏", value: 0}, {label: "显示", value: 1}]
-
+                    width: '80',
+                    showOverflowTooltip: true,
                 }, {
                     prop: 'fdSort',
                     label: '排序',
@@ -510,7 +595,7 @@ export default {
                         cptId: this.selectedCptId
                     }
                 },
-                rowClickEvent: (row) => {
+                rowClickEvent: (row, column, event) => {
                     this.selectedParam = row.fdId;
                     this.$refs.tDevCptParamTemplateTableRef.refresh();
                 },
@@ -529,7 +614,7 @@ export default {
                     type: "select",
                     selectOptionsRemote: "paramList",
                     selectOptionsKey: {label: "fdName", value: "fdId"},
-                    width: '100',
+                    width: '110',
                     addDefaultValue: () => {
                         return this.selectedParam;
                     }
@@ -546,6 +631,7 @@ export default {
                     type: "search",
                     searchTitle: "模板编辑",
                     searchSlot: 'slotTemplate',
+                    searchWidth:"1100px",
                     searchConfirm: (row) => {
                         return true
                     },
@@ -558,12 +644,17 @@ export default {
                     },
                     help: `格式：参数格式必须为\${xxxx.xxx} 不能有空格`
                 }, {
-                    prop: 'fdAddCondition',
-                    label: '模板添加条件',
-                    type: 'input',
-                    minWidth: '150',
-                    showOverflowTooltip: true,
-                    help: `判断是否添加模板。为空，表示默认添加。<br>示例："\${InputSize.value}" != ""`
+                    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: '默认模板',
@@ -580,22 +671,22 @@ export default {
                         return true;
                     },
                 }, {
-                    prop: 'fdDefaultCondition',
-                    label: '默认模板使用条件',
-                    type: 'input',
-                    minWidth: '70',
-                    showOverflowTooltip: true,
-                    help: `判断是否使用默认模板。为空，不使用默认模板。<br>示例："\${InputSize.value}" != ""`
+                    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',
-                }, {
-                    prop: 'fdSort',
-                    label: '排序',
-                    type: 'input',
-                    width: '60',
                 }
             ];
             let tDevCptParamTemplateTable = {
@@ -611,9 +702,7 @@ export default {
                     btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
                         this.doCopyParamTemplate()
                     }
-                }, "separator",
-                    "sortAuto", "sortDown", "sortUp", "separator",
-                    "add", "edit", "del", "refresh", "save"],
+                }, "separator", "add", "edit", "del", "refresh", "save"],
                 showPagination: false,
                 params: () => {
                     return {
@@ -647,9 +736,25 @@ export default {
                 return "";
             }
             str = str.replaceAll("<", "&lt;")
-            let html = `<div class="api-code" style="line-height: 14px;">${str}</div>`;
+            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("请选择需要复制的行");
@@ -727,7 +832,196 @@ export default {
                 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: 180,
+                    help: '参数- <br>显示- <br>显示事件- <br>显示方法-'
+                }, {
+                    prop: 'fdCode',
+                    label: '变量名',
+                    type: 'input',
+                    width: 100,
+                    help: '模板中执行判断的变量名。<br>如<#if testName>'
+                }, {
+                    prop: 'fdScript',
+                    label: '脚本',
+                    type: 'input',
+                    help: 'js执行脚本。<br><b>自带参数：</b>paramObj, paramTemplateObj' +
+                        '<br><b>示例1-参数：</b>"\${InputSize.value}" != ""<br><b>示例2-自带参数：</b>paramTemplateObj.attrs.length>0'
+                }, {
+                    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>