Merge branch 'master' of http://git.kivii.org/gy/Vue-WebDriver

src/App.vue

 <template>
     <div id="realcontent">
-        <div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
-            <img style="width: 15px;height: 15px;" src="./assets/enlarge.svg">
+        <div id="KiviiWebTool" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
+            <img style="width: 25px;height: 25px;" src="./assets/enlarge.svg">
         </div>
         <div>
             <!-- 页头信息 -->
@@ -10,7 +10,7 @@
                 <span style="padding-left: 3px;">K5 网页自动化工具</span>
             </div>
             <!-- 任务信息 -->
-            <div style="display: flex;align-items: center;height: 60px;">
+            <div style="display: flex;align-items: center;height: 60px;justify-content: space-between;margin-right: 15px;">
                 <div style="width: 85%;display: flex;flex-direction: column;text-align: left;">
                     <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
                         <span style="width: 95px;padding-left: 5px;">任务名称：</span>
@@ -21,9 +21,9 @@
                         <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
                     </div>
                 </div>
-                <div style="display: flex;flex-direction: column;height: 55px;justify-content: space-between;">
-                    <el-button size="mini" style="width: 60px;height: 25px;">保存任务</el-button>
-                    <el-button size="mini" style="width: 60px;height: 25px;" @click="submitPlan">导出任务</el-button>
+                <div style="display: flex;flex-direction: column;height: 55px;justify-content: space-evenly;">
+                    <el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button>
+                    <el-button size="mini" style="width: 50px;height: 20px;" @click="submitPlan">导出任务</el-button>
                 </div>
             </div>
             <el-divider></el-divider>
@@ -36,18 +36,18 @@
                     </span>
                 </div>
             </div>
-            <div style="display: flex;align-items: flex-start;justify-content: space-between;">
+            <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;">
                 <!-- 动作标签 -->
-                <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 410px;">
+                <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;">
                     <draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
                         <transition-group>
                             <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
-                                <div style="display: flex;align-items: center;height: 30px;position: relative;">
+                                <div style="display: flex;align-items: center;height: 25px;position: relative;">
                                     <span style="min-width: 40px;display: flex;align-items: center;">
                                         <div class="circle">{{ index + 1 }}</div>
-                                        <span style="margin-left: 5px;">{{ tag.actionName }}</span>
+                                        <span style="margin-left: 2px;">{{ tag.actionName }}</span>
                                     </span>
-                                    <img id="closeimg" @click="handleClose(tag)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
+                                    <img id="closeimg" @click="handleClose(tag)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg">
                                 </div>
                             </el-tag>
                         </transition-group>
@@ -58,7 +58,7 @@
                                 <div style="display: flex;align-items: center;height: 30px;position: relative;">
                                     <span style="min-width: 40px;display: flex;align-items: center;">
                                         <div class="circle">{{ index + 1 }}</div>
-                                        <span style="margin-left: 5px;">{{ item.actionName }}</span>
+                                        <span style="margin-left: 2px;">{{ item.actionName }}</span>
                                     </span>
                                     <img id="closeimg" @click="handleClose(item)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
                                 </div>
@@ -67,8 +67,8 @@
                     </draggable>
                 </div>
                 <div style="height: 42px;display:flex;align-items: center;margin-right: 15px;">
-                    <el-button type="primary" size="mini" style="width: 60px;height: 25px;" @click="newAction">
-                        <img style="width: 20px;height: 20px;" src="./assets/add.svg">
+                    <el-button :disabled="state" type="primary" size="mini" style="width: 30px;height: 20px;" @click="newAction">
+                        <img style="width: 15px;height: 15px;" src="./assets/add.svg">
                     </el-button>
                 </div>
             </div>
@@ -102,13 +102,14 @@
 // 导出json文件使用的库
 import { saveAs } from 'file-saver';
 import draggable from 'vuedraggable'
-import { onSelect, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
+import { onSelect, elRightClick, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
 export default {
     name: 'App',
-    components: { draggable, onSelect, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
+    components: { draggable, onSelect, elClick, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
     props: {},
     data() {
         return {
+            state: false,
             dynamicComponent: null,
             taskName: '',
             taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
@@ -207,7 +208,14 @@ export default {
         },
         treeNode: {
             handler(newVal, oldVal) {
-                console.log('数组变化了', newVal);
+                // console.log('数组变化了', newVal);
+                // console.log(newVal.length);
+                // 设置动作新增上限为15个
+                if (newVal.length > 14) {
+                    this.state = true;
+                } else {
+                    this.state = false;
+                }
             },
             deep: true
         }
@@ -220,6 +228,9 @@ export default {
                 case 'elRightClick':
                     this.dynamicComponent = elRightClick
                     break;
+                case 'elClick':
+                    this.dynamicComponent = elClick
+                    break;
                 case 'select':
                     this.dynamicComponent = onSelect
                     break;
@@ -372,8 +383,8 @@ export default {
             }
         },
         // 导航标签
-        onBreadcrumb (item) {
-            this.isShowAction=false
+        onBreadcrumb(item) {
+            this.isShowAction = false
             this.actionName = item.actionName
             this.actionType = item.actionType
             this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
@@ -642,8 +653,8 @@ export default {
 
 <style>
 .circle {
-    width: 15px;
-    height: 15px;
+    width: 12px;
+    height: 12px;
     border: 1px solid #ffffff;
     /* 圆环的颜色和宽度 */
     border-radius: 50%;
@@ -653,6 +664,7 @@ export default {
     justify-content: center;
     /* 文本颜色 */
     font-weight: bold;
+    font-size: 9px;
 }
 
 /* 删除时鼠标手势 */
@@ -677,7 +689,7 @@ export default {
 }
 
 .tooltips {
-    min-width: 500px;
+    min-width: 460px;
     min-height: 500px;
     background-color: white;
     position: fixed;
@@ -714,12 +726,10 @@ export default {
     padding: 0 5px !important;
     margin-left: 12px !important;
     margin-top: 6px !important;
+    font-size: 10px !important;
+    height: 25px !important;
 }
 
-/* .el-tag+.el-tag {
-    margin-left: 0px !important;
-} */
-
 .el-button+.el-button,
 .el-checkbox.is-bordered+.el-checkbox.is-bordered {
     margin-left: 0px !important;
@@ -767,7 +777,7 @@ export default {
 }
 
 .tooltips button {
-    font-size: 13px;
+    font-size: 10px;
     border-radius: 5px;
     border: solid 1px #409EFF;
     background-color: #409EFF;

src/components/elclick.vue

+<template>
+    <div class="elClick">
+        <div style="height: 35px;margin-left: 15px;text-align: left;">
+            <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
+            <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
+            <span style="margin-left: 3px;">元素信息如下:</span>
+
+        </div>
+        <el-form label-position="right" label-width="80px" :model="actionConfig">
+            <el-form-item label="查找方式">
+                <el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="selectDisabled">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="标签名称">
+                <el-input v-model="actionConfig.Target.Selector"></el-input>
+            </el-form-item>
+            <el-form-item label="查询时间">
+                <el-input v-model="actionConfig.Target.Timeout"></el-input>
+            </el-form-item>
+        </el-form>
+        <div style="width: 100%;text-align: right;">
+            <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'elClick',
+    components: {},
+    props: ['actionName', 'actionType'],
+    data() {
+        return {
+            elementInfo: {},
+            actionConfig: {
+                "Target": {//点击的目标元素配置信息
+                    "Type": "Id",//查找元素的方式，通过Id查找
+                    "Selector": "su",//Id名称
+                    "Timeout": 5000//查询时间
+                },
+                "Name": "百度一下",//动作名称
+                "Alias": "el.click"//动作类型
+            },
+            selectDisabled: true
+        }
+    },
+    created() { },
+    mounted() {
+        // 在组件挂载后调用selectElement来添加事件监听器
+        this.selectElement();
+    },
+    beforeDestroy() {
+        // 在组件销毁前移除事件监听器
+        document.removeEventListener('contextmenu', this.contextMenuHandler);
+    },
+    watch: {},
+    computed: {},
+    methods: {
+        submit() {
+            console.log(this.actionConfig)
+            // 防止父级改变，子级未改变重新赋值
+            this.actionConfig.Name = this.actionName
+            this.actionConfig.Alias = this.actionType
+            this.$emit('dataChanged', this.actionConfig);
+        },
+    }
+}
+</script>
+<style scoped></style>
\ No newline at end of file

src/components/index.js

 import elRightClick from './elRightClick.vue';
+import elClick from './elClick.vue';
 import onSelect from './onSelect.vue';
 import wait from './wait.vue';
 import loopClick from './loopClick.vue'
@@ -12,4 +13,4 @@ import actions from './actions.vue';
 import onInput from './onInput.vue'
 // import ComponentC from './ComponentC.vue';
 
-export { elRightClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
+export { elRightClick, elClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file

src/main.js

@@ -18,7 +18,7 @@ Vue.use(ElementUI);
 let toolkit
 let timer;
 //生成Toolkit
-function generateToolkit () {
+function generateToolkit() {
     // global.app = new Vue(ToolKit);
     let h = $(".tooldrag").height();
     // console.log(h)
@@ -60,13 +60,13 @@ function generateToolkit () {
     });
     // 拖拽右下角改变大小
     const wrapperToolkit = document.getElementById('wrapperToolkit');
-    const EasySpiderResizer = document.getElementById('EasySpiderResizer');
-    // console.log(EasySpiderResizer)
+    const KiviiWebTool = document.getElementById('KiviiWebTool');
+    // console.log(KiviiWebTool)
     let mousedown = false;
     let startX, startY, startWidth, startHeight;
 
 
-    EasySpiderResizer.addEventListener('mousedown', e => {
+    KiviiWebTool.addEventListener('mousedown', e => {
         mousedown = true;
         startX = e.clientX;
         startY = e.clientY;
@@ -116,37 +116,37 @@ function generateToolkit () {
 
 // window.onload = function () {
 
-    let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
+let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
 
-    toolkit = document.createElement("div");
-    toolkit.classList = "tooltips"; //添加样式
-    toolkit.setAttribute("id", "wrapperToolkit");
-    let tooltips = false; //标记鼠标是否在提示框上
+toolkit = document.createElement("div");
+toolkit.classList = "tooltips"; //添加样式
+toolkit.setAttribute("id", "wrapperToolkit");
+let tooltips = false; //标记鼠标是否在提示框上
 
-    //右键菜单屏蔽
-    document.oncontextmenu = () => false;
+//右键菜单屏蔽
+document.oncontextmenu = () => false;
 
-    toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
+toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
 
-    document.body.append(toolkit);
-    console.log(document)
+document.body.append(toolkit);
+console.log(document)
 
-    $(".tooltips").html(`
+$(".tooltips").html(`
 <div id="k5WebDriver"></div>
 `);
-    // global.app = new Vue(ToolKit);
-    new Vue({
-        el: '#k5WebDriver',
-        router,
-        render: h => h(App)
-    })
-
-    document.addEventListener("DOMContentLoaded", function () {
-        // 在 DOMContentLoaded 事件触发后执行的代码
-        var body = document.body;
-
-        // 执行其他操作
-    });
-    generateToolkit();
+// global.app = new Vue(ToolKit);
+new Vue({
+    el: '#k5WebDriver',
+    router,
+    render: h => h(App)
+})
+
+document.addEventListener("DOMContentLoaded", function () {
+    // 在 DOMContentLoaded 事件触发后执行的代码
+    var body = document.body;
+
+    // 执行其他操作
+});
+generateToolkit();
 // }