@truenewx/tnxvue3 2.6.0

package/README.md

@@ -0,0 +1,3 @@
+# tnxvue3
+
+互联网技术解决方案：Vue3扩展支持

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@truenewx/tnxvue3",
+  "version": "2.6.0",
+  "description": "互联网技术解决方案：Vue3扩展支持",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "sample/main.js",
+  "keywords": [
+    "truenewx",
+    "tnxvue3",
+    "tnx"
+  ],
+  "author": "truenewx",
+  "license": "Apache-2.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@truenewx/tnxcore": "2.6.1",
+    "@element-plus/icons-vue": "2.1.0",
+    "ant-design-vue": "3.2.20",
+    "async-validator": "4.2.5",
+    "crypto-js": "4.1.1",
+    "element-plus": "2.3.4",
+    "mitt": "3.0.0",
+    "vue": "3.2.47",
+    "vue-router": "4.1.6"
+  },
+  "devDependencies": {
+    "@babel/core": "7.21.8",
+    "@babel/eslint-parser": "7.21.8",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "eslint": "7.32.0",
+    "eslint-plugin-vue": "8.7.1",
+    "copy-webpack-plugin": "11.0.0",
+    "terser-webpack-plugin": "5.3.7"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {
+      "eqeqeq": "warn",
+      "no-unused-vars": [
+        "warn",
+        {
+          "vars": "local",
+          "args": "none"
+        }
+      ],
+      "no-undef": "warn",
+      "no-useless-escape": "warn",
+      "vue/no-v-model-argument": "off",
+      "vue/multi-word-component-names": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

package/sample/App.vue

@@ -0,0 +1,19 @@
+<template>
+    <div id="app">
+        <page-index/>
+    </div>
+</template>
+
+<script>
+import index from './pages/index.vue';
+
+export default {
+    name: 'App',
+    components: {
+        'page-index': index,
+    },
+    data() {
+        return {}
+    }
+}
+</script>

package/sample/main.js

@@ -0,0 +1,11 @@
+import '../../core/tnxcore.css';
+import 'bootstrap/dist/css/bootstrap-reboot.min.css';
+import 'bootstrap/dist/css/bootstrap-grid.min.css';
+import 'bootstrap/dist/css/bootstrap-utilities.min.css';
+import '../src/tnxvue.css';
+import 'element-plus/dist/index.css';
+import '../src/element-plus/tnxel.css';
+import tnx from './tnx';
+import App from './App.vue';
+
+tnx.createVueInstance(App).mount('#app');

package/sample/pages/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="container-xl mx-auto flex-h-center">
+        <div class="text-center">
+            <h1>{{ title }}</h1>
+            <p>首页</p>
+            <el-space wrap>
+                <el-button @click="showAlert">Alert</el-button>
+                <el-button @click="showSuccess">Success</el-button>
+                <el-button @click="showError">Error</el-button>
+                <el-button @click="showConfirm">Confirm</el-button>
+                <el-button @click="showToast">Toast</el-button>
+                <el-button @click="showLoading">Loading</el-button>
+                <el-button @click="showOpen">Open</el-button>
+            </el-space>
+            <div class="mt-5">
+                <tnxel-fss-upload type="UserHeadImage" v-model="storageUrl"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {app, tnx} from '../tnx.js';
+import info from './info.vue';
+
+export default {
+    components: {
+        'tnxel-fss-upload': tnx.components.FssUpload,
+    },
+    data() {
+        return {
+            title: process.env.VUE_APP_TITLE,
+            storageUrl: null,
+        };
+    },
+    created() {
+        app.rpc.loadConfig(process.env.VUE_APP_API_BASE_URL);
+    },
+    methods: {
+        showAlert() {
+            tnx.alert('Hello World', function() {
+                console.info('Alerted');
+            });
+        },
+        showSuccess() {
+            tnx.success('提交成功，请等待组织管理员为你分配角色，获得组织角色后方可使用组织功能。', function() {
+                console.info('Successed');
+            });
+        },
+        showError() {
+            tnx.error('Hello World', function() {
+                console.info('Errored');
+            });
+        },
+        showConfirm() {
+            tnx.confirm('Hello World', function(yes) {
+                console.info(yes);
+            });
+        },
+        showToast() {
+            tnx.toast('操作成功', 200000, function() {
+                console.info('Toast closed.');
+            });
+        },
+        showLoading() {
+            tnx.showLoading('加载中');
+            setTimeout(function() {
+                tnx.closeLoading();
+            }, 2000);
+        },
+        showOpen() {
+            tnx.open(info, {
+                param: '- from params',
+                opener: this,
+            });
+        },
+    }
+}
+</script>

package/sample/pages/info.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <p>Component: Hello World {{ param }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['param', 'opener'],
+    data() {
+        return {
+            abc: 'abc',
+        };
+    },
+    methods: {
+        dialog() {
+            return {
+                title: '组件',
+                type: 'confirm',
+                click: this.toSubmit
+            }
+        },
+        toSubmit(yes, close) {
+            console.info(this.abc + ': ' + yes);
+        }
+    }
+}
+</script>

package/sample/tnx.js

@@ -0,0 +1,31 @@
+// tnx.js
+import tnxel from '../src/element-plus/tnxel';
+
+export const tnx = tnxel;
+export const util = tnx.util;
+export const app = tnx.app;
+
+app.rpc.toLogin = function (loginFormUrl, originalUrl) {
+    if (loginFormUrl) {
+        let alertable = originalUrl !== undefined;
+        const username = process.env.VUE_APP_LOGIN_USERNAME;
+        const password = process.env.VUE_APP_LOGIN_PASSWORD;
+        if (username && password) { // 将默认用户名密码插入到参数清单头部，以免被其它参数中的#影响而被忽略
+            const index = loginFormUrl.indexOf('?') + 1;
+            loginFormUrl = loginFormUrl.substr(0, index) + 'username=' + username + '&password='
+                + password + '&' + loginFormUrl.substr(index);
+            alertable = false;
+        }
+        if (alertable) {
+            tnx.alert('尚未登录或登录会话已过期，需重新登录', function () {
+                window.location.href = loginFormUrl;
+            });
+        } else {
+            window.location.href = loginFormUrl;
+        }
+        return true;
+    }
+    return false;
+}
+
+export default tnx;

package/src/aj-captcha/Verify/VerifyPoints.vue

@@ -0,0 +1,258 @@
+<template>
+    <div style="position: relative">
+        <div class="verify-img-out">
+            <div class="verify-img-panel" :style="{'height': setSize.imgHeight,
+                                                   'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
+                                                   'margin-bottom': vSpace + 'px'}"
+            >
+                <div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
+                    <el-icon :size="16">
+                        <icon-refresh/>
+                    </el-icon>
+                </div>
+                <img :src="'data:image/png;base64,'+pointBackImgBase"
+                     ref="canvas"
+                     alt="" style="width:100%;height:100%;display:block"
+                     @click="bindingClick?canvasClick($event):undefined">
+
+                <div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area bg-success"
+                     :style="{
+                        color:'#fff',
+                        'z-index':9999,
+                        width:'20px',
+                        height:'20px',
+                        'text-align':'center',
+                        'line-height':'20px',
+                        'border-radius': '50%',
+                        position:'absolute',
+                        top:parseInt(tempPoint.y-10) + 'px',
+                        left:parseInt(tempPoint.x-10) + 'px'
+                     }">
+                    {{ index + 1 }}
+                </div>
+            </div>
+        </div>
+        <!-- 'height': this.barSize.height, -->
+        <div class="verify-bar-area" :class="barAreaClass"
+             :style="{'line-height':this.barSize.height}">
+            <span class="verify-msg">{{ text }}</span>
+        </div>
+    </div>
+</template>
+<script type="text/babel">
+/**
+ * VerifyPoints
+ * @description 点选
+ * */
+import {resetSize} from '../utils/util';
+import {aesEncrypt} from '../utils/ase';
+import {reqCheck, reqGet} from '../api';
+import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs} from 'vue';
+import {Refresh} from '@element-plus/icons-vue';
+
+export default {
+    name: 'VerifyPoints',
+    components: {
+        'icon-refresh': Refresh,
+    },
+    props: {
+        //弹出式pop，固定fixed
+        mode: {
+            type: String,
+            default: 'fixed'
+        },
+        captchaType: {
+            type: String,
+        },
+        //间隔
+        vSpace: {
+            type: Number,
+            default: 5
+        },
+        imgSize: {
+            type: Object,
+            default() {
+                return {
+                    width: '310px',
+                    height: '155px'
+                }
+            }
+        },
+        barSize: {
+            type: Object,
+            default() {
+                return {
+                    width: '310px',
+                    height: '40px'
+                }
+            }
+        }
+    },
+    setup(props, context) {
+        const {mode, captchaType, vSpace, imgSize, barSize} = toRefs(props)
+        const {proxy} = getCurrentInstance();
+        let secretKey = ref(''),           //后端返回的ase加密秘钥
+            checkNum = ref(3),             //默认需要点击的字数
+            fontPos = reactive([]),            //选中的坐标信息
+            checkPosArr = reactive([]),        //用户点击的坐标
+            num = ref(1),                 //点击的记数
+            pointBackImgBase = ref(''),    //后端获取到的背景图片
+            poinTextList = reactive([]),        //后端返回的点击字体顺序
+            backToken = ref(''),           //后端返回的token值
+            setSize = reactive({
+                imgHeight: 0,
+                imgWidth: 0,
+                barHeight: 0,
+                barWidth: 0
+            }),
+            tempPoints = reactive([]),
+            text = ref(''),
+            barAreaClass = ref('text-secondary'),
+            showRefresh = ref(true),
+            bindingClick = ref(true)
+
+
+        const init = () => {
+            //加载页面
+            fontPos.splice(0, fontPos.length)
+            checkPosArr.splice(0, checkPosArr.length)
+            num.value = 1
+            getPictrue();
+            nextTick(() => {
+                let {imgHeight, imgWidth, barHeight, barWidth} = resetSize(proxy)
+                setSize.imgHeight = imgHeight
+                setSize.imgWidth = imgWidth
+                setSize.barHeight = barHeight
+                setSize.barWidth = barWidth
+                proxy.$parent.$emit('ready', proxy)
+            })
+        }
+        onMounted(() => {
+            // 禁止拖拽
+            init()
+            proxy.$el.onselectstart = function () {
+                return false
+            }
+        })
+        const canvas = ref(null)
+        const canvasClick = (e) => {
+            checkPosArr.push(getMousePos(canvas, e));
+            if (num.value === checkNum.value) {
+                num.value = createPoint(getMousePos(canvas, e));
+                //按比例转换坐标值
+                let arr = pointTransfrom(checkPosArr, setSize)
+                checkPosArr.length = 0
+                checkPosArr.push(...arr);
+                //等创建坐标执行完
+                setTimeout(() => {
+                    // let flag = this.comparePos(this.fontPos, this.checkPosArr);
+                    //发送后端请求
+                    let captchaVerification = secretKey.value ? aesEncrypt(
+                        backToken.value + '---' + JSON.stringify(checkPosArr),
+                        secretKey.value) : backToken.value + '---' + JSON.stringify(checkPosArr)
+                    let data = {
+                        captchaType: captchaType.value,
+                        "pointJson": secretKey.value ? aesEncrypt(JSON.stringify(checkPosArr),
+                            secretKey.value) : JSON.stringify(checkPosArr),
+                        "token": backToken.value
+                    }
+                    reqCheck(data).then(res => {
+                        if (res.repCode === "0000") {
+                            barAreaClass.value = 'text-success border-success';
+                            text.value = '验证成功'
+                            bindingClick.value = false
+                            if (mode.value == 'pop') {
+                                setTimeout(() => {
+                                    proxy.$parent.clickShow = false;
+                                    refresh();
+                                }, 1500)
+                            }
+                            proxy.$parent.$emit('success', {captchaVerification})
+                        } else {
+                            proxy.$parent.$emit('error', proxy)
+                            barAreaClass.value = 'text-danger border-danger';
+                            text.value = '验证失败'
+                            setTimeout(() => {
+                                refresh();
+                            }, 700);
+                        }
+                    })
+                }, 400);
+            }
+            if (num.value < checkNum.value) {
+                num.value = createPoint(getMousePos(canvas, e));
+            }
+        }
+        //获取坐标
+        const getMousePos = function (obj, e) {
+            let x = e.offsetX
+            let y = e.offsetY
+            return {x, y}
+        }
+        //创建坐标点
+        const createPoint = function (pos) {
+            tempPoints.push(Object.assign({}, pos))
+            return num.value + 1;
+        }
+        const refresh = function () {
+            tempPoints.splice(0, tempPoints.length);
+            barAreaClass.value = 'text-secondary';
+            bindingClick.value = true
+            fontPos.splice(0, fontPos.length)
+            checkPosArr.splice(0, checkPosArr.length)
+            num.value = 1
+            getPictrue();
+            text.value = '验证失败'
+            showRefresh.value = true
+        }
+
+        // 请求背景图片和验证图片
+        function getPictrue() {
+            let data = {
+                captchaType: captchaType.value
+            }
+            reqGet(data).then(res => {
+                if (res.repCode === "0000") {
+                    pointBackImgBase.value = res.repData.originalImageBase64
+                    backToken.value = res.repData.token
+                    secretKey.value = res.repData.secretKey
+                    poinTextList.value = res.repData.wordList
+                    text.value = '请依次点击【' + poinTextList.value.join("、") + '】'
+                } else {
+                    text.value = res.repMsg;
+                }
+            })
+        }
+
+        //坐标转换函数
+        const pointTransfrom = function (pointArr, imgSize) {
+            let newPointArr = pointArr.map(p => {
+                let x = Math.round(310 * p.x / parseInt(imgSize.imgWidth))
+                let y = Math.round(155 * p.y / parseInt(imgSize.imgHeight))
+                return {x, y}
+            })
+            return newPointArr
+        }
+        return {
+            secretKey,
+            checkNum,
+            fontPos,
+            checkPosArr,
+            num,
+            pointBackImgBase,
+            poinTextList,
+            backToken,
+            setSize,
+            tempPoints,
+            text,
+            barAreaClass,
+            showRefresh,
+            bindingClick,
+            init,
+            canvas,
+            canvasClick,
+            getMousePos, createPoint, refresh, getPictrue, pointTransfrom
+        }
+    },
+}
+</script>