agilebuilder-ui 1.0.0

package/src/views/login/authredirect.vue

@@ -0,0 +1,10 @@
+<script>
+export default {
+  name: 'AuthRedirect',
+  created() {
+    const hash = window.location.search.slice(1)
+    window.opener.location.href = window.location.origin + '/login#' + hash
+    window.close()
+  },
+}
+</script>

package/src/views/login/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <h3 class="title">***管理系统</h3>
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          v-model="loginForm.username"
+          name="username"
+          type="text"
+          auto-complete="on"
+          placeholder="username"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          v-model="loginForm.password"
+          :type="pwdType"
+          name="password"
+          auto-complete="on"
+          placeholder="password"
+          @keyup.enter="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon icon-class="eye" />
+        </span>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :loading="loading"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleLogin"
+        >
+          Sign in
+        </el-button>
+      </el-form-item>
+      <div class="tips">
+        <span style="margin-right: 20px"> ***公司 </span>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { ElMessage as Message } from 'element-plus'
+export default {
+  name: 'Login',
+  data() {
+    const checkValidCode = (rule, value, callback) => {
+      // console.log('value=', value, 'this.validCode=', this.validCode)
+      if (!value) {
+        callback(new Error('请输入验证码'))
+      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
+        // this.refreshCode = Math.random()
+        callback(new Error('验证码不正确'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: '',
+        validCode: '',
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: 'blur', message: '请输入用户名' },
+        ],
+        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+        validCode: [
+          { required: true, trigger: 'blur', validator: checkValidCode },
+        ],
+      },
+      loading: false,
+      pwdType: 'password',
+      redirect: undefined,
+      validCodeVisible: false,
+      // 刷新验证码
+      refreshCode: 0,
+      validCode: '',
+    }
+  },
+  watch: {
+    $route: {
+      deep: true,
+
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect
+        // console.log('login--redirect', this.redirect)
+        const errorCode = route.query && route.query.errorCode
+        if (errorCode === 'sso.1021') {
+          // 表示超过失败登录次数，需要显示验证码
+          this.validCodeVisible = true
+          this.loginForm.validCode = ''
+          this.refreshCode = Math.random()
+        }
+      },
+
+      immediate: true,
+    },
+  },
+  created: function () {
+    // 子系统是嵌套在iframe中的，所以需要把整个页面都显示为登录页面，而不要只在iframe中显示登录页面
+    window.top.location.href = process.env.BASE_URL + '#/login'
+  },
+  methods: {
+    showPwd() {
+      if (this.pwdType === 'password') {
+        this.pwdType = ''
+      } else {
+        this.pwdType = 'password'
+      }
+    },
+    login() {
+      // return new Promise((resolve, reject) => {
+      this.$store
+        .dispatch('login', this.loginForm)
+        .then(() => {
+          this.loading = false
+          this.$router.push({ path: this.redirect || '/' })
+          // resolve()
+        })
+        .catch((error) => {
+          this.loading = false
+          if (error.response.status === 401) {
+            // console.log('error.response login==', error.response)
+            const errorData = error.response.data
+
+            if (errorData.code === 'sso.1021') {
+              // 表示超过失败登录次数，需要显示验证码
+              this.validCodeVisible = true
+              Message({
+                message: errorData.message,
+                showClose: true,
+                type: 'error',
+                duration: 5 * 1000,
+              })
+            } else {
+              // 表示超过失败登录次数，需要锁定用户，显示提示信息
+              this.validCodeVisible = false
+              Message({
+                message: errorData.message,
+                showClose: true,
+                type: 'error',
+                duration: 5 * 1000,
+              })
+            }
+          }
+          // reject(error)
+        })
+      // })
+    },
+    handleLogin() {
+      if (!this.validCodeVisible) {
+        this.validCode = 'aaaa'
+      }
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.$store
+            .dispatch('isPasswordExpired', this.loginForm)
+            .then((message) => {
+              if (
+                typeof message !== 'undefined' &&
+                message !== null &&
+                message !== false
+              ) {
+                // 表示密码已过期，需要重置密码
+                this.$router.push({
+                  path:
+                    '/update-password?errorMessage=' +
+                    message +
+                    '&username=' +
+                    this.loginForm.username +
+                    '&redirect=' +
+                    (this.redirect || '/'),
+                })
+              } else {
+                this.login()
+              }
+            })
+            .catch((error) => {
+              this.loading = false
+              console.log('error isPasswordExpired', error)
+            })
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+$bg: #2d3a4b;
+$light_gray: #eee;
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: #fff !important;
+      }
+    }
+  }
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+.login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background-color: $bg;
+  .login-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 520px;
+    max-width: 100%;
+    padding: 35px 35px 15px 35px;
+    margin: 120px auto;
+  }
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+  .title {
+    font-size: 26px;
+    font-weight: 400;
+    color: $light_gray;
+    margin: 0px auto 40px auto;
+    text-align: center;
+    font-weight: bold;
+  }
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>

package/src/views/login/update-password.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="login-container">
+    <span v-if="overdueDay !== ''">
+      您的密码还有<strong>{{ overdueDay }}</strong
+      >将要过期，请修改密码
+    </span>
+
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <el-form-item prop="username" label="用户名">
+        <el-input
+          v-model="loginForm.username"
+          name="username"
+          type="text"
+          auto-complete="on"
+          placeholder="用户名"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item prop="password" label="原密码">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          name="password"
+          auto-complete="on"
+          placeholder="密码"
+        />
+      </el-form-item>
+      <el-form-item prop="newPassword" label="新密码">
+        <el-input
+          v-model="loginForm.newPassword"
+          type="password"
+          name="newPassword"
+          auto-complete="on"
+          placeholder="新密码"
+        />
+      </el-form-item>
+      <el-form-item prop="confirmNewPassword" label="确认新密码">
+        <el-input
+          v-model="loginForm.confirmNewPassword"
+          type="password"
+          name="confirmNewPassword"
+          auto-complete="on"
+          placeholder="请再次输入新密码"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :loading="loading"
+          :style="width"
+          type="primary"
+          @click.prevent="handleLogin"
+        >
+          确定
+        </el-button>
+        <el-button
+          v-if="overdueDay !== ''"
+          :loading="loading"
+          :style="width"
+          type="primary"
+          @click.prevent="jump"
+        >
+          跳过
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UpdatePassword',
+  data() {
+    const validatePwdEq = (rule, value, callback) => {
+      if (this.clickBtnType === 'jump') {
+        callback()
+      } else {
+        // console.log('validatePwdEq-value==', value)
+        if (this.loginForm.newPassword !== value) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: '',
+        newPassword: '',
+        confirmNewPassword: '',
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: 'blur', message: '请输入用户名' },
+        ],
+        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+        newPassword: [
+          { required: true, trigger: 'blur', message: '请输入新密码' },
+        ],
+        confirmNewPassword: [
+          { required: true, trigger: 'blur', validator: validatePwdEq },
+        ],
+      },
+      loading: false,
+      pwdType: 'password',
+      errorMessage: undefined,
+      overdueDay: '',
+      width: 'width: 100%',
+      userId: null,
+      clickBtnType: 'ok',
+      redirect: undefined,
+      username: null,
+    }
+  },
+  created: function () {
+    this.redirect = this.$route.query && this.$route.query.redirect
+    // console.log('login--update-password', this.redirect)
+    this.errorMessage = this.$route.query && this.$route.query.errorMessage
+    this.username = this.$route.query && this.$route.query.username
+    this.loginForm.username = this.username
+    if (this.username.indexOf('::') > 0) {
+      // 表示有租户编码，需要截取用户登录名
+      this.loginForm.username = this.username.substring(
+        this.username.indexOf('::') + 2
+      )
+    }
+    if (this.errorMessage.indexOf('OVERDUE_DAY:') >= 0) {
+      // 表示密码将要过期，获得过期天数
+      this.overdueDay = this.errorMessage.substring(
+        this.errorMessage.indexOf(':') + 1
+      )
+      this.width = 'width: 50%'
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.pwdType === 'password') {
+        this.pwdType = ''
+      } else {
+        this.pwdType = 'password'
+      }
+    },
+    handleLogin() {
+      // 表示点击了“确定”按钮
+      this.clickBtnType = 'ok'
+      this.login()
+    },
+    updatePassword() {
+      const map = {
+        newPassword: this.loginForm.newPassword,
+        levelPassword: this.loginForm.password,
+        loginName: this.loginForm.username,
+      }
+      this.$store
+        .dispatch('updatePassword', map)
+        .then((data) => {
+          if (data === 'success') {
+            if (this.redirect) {
+              this.$router.push({ path: this.redirect })
+            } else {
+              this.$router.push({ path: '/' })
+            }
+          }
+        })
+        .catch((e) => {
+          // console.log('error submit!!')
+          return false
+        })
+    },
+    jump() {
+      // 表示点击了“跳过”按钮
+      this.clickBtnType = 'jump'
+      this.login()
+    },
+    login() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          const map = {
+            password: this.loginForm.password,
+            username: this.username,
+          }
+          this.$store
+            .dispatch('login', map)
+            .then(() => {
+              this.loading = false
+              if (this.clickBtnType === 'ok') {
+                // 如果点击了“确定”，修改密码
+                this.updatePassword()
+              } else {
+                // 如果点击了跳过，则直接进入主页
+                this.$router.push({ path: this.redirect || '/' })
+              }
+            })
+            .catch((error) => {
+              console.log('登录失败', error)
+              this.loading = false
+              this.$router.push({ path: '/login' })
+            })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+$bg: #fff;
+$dark_gray: #889aa4;
+.login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background-color: $bg;
+  .login-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 550px;
+    max-width: 100%;
+    padding: 35px 35px 15px 35px;
+    margin: 120px auto;
+  }
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>

package/src/views/redirect/index.vue

@@ -0,0 +1,14 @@
+<script>
+import * as Vue from 'vue'
+export default {
+  beforeCreate() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+
+  render() {
+    return Vue.h() // avoid warning message
+  },
+}
+</script>

package/src/views/svg-icon/index.js

@@ -0,0 +1,6 @@
+import SvgIcon from './src/svg-icon.vue'
+SvgIcon.install = function(Vue) {
+  Vue.component(SvgIcon.name, SvgIcon)
+}
+
+export default SvgIcon

package/src/views/svg-icon/src/svg-icon.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  },
+  created(){
+    console.log('====', this.iconClass)
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.25em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/src/views/wf-history/tache-subprocess-history.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div style="padding-bottom: 10px">
+      <el-radio-group v-model="type">
+        <el-radio-button label="graph">
+          {{ $t('imatrixUIPublicModel.graphView') }}
+        </el-radio-button>
+        <el-radio-button label="list">
+          {{ $t('imatrixUIPublicModel.listView') }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div v-if="type === 'graph'" class="graphDiv">
+      <workflow-history :id="workflowId" />
+    </div>
+    <workflow-history-list v-if="type === 'list'" :workflow-id="workflowId" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TacheSubprocessHistory',
+  data() {
+    return {
+      type: 'graph',
+      workflowId: null,
+    }
+  },
+  created() {
+    const workflowId = this.$route.query.workflowId
+    if (workflowId) {
+      this.workflowId = parseInt(workflowId)
+    }
+  },
+}
+</script>
+
+<style scoped>
+.graphDiv {
+  overflow: auto;
+  height: 100%;
+  height: calc(100vh - 20px);
+}
+</style>

package/vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    outDir: "lib", //输出文件名称
+    lib: {
+      entry: path.resolve(__dirname, "./packages/index.js"), //指定组件编译入口文件
+      name: "super-ui", // 打包js 名称
+      fileName: "super-ui",
+    }, //库编译模式配置
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ["vue"],
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: "Vue",
+        },
+        // 定义生成css的名称
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name == 'style.css')
+            return 'super-ui.css'; // 打包的css名称
+          return assetInfo.name;
+        },
+      },
+    }, // rollup打包配置
+  },
+  // ...其他配置项
+  resolve: {
+    // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+  }
+});
+