code format

zhangzengfei

2021-09-07 1cb263efda55e67a8d5066edd7709b056f9b85ff

code format

 src/App.vue

@@ -5,8 +5,8 @@
</template>

<script>
  export default {
    name: 'App',
    mounted() {},
  }
export default {
  name: "App",
  mounted() {},
};
</script>

 src/api/package.js

@@ -1,9 +1,17 @@
import request from '@/utils/request'
import request from "@/utils/request";

export function publish(data) {
  return request({
    url: '/package/' + data.id + '/publish',
    method: 'post',
    url: "/package/" + data.id + "/publish",
    method: "post",
    data,
  })
  });
}

export function download(query) {
  return request({
    url: "/package/download",
    method: "get",
    params: query,
  });
}

 src/api/project.js

@@ -1,51 +1,51 @@
import request from '@/utils/request'
import request from "@/utils/request";

export function getList() {
  return request({
    url: '/projects',
    method: 'get',
  })
    url: "/projects",
    method: "get",
  });
}

export function doEdit(data) {
  if (!data.id) {
    return request({
      url: '/projects',
      method: 'post',
      url: "/projects",
      method: "post",
      data,
    })
    });
  }

  delete data.updatedAt
  delete data.createdAt
  delete data.updatedAt;
  delete data.createdAt;

  return request({
    url: '/projects',
    method: 'put',
    url: "/projects",
    method: "put",
    data,
  })
  });
}

export function deletePrj(id) {
  return request({
    url: '/projects/' + id,
    method: 'delete',
  })
    url: "/projects/" + id,
    method: "delete",
  });
}

export function getPkgList(id) {
  return request({
    url: '/projects/' + id + '/packages',
    method: 'get',
  })
    url: "/projects/" + id + "/packages",
    method: "get",
  });
}

export function buildPkg(data, version) {
  delete data.updatedAt
  delete data.createdAt
  delete data.updatedAt;
  delete data.createdAt;
  return request({
    url: '/projects/build/' + version,
    method: 'post',
    url: "/projects/build/" + version,
    method: "post",
    data,
  })
  });
}

 src/api/user.js

@@ -1,34 +1,34 @@
import request from '@/utils/request'
import { loginRSA, tokenName } from '@/config'
import request from "@/utils/request";
import { loginRSA, tokenName } from "@/config";

export async function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    url: "/user/login",
    method: "post",
    data,
  })
  });
}

export function getUserInfo(accessToken) {
  return request({
    url: '/user/info',
    method: 'post',
    url: "/user/info",
    method: "post",
    data: {
      [tokenName]: accessToken,
    },
  })
  });
}

export function logout() {
  return request({
    url: '/logout',
    method: 'post',
  })
    url: "/logout",
    method: "post",
  });
}

export function register() {
  return request({
    url: '/register',
    method: 'post',
  })
    url: "/register",
    method: "post",
  });
}

 src/views/401.vue

@@ -28,7 +28,7 @@
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="bullshit">            
          <div class="bullshit">
            <div class="bullshit-oops">{{ oops }}</div>
            <div class="bullshit-headline">{{ headline }}</div>
            <div class="bullshit-info">{{ info }}</div>
@@ -43,254 +43,254 @@
</template>

<script>
  export default {
    name: 'Page401',
    data() {
      return {
        jumpTime: 5,
        oops: '抱歉!',
        headline: '您没有操作权限...',
        info: '当前帐号没有操作权限,请联系管理员。',
        btn: '返回',
        timer: 0,
      }
export default {
  name: "Page401",
  data() {
    return {
      jumpTime: 5,
      oops: "抱歉!",
      headline: "您没有操作权限...",
      info: "当前帐号没有操作权限,请联系管理员。",
      btn: "返回",
      timer: 0,
    };
  },
  mounted() {
    this.timeChange();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    timeChange() {
      this.timer = setInterval(() => {
        if (this.jumpTime) {
          this.jumpTime--;
        } else {
          this.$router.push({ path: "/" });
          this.$store.dispatch("tabsBar/delOthersRoutes", {
            path: "/",
          });
          clearInterval(this.timer);
        }
      }, 1000);
    },
    mounted() {
      this.timeChange()
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      timeChange() {
        this.timer = setInterval(() => {
          if (this.jumpTime) {
            this.jumpTime--
          } else {
            this.$router.push({ path: '/' })
            this.$store.dispatch('tabsBar/delOthersRoutes', {
              path: '/',
            })
            clearInterval(this.timer)
          }
        }, 1000)
      },
    },
  }
  },
};
</script>

<style lang="scss" scoped>
  .error-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
.error-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

    .error-content {
      .pic-error {
        position: relative;
        float: left;
        width: 120%;
        overflow: hidden;
  .error-content {
    .pic-error {
      position: relative;
      float: left;
      width: 120%;
      overflow: hidden;

        &-parent {
          width: 100%;
        }

        &-child {
          position: absolute;

          &.left {
            top: 17px;
            left: 220px;
            width: 80px;
            opacity: 0;
            animation-name: cloudLeft;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode: forwards;
          }

          &.mid {
            top: 10px;
            left: 420px;
            width: 46px;
            opacity: 0;
            animation-name: cloudMid;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
          }

          &.right {
            top: 100px;
            left: 500px;
            width: 62px;
            opacity: 0;
            animation-name: cloudRight;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode: forwards;
          }

          @keyframes cloudLeft {
            0% {
              top: 17px;
              left: 220px;
              opacity: 0;
            }

            20% {
              top: 33px;
              left: 188px;
              opacity: 1;
            }

            80% {
              top: 81px;
              left: 92px;
              opacity: 1;
            }

            100% {
              top: 97px;
              left: 60px;
              opacity: 0;
            }
          }

          @keyframes cloudMid {
            0% {
              top: 10px;
              left: 420px;
              opacity: 0;
            }

            20% {
              top: 40px;
              left: 360px;
              opacity: 1;
            }

            70% {
              top: 130px;
              left: 180px;
              opacity: 1;
            }

            100% {
              top: 160px;
              left: 120px;
              opacity: 0;
            }
          }

          @keyframes cloudRight {
            0% {
              top: 100px;
              left: 500px;
              opacity: 0;
            }

            20% {
              top: 120px;
              left: 460px;
              opacity: 1;
            }

            80% {
              top: 180px;
              left: 340px;
              opacity: 1;
            }

            100% {
              top: 200px;
              left: 300px;
              opacity: 0;
            }
          }
        }
      &-parent {
        width: 100%;
      }

      .bullshit {
        position: relative;
        float: left;
        width: 300px;
        padding: 30px 0;
        overflow: hidden;
      &-child {
        position: absolute;

        &-oops {
          margin-bottom: 20px;
          font-size: 32px;
          font-weight: bold;
          line-height: 40px;
          color: $base-color-blue;
        &.left {
          top: 17px;
          left: 220px;
          width: 80px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1s;
          animation-fill-mode: forwards;
        }

        &-headline {
          margin-bottom: 10px;
          font-size: 20px;
          font-weight: bold;
          line-height: 24px;
          color: #222;
        &.mid {
          top: 10px;
          left: 420px;
          width: 46px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.1s;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1.2s;
          animation-fill-mode: forwards;
        }

        &-info {
          margin-bottom: 30px;
          font-size: 13px;
          line-height: 21px;
          color: $base-color-gray;
        &.right {
          top: 100px;
          left: 500px;
          width: 62px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.2s;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1s;
          animation-fill-mode: forwards;
        }

        &-return-home {
          display: block;
          float: left;
          width: 110px;
          height: 36px;
          font-size: 14px;
          line-height: 36px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          background: $base-color-blue;
          border-radius: 100px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.3s;
          animation-fill-mode: forwards;
        }

        @keyframes slideUp {
        @keyframes cloudLeft {
          0% {
            top: 17px;
            left: 220px;
            opacity: 0;
            transform: translateY(60px);
          }

          20% {
            top: 33px;
            left: 188px;
            opacity: 1;
          }

          80% {
            top: 81px;
            left: 92px;
            opacity: 1;
          }

          100% {
            top: 97px;
            left: 60px;
            opacity: 0;
          }
        }

        @keyframes cloudMid {
          0% {
            top: 10px;
            left: 420px;
            opacity: 0;
          }

          20% {
            top: 40px;
            left: 360px;
            opacity: 1;
            transform: translateY(0);
          }

          70% {
            top: 130px;
            left: 180px;
            opacity: 1;
          }

          100% {
            top: 160px;
            left: 120px;
            opacity: 0;
          }
        }

        @keyframes cloudRight {
          0% {
            top: 100px;
            left: 500px;
            opacity: 0;
          }

          20% {
            top: 120px;
            left: 460px;
            opacity: 1;
          }

          80% {
            top: 180px;
            left: 340px;
            opacity: 1;
          }

          100% {
            top: 200px;
            left: 300px;
            opacity: 0;
          }
        }
      }
    }

    .bullshit {
      position: relative;
      float: left;
      width: 300px;
      padding: 30px 0;
      overflow: hidden;

      &-oops {
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: bold;
        line-height: 40px;
        color: $base-color-blue;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }

      &-headline {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        color: #222;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }

      &-info {
        margin-bottom: 30px;
        font-size: 13px;
        line-height: 21px;
        color: $base-color-gray;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }

      &-return-home {
        display: block;
        float: left;
        width: 110px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: $base-color-blue;
        border-radius: 100px;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }

      @keyframes slideUp {
        0% {
          opacity: 0;
          transform: translateY(60px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}
</style>

 src/views/404.vue

@@ -43,254 +43,254 @@
</template>

<script>
  export default {
    name: 'Page404',
    data() {
      return {
        jumpTime: 5,
        oops: '抱歉!',
        headline: '当前页面不存在...',
        info: '请检查您输入的网址是否正确，或点击下面的按钮返回首页。',
        btn: '返回首页',
        timer: 0,
      }
export default {
  name: "Page404",
  data() {
    return {
      jumpTime: 5,
      oops: "抱歉!",
      headline: "当前页面不存在...",
      info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
      btn: "返回首页",
      timer: 0,
    };
  },
  mounted() {
    this.timeChange();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    timeChange() {
      this.timer = setInterval(() => {
        if (this.jumpTime) {
          this.jumpTime--;
        } else {
          this.$router.push({ path: "/" });
          this.$store.dispatch("tabsBar/delOthersRoutes", {
            path: "/",
          });
          clearInterval(this.timer);
        }
      }, 1000);
    },
    mounted() {
      this.timeChange()
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      timeChange() {
        this.timer = setInterval(() => {
          if (this.jumpTime) {
            this.jumpTime--
          } else {
            this.$router.push({ path: '/' })
            this.$store.dispatch('tabsBar/delOthersRoutes', {
              path: '/',
            })
            clearInterval(this.timer)
          }
        }, 1000)
      },
    },
  }
  },
};
</script>

<style lang="scss" scoped>
  .error-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
.error-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

    .error-content {
      .pic-error {
        position: relative;
        float: left;
        width: 120%;
        overflow: hidden;
  .error-content {
    .pic-error {
      position: relative;
      float: left;
      width: 120%;
      overflow: hidden;

        &-parent {
          width: 100%;
        }

        &-child {
          position: absolute;

          &.left {
            top: 17px;
            left: 220px;
            width: 80px;
            opacity: 0;
            animation-name: cloudLeft;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode: forwards;
          }

          &.mid {
            top: 10px;
            left: 420px;
            width: 46px;
            opacity: 0;
            animation-name: cloudMid;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
          }

          &.right {
            top: 100px;
            left: 500px;
            width: 62px;
            opacity: 0;
            animation-name: cloudRight;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode: forwards;
          }

          @keyframes cloudLeft {
            0% {
              top: 17px;
              left: 220px;
              opacity: 0;
            }

            20% {
              top: 33px;
              left: 188px;
              opacity: 1;
            }

            80% {
              top: 81px;
              left: 92px;
              opacity: 1;
            }

            100% {
              top: 97px;
              left: 60px;
              opacity: 0;
            }
          }

          @keyframes cloudMid {
            0% {
              top: 10px;
              left: 420px;
              opacity: 0;
            }

            20% {
              top: 40px;
              left: 360px;
              opacity: 1;
            }

            70% {
              top: 130px;
              left: 180px;
              opacity: 1;
            }

            100% {
              top: 160px;
              left: 120px;
              opacity: 0;
            }
          }

          @keyframes cloudRight {
            0% {
              top: 100px;
              left: 500px;
              opacity: 0;
            }

            20% {
              top: 120px;
              left: 460px;
              opacity: 1;
            }

            80% {
              top: 180px;
              left: 340px;
              opacity: 1;
            }

            100% {
              top: 200px;
              left: 300px;
              opacity: 0;
            }
          }
        }
      &-parent {
        width: 100%;
      }

      .bullshit {
        position: relative;
        float: left;
        width: 300px;
        padding: 30px 0;
        overflow: hidden;
      &-child {
        position: absolute;

        &-oops {
          margin-bottom: 20px;
          font-size: 32px;
          font-weight: bold;
          line-height: 40px;
          color: $base-color-blue;
        &.left {
          top: 17px;
          left: 220px;
          width: 80px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1s;
          animation-fill-mode: forwards;
        }

        &-headline {
          margin-bottom: 10px;
          font-size: 20px;
          font-weight: bold;
          line-height: 24px;
          color: #222;
        &.mid {
          top: 10px;
          left: 420px;
          width: 46px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.1s;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1.2s;
          animation-fill-mode: forwards;
        }

        &-info {
          margin-bottom: 30px;
          font-size: 13px;
          line-height: 21px;
          color: $base-color-gray;
        &.right {
          top: 100px;
          left: 500px;
          width: 62px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.2s;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-delay: 1s;
          animation-fill-mode: forwards;
        }

        &-return-home {
          display: block;
          float: left;
          width: 110px;
          height: 36px;
          font-size: 14px;
          line-height: 36px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          background: $base-color-blue;
          border-radius: 100px;
          opacity: 0;
          animation-name: slideUp;
          animation-duration: 0.5s;
          animation-delay: 0.3s;
          animation-fill-mode: forwards;
        }

        @keyframes slideUp {
        @keyframes cloudLeft {
          0% {
            top: 17px;
            left: 220px;
            opacity: 0;
            transform: translateY(60px);
          }

          20% {
            top: 33px;
            left: 188px;
            opacity: 1;
          }

          80% {
            top: 81px;
            left: 92px;
            opacity: 1;
          }

          100% {
            top: 97px;
            left: 60px;
            opacity: 0;
          }
        }

        @keyframes cloudMid {
          0% {
            top: 10px;
            left: 420px;
            opacity: 0;
          }

          20% {
            top: 40px;
            left: 360px;
            opacity: 1;
            transform: translateY(0);
          }

          70% {
            top: 130px;
            left: 180px;
            opacity: 1;
          }

          100% {
            top: 160px;
            left: 120px;
            opacity: 0;
          }
        }

        @keyframes cloudRight {
          0% {
            top: 100px;
            left: 500px;
            opacity: 0;
          }

          20% {
            top: 120px;
            left: 460px;
            opacity: 1;
          }

          80% {
            top: 180px;
            left: 340px;
            opacity: 1;
          }

          100% {
            top: 200px;
            left: 300px;
            opacity: 0;
          }
        }
      }
    }

    .bullshit {
      position: relative;
      float: left;
      width: 300px;
      padding: 30px 0;
      overflow: hidden;

      &-oops {
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: bold;
        line-height: 40px;
        color: $base-color-blue;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }

      &-headline {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        color: #222;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }

      &-info {
        margin-bottom: 30px;
        font-size: 13px;
        line-height: 21px;
        color: $base-color-gray;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }

      &-return-home {
        display: block;
        float: left;
        width: 110px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: $base-color-blue;
        border-radius: 100px;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }

      @keyframes slideUp {
        0% {
          opacity: 0;
          transform: translateY(60px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}
</style>

 src/views/index/index.vue

@@ -4,8 +4,8 @@

<script>
export default {
  name: '',
}
  name: "",
};
</script>

<style></style>

 src/views/login/index.vue

@@ -74,254 +74,254 @@
</template>

<script>
  import { isPassword } from '@/utils/validate'
import { isPassword } from "@/utils/validate";

  export default {
    name: 'Login',
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
export default {
  name: "Login",
  directives: {
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
    data() {
      const validateusername = (rule, value, callback) => {
        if ('' == value) {
          callback(new Error('用户名不能为空'))
  },
  data() {
    const validateusername = (rule, value, callback) => {
      if ("" == value) {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    return {
      nodeEnv: process.env.NODE_ENV,
      title: this.$baseTitle,
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateusername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || "/";
      },
      immediate: true,
    },
  },
  created() {
    document.body.style.overflow = "hidden";
  },
  beforeDestroy() {
    document.body.style.overflow = "auto";
  },
  mounted() {
    this.form.username = "admin";
    this.form.password = "123456";
    setTimeout(() => {
      this.handleLogin();
    }, 3000);
  },
  methods: {
    handlePassword() {
      this.passwordType === "password"
        ? (this.passwordType = "")
        : (this.passwordType = "password");
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.form)
            .then(() => {
              const routerPath =
                this.redirect === "/404" || this.redirect === "/401"
                  ? "/"
                  : this.redirect;
              this.$router.push(routerPath).catch(() => {});
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          callback()
          return false;
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      return {
        nodeEnv: process.env.NODE_ENV,
        title: this.$baseTitle,
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {
              required: true,
              trigger: 'blur',
              validator: validateusername,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
      }
      });
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    created() {
      document.body.style.overflow = 'hidden'
    },
    beforeDestroy() {
      document.body.style.overflow = 'auto'
    },
    mounted() {
      this.form.username = 'admin'
      this.form.password = '123456'
      setTimeout(() => {
        this.handleLogin()
      }, 3000)
    },
    methods: {
      handlePassword() {
        this.passwordType === 'password'
          ? (this.passwordType = '')
          : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleLogin() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store
              .dispatch('user/login', this.form)
              .then(() => {
                const routerPath =
                  this.redirect === '/404' || this.redirect === '/401'
                    ? '/'
                    : this.redirect
                this.$router.push(routerPath).catch(() => {})
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      },
    },
  }
  },
};
</script>

<style lang="scss" scoped>
  .login-container {
    height: 100vh;
    background: url('~@/assets/login_images/background.jpg') center center fixed
      no-repeat;
    background-size: cover;
.login-container {
  height: 100vh;
  background: url("~@/assets/login_images/background.jpg") center center fixed
    no-repeat;
  background-size: cover;

    .title {
      font-size: 54px;
      font-weight: 500;
      color: rgba(14, 18, 26, 1);
  .title {
    font-size: 54px;
    font-weight: 500;
    color: rgba(14, 18, 26, 1);
  }

  .title-tips {
    margin-top: 29px;
    font-size: 26px;
    font-weight: 400;
    color: rgba(14, 18, 26, 1);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login-btn {
    display: inherit;
    width: 220px;
    height: 60px;
    margin-top: 5px;
    border: 0;

    &:hover {
      opacity: 0.9;
    }
  }

    .title-tips {
      margin-top: 29px;
      font-size: 26px;
      font-weight: 400;
      color: rgba(14, 18, 26, 1);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  .login-form {
    position: relative;
    max-width: 100%;
    margin: calc((100vh - 425px) / 2) 10% 10%;
    overflow: hidden;

    .login-btn {
      display: inherit;
      width: 220px;
      height: 60px;
      margin-top: 5px;
      border: 0;
    .forget-password {
      width: 100%;
      margin-top: 40px;
      text-align: left;

      &:hover {
        opacity: 0.9;
      }
    }

    .login-form {
      position: relative;
      max-width: 100%;
      margin: calc((100vh - 425px) / 2) 10% 10%;
      overflow: hidden;

      .forget-password {
        width: 100%;
        margin-top: 40px;
        text-align: left;

        .forget-pass {
          width: 129px;
          height: 19px;
          font-size: 20px;
          font-weight: 400;
          color: rgba(92, 102, 240, 1);
        }
      }
    }

    .tips {
      margin-bottom: 10px;
      font-size: $base-font-size-default;
      color: $base-color-white;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .title-container {
      position: relative;

      .title {
        margin: 0 auto 40px auto;
        font-size: 34px;
        font-weight: bold;
        color: $base-color-blue;
        text-align: center;
      }
    }

    .svg-container {
      position: absolute;
      top: 14px;
      left: 15px;
      z-index: $base-z-index;
      font-size: 16px;
      color: #d7dee3;
      cursor: pointer;
      user-select: none;
    }

    .show-password {
      position: absolute;
      top: 14px;
      right: 25px;
      font-size: 16px;
      color: #d7dee3;
      cursor: pointer;
      user-select: none;
    }

    ::v-deep {
      .el-form-item {
        padding-right: 0;
        margin: 20px 0;
        color: #454545;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 2px;

        &__content {
          min-height: $base-input-height;
          line-height: $base-input-height;
        }

        &__error {
          position: absolute;
          top: 100%;
          left: 18px;
          font-size: $base-font-size-small;
          line-height: 18px;
          color: $base-color-red;
        }
      }

      .el-input {
        box-sizing: border-box;

        input {
          height: 58px;
          padding-left: 45px;
          font-size: $base-font-size-default;
          line-height: 58px;
          color: $base-font-color;
          background: #f6f4fc;
          border: 0;
          caret-color: $base-font-color;
        }
      .forget-pass {
        width: 129px;
        height: 19px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(92, 102, 240, 1);
      }
    }
  }

  .tips {
    margin-bottom: 10px;
    font-size: $base-font-size-default;
    color: $base-color-white;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .title-container {
    position: relative;

    .title {
      margin: 0 auto 40px auto;
      font-size: 34px;
      font-weight: bold;
      color: $base-color-blue;
      text-align: center;
    }
  }

  .svg-container {
    position: absolute;
    top: 14px;
    left: 15px;
    z-index: $base-z-index;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  .show-password {
    position: absolute;
    top: 14px;
    right: 25px;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  ::v-deep {
    .el-form-item {
      padding-right: 0;
      margin: 20px 0;
      color: #454545;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;

      &__content {
        min-height: $base-input-height;
        line-height: $base-input-height;
      }

      &__error {
        position: absolute;
        top: 100%;
        left: 18px;
        font-size: $base-font-size-small;
        line-height: 18px;
        color: $base-color-red;
      }
    }

    .el-input {
      box-sizing: border-box;

      input {
        height: 58px;
        padding-left: 45px;
        font-size: $base-font-size-default;
        line-height: 58px;
        color: $base-font-color;
        background: #f6f4fc;
        border: 0;
        caret-color: $base-font-color;
      }
    }
  }
}
</style>

 src/views/project/components/ProjectEdit.vue

@@ -19,7 +19,10 @@
            <el-input v-model.trim="form.srcUser" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目密码" prop="srcPassword">
            <el-input v-model.trim="form.srcPassword" autocomplete="off"></el-input>
            <el-input
              v-model.trim="form.srcPassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="desc">
            <el-input v-model.trim="form.desc" autocomplete="off"></el-input>
@@ -61,59 +64,59 @@
</template>

<script>
import { doEdit } from '@/api/project'
import { doEdit } from "@/api/project";

export default {
  name: 'ProjectEdit',
  name: "ProjectEdit",
  data() {
    return {
      activeName: 'base',
      activeName: "base",
      form: {
        title: '',
        author: '',
        title: "",
        author: "",
      },
      rules: {
        title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
        title: [{ required: true, trigger: "blur", message: "请输入标题" }],
        author: [{ required: true, trigger: "blur", message: "请输入作者" }],
      },
      title: '',
      title: "",
      dialogFormVisible: false,
    }
    };
  },
  created() { },
  created() {},
  methods: {
    showEdit(row) {
      if (!row) {
        this.title = '添加'
        this.title = "添加";
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
        this.title = "编辑";
        this.form = Object.assign({}, row);
      }
      this.dialogFormVisible = true
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
      this.$emit('fetch-data')
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit("fetch-data");
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const { msg } = await doEdit(this.form)
          this.$baseMessage(msg, 'success')
          this.$refs['form'].resetFields()
          this.dialogFormVisible = false
          this.$emit('fetch-data')
          this.form = this.$options.data().form
          const { msg } = await doEdit(this.form);
          this.$baseMessage(msg, "success");
          this.$refs["form"].resetFields();
          this.dialogFormVisible = false;
          this.$emit("fetch-data");
          this.form = this.$options.data().form;
        } else {
          return false
          return false;
        }
      })
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
  },
}
};
</script>

 src/views/project/index.vue

@@ -2,7 +2,12 @@
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
        <el-form
          ref="form"
          :model="queryForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="queryForm.title" placeholder="名称" />
          </el-form-item>
@@ -24,14 +29,18 @@
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >查询</el-button>
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加</el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
          添加</el-button
        >
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
          >删除</el-button
        >
      </vab-query-form-right-panel>
    </vab-query-form>

@@ -47,7 +56,11 @@
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.pkgList" :show-header="false" style="width: 100%">
          <el-table
            :data="props.row.pkgList"
            :show-header="false"
            style="width: 100%"
          >
            <el-table-column prop="fileName"></el-table-column>
            <el-table-column prop="version" width="150"></el-table-column>
            <el-table-column prop="commit" width="150"></el-table-column>
@@ -58,9 +71,14 @@
                <el-tag>{{ packageState[row.state] }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="120">
            <el-table-column width="200">
              <template #default="scope">
                <el-button size="small" @click="handlePublish(scope.row)">发布</el-button>
                <el-button size="small" @click="handlePublish(scope.row)"
                  >发布</el-button
                >
                <el-button size="small" @click="handleDownload(scope.row)"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
@@ -70,8 +88,16 @@
      <el-table-column show-overflow-tooltip label="序号" width="95">
        <template #default="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="项目名称"></el-table-column>
      <el-table-column show-overflow-tooltip prop="srcUrl" label="项目地址"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="项目名称"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="srcUrl"
        label="项目地址"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="type" label="类型">
        <template #default="{ row }">
          <el-tag>{{ row.type | typeFilter }}</el-tag>
@@ -83,12 +109,26 @@
          <el-tag>{{ row.state | stateFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" width="200"></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdAt"
        width="200"
      ></el-table-column>
      <el-table-column label="操作" width="180px">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" style="color: red" @click="handleDeleteRow(row)">删除</el-button>
          <el-button type="text" style="color: deepskyblue" @click="handlePack(row)">打包</el-button>
          <el-button
            type="text"
            style="color: red"
            @click="handleDeleteRow(row)"
            >删除</el-button
          >
          <el-button
            type="text"
            style="color: deepskyblue"
            @click="handlePack(row)"
            >打包</el-button
          >
        </template>
      </el-table-column>
    </el-table>
@@ -106,28 +146,28 @@
</template>

<script>
import { getList, deletePrj, getPkgList, buildPkg } from '@/api/project'
import { publish } from '@/api/package'
import { getList, deletePrj, getPkgList, buildPkg } from "@/api/project";
import { publish, download } from "@/api/package";

import TableEdit from './components/ProjectEdit.vue'
import TableEdit from "./components/ProjectEdit.vue";
export default {
  name: 'ComprehensiveTable',
  name: "ComprehensiveTable",
  components: {
    TableEdit,
  },
  filters: {
    stateFilter(state) {
      const stateMap = ['下载中', '同步完成', '同步失败']
      const stateMap = ["下载中", "同步完成", "同步失败"];

      return stateMap[state]
      return stateMap[state];
    },
    typeFilter(type) {
      const typeMap = {
        sys: '系统包',
        app: '应用包',
        algo: '算法包',
      }
      return typeMap[type]
        sys: "系统包",
        app: "应用包",
        algo: "算法包",
      };
      return typeMap[type];
    },
  },
  data() {
@@ -135,137 +175,147 @@
      imgShow: true,
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      layout: "total, sizes, prev, pager, next, jumper",
      packageState: [
        '完成',
        '已提交',
        '排队中',
        '打包中',
        '编译失败',
        '打包失败',
        "完成",
        "已提交",
        "排队中",
        "打包中",
        "编译失败",
        "打包失败",
      ],
      total: 0,
      background: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      selectRows: "",
      elementLoadingText: "正在加载...",
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        title: '',
        title: "",
      },
    }
    };
  },
  computed: {
    height() {
      return this.$baseTableHeight()
      return this.$baseTableHeight();
    },
  },
  created() {
    this.fetchData()
    this.fetchData();
  },
  beforeDestroy() { },
  mounted() { },
  beforeDestroy() {},
  mounted() {},
  methods: {
    setSelectRows(val) {
      this.selectRows = val
      this.selectRows = val;
    },
    handleAdd() {
      this.$refs['edit'].showEdit()
      this.$refs["edit"].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row)
      this.$refs["edit"].showEdit(row);
    },
    handleDelete(row) {
      if (this.selectRows.length > 0) {
        const ids = this.selectRows.map((item) => item.id).join()
        this.$baseConfirm('你确定要删除选中项吗', null, async () => {
          const { msg } = await doDelete({ ids: ids })
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
        const ids = this.selectRows.map((item) => item.id).join();
        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
          const { msg } = await doDelete({ ids: ids });
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        this.$baseMessage('未选中任何行', 'error')
        return false
        this.$baseMessage("未选中任何行", "error");
        return false;
      }
    },
    handleDeleteRow(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await deletePrj(row.id)
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const { msg } = await deletePrj(row.id);
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      }
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    handleQuery() {
      this.queryForm.pageNo = 1
      this.fetchData()
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true
      const { data, total } = await getList(this.queryForm)
      this.listLoading = true;
      const { data, total } = await getList(this.queryForm);

      if (data) {
        data.forEach((item) => {
          item.pkgList = []
        })
          item.pkgList = [];
        });

        this.list = data
        this.list = data;
      }

      this.total = total
      this.total = total;
      setTimeout(() => {
        this.listLoading = false
      }, 500)
        this.listLoading = false;
      }, 500);
    },

    async expandChange(row, expandRows) {
      console.log(row)
      console.log(row);
      if (expandRows.length == 0) {
        console.log('fold')
        return
        console.log("fold");
        return;
      }

      const { data, total } = await getPkgList(row.id)
      const { data, total } = await getPkgList(row.id);
      this.list.forEach((item, idx) => {
        if (item.id === row.id) {
          this.list[idx].pkgList = data
          this.list[idx].pkgList = data;
        }
      })
      });
    },
    handlePack(row) {
      this.$prompt('请输入版本号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      this.$prompt("请输入版本号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /[\d+][\.\d+]*/,
        inputErrorMessage: '版本号格式不正确,例 1.0.0, 10.1.100',
        inputErrorMessage: "版本号格式不正确,例 1.0.0, 10.1.100",
      })
        .then(({ value }) => {
          buildPkg(row, value).then((rsp) => {
            console.log(rsp)
            this.expandChange(row, 1)
          })
            console.log(rsp);
            this.expandChange(row, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlePublish(row) {
      publish(row).then((rsp) => {
        console.log(rsp)
      })
        if (rsp && rsp.success) {
          this.$baseMessage(rsp.msg, "success");
        }
      });
    },
    handleDownload(row) {
      download({ path: row.filePath }).then((rsp) => {
        if (rsp && rsp.success) {
          console.log(rsp);
          window.location = rsp.data;
        }
      });
    },
  },
}
};
</script>