Skip to content

D
deploy-ui
Commit 485ce0f5 authored by zhouzihao's avatar zhouzihao
Browse files
Options

init

parents
Pipeline #114 failed with stages
      Expand all Show whitespace changes
      Inline Side-by-side
      Showing with 693 additions and 0 deletions
      .browserslistrc 0 → 100644
      View file @ 485ce0f5
      > 1%
      last 2 versions
      not ie <= 8
      .gitignore 0 → 100644
      View file @ 485ce0f5
      .DS_Store
      node_modules
      /dist
      # local env files
      .env.local
      .env.*.local
      # Log files
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      # Editor directories and files
      .idea
      .vscode
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw*
      README.md 0 → 100644
      View file @ 485ce0f5
      # iview-layoutui
      ## Project setup
      ```
      yarn install
      ```
      ### Compiles and hot-reloads for development
      ```
      yarn run serve
      ```
      ## Layout.vue
      该组件是整个项目的框架UI，详细请查看代码。
      ## Master.vue
      该组件是内容区域通用页面，我已经使用Slot设计好样式已经统一，你们只要往里面放相应的标题、按钮、表格、分页就好。
      ### Customize configuration
      See [Configuration Reference](https://cli.vuejs.org/config/).
      babel.config.js 0 → 100644
      View file @ 485ce0f5
      module.exports = {
      presets: [
      '@vue/app'
      ]
      }
      package-lock.json 0 → 100644
      View file @ 485ce0f5
      This diff is collapsed.
      package.json 0 → 100644
      View file @ 485ce0f5
      {
      "name": "iview-layoutui",
      "version": "0.1.0",
      "private": true,
      "homepage": "http://awbeci.xyz/iview-layoutui/",
      "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "predeploy": "npm run build",
      "deploy": "gh-pages -d dist"
      },
      "dependencies": {
      "axios": "^0.19.2",
      "iview": "^3.1.5",
      "vue": "^2.5.17",
      "vue-router": "^3.0.1"
      },
      "devDependencies": {
      "@vue/cli-plugin-babel": "^3.2.0",
      "@vue/cli-service": "^3.2.0",
      "gh-pages": "^2.0.1",
      "postcss-calc": "^7.0.1",
      "postcss-cssnext": "^3.1.0",
      "postcss-import": "^12.0.1",
      "vue-template-compiler": "^2.5.17"
      }
      }
      postcss.config.js 0 → 100644
      View file @ 485ce0f5
      module.exports = {
      plugins: {
      "postcss-import": {},
      "postcss-cssnext": {}
      }
      }
      public/index.html 0 → 100644
      View file @ 485ce0f5
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>iview-layoutui</title>
      </head>
      <body>
      <noscript>
      <strong>We're sorry but iview-layoutui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      </body>
      </html>
      src/App.vue 0 → 100644
      View file @ 485ce0f5
      <template>
      <div id="app">
      <router-view/>
      </div>
      </template>
      <style>
      *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }
      html, body{
      width:100%;
      height: 100%;
      overflow: hidden;
      }
      *, :after, :before {
      box-sizing: border-box;
      }
      #app {
      width:100%;
      height: 100%;
      margin:0;
      padding:0;
      }
      </style>
      src/assets/common.pcss 0 → 100644
      View file @ 485ce0f5
      .content-wrapper {
      & >>>.ivu-table th{
      background-color: #0062c6 !important;
      color: #fff !important;
      }
      /**状态前面小圆点样式*/
      & >>> .red-cir {
      width: 11px;
      height: 11px;
      display: inline-block;
      background: #e74c3c;
      border-radius: 50% 50%;
      margin-right: 5px;
      }
      & >>> .green-cir {
      width: 11px;
      height: 11px;
      display: inline-block;
      background: #19be6b;
      border-radius: 50% 50%;
      margin-right: 5px;
      }
      & >>> .ivu-dropdown-item{
      transition: unset !important;
      &:hover {
      background: #008CEE !important;
      color:#fff !important;
      }
      }
      & >>> .ivu-select-item{
      transition: unset !important;
      &:hover {
      background: #008CEE !important;
      color:#fff !important;
      }
      }
      & >>> .ivu-select-item-focus{
      background: #fff !important;
      color:#008CEE !important;
      font-weight:bold;
      }
      }
      .dd-menu{
      & >>> .ivu-dropdown-item{
      transition: unset !important;
      &:hover {
      background: #008CEE !important;
      color:#fff !important;
      }
      }
      }
      \ No newline at end of file
      src/components/Layout.vue 0 → 100644
      View file @ 485ce0f5
      This diff is collapsed.
      src/components/Master.vue 0 → 100644
      View file @ 485ce0f5
      <style lang="postcss" scoped>
      .master-page-container{
      background-color: #fff;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
      & .master-page-wrap{
      & .title-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:10px 15px;
      border-bottom: 1px solid #dddee1;
      & .title-content{
      display: flex;
      align-items: center;
      & .title-icon{
      display: flex;
      align-items: center;
      margin-right:5px;
      }
      & p.title{
      font-size: 14px;
      font-weight: bold;
      }
      }
      & .title-toolbar{
      }
      }
      & .master-page-search-content{
      padding: 15px;
      padding-bottom: 0;
      }
      & .master-page-content-toolbar{
      padding: 15px;
      padding-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      & .bar-search{
      &.input-search{
      width:350px;
      }
      }
      & .bar-group{
      }
      }
      & .master-page-padding-content{
      padding:15px;
      background: #fff;
      padding-bottom: 0;
      }
      & .master-page-nopadding-content{
      padding-bottom: 0;
      background: #fff;
      padding-left: 18px;
      }
      & .page-wrapper{
      padding:15px;
      display: flex;
      width: 100%;
      justify-content: flex-end;
      }
      }
      }
      </style>
      <template>
      <section class="master-page-container">
      <div class="master-page-wrap">
      <div class="title-header" v-if="title">
      <div class="title-content">
      <div class="title-icon">
      <slot name="title-icon"></slot>
      </div>
      <p class="title">{{title}}</p>
      </div>
      <div class="title-toolbar">
      <slot name="title-toolbar"></slot>
      </div>
      </div>
      <div class="master-page-search-content" v-if="$slots.searchContent">
      <slot name="searchContent"></slot>
      </div>
      <div class="master-page-content-toolbar" v-if="$slots.search || $slots.btns">
      <div class="bar-search">
      <slot name="search"></slot>
      </div>
      <div class="bar-group">
      <slot name="btns"></slot>
      </div>
      </div>
      <!--$slots.content表示$slots里面是否存在content内容，就是说这里的占位符可填充了内容-->
      <div class="master-page-padding-content" v-if="$slots.paddingContent">
      <slot name="paddingContent"></slot>
      </div>
      <div class="master-page-nopadding-content" v-if="$slots.content">
      <slot name="content"></slot>
      </div>
      <div class="page-wrapper">
      <slot name="pager"/>
      </div>
      </div>
      </section>
      </template>
      <script>
      export default {
      data(){
      return{
      }
      },
      props:{
      title:{
      type:String
      }
      },
      mounted(){
      console.log('paddingContent=',this.$slots)
      },
      methods:{
      }
      }
      </script>
      src/config/configs.js 0 → 100644
      View file @ 485ce0f5
      const serve_url = "http://127.0.0.1:3000"
      export default {
      serve_url,
      }
      \ No newline at end of file
      src/main.js 0 → 100644
      View file @ 485ce0f5
      import Vue from 'vue'
      import App from './App.vue'
      import router from './router'
      Vue.config.productionTip = false
      import iView from 'iview';
      import 'iview/dist/styles/iview.css';
      Vue.use(iView);
      new Vue({
      router,
      render: h => h(App)
      }).$mount('#app')
      src/router.js 0 → 100644
      View file @ 485ce0f5
      import Vue from 'vue'
      import Router from 'vue-router'
      import Home from './views/Home.vue'
      Vue.use(Router)
      export default new Router({
      // mode: 'history',
      routes: [
      {
      path: '/',
      name: 'home',
      component: () => import('@/components/Layout'),
      children: [
      {
      path: '',
      name: 'home',
      component: () => import('@/views/Home')
      },
      {
      path: '/home',
      name: 'home2',
      component: () => import('@/views/Home')
      },
      //项目列表
      {
      path: 'projectlist',
      name: 'projectlist',
      component: () => import('@/views/ProjectList')
      },
      // 环境列表
      // 配置列表
      // 构建日志列表
      // 源数据
      ]
      },
      // 这个有什么用？？？
      {
      path: '/login',
      name: 'login',
      meta: {
      title: '登录',
      },
      component: () => import('@/views/Login')
      },
      ]
      })
      src/views/About.vue 0 → 100644
      View file @ 485ce0f5
      <template>
      <div class="about">
      <h1>This is an about page</h1>
      </div>
      </template>
      src/views/Home.vue 0 → 100644
      View file @ 485ce0f5
      <template>
      <div>
      <h1>Welcome</h1>
      </div>
      </template>
      \ No newline at end of file
      src/views/Login.vue 0 → 100644
      View file @ 485ce0f5
      <style lang="postcss" scoped>
      .login-container{
      display:flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: calc(100%);
      & .bg-wrap{
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      }
      & .card-wrap{
      position: absolute;
      right:100px;
      top:200px;
      }
      & .icon-cls{
      font-weight:bold;
      width:20px;
      font-size:18px;
      }
      }
      </style>
      <template>
      <section class="login-container">
      <div class="bg-wrap" :style="{backgroundImage:`url(${login_img})`}">
      <div class="card-wrap">
      <Card style="width:350px" :dis-hover="true">
      <p slot="title">
      <Icon type="log-in"></Icon>
      欢迎登录
      </p>
      <Form ref="userForm" :model="userForm" :rules="ruleCustom">
      <FormItem prop="username">
      <Input v-model.trim="userForm.username" placeholder="请输入" size="large">
      <Icon type="ios-person-outline" slot="prepend" class="icon-cls"></Icon>
      </Input>
      </FormItem>
      <FormItem prop="password">
      <Input type="password" v-model.trim="userForm.password" placeholder="请输入密码" size="large">
      <Icon type="ios-lock-outline" slot="prepend" class="icon-cls"></Icon>
      </Input>
      </FormItem>
      <FormItem>
      <Button type="primary" @click="btn_login()" long :loading="login_loading">登录</Button>
      </FormItem>
      </Form>
      </Card>
      </div>
      </div>
      </section>
      </template>
      <script>
      export default {
      data(){
      return {
      login_loading:false,
      login_img:require("@/assets/login-bg.jpg"),
      userForm:{
      username:'',
      password:''
      },
      ruleCustom: {
      username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' }
      ],
      password: [
      { required: true, message: '密码不能为空', trigger: 'blur' }
      ]
      }
      }
      },
      methods:{
      btn_login(){
      this.$router.push('/')
      }
      }
      }
      </script>
      src/views/ProjectList.vue 0 → 100644
      View file @ 485ce0f5
      <style lang="postcss" scoped>
      .home-container {
      }
      .demo-drawer-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
      }
      </style>
      <template>
      <section class="home-container">
      <MasterPage title="项目列表">
      <div slot="title-icon">
      <Icon type="ios-game-controller-b" />
      </div>
      <div slot="title-toolbar">
      <!-- <Button type="primary" icon="md-add" @click="">新增</Button> -->
      </div>
      <div slot="searchContent" class="search-content-slot">
      <!-- 表单位置 -->
      </div>
      <div slot="search">
      <Button type="info" icon="ios-search" @click="getList">查询</Button>
      </div>
      <div slot="btns">
      <Button type="primary" icon="md-add" @click="addShow">添加</Button>
      </div>
      <div slot="paddingContent">
      <Table :columns="columns1" :data="data1"></Table>
      </div>
      <div slot="pager">
      <Page :total="total" :current="page" :page-size="pageSize" @on-change="pageChange" />
      </div>
      </MasterPage>
      <Drawer title="项目详情" :closable="false" v-model="isShow" width="720">
      <div>
      <Form :model="showData" label-position="left" :label-width="100">
      <FormItem label="项目名称">
      <Input v-model="showData.name"></Input>
      </FormItem>
      <FormItem label="项目git地址">
      <Input v-model="showData.source_git_url"></Input>
      </FormItem>
      <FormItem label="项目描述">
      <Input v-model="showData.description"></Input>
      </FormItem>
      <FormItem label="项目类型">
      <Input v-model="showData.type"></Input>
      </FormItem>
      <FormItem label="项目版本">
      <Input v-model="showData.version"></Input>
      </FormItem>
      <FormItem label="项目源数据">
      <Input v-model="showData.meta_data" type="textarea" :autosize="true"></Input>
      </FormItem>
      </Form>
      </div>
      <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="isShow= false">取消</Button>
      <Button type="primary" @click="save">保存</Button>
      </div>
      </Drawer>
      </section>
      </template>
      <script>
      import MasterPage from "@/components/Master";
      import axios from "axios";
      import config from "@/config/configs"
      export default {
      components: {
      MasterPage
      },
      data() {
      return {
      columns1: [
      {
      title: "项目id",
      key: "p_id",
      width: 100,
      fixed: "left"
      },
      {
      title: "git地址",
      key: "source_git_url",
      width: 300
      },
      {
      title: "项目名称",
      key: "name",
      width: 300
      },
      {
      title: "项目描述",
      key: "description",
      width: 300
      },
      {
      title: "项目版本",
      key: "version",
      width: 100
      },
      {
      title: "项目类型",
      key: "type",
      width: 100
      },
      {
      title: "项目数据",
      key: "meta_data",
      width: 300
      },
      {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 150,
      render: (h, params) => {
      return h("div", [
      h(
      "Button",
      {
      props: {
      type: "primary",
      size: "small"
      },
      style: {
      marginRight: "5px"
      },
      on: {
      click: () => {
      this.show(params.index);
      }
      }
      },
      "显示"
      ),
      h(
      "Button",
      {
      props: {
      type: "primary",
      size: "small"
      }
      },
      "build"
      )
      ]);
      }
      }
      ],
      data1: [],
      page: 1,
      pageSize: 10,
      total: 0,
      isShow: false,
      isAdd: false,
      showData: {}
      };
      },
      methods: {
      getList: function() {
      axios
      .get(
      config.serve_url+"/project/page?page=" +
      this.page +
      "&pageSize=" +
      this.pageSize
      )
      .then(rs => {
      if (rs.status == 200) {
      this.data1 = rs.data.data;
      this.total = rs.data.paged.total;
      }
      })
      .catch(err => {
      console.log(JSON.stringify(err));
      });
      },
      addShow: function() {
      this.isShow = true;
      this.showData = {};
      },
      show: function(index) {
      this.isShow = true;
      this.showData = this.data1[index];
      },
      build: function() {
      //
      },
      save: function() {
      //保存或者新建
      this.isShow = false;
      axios
      .post( config.serve_url+"/project/", this.showData)
      .then(res => {
      this.$Message.success("操作成功");
      this.getList();
      })
      .catch(err => {
      this.$Message.error(err);
      });
      },
      pageChange: function(i) {
      this.page = i;
      this.getList();
      }
      },
      mounted: function() {
      this.getList();
      }
      };
      </script>
      \ No newline at end of file
      vue.config.js 0 → 100644
      View file @ 485ce0f5
      module.exports = {
      baseUrl: 'iview-layoutui'
      }
      \ No newline at end of file
      yarn.lock 0 → 100644
      View file @ 485ce0f5
      This diff is collapsed.
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment