code format

zhangzengfei

2021-09-07 1cb263efda55e67a8d5066edd7709b056f9b85ff

code format

 src/App.vue

@@ -6,7 +6,7 @@

<script>
  export default {
    name: 'App',
  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

@@ -44,39 +44,39 @@

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

<style lang="scss" scoped>

 src/views/404.vue

@@ -44,39 +44,39 @@

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

<style lang="scss" scoped>

 src/views/index/index.vue

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

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

<style></style>

 src/views/login/index.vue

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

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

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

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


 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() { },
  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() { },
  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>