代码清理

card/App.vue

@@ -1,5 +0,0 @@
-<template>
-  <div id="app">
-    <router-view />
-  </div>
-</template>

card/api.js

@@ -1,40 +0,0 @@
-import { randomCode } from "./plugins/utils";
-import Vue from "vue";
-
-export const cardConfigInfos = () => {
-  return Promise.resolve({
-    id: "173438690998091776",
-    createId: "173437828976345088",
-    createTime: 1632291806278,
-    updateId: null,
-    updateTime: 1632291806278,
-    schoolId: "2",
-    orgId: "173436480729907200",
-    name: "测试题卡规则1",
-    examNumberStyle: "PRINT",
-    paperType: "PRINT",
-    examAbsent: true,
-    writeSign: true,
-    requiredFields:
-      '[{"code":"ticketNumber","name":"考号","enable":true,"selected":false},{"code":"siteNumber","name":"座位号","enable":true,"selected":false},{"code":"studentName","name":"姓名","enable":true,"selected":false},{"code":"courseName","name":"课程名称","enable":true,"selected":false}]',
-    extendFields: "[]",
-    // extendFields:
-    //   '[{"code":"studentCode","name":"学号","enable":true,"selected":false},{"code":"courseCode","name":"课程代码","enable":true,"selected":false},{"code":"paperNumber","name":"试卷编号","enable":true,"selected":false},{"code":"campusName","name":"校区","enable":true,"selected":false},{"code":"examPlace","name":"考点","enable":true,"selected":false},{"code":"examRoom","name":"考场","enable":true,"selected":false},{"code":"examDate","name":"考试日期","enable":true,"selected":false},{"code":"examTime","name":"考试时间","enable":true,"selected":false}]',
-    titleRule: "测试题卡规则1",
-    attention: "测试题卡规则1",
-    objectiveAttention: "测试题卡规则1",
-    subjectiveAttention: "测试题卡规则1",
-    enable: true,
-    remark: "测试题卡规则1",
-    orgIds: null,
-  });
-};
-export const cardDetail = () => {
-  const cardData = Vue.ls.get("cardData", {});
-  return Promise.resolve(cardData);
-};
-
-export const saveCard = (datas) => {
-  Vue.ls.set("cardData", datas);
-  return Promise.resolve(randomCode());
-};

card/assets/styles/base.scss

@@ -1,482 +0,0 @@
-/* reset */
-body,
-div,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-input,
-p,
-tr,
-th,
-td,
-span,
-a,
-header,
-footer,
-i {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-li {
-  list-style: none;
-}
-em,
-i,
-u {
-  font-style: normal;
-}
-input {
-  outline: none;
-  border: none;
-  background: rgba(245, 245, 245, 1);
-  font-family: $--font-family;
-}
-input::-webkit-input-placeholder,
-input::-moz-placeholder,
-input:-ms-input-placeholder,
-input:-moz-placeholder {
-  font-size: 12px;
-  font-weight: bold;
-  color: $--color-text-gray-4;
-}
-button,
-textarea {
-  font-family: $--font-family;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-}
-fieldset,
-img {
-  border: 0;
-}
-abbr {
-  border: 0;
-  font-variant: normal;
-}
-a {
-  text-decoration: none;
-  color: inherit;
-  *color: $--color-text-gray-3;
-}
-img {
-  vertical-align: middle;
-}
-
-/* common-style */
-input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px white inset;
-}
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="number"]:focus,
-textarea:focus {
-  box-shadow: 0 0 0 1000px white inset;
-}
-
-/* browse style */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background: transparent;
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #666;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-::-webkit-scrollbar-resizer {
-  background: transparent;
-}
-
-body {
-  font-family: $--font-family;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: $--font-size-base;
-  color: $--color-text-dark-1;
-}
-
-/* part */
-.part-box {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: $--border-radius;
-
-  &-border {
-    border: 1px solid $--color-border;
-  }
-  &-pad {
-    padding: 20px;
-  }
-
-  &-filter {
-    padding: 20px 20px 5px 20px;
-
-    .el-form-item {
-      margin-bottom: 15px;
-    }
-    .el-form-item__label {
-      display: none;
-    }
-  }
-  &-gray {
-    background-color: $--color-text-gray-7;
-  }
-
-  &-flex {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-  }
-
-  &-action {
-    padding-bottom: 15px;
-    white-space: nowrap;
-    display: flex;
-    align-items: flex-end;
-  }
-  &-tips {
-    font-size: 16px;
-    line-height: 25px;
-    color: $--color-text-dark-1;
-    margin-bottom: 15px;
-  }
-
-  &-head {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    min-height: 30px;
-    margin: -10px 0 10px -10px;
-    color: $--color-text-dark;
-
-    > h3 {
-      font-size: 17px;
-    }
-    .el-icon-question {
-      margin-left: 10px;
-      font-size: 16px;
-      color: $--color-text-gray-5;
-      cursor: pointer;
-
-      &:hover {
-        color: #fe8652;
-      }
-    }
-  }
-}
-.part-title {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 15px 20px;
-  line-height: 30px;
-  overflow: hidden;
-
-  h2 {
-    float: left;
-  }
-  &-infos {
-    float: right;
-  }
-}
-.part-body {
-  padding: 25px;
-}
-.part-page {
-  margin-top: 15px;
-  text-align: right;
-}
-.part-none {
-  padding: 100px;
-  font-size: 20px;
-  color: $--color-text-gray-3;
-  text-align: center;
-}
-// box-justify
-.box-justify {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-// page-head
-.page-head {
-  margin-bottom: 20px;
-  color: $--color-text-dark;
-  &-flex {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-  }
-
-  > h2 {
-    font-size: 20px;
-  }
-  .el-icon-question {
-    margin-left: 10px;
-    font-size: 16px;
-    color: $--color-text-gray-5;
-    cursor: pointer;
-
-    &:hover {
-      color: #fe8652;
-    }
-  }
-}
-
-/* table */
-.table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  text-align: left;
-
-  &.table-white {
-    background-color: #fff;
-  }
-
-  th {
-    padding: 12px;
-    line-height: 1.2;
-    letter-spacing: 1px;
-    color: $--color-text-gray-2;
-    border: 1px solid $--color-border;
-  }
-  td {
-    padding: 14px;
-    line-height: 1.2;
-    color: $--color-text-dark;
-    border: 1px solid $--color-border;
-
-    &.td-link {
-      span {
-        cursor: pointer;
-        &:hover {
-          color: $--color-text-gray;
-        }
-      }
-    }
-  }
-  .td-th {
-    font-weight: 600;
-    color: $--color-text-gray;
-  }
-
-  &--border {
-    border: 1px solid $--color-border;
-    border-radius: 10px;
-    th {
-      background-color: #fcfcfd;
-      border: none;
-      border-bottom: 1px solid $--color-border;
-    }
-    td {
-      border: none;
-      border-bottom: 1px solid $--color-border;
-    }
-  }
-}
-
-/* list */
-.list-lr-right {
-  float: right;
-  width: 300px;
-}
-.list-lr-left {
-  margin-right: 320px;
-}
-
-.vlcode {
-  height: 36px;
-}
-.vlcode-left {
-  margin-right: 135px;
-}
-.vlcode-right {
-  float: right;
-  width: 120px;
-}
-
-// color
-.color-primary {
-  color: $--color-primary !important;
-}
-.color-success {
-  color: $--color-success;
-}
-.color-warning {
-  color: $--color-warning;
-}
-.color-danger {
-  color: $--color-danger;
-}
-.color-info {
-  color: $--color-text-gray-1;
-}
-.color-dark {
-  color: $--color-dark;
-}
-.color-gray {
-  color: $--color-text-gray;
-}
-.color-gray-2 {
-  color: $--color-text-gray-2;
-}
-.color-white {
-  color: #fff;
-}
-
-// text
-.text-center {
-  text-align: center;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-
-// other
-.btn-danger {
-  &.el-button--text {
-    color: $--color-danger !important;
-
-    &:hover {
-      font-weight: 600;
-      color: mix(#000, $--color-danger, 20%) !important;
-    }
-  }
-}
-.btn-primary {
-  &.el-button--text:not(.is-disabled) {
-    color: $--color-text-dark-1 !important;
-    &:hover {
-      font-weight: 600;
-      color: $--color-primary !important;
-    }
-  }
-}
-
-.btn-white {
-  background-color: #fff !important;
-  color: #999 !important;
-}
-.font-bold {
-  font-weight: bold;
-}
-.table-head-bg {
-  th {
-    background-color: #f6f6f6;
-    color: $--color-text-gray;
-  }
-}
-
-.tab-btns {
-  .el-button {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-
-    &:first-child {
-      border-bottom-left-radius: 8px;
-    }
-
-    &:last-child {
-      border-bottom-right-radius: 8px;
-    }
-  }
-
-  .el-button + .el-button {
-    margin-left: 10px;
-  }
-}
-
-.cont-link {
-  color: $--color-primary;
-  cursor: pointer;
-  &:hover {
-    color: $--color-success;
-  }
-}
-.ml-1 {
-  margin-left: 5px;
-}
-.ml-2 {
-  margin-left: 10px;
-}
-.mr-1 {
-  margin-right: 5px;
-}
-.mr-2 {
-  margin-right: 10px;
-}
-.mr-4 {
-  margin-right: 20px;
-}
-.mb-0 {
-  margin-bottom: 0;
-}
-.mb-2 {
-  margin-bottom: 10px;
-}
-.mb-4 {
-  margin-bottom: 20px;
-}
-
-// other
-.tips-info {
-  font-size: 12px;
-  line-height: 20px;
-  color: $--color-text-gray-2;
-}
-.tips-dark {
-  color: $--color-text-gray;
-}
-.tips-error {
-  color: $--color-danger;
-}
-.tips-icon {
-  display: inline-block;
-  vertical-align: middle;
-  color: $--color-text-gray-3;
-  font-size: 18px;
-  margin: 0 10px;
-  cursor: pointer;
-}
-.form-item-content {
-  color: $--color-text-gray-2;
-}
-.inline-block {
-  display: inline-block;
-  vertical-align: top;
-}
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  padding-right: 8px;
-}

card/assets/styles/element-ui-costom.scss

@@ -1,619 +0,0 @@
-/*
-* element-ui不管是自行构建的主题还是动态设置的主题，
-* 产生的css文件中存在近乎1/3的冗余样式，过于累赘，不如直接覆盖样式简洁。
-*/
-// dialog
-.el-dialog {
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #c8c8ca;
-  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
-
-  &.is-fullscreen {
-    border-radius: 0;
-
-    .el-dialog__header {
-      width: 100%;
-      position: fixed;
-      z-index: 9;
-      background-color: #fff;
-      border-bottom: 1px solid $--color-border;
-    }
-    .el-dialog__body {
-      padding-top: 90px;
-    }
-  }
-}
-.el-dialog__header {
-  padding: 15px 20px;
-  .el-dialog__title {
-    color: $--color-text-dark;
-    font-size: 16px;
-    line-height: 19px;
-  }
-  .el-dialog__headerbtn {
-    top: 15px;
-    width: 16px;
-    height: 16px;
-    background-image: url(../images/icon-close.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-
-    &:hover {
-      background-image: url(../images/icon-close-act.png);
-    }
-
-    .el-dialog__close {
-      display: none;
-    }
-  }
-}
-.el-dialog__body {
-  padding: 30px 40px;
-  position: relative;
-  border-top: 1px solid $--color-border;
-  color: $--color-text-dark-1;
-
-  .el-form-item__label {
-    padding-right: 2px;
-  }
-  .el-input-tips {
-    color: rgba(187, 187, 187, 1);
-    margin-left: 13px;
-  }
-}
-.el-dialog__footer {
-  overflow: hidden;
-  .el-button {
-    width: 100px;
-    border-radius: 8px;
-    float: right;
-    margin-left: 10px;
-  }
-}
-
-// .opacity-dialog
-.opacity-dialog {
-  .el-dialog {
-    background-color: transparent;
-  }
-  .el-dialog__header,
-  .el-dialog__footer {
-    display: none;
-  }
-  .el-dialog__body {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    padding: 0;
-    background-color: transparent;
-  }
-}
-
-// form
-.el-form {
-  &-item {
-    &__error {
-      font-size: 12px;
-      color: rgba(254, 108, 105, 1);
-    }
-    &__content {
-      .el-table {
-        line-height: 1;
-      }
-    }
-  }
-  // form-info
-  &.form-info {
-    .el-form-item {
-      margin-bottom: 0;
-
-      .el-form-item__label {
-        color: $--color-text-gray-2;
-      }
-    }
-  }
-  &--label-top {
-    .el-form-item__label {
-      line-height: 20px;
-      padding-bottom: 5px;
-      font-size: 12px;
-    }
-  }
-}
-// input
-.el-input {
-  &.is-focus {
-    .el-input__inner {
-      border-color: $--color-primary !important;
-    }
-  }
-  &.is-disabled {
-    .el-input__inner {
-      color: $--color-text-gray-2;
-    }
-  }
-  .el-input__inner {
-    border-radius: 8px;
-    border-color: #ddd;
-    background-color: #fff;
-  }
-  // .el-input__suffix {
-  //   right: 0;
-  //   border-left: 1px solid #ddd;
-  // }
-}
-// textarea
-.el-textarea {
-  &.is-disabled {
-    .el-textarea__inner {
-      color: $--color-text-gray-2;
-    }
-  }
-}
-.el-select {
-  .el-input__suffix {
-    right: 0;
-    border-left: 1px solid #ddd;
-  }
-  .el-input {
-    .el-select__caret {
-      width: 30px;
-    }
-    .el-icon-arrow-up:before {
-      font-size: 12px;
-      content: "\e78f";
-    }
-  }
-}
-.el-select-dropdown {
-  &.popper-filter {
-    .el-scrollbar {
-      display: block !important;
-      padding-top: 52px;
-    }
-    .el-select-filter {
-      padding: 0 10px;
-      position: absolute;
-      width: 100%;
-      top: 10px;
-      left: 0;
-      z-index: 9;
-    }
-  }
-}
-// upload
-.el-upload,
-.el-upload-dragger {
-  width: 100%;
-}
-// radio
-.el-radio-button {
-  &:hover {
-    .el-radio-button__inner {
-      color: $--color-primary;
-    }
-  }
-}
-.el-radio-button__orig-radio:checked + .el-radio-button__inner {
-  color: $--color-white;
-  border-color: $--color-primary;
-  background: $--color-primary;
-}
-// button
-.el-button {
-  border-radius: $--border-radius;
-
-  > .icon {
-    margin-right: 5px;
-  }
-  > span {
-    display: inline-block;
-  }
-  &.is-disabled {
-    color: $--color-text-gray-3 !important;
-    background: $--color-background !important;
-    border: 1px solid $--color-border !important;
-  }
-}
-
-.el-button + .popover-button,
-.popover-button + .el-button {
-  margin-left: 10px;
-}
-.el-button + .el-button {
-  margin-left: 10px;
-}
-.el-button--text + .el-button--text {
-  margin-left: 5px;
-}
-.el-button--small {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 12px;
-}
-.el-button--text {
-  color: $--color-text-gray-2;
-
-  & + .el-button--text {
-    margin-left: 10px;
-  }
-}
-.el-button--info {
-  background-color: $--color-cyan;
-  border-color: $--color-cyan;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-cyan-light;
-    border-color: $--color-cyan-light;
-  }
-}
-.el-button--primary {
-  background-color: $--color-primary;
-  border-color: $--color-primary;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-primary-light;
-    border-color: $--color-primary-light;
-  }
-}
-.el-button--success {
-  background-color: $--color-success;
-  border-color: $--color-success;
-
-  &:hover,
-  &:focus {
-    background-color: $--color-success-light;
-    border-color: $--color-success-light;
-  }
-}
-
-// table
-.el-table {
-  color: $--color-text-dark-1;
-
-  thead th {
-    color: $--color-text-gray-2;
-  }
-
-  thead.is-group th {
-    background-color: $--color-white;
-  }
-
-  tr.el-table__row {
-    color: $--color-text-dark;
-  }
-  td,
-  th {
-    border-color: $--color-border !important;
-    padding: 14px 0;
-    font-weight: 500;
-  }
-  .el-table__row.row-danger {
-    color: $--color-danger;
-  }
-  &.el-table--noback {
-    tr.el-table__row {
-      background-color: $--color-white;
-    }
-  }
-
-  .cell-head {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1.3;
-  }
-  // caret-wrapper
-  .caret-wrapper {
-    width: 20px;
-    height: 20px;
-    top: -1px;
-    .sort-caret {
-      &.ascending {
-        top: -1px;
-      }
-      &.descending {
-        bottom: -1px;
-      }
-    }
-  }
-  // action-column
-  td.action-column {
-    padding-left: 10px;
-    padding-right: 10px;
-    .cell {
-      padding: 0;
-      margin: 0 -5px;
-    }
-    .el-button--text {
-      padding: 0;
-      margin: 0 5px;
-      border: none !important;
-      outline: none !important;
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-}
-.el-table--border {
-  border-radius: 10px;
-  th {
-    padding: 12px 0;
-    background-color: #fcfcfd;
-    border-right: none;
-  }
-  td {
-    border-right: none;
-  }
-}
-// el-checkbox
-.el-checkbox {
-  .el-checkbox__label {
-    color: $--color-text-gray-2 !important;
-  }
-  .el-checkbox__inner::after {
-    border-width: 2px;
-  }
-}
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-
-  &::after {
-    border-color: $--color-primary;
-  }
-}
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-  &::before {
-    background-color: $--color-primary;
-  }
-}
-
-.el-radio {
-  .el-radio__label {
-    color: $--color-text-gray-2 !important;
-  }
-}
-.el-radio__input.is-checked .el-radio__inner {
-  background-color: $--color-white;
-  border-color: $--color-primary;
-  &::after {
-    width: 6px;
-    height: 6px;
-    background-color: $--color-primary;
-  }
-}
-
-// el-switch
-.el-switch {
-  &.is-checked {
-    .el-switch__core {
-      background-color: $--color-primary;
-      border-color: $--color-primary;
-    }
-  }
-}
-
-// el-pagination
-.el-pagination-li {
-  min-width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: $--color-white;
-  border: 1px solid #e1e3eb;
-}
-.el-pagination {
-  padding: 0;
-  .el-pagination__total {
-    float: left;
-  }
-  span:not([class*="suffix"]) {
-    line-height: 32px;
-    height: 32px;
-  }
-  &.is-background {
-    .btn-prev,
-    .btn-next {
-      color: $--color-text-gray-2;
-      margin: 0 5px;
-      @extend .el-pagination-li;
-    }
-    .btn-prev:disabled,
-    .btn-next:disabled {
-      opacity: 0.7;
-    }
-
-    .el-pager li {
-      color: $--color-text-gray-2;
-      margin: 0 5px;
-      padding: 0 8px;
-      line-height: 32px;
-
-      @extend .el-pagination-li;
-      &:not(.disabled).active {
-        color: #fff;
-        background-color: $--color-primary;
-      }
-    }
-  }
-}
-// el-message-box
-.el-message-box {
-  width: 320px;
-  background-color: #f6f6f6;
-  border-radius: 10px;
-  &__title {
-    display: none;
-  }
-  &__headerbtn {
-    display: none;
-  }
-  &__content {
-    text-align: center;
-
-    .el-message-box__status {
-      position: relative;
-      top: 0;
-      height: 48px;
-      width: 48px;
-      transform: none;
-      margin-bottom: 10px;
-
-      &.el-icon-warning {
-        border-radius: 50%;
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-image: url(../images/icon-doubt.png);
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .el-message-box__message {
-      padding: 0;
-    }
-  }
-  &__btns {
-    height: 75px;
-    padding: 30px 20px 10px;
-    text-align: center;
-
-    > .el-button {
-      width: 100px;
-    }
-  }
-}
-
-.alert-message {
-  .el-message-box__btns {
-    text-align: center;
-    > .el-button {
-      position: relative;
-      left: auto;
-      top: 0;
-      margin: 0;
-    }
-  }
-}
-// .el-message
-.el-message-loading {
-  border-color: mix($--color-white, $--color-success, 80%);
-  background-color: mix($--color-white, $--color-success, 90%);
-}
-// el-date-editor
-.el-date-editor {
-  border-radius: 8px;
-  .el-range-separator {
-    width: auto;
-  }
-  .el-range-input {
-    background-color: transparent;
-  }
-}
-
-// el-step
-.el-step {
-  &__title.is-success,
-  &__description.is-success,
-  &__title.is-process,
-  &__description.is-process {
-    color: $--color-success;
-  }
-  &__title.is-process {
-    font-weight: normal;
-  }
-  &__head.is-success {
-    .el-step__line {
-      background-color: $--color-success;
-    }
-    .el-step__icon.is-text {
-      color: $--color-white;
-      border-color: $--color-success;
-      background-color: $--color-success;
-    }
-  }
-  &__head.is-process {
-    .el-step__icon.is-text {
-      color: $--color-success;
-      border-color: $--color-success;
-    }
-  }
-
-  &__title.is-wait,
-  &__description.is-wait {
-    color: $--color-text-gray-2;
-  }
-  &__head.is-wait {
-    .el-step__icon.is-text {
-      color: $--color-text-gray-2;
-      border-color: #e1e3eb;
-      background-color: #e1e3eb;
-    }
-  }
-}
-// el-popover
-.el-popper-dark {
-  background-color: $--color-text-dark-1;
-  color: #fff;
-  font-size: 12px;
-  line-height: 18px;
-  padding: 16px;
-  border: none;
-}
-.el-popper-dark {
-  box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
-}
-.el-popper-dark[x-placement^="right"] .popper__arrow {
-  border-right-color: $--color-text-dark-1;
-
-  &::after {
-    border-right-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="top"] .popper__arrow {
-  border-top-color: $--color-text-dark-1;
-
-  &::after {
-    border-top-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="bottom"] .popper__arrow {
-  border-bottom-color: $--color-text-dark-1;
-
-  &::after {
-    border-bottom-color: $--color-text-dark-1;
-  }
-}
-.el-popper-dark[x-placement^="left"] .popper__arrow {
-  border-left-color: $--color-text-dark-1;
-
-  &::after {
-    border-left-color: $--color-text-dark-1;
-  }
-}
-// popper-list
-.popper-list {
-  min-width: auto;
-
-  .el-button {
-    display: block;
-    width: 100%;
-    margin: 0;
-    &:not(:last-child) {
-      margin-bottom: 5px;
-    }
-  }
-}

card/assets/styles/home.scss

@@ -1,341 +0,0 @@
-/* home */
-.home {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: auto;
-}
-.home-body {
-  position: absolute;
-  left: 0;
-  top: 50px;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  background: $--color-background;
-  z-index: 98;
-}
-.home-main {
-  position: relative;
-  padding: 20px 30px 50px 250px;
-  min-height: 100%;
-}
-
-/* navs */
-.home-navs {
-  position: absolute;
-  width: 220px;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  overflow: auto;
-  font-size: 14px;
-  background: $--color-white;
-  border-top-right-radius: $--border-radius-huge;
-  border-bottom-right-radius: $--border-radius-huge;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 1px;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba(229, 229, 229, 1);
-  }
-
-  .head-logo {
-    padding: 0 40px;
-    font-size: 20px;
-    line-height: 40px;
-    text-align: center;
-    &-content {
-      display: block;
-      padding: 30px 0;
-      border-bottom: 1px solid #eff0f5;
-    }
-    img {
-      display: block;
-      max-width: 160px;
-      height: 40px;
-    }
-  }
-
-  .nav-part {
-    padding: 20px 0;
-    border-top: 1px solid $--color-border;
-  }
-
-  .nav-head {
-    padding: 10px 0;
-    color: $--color-text-gray-2;
-    font-size: $--font-size-base;
-    line-height: 20px;
-    position: relative;
-    font-weight: 500;
-    > span {
-      display: inline-block;
-      vertical-align: top;
-      font-weight: 600;
-    }
-    &-right-icon {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #d3d5e0;
-      font-size: 12px;
-    }
-  }
-
-  // .nav-list {
-  //   padding: 0 0 0 23px;
-  // }
-  .nav-item {
-    overflow: hidden;
-    color: $--color-text-dark-1;
-    &-main {
-      padding: 10px 0;
-      line-height: 20px;
-      position: relative;
-      font-weight: 500;
-      cursor: pointer;
-      &-act,
-      &:hover {
-        font-weight: 600;
-        color: $--color-primary;
-      }
-    }
-    &-icon {
-      display: block;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      top: 50%;
-      margin-top: -10px;
-      text-align: center;
-      line-height: 20px;
-    }
-    &-icon-right {
-      right: 5px;
-    }
-    &-info {
-      display: block;
-      position: absolute;
-      padding: 0 3px;
-      min-width: 16px;
-      height: 16px;
-      font-size: 12px;
-      line-height: 16px;
-      top: 12px;
-      right: 40px;
-      background-color: $--color-warning;
-      color: #fff;
-      text-align: center;
-      border-radius: 3px;
-    }
-  }
-}
-.el-menu-home {
-  padding-top: 20px;
-  .el-submenu {
-    margin-bottom: 20px;
-  }
-  .el-submenu__title {
-    padding: 0 40px !important;
-    height: 50px;
-    line-height: 50px;
-    font-weight: 600;
-
-    > .icon {
-      margin-right: 12px;
-    }
-  }
-  .el-menu-item {
-    height: auto;
-    min-height: 40px;
-    line-height: 20px;
-    padding: 10px 40px !important;
-    white-space: normal;
-  }
-  .el-menu-item.is-active {
-    font-weight: 600;
-  }
-  .el-submenu__icon-arrow {
-    right: 40px;
-  }
-}
-
-/* head */
-.home-header {
-  position: absolute;
-  width: 100%;
-  height: 50px;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  color: #fff;
-  padding-left: 220px;
-  background-color: $--color-text-dark;
-  overflow: hidden;
-
-  .menu-list {
-    li {
-      display: inline-block;
-      vertical-align: top;
-      padding: 10px 25px;
-      height: 50px;
-      line-height: 30px;
-      opacity: 0.4;
-      font-size: 16px;
-      position: relative;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &.menu-item-act {
-        opacity: 1;
-      }
-
-      span {
-        display: inline-block;
-        vertical-align: top;
-        margin-left: 8px;
-      }
-      .icon {
-        margin-top: -3px;
-      }
-    }
-  }
-  .head-menu {
-    float: left;
-  }
-  .head-user {
-    float: right;
-    padding-right: 10px;
-    li {
-      padding: 10px;
-    }
-    .menu-item-account {
-      white-space: nowrap;
-      padding: 10px;
-      span {
-        max-width: 156px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  // .head-menu-btn
-  .head-menu-btn {
-    display: none;
-    float: right;
-    line-height: 36px;
-    padding: 12px 15px;
-    text-align: center;
-    > span {
-      display: block;
-      height: 36px;
-      width: 36px;
-      border-radius: 5px;
-      background-color: rgba($color: #fff, $alpha: 0.3);
-    }
-    i {
-      font-size: 22px;
-      vertical-align: middle;
-    }
-  }
-}
-// menu-dialog
-.menu-dialog {
-  .el-dialog.is-fullscreen {
-    border-radius: 0;
-    box-shadow: none;
-
-    .el-dialog__body {
-      padding: 10px;
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .menu-logout {
-    padding: 10px;
-    width: 52px;
-    height: 52px;
-    margin: 0 auto;
-    border: 1px solid $--color-text-gray-3;
-    border-radius: 50%;
-    font-size: 30px;
-    text-align: center;
-    color: $--color-text-gray-3;
-    cursor: pointer;
-
-    &:hover {
-      border-color: $--color-danger;
-      color: $--color-danger;
-    }
-  }
-}
-
-// home-breadcrumb
-.home-breadcrumb {
-  margin-bottom: 18px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $--color-text-gray-2;
-
-  .breadcrumb-tips {
-    display: inline-block;
-    vertical-align: middle;
-    > i {
-      margin-top: -2px;
-      margin-right: 8px;
-    }
-  }
-  .el-breadcrumb {
-    line-height: 16px;
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 12px;
-
-    .el-breadcrumb__item {
-      .el-breadcrumb__inner {
-        color: $--color-text-gray-2;
-      }
-    }
-    .el-breadcrumb__separator {
-      margin: 0 5px;
-    }
-  }
-}
-
-// home-view
-
-/* view-footer */
-.home-footer {
-  position: absolute;
-  width: 100%;
-  height: 60px;
-  bottom: 0;
-  left: 0;
-  z-index: auto;
-  padding: 20px 0;
-  line-height: 20px;
-  color: $--color-text-gray-3;
-  text-align: center;
-  font-size: 13px;
-  a {
-    color: $--color-text-gray-3;
-  }
-  a:hover {
-    color: $--color-text-gray;
-  }
-}

card/assets/styles/index.scss

@@ -1,10 +0,0 @@
-@import "./variables.scss";
-@import "./base.scss";
-@import "./icons.scss";
-@import "./home.scss";
-
-// card
-@import "./card-preview.scss";
-@import "./card-design.scss";
-// element-ui
-@import "./element-ui-costom.scss";

card/main.js

@@ -1,20 +0,0 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-
-import ElementUI from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
-import "./assets/styles/index.scss";
-import VueLocalStorage from "vue-ls";
-
-Vue.use(VueLocalStorage);
-
-Vue.config.productionTip = false;
-Vue.use(ElementUI);
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");

card/router/index.js

@@ -1,64 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
-
-Vue.use(VueRouter);
-
-const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/card/edit/:cardId?",
-    name: "CardEdit",
-    component: () =>
-      import(/* webpackChunkName: "CardEdit" */ "../views/CardEdit.vue"),
-  },
-  {
-    path: "/card/free-edit/:cardId?",
-    name: "CardFreeEdit",
-    component: () =>
-      import(/* webpackChunkName: "CardEdit" */ "../views/CardFreeEdit.vue"),
-  },
-  {
-    // viewType::: view:预览,print:打印,frame:iframe嵌套
-    path: "/card/preview/:cardId/:viewType",
-    name: "CardPreview",
-    component: () =>
-      import(/* webpackChunkName: "CardPreview" */ "../views/CardPreview.vue"),
-  },
-  {
-    // viewType::: view:预览,print:打印,frame:iframe嵌套
-    path: "/card/free-preview/:cardId/:viewType",
-    name: "CardFreePreview",
-    component: () =>
-      import(
-        /* webpackChunkName: "CardPreview" */ "../views/CardFreePreview.vue"
-      ),
-  },
-  {
-    path: "/card/card-rule/preview/:cardRuleId",
-    name: "CardRulePreview",
-    component: () =>
-      import(
-        /* webpackChunkName: "CardRulePreview" */ "../views/CardRulePreview.vue"
-      ),
-  },
-  // {
-  //   path: "/about",
-  //   name: "About",
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () =>
-  //     import(/* webpackChunkName: "about" */ "../views/About.vue")
-  // }
-];
-
-const router = new VueRouter({
-  routes,
-});
-
-export default router;

card/views/CardEdit.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="card-edit">
-    <card-design
-      v-if="dataReady"
-      ref="CardDesign"
-      :content="cardContent"
-      @on-preview="toPreview"
-      @on-save="toSave"
-      @on-submit="toSubmit"
-      @on-exit="toExit"
-    ></card-design>
-
-    <!-- card-view-frame -->
-    <div class="design-preview-frame" v-if="cardPreviewUrl">
-      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
-    </div>
-  </div>
-</template>
-
-<script>
-import { cardConfigInfos, cardDetail, saveCard } from "../api";
-import CardDesign from "../components/CardDesign";
-
-export default {
-  name: "card-edit",
-  components: {
-    CardDesign,
-  },
-  data() {
-    return {
-      cardId: this.$route.params.cardId || this.$ls.get("cardId"),
-      prepareTcPCard: this.$ls.get("prepareTcPCard", {
-        examTaskId: "",
-        courseCode: "",
-        courseName: "",
-        makeMethod: "SELF",
-        cardRuleId: "",
-      }),
-      cardContent: {},
-      cardPreviewUrl: "",
-      canSave: false,
-      dataReady: false,
-    };
-  },
-  computed: {
-    isEdit() {
-      return !!this.cardId;
-    },
-  },
-  mounted() {
-    if (!this.prepareTcPCard.examTaskId && !this.isEdit) {
-      this.$message.error("找不到命题任务，请退出题卡制作！");
-      return;
-    }
-    this.initCard();
-    this.registWindowSubmit();
-  },
-  methods: {
-    async initCard() {
-      this.dataReady = false;
-      if (this.isEdit) {
-        await this.getCardTempDetail();
-      } else {
-        const cardConfig = await this.getCardConfig();
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-      this.dataReady = true;
-    },
-    getCardTitle(titleRule) {
-      const fieldMap = {
-        courseCode: this.prepareTcPCard.courseCode,
-        courseName: this.prepareTcPCard.courseName,
-        schoolName: this.prepareTcPCard.schoolName,
-      };
-      Object.entries(fieldMap).forEach(([key, val]) => {
-        titleRule = titleRule.replace("${" + key + "}", val);
-      });
-      return titleRule;
-    },
-    async getCardTempDetail() {
-      const detData = await cardDetail(this.cardId);
-      // 可能存在题卡内容没有记录的情况
-      if (detData.content) {
-        this.cardContent = JSON.parse(detData.content);
-      } else {
-        let cardConfig = await this.getCardConfig();
-        // 没有题卡内容时，直接创建新的内容
-        if (detData.makeMethod === "CUST") {
-          cardConfig.cardTitle = detData.title;
-        }
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-    },
-    async getCardConfig() {
-      const data = await cardConfigInfos(this.prepareTcPCard.cardRuleId);
-      if (!data) {
-        this.$message.error("找不到题卡规则！");
-        return;
-      }
-      let config = {
-        ...data,
-        ...{
-          pageSize: "A3",
-          columnNumber: 2,
-          columnGap: 20,
-          showForbidArea: false,
-          cardDesc: "",
-          makeMethod: this.prepareTcPCard.makeMethod,
-        },
-      };
-      config.aOrB = true; // 默认开启A/B卷型
-      config.requiredFields = JSON.parse(config.requiredFields);
-      config.extendFields = JSON.parse(config.extendFields);
-      config.cardTitle = this.getCardTitle(config.titleRule);
-      return config;
-    },
-    // 操作
-    getRequestConfig() {
-      return this.prepareTcPCard.makeMethod === "CUST"
-        ? {
-            headers: {
-              schoolId: this.prepareTcPCard.schoolId,
-            },
-          }
-        : {};
-    },
-    getCardData(htmlContent = "", model = "") {
-      let data = this.$refs.CardDesign.getCardData(htmlContent, model);
-      data = {
-        ...data,
-        type: "CUSTOM",
-        ...this.prepareTcPCard,
-      };
-      if (this.cardId) data.id = this.cardId;
-      return data;
-    },
-    async toPreview(datas) {
-      await this.toSave(datas);
-
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: this.cardId,
-          viewType: "view",
-        },
-      });
-      window.open(href);
-    },
-    // save
-    async toSave(datas) {
-      datas.status = "STAGE";
-      const result = await saveCard(datas, this.getRequestConfig()).catch(
-        () => {}
-      );
-
-      this.$refs.CardDesign.unloading();
-      if (!result) return;
-
-      this.cardId = result;
-      this.$ls.set("cardId", this.cardId);
-      this.$message.success("保存成功！");
-    },
-    async toSubmit(cardData) {
-      const res = await this.$confirm("确定要提交当前题卡吗?", "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (res !== "confirm") return;
-
-      window.cardData = cardData;
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: 1,
-          viewType: "frame",
-        },
-      });
-      this.cardPreviewUrl = href;
-    },
-    registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
-        const datas = this.getCardData(htmlContent, model);
-        datas.status = "SUBMIT";
-        const result = await saveCard(datas, this.getRequestConfig()).catch(
-          () => {}
-        );
-        this.cardPreviewUrl = "";
-        window.cardData = null;
-        if (result) {
-          this.cardId = result;
-          this.$ls.set("cardId", this.cardId);
-          this.canSave = false;
-          this.$message.success("提交成功！");
-          this.goback();
-        } else {
-          this.$message.error("提交失败，请重新尝试！");
-        }
-      };
-    },
-    toExit() {
-      this.$confirm(
-        "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
-        "提示",
-        {
-          type: "warning",
-        }
-      )
-        .then(() => {
-          this.goback();
-        })
-        .catch(() => {});
-    },
-  },
-  beforeDestroy() {
-    this.$ls.remove("cardId");
-    this.$ls.remove("prepareTcPCard");
-    delete window.submitCardTemp;
-  },
-};
-</script>

card/views/CardFreeEdit.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="card-free-edit">
-    <card-free-design
-      v-if="dataReady"
-      ref="CardFreeDesign"
-      :content="cardContent"
-      @on-preview="toPreview"
-      @on-save="toSave"
-      @on-submit="toSubmit"
-      @on-exit="toExit"
-    ></card-free-design>
-    <!-- card-view-frame -->
-    <div class="design-preview-frame" v-if="cardPreviewUrl">
-      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
-    </div>
-  </div>
-</template>
-
-<script>
-import { cardConfigInfos, cardDetail, saveCard } from "../api";
-import CardFreeDesign from "../modules/free/components/CardFreeDesign";
-
-export default {
-  name: "card-free-edit",
-  components: {
-    CardFreeDesign,
-  },
-  data() {
-    return {
-      cardId: this.$route.params.cardId || this.$ls.get("cardId"),
-      prepareTcPCard: this.$ls.get("prepareTcPCard", {
-        examTaskId: "",
-        courseCode: "",
-        courseName: "",
-        makeMethod: "SELF",
-        cardRuleId: "",
-      }),
-      cardContent: {},
-      cardPreviewUrl: "",
-      isSubmit: false,
-      canSave: false,
-      dataReady: false,
-    };
-  },
-  computed: {
-    isEdit() {
-      return !!this.cardId;
-    },
-  },
-  mounted() {
-    // if (!this.prepareTcPCard.examTaskId && !this.isEdit) {
-    //   this.$message.error("找不到命题任务，请退出题卡制作！");
-    //   return;
-    // }
-    this.initCard();
-    this.registWindowSubmit();
-  },
-  methods: {
-    async initCard() {
-      this.dataReady = false;
-      if (this.isEdit) {
-        await this.getCardTempDetail();
-      } else {
-        const cardConfig = await this.getCardConfig();
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-      this.dataReady = true;
-    },
-    getCardTitle(titleRule) {
-      const fieldMap = {
-        courseCode: this.prepareTcPCard.courseCode,
-        courseName: this.prepareTcPCard.courseName,
-        schoolName: this.prepareTcPCard.schoolName,
-      };
-      Object.entries(fieldMap).forEach(([key, val]) => {
-        titleRule = titleRule.replace("${" + key + "}", val);
-      });
-      return titleRule;
-    },
-    async getCardTempDetail() {
-      const detData = await cardDetail(this.cardId);
-
-      // 可能存在题卡内容没有记录的情况
-      if (detData.content) {
-        this.cardContent = JSON.parse(detData.content);
-      } else {
-        let cardConfig = await this.getCardConfig();
-        // 没有题卡内容时，直接创建新的内容
-        if (detData.makeMethod === "CUST") {
-          this.setCardConfig({ cardTitle: detData.title });
-        }
-
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-    },
-    async getCardConfig() {
-      const data = await cardConfigInfos(this.prepareTcPCard.cardRuleId);
-      if (!data) {
-        this.$message.error("找不到题卡规则！");
-        return;
-      }
-      let config = {
-        ...data,
-        ...{
-          pageSize: "A3",
-          columnNumber: 2,
-          columnGap: 20,
-          showForbidArea: false,
-          cardDesc: "",
-          makeMethod: this.prepareTcPCard.makeMethod,
-        },
-      };
-      config.aOrB = true; // 默认开启A/B卷型
-      config.requiredFields = JSON.parse(config.requiredFields);
-      config.extendFields = JSON.parse(config.extendFields);
-      config.cardTitle = this.getCardTitle(config.titleRule);
-      return config;
-    },
-    // 操作
-    getRequestConfig() {
-      return this.prepareTcPCard.makeMethod === "CUST"
-        ? {
-            headers: {
-              schoolId: this.prepareTcPCard.schoolId,
-            },
-          }
-        : {};
-    },
-    getCardData(htmlContent = "", model = "") {
-      let data = this.$refs.CardFreeDesign.getCardData(htmlContent, model);
-      data = {
-        ...data,
-        type: "CUSTOM",
-        ...this.prepareTcPCard,
-      };
-      if (this.cardId) data.id = this.cardId;
-      return data;
-    },
-    async toPreview(datas) {
-      await this.toSave(datas);
-
-      const { href } = this.$router.resolve({
-        name: "CardFreePreview",
-        params: {
-          cardId: this.cardId,
-          viewType: "view",
-        },
-      });
-      window.open(href);
-    },
-    async toSave(datas) {
-      datas.status = "STAGE";
-      const result = await saveCard(datas, this.getRequestConfig()).catch(
-        () => {}
-      );
-
-      this.$refs.CardFreeDesign.unloading();
-      if (!result) return;
-
-      this.cardId = result;
-      this.$ls.set("cardId", this.cardId);
-      this.$message.success("保存成功！");
-    },
-    async toSubmit(cardData) {
-      const res = await this.$confirm("确定要提交当前题卡吗?", "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (res !== "confirm") return;
-
-      window.cardData = cardData;
-      const { href } = this.$router.resolve({
-        name: "CardFreePreview",
-        params: {
-          cardId: 1,
-          viewType: "frame",
-        },
-      });
-      this.cardPreviewUrl = href;
-    },
-    registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
-        const datas = this.getCardData(htmlContent, model);
-        datas.status = "SUBMIT";
-        const result = await saveCard(datas, this.getRequestConfig()).catch(
-          () => {}
-        );
-        this.cardPreviewUrl = "";
-        window.cardData = null;
-        if (result) {
-          this.cardId = result;
-          this.$ls.set("cardId", this.cardId);
-          this.canSave = false;
-          this.$message.success("提交成功！");
-          this.goback();
-        } else {
-          this.$message.error("提交失败，请重新尝试！");
-        }
-      };
-    },
-    toExit() {
-      this.$confirm(
-        "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
-        "提示",
-        {
-          type: "warning",
-        }
-      )
-        .then(() => {
-          this.goback();
-        })
-        .catch(() => {});
-    },
-  },
-  beforeDestroy() {
-    this.$ls.remove("cardId");
-    this.$ls.remove("prepareTcPCard");
-    delete window.submitCardTemp;
-  },
-};
-</script>

card/views/CardFreePreview.vue

@@ -1,131 +0,0 @@
-<template>
-  <div :class="classes">
-    <card-free-view
-      v-if="pages.length"
-      ref="CardFreeView"
-      class="preview-body"
-      :pages="pages"
-      :card-config="cardConfig"
-    ></card-free-view>
-  </div>
-</template>
-
-<script>
-import CardFreeView from "../modules/free/components/CardFreeView";
-import { cardDetail } from "../api";
-import { deepCopy } from "../plugins/utils";
-const JsBarcode = require("jsbarcode");
-
-export default {
-  name: "card-free-preview",
-  components: { CardFreeView },
-  data() {
-    return {
-      isPrint: this.$route.params.viewType !== "view",
-      isFrame: this.$route.params.viewType === "frame",
-      cardId: this.$route.params.cardId,
-      pages: [],
-      cardConfig: {},
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        "card-free-preview",
-        {
-          "card-print": this.isPrint,
-        },
-      ];
-    },
-  },
-  mounted() {
-    if (this.isFrame) {
-      this.initFrame();
-    } else {
-      this.init();
-    }
-  },
-  methods: {
-    initFrame() {
-      const cardData = window.parent.cardData;
-      if (!cardData) return;
-
-      const { cardConfig, pages } = deepCopy(cardData);
-      let fieldInfos = {};
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = "${" + item.code + "}";
-        });
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-
-      this.$nextTick(() => {
-        const cardContentTemp = this.$refs.CardFreeView.getPreviewTemp(
-          this.$el.outerHTML
-        );
-        const model = this.$refs.CardFreeView.getPageModel(cardData);
-        window.parent &&
-          window.parent.submitCardTemp &&
-          window.parent.submitCardTemp(cardContentTemp, model);
-      });
-    },
-    async init() {
-      const detData = await cardDetail(this.cardId);
-      if (!detData.content) {
-        this.$message.error("很抱歉，当前题卡还没开始制作！");
-        return;
-      }
-      const { cardConfig, pages } = JSON.parse(detData.content);
-      const fieldInfos = this.fetchFieldInfos(cardConfig, {});
-
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-    },
-    fetchFieldInfos(cardConfig, stdInfo) {
-      let fieldInfos = {};
-      const defContent = "相关信息";
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = stdInfo[item.code] || defContent;
-        });
-
-      return fieldInfos;
-    },
-    getBase64Barcode(str) {
-      const canvas = document.createElement("CANVAS");
-      JsBarcode(canvas, str, {
-        width: 2,
-        height: 30,
-        displayValue: false,
-        marginLeft: 20,
-        marginRight: 20,
-        marginTop: 0,
-        marginBottom: 0,
-      });
-
-      return canvas.toDataURL();
-    },
-    appendFieldInfo(pages, fieldInfos) {
-      const VALID_ELEMENTS_FOR_EXTERNAL = ["BARCODE", "FILL_FIELD"];
-      pages.forEach((page) => {
-        page.columns.forEach((column) => {
-          column.elements.forEach((element) => {
-            if (!VALID_ELEMENTS_FOR_EXTERNAL.includes(element.type)) return;
-
-            if (element.type === "BARCODE") {
-              const field = element.fields[0] && element.fields[0].code;
-              element.content = `data:image/png;base64,${fieldInfos[field]}`;
-              return;
-            }
-
-            element.fieldInfos = fieldInfos;
-          });
-        });
-      });
-      return pages;
-    },
-  },
-};
-</script>

card/views/CardPreview.vue

@@ -1,170 +0,0 @@
-<template>
-  <div :class="classes">
-    <div v-if="IS_COMMON_CARD" class="preview-frame" id="preview-frame"></div>
-    <card-view
-      v-if="!IS_COMMON_CARD && pages.length"
-      ref="CardView"
-      class="preview-body"
-      :pages="pages"
-      :card-config="cardConfig"
-    ></card-view>
-  </div>
-</template>
-
-<script>
-import CardView from "../components/CardView";
-import { cardDetail } from "../api";
-import { deepCopy } from "../plugins/utils";
-const JsBarcode = require("jsbarcode");
-
-export default {
-  name: "card-preview",
-  components: { CardView },
-  data() {
-    return {
-      isPrint: this.$route.params.viewType !== "view",
-      isFrame: this.$route.params.viewType === "frame",
-      cardId: this.$route.params.cardId,
-      cardConfig: {},
-      pages: [],
-      IS_COMMON_CARD: false,
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        "card-preview",
-        {
-          "card-print": this.isPrint,
-        },
-      ];
-    },
-  },
-  mounted() {
-    if (this.isFrame) {
-      this.initFrame();
-    } else {
-      this.init();
-    }
-  },
-  methods: {
-    initFrame() {
-      const cardData = window.parent.cardData;
-      if (!cardData) return;
-
-      const { cardConfig, pages } = deepCopy(cardData);
-      let fieldInfos = {};
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = "${" + item.code + "}";
-        });
-      if (cardConfig.examNumberStyle === "PRINT") {
-        fieldInfos.examNumber = "data:image/png;base64,${examNumber}";
-        fieldInfos.examNumberStr = "${examNumberStr}";
-      }
-
-      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
-        fieldInfos.paperType = "data:image/png;base64,${paperType}";
-        fieldInfos.paperTypeName = "${paperTypeName}";
-      }
-
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-
-      this.$nextTick(() => {
-        const cardContentTemp = this.$refs.CardView.getPreviewTemp(
-          this.$el.outerHTML
-        );
-        const model = this.$refs.CardView.getPageModel(cardData);
-        window.parent &&
-          window.parent.submitCardTemp &&
-          window.parent.submitCardTemp(cardContentTemp, model);
-      });
-    },
-    async init() {
-      const detData = await cardDetail(this.cardId);
-
-      this.IS_COMMON_CARD = detData.type === "GENERIC";
-      // 通卡展示
-      if (this.IS_COMMON_CARD) {
-        // TODO:通卡展示逻辑要调整
-        this.$nextTick(() => {
-          this.initHtmlTemp(detData.htmlContent);
-        });
-        return;
-      }
-      // 常规卡展示
-      if (!detData.content) {
-        this.$message.error("很抱歉，当前题卡还没开始制作！");
-        return;
-      }
-      const { cardConfig, pages } = JSON.parse(detData.content);
-      const fieldInfos = this.fetchFieldInfos(cardConfig, {});
-
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-    },
-    initHtmlTemp(htmlTemp) {
-      const iframeDom = document.createElement("iframe");
-      document.getElementById("preview-frame").appendChild(iframeDom);
-      const wwidth = window.innerWidth - 10;
-      const wheight = window.innerHeight - 10;
-      iframeDom.style.cssText = `width: ${wwidth}px;height: ${wheight}px;border:none;outline:none;`;
-      const iframeDoc = iframeDom.contentDocument;
-      iframeDoc.open();
-      iframeDoc.write(htmlTemp);
-      iframeDoc.close();
-    },
-    fetchFieldInfos(cardConfig, stdInfo) {
-      let fieldInfos = {};
-      const defContent = "相关信息";
-      const defNumber = "123456789";
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = stdInfo[item.code] || defContent;
-        });
-      if (cardConfig.examNumberStyle === "PRINT") {
-        fieldInfos.examNumber = this.getBase64Barcode(
-          stdInfo["examNumber"] || defNumber
-        );
-        fieldInfos.examNumberStr = stdInfo["examNumber"] || defNumber;
-      }
-      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
-        fieldInfos.paperType = this.getBase64Barcode(
-          stdInfo["paperType"] || defNumber
-        );
-        fieldInfos.paperTypeName = stdInfo["paperTypeName"] || "A";
-      }
-
-      return fieldInfos;
-    },
-    getBase64Barcode(str) {
-      const canvas = document.createElement("CANVAS");
-      JsBarcode(canvas, str, {
-        width: 2,
-        height: 30,
-        displayValue: false,
-        marginLeft: 20,
-        marginRight: 20,
-        marginTop: 0,
-        marginBottom: 0,
-      });
-
-      return canvas.toDataURL();
-    },
-    appendFieldInfo(pages, fieldInfos) {
-      pages.forEach((page, pageNo) => {
-        if (pageNo % 2) return;
-        const cardHeadElement = page.columns[0].elements[0];
-
-        if (cardHeadElement.type === "CARD_HEAD") {
-          cardHeadElement.fieldInfos = fieldInfos;
-        }
-      });
-      return pages;
-    },
-  },
-};
-</script>

card/views/Home.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="home">
-    <div class="part-box part-box-pad part-box-flex">
-      <div></div>
-      <div>
-        <el-button type="primary" icon="el-icon-refresh" @click="toAdd"
-          >新增标准题卡</el-button
-        >
-        <el-button type="success" icon="el-icon-refresh" @click="toFreeAdd"
-          >新增自由题卡</el-button
-        >
-      </div>
-    </div>
-    <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="cards">
-        <el-table-column type="index" label="序号" width="70"></el-table-column>
-        <el-table-column prop="name" label="名称"></el-table-column>
-        <el-table-column class-name="action-column" label="操作" width="200px">
-          <template slot-scope="scope">
-            <el-button
-              class="btn-primary"
-              type="text"
-              @click="toEdit(scope.row)"
-              >编辑</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="part-page">
-        <el-pagination
-          background
-          layout="total,prev, pager, next"
-          :current-page="current"
-          :total="total"
-          :page-size="size"
-          @current-change="toPage"
-        >
-        </el-pagination>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "home",
-  data() {
-    return {
-      current: 1,
-      size: 10,
-      total: 10,
-      cards: [],
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      this.cards = [
-        {
-          id: "1111",
-          name: "题卡001",
-        },
-        {
-          id: "2222",
-          name: "题卡002",
-        },
-      ];
-      this.total = this.cards.length;
-    },
-    toPage(page) {
-      this.current = page;
-      this.getList();
-    },
-    toEdit(row) {
-      this.$ls.set("prepareTcPCard", {
-        examTaskId: "1111",
-        courseCode: "数学",
-        courseName: "sx001",
-        makeMethod: "SELF",
-        cardRuleId: "1",
-      });
-      this.$router.push({
-        name: "CardFreeEdit",
-        params: {
-          cardId: row.id,
-        },
-      });
-    },
-    toAdd() {
-      this.$ls.set("prepareTcPCard", {
-        examTaskId: "1111",
-        courseCode: "数学",
-        courseName: "sx001",
-        makeMethod: "SELF",
-        cardRuleId: "1",
-      });
-      this.$router.push({
-        name: "CardEdit",
-      });
-    },
-    toFreeAdd() {
-      this.$ls.set("prepareTcPCard", {
-        examTaskId: "1111",
-        courseCode: "数学",
-        courseName: "sx001",
-        makeMethod: "SELF",
-        cardRuleId: "1",
-      });
-      this.$router.push({
-        name: "CardFreeEdit",
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.home {
-  background: #eff0f5;
-  padding: 20px;
-}
-</style>

public/card.html

@@ -1,21 +0,0 @@
-<!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><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> 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/components/common/CascaderSplit/CascaderSplit.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="cascader-split">
-    <el-form ref="FilterForm" label-position="left" label-width="80px" inline>
-      <el-form-item label="levelOne">
-        <level-one
-          v-model="modalForm.levelOne"
-          set-default
-          @on-change="selectChange"
-        ></level-one>
-      </el-form-item>
-      <el-form-item label="levelTwo">
-        <level-two
-          v-model="modalForm.levelTwo"
-          :level-one-model="modalForm.levelOne"
-          @on-change="selectChange"
-          set-default
-        ></level-two>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import LevelOne from "./LevelOne";
-import LevelTwo from "./LevelTwo";
-
-export default {
-  name: "cascader-split",
-  components: {
-    LevelOne,
-    LevelTwo,
-  },
-  data() {
-    return {
-      modalForm: {
-        levelOne: "",
-        levelTwo: "",
-      },
-    };
-  },
-  methods: {
-    selectChange() {
-      console.log(this.modalForm);
-    },
-  },
-};
-</script>

src/components/common/CascaderSplit/LevelOne.vue

@@ -1,90 +0,0 @@
-<template>
-  <el-select
-    class="level-one"
-    v-model="levelModel"
-    style="width: 200px"
-    @change="selected"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :disabled="disabled"
-  >
-    <el-option
-      v-for="item in dataList"
-      :key="item.id"
-      :value="item.id"
-      :label="item.name"
-    >
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-import { getData } from "./com-func";
-
-export default {
-  name: "level-one",
-  props: {
-    value: {
-      type: [String, Number],
-    },
-    setDefault: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: "请选择选项",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-    };
-  },
-  computed: {
-    levelModel: {
-      get() {
-        return this.value;
-      },
-      set(selectId) {
-        this.$emit("input", selectId);
-      },
-    },
-  },
-  created() {
-    this.search();
-  },
-  methods: {
-    async search() {
-      const data = await getData("level-one");
-      this.dataList = data.map((item) => {
-        return {
-          id: item.id,
-          name: item.name,
-        };
-      });
-
-      if (this.setDefault) {
-        this.levelModel = this.dataList[0] && this.dataList[0].id;
-        const val = {
-          value: this.dataList[0].id || "",
-          label: this.dataList[0].name || "",
-        };
-        this.$emit("on-change", val);
-        this.$emit("on-set");
-      }
-    },
-    selected(val) {
-      this.$emit("on-change", val);
-    },
-  },
-};
-</script>

src/components/common/CascaderSplit/LevelTwo.vue

@@ -1,102 +0,0 @@
-<template>
-  <el-select
-    class="level-two"
-    v-model="levelModel"
-    style="width: 200px"
-    @change="selected"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :disabled="disabled"
-  >
-    <el-option
-      v-for="item in dataList"
-      :key="item.id"
-      :value="item.id"
-      :label="item.name"
-    >
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-import { getData } from "./com-func";
-
-export default {
-  name: "level-two",
-  props: {
-    value: {
-      type: [String, Number],
-    },
-    setDefault: {
-      type: Boolean,
-      default: false,
-    },
-    levelOneModel: {
-      type: [String, Number],
-      required: true,
-    },
-    placeholder: {
-      type: String,
-      default: "请选择考试",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-    };
-  },
-  computed: {
-    levelModel: {
-      get() {
-        return this.value;
-      },
-      set(selectId) {
-        this.$emit("input", selectId);
-      },
-    },
-  },
-  watch: {
-    levelOneModel() {
-      this.search();
-    },
-  },
-  methods: {
-    async search() {
-      if (!this.levelOneModel) {
-        this.dataList = [];
-        this.levelModel = "";
-        return;
-      }
-
-      const data = await getData("level-two");
-      this.dataList = data.map((item) => {
-        return {
-          id: item.id,
-          name: item.name,
-        };
-      });
-
-      if (this.setDefault) {
-        this.levelModel = this.dataList[0] && this.dataList[0].id;
-        const val = {
-          value: this.dataList[0].id || "",
-          label: this.dataList[0].name || "",
-        };
-        this.$emit("on-change", val);
-        this.$emit("on-set");
-      }
-    },
-    selected(val) {
-      this.$emit("on-change", val);
-    },
-  },
-};
-</script>

src/components/common/CascaderSplit/com-func.js

@@ -1,18 +0,0 @@
-export const getData = (nameKey = "name") => {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      const dataList = "#"
-        .repeat(8)
-        .split("")
-        .map((item, index) => {
-          return {
-            id: index + 1,
-            name: `${nameKey}-${Math.random().toString(32).slice(-5)}-${
-              index + 1
-            }`,
-          };
-        });
-      resolve(dataList);
-    }, 300);
-  });
-};

src/components/common/DimensionTreeTable/DimensionTreeTable.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="dimension-tree-table">
-    <table class="table">
-      <tr
-        v-for="(tr, trind) in tableTreeList"
-        :key="trind"
-        :data-names="tr.names"
-        :data-ids="tr.ids"
-      >
-        <td v-for="(td, tdind) in tr.tdList" :key="tdind" :rowspan="td.rowspan">
-          <span>{{ td.name }}</span>
-        </td>
-        <td>
-          <slot :trItem="tr"> default slot name </slot>
-        </td>
-      </tr>
-    </table>
-  </div>
-</template>
-
-<script>
-import { deepCopy } from "@/plugins/utils";
-
-export default {
-  name: "dimension-tree-table",
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-  },
-  data() {
-    return {
-      dataList: [],
-      dataListNums: [],
-      tableTreeList: [],
-    };
-  },
-  watch: {
-    data: {
-      immediate: true,
-      handler(val) {
-        this.dataList = deepCopy(val);
-        this.getDataListNums();
-        this.serilizeTableList();
-      },
-    },
-  },
-  methods: {
-    getDataListNums() {
-      this.dataListNums = this.dataList.map((item) => item.length);
-    },
-    getRowSpan(curIndex) {
-      const listNums = this.dataListNums.slice(curIndex + 1);
-      return listNums.reduce((sum, item) => sum * item, 1);
-    },
-    getNextList(curIndex) {
-      if (curIndex + 1 >= this.dataList.length) return;
-      return this.dataList[curIndex + 1];
-    },
-    serilizeTableList() {
-      if (!this.dataList.length) {
-        this.tableTreeList = [];
-        this.dataListNums = [];
-        return;
-      }
-
-      let tableList = [];
-      const serilize = (parentList, allParentList, curList, curIndex) => {
-        const rowspan = this.getRowSpan(curIndex);
-        const nextList = this.getNextList(curIndex);
-        curList.map((item, index) => {
-          const newParentList = index ? [] : deepCopy(parentList);
-          const curItem = { ...item, rowspan };
-          const newAllParentList = [...deepCopy(allParentList), curItem];
-          const curRow = [...newParentList, curItem];
-          if (nextList) {
-            serilize(curRow, newAllParentList, nextList, curIndex + 1);
-          } else {
-            tableList.push({ tdList: curRow, allList: newAllParentList });
-          }
-        });
-      };
-      serilize([], [], this.getNextList(-1), 0);
-
-      this.tableTreeList = tableList.map((item) => {
-        return {
-          ...item,
-          ids: item.allList.map((elem) => elem.id).join("_"),
-          names: item.allList.map((elem) => elem.name).join("_"),
-        };
-      });
-      console.log(this.tableTreeList);
-    },
-  },
-};
-</script>

src/components/common/DimensionTreeTable/index.js

@@ -1,2 +0,0 @@
-import DimensionTreeTable from "./DimensionTreeTable.vue";
-export default DimensionTreeTable;

src/components/common/DimensionTreeTable/intro.md

@@ -1,92 +0,0 @@
-# DimensionTreeTable api
-
-## 实例
-
-```html
-<template>
-  <div class="demo">
-    <dimension-tree-table :data="selectedData" #default="{trItem}">
-      <span>{{ trItem.names }}</span>
-    </dimension-tree-table>
-  </div>
-</template>
-
-<script>
-  import DimensionTreeTable from "@/components/common/DimensionTreeTable";
-
-  export default {
-    name: "demo",
-    components: {
-      DimensionTreeTable
-    },
-    data() {
-      return {
-        selectedData: [[{"id":1,"name":"颜色1"}],[{"id":11,"name":"尺码1"},{"id":12,"name":"尺码2"}]],
-      };
-    },
-    methods: {
-    }
-  };
-</script>
-```
-
-## props
-
-| 属性 | 说明               | 类型  | 默认值 |
-| ---- | ------------------ | ----- | ------ |
-| data | 生成表格的二维数组 | Aarry | []     |
-
-
-## Scoped Slot
-
-| name | 说明                                  |
-| ---- | ------------------------------------- |
-| -    | 自定义表格行的内容，参数为 { trItem } |
-
-**说明：** 实例中采用vue2.6以上slot新语法编写，查看[具体文档](https://cn.vuejs.org/v2/guide/components-slots.html)
-
-
-## trItem说明
-
-| 字段    | 说明               |
-| ------- | ------------------ |
-| tdList  | 表格单行渲染的数组 |
-| allList | 表格单行完整数组   |
-| ids     | 单行条目的id       |
-| names   | 单行条目的名称     |
-
-### example
-```json
-{
-    "tdList": [
-        {
-            "id": 1112,
-            "name": "来源2",
-            "selected": true,
-            "rowspan": 1
-        }
-    ],
-    "allList": [
-        {
-            "id": 11,
-            "name": "尺码1",
-            "selected": true,
-            "rowspan": 4
-        },
-        {
-            "id": 111,
-            "name": "材质1",
-            "selected": true,
-            "rowspan": 2
-        },
-        {
-            "id": 1112,
-            "name": "来源2",
-            "selected": true,
-            "rowspan": 1
-        }
-    ],
-    "ids": "11_111_1112",
-    "names": "尺码1_材质1_来源2"
-}
-```

src/components/common/ImageEditUpload/ImageEditUpload.vue

@@ -1,415 +0,0 @@
-<template>
-  <div class="image-edit-upload">
-    <div :class="[`${prefixCls}-main`]" v-show="!edit">
-      <div :class="elPrefixCls">
-        <div
-          :class="classes"
-          @click="handleClick"
-          @drop.prevent="onDrop"
-          @dragover.prevent="dragOver = true"
-          @dragleave.prevent="dragOver = false"
-        >
-          <input
-            ref="input"
-            type="file"
-            :class="[`${elPrefixCls}-input`]"
-            @change="handleChange"
-            :accept="accept"
-          />
-          <div :class="[`${prefixCls}-cover`]" v-if="imgUrl">
-            <img :src="imgUrl" alt="default" />
-          </div>
-          <div :class="[`${prefixCls}-dcover`]" v-else>
-            <i class="el-icon-user-solid"></i><br />
-            <p>点击或拖拽图片到此处</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div :class="[`${prefixCls}-edit`]" v-show="file.url && edit">
-      <div :class="[`${prefixCls}-edit-box`]">
-        <img ref="editImage" :src="file.url" />
-        <transition name="fade" v-if="file && file.showProgress">
-          <div class="img-progress">
-            <el-progress
-              :show-text="false"
-              :stroke-width="4"
-              :percentage="file.percentage"
-              :status="
-                file.status === 'finished' && file.showProgress
-                  ? 'success'
-                  : null
-              "
-            ></el-progress>
-          </div>
-        </transition>
-      </div>
-      <div :class="[`${prefixCls}-edit-btns`]">
-        <el-button type="error" @click="clearEdit">取消</el-button>
-        <el-button type="primary" @click="editSave">确认</el-button>
-      </div>
-    </div>
-    <p
-      :class="[
-        `${prefixCls}-tips`,
-        { 'cc-tips-success': res.success, 'cc-tips-error': !res.success },
-      ]"
-      v-if="res.msg"
-    >
-      {{ res.msg }}
-    </p>
-  </div>
-</template>
-
-<script>
-import ajax from "../utils/ajax";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.min.css";
-
-const elPrefixCls = "el-upload";
-const prefixCls = "cc-edit-upload";
-
-const ratios = {
-  double: 1 / 2,
-  square: 1,
-  rectangle: 3 / 4,
-};
-
-export default {
-  name: "image-edit-upload",
-  props: {
-    action: {
-      type: String,
-      required: true,
-    },
-    headers: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    defImage: {
-      type: String,
-    },
-    data: {
-      type: Object,
-    },
-    name: {
-      type: String,
-      default: "file",
-    },
-    withCredentials: {
-      type: Boolean,
-      default: false,
-    },
-    format: {
-      type: Array,
-      default() {
-        return ["jpg", "png"];
-      },
-    },
-    accept: {
-      type: String,
-    },
-    maxSize: {
-      type: Number,
-      default() {
-        return 2 * 1024;
-      },
-    },
-    ratioType: {
-      type: String,
-      default: "rectangle",
-      validator(val) {
-        return ["square", "rectangle", "double"].indexOf(val) > -1;
-      },
-    },
-    onProgress: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onSuccess: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onError: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onRemove: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onPreview: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onExceededSize: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onFormatError: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-  },
-  data() {
-    return {
-      file: {},
-      type: "drag",
-      edit: false,
-      cropper: false,
-      imgUrl: this.defImage,
-      prefixCls,
-      elPrefixCls,
-      dragOver: false,
-      tempIndex: 1,
-      res: {
-        success: true,
-        msg: "",
-      },
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        `${elPrefixCls}`,
-        {
-          [`${elPrefixCls}-dragger`]: this.type === "drag",
-          [`${elPrefixCls}-dragOver`]: this.type === "drag" && this.dragOver,
-        },
-      ];
-    },
-    aspectRatio() {
-      return ratios[this.ratioType];
-    },
-    limitSize() {
-      const mn = this.maxSize / 1024;
-      return mn >= 1 ? mn + "M" : this.maxSize + "Kb";
-    },
-    // accept() {
-    //   let formats = this.format.map(item => {
-    //     return "image/" + item;
-    //   });
-    //   return formats.join();
-    // }
-  },
-  watch: {
-    edit(value) {
-      if (value) {
-        this.$nextTick(function () {
-          if (!this.$refs.editImage) {
-            return;
-          }
-          this.cropper = new Cropper(this.$refs.editImage, {
-            aspectRatio: this.aspectRatio,
-            minCropBoxWidth: 120,
-            minCropBoxHeight: 120 / this.aspectRatio,
-            viewMode: 1,
-          });
-        });
-      } else {
-        if (this.cropper) {
-          this.cropper.destroy();
-          this.cropper = false;
-        }
-      }
-    },
-    defImage(val) {
-      this.imgUrl = val;
-    },
-  },
-  methods: {
-    isIe() {
-      let userAgent = navigator.userAgent;
-      let isIE =
-        userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
-      let isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
-      let isIE11 =
-        userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
-
-      return isEdge || isIE11 || isIE;
-    },
-    handleClick() {
-      this.res = { success: true, msg: "" };
-      this.$refs.input.click();
-    },
-    handleChange(e) {
-      const files = e.target.files;
-
-      if (!files) return;
-
-      this.uploadFiles(files);
-      this.$refs.input.value = null;
-    },
-    onDrop(e) {
-      this.res = { success: true, msg: "" };
-      this.dragOver = false;
-      this.uploadFiles(e.dataTransfer.files);
-    },
-    uploadFiles(files) {
-      let postFiles = Array.prototype.slice.call(files);
-
-      if (postFiles.length === 0) return;
-
-      if (this.checkValid(postFiles[0])) {
-        this.openEdit(postFiles[0]);
-      }
-    },
-    checkValid(file) {
-      // check format
-      if (this.format.length) {
-        const _file_format = file.name.split(".").pop().toLocaleLowerCase();
-        const checked = this.format.some(
-          (item) => item.toLocaleLowerCase() === _file_format
-        );
-        if (!checked) {
-          this.res = {
-            success: false,
-            msg: "只支持文件格式为" + this.format.join("/"),
-          };
-          this.onFormatError(file);
-          return false;
-        }
-      }
-
-      // check maxSize
-      if (this.maxSize) {
-        if (file.size > this.maxSize * 1024) {
-          this.res = {
-            success: false,
-            msg: "文件大小不能超过" + this.limitSize,
-          };
-          this.onExceededSize(file);
-          return false;
-        }
-      }
-
-      this.res = {
-        success: true,
-        msg: "",
-      };
-      return true;
-    },
-    openEdit(file) {
-      this.initFile(file);
-      this.$nextTick(function () {
-        this.edit = true;
-      });
-    },
-    initFile(file) {
-      this.file = {
-        status: "uploading",
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        url: this.createUrl(file),
-        response: {},
-        percentage: 0,
-        showProgress: true,
-      };
-    },
-    createUrl(file) {
-      let url = "";
-      let URL = window.URL || window.webkitURL;
-      if (URL && URL.createObjectURL) {
-        url = URL.createObjectURL(file);
-      }
-      return url;
-    },
-    clearEdit() {
-      this.edit = false;
-    },
-    editSave() {
-      const { name, type } = this.file;
-      const cropBoxSize = this.cropper.getCropBoxData();
-      // 配置width，height之后会压缩原始图片
-      const binStr = atob(
-        this.cropper
-          .getCroppedCanvas({
-            width: cropBoxSize.width,
-            height: cropBoxSize.height,
-          })
-          .toDataURL(type)
-          .split(",")[1]
-      );
-
-      let arr = new Uint8Array(binStr.length);
-      for (let i = 0; i < binStr.length; i++) {
-        arr[i] = binStr.charCodeAt(i);
-      }
-
-      let file;
-      if (this.isIe()) {
-        file = new Blob([arr], { type });
-      } else {
-        file = new File([arr], name, { type });
-      }
-
-      this.post(file);
-    },
-    post(file) {
-      ajax({
-        headers: this.headers,
-        withCredentials: this.withCredentials,
-        file: file,
-        data: this.data,
-        filename: this.name,
-        action: this.action,
-        onProgress: (e) => {
-          this.handleProgress(e);
-        },
-        onSuccess: (res) => {
-          this.edit = false;
-          this.handleSuccess(res, file);
-        },
-        onError: (err, response) => {
-          this.edit = false;
-          this.handleError(err, response);
-        },
-      });
-    },
-    handleProgress(e) {
-      this.onProgress(e, this.file);
-      this.file.percentage = parseFloat(e.percent) || 0;
-    },
-    handleSuccess(res, file) {
-      this.file.status = "finished";
-      this.file.response = res;
-      this.res = {
-        success: true,
-        msg: "图片上传成功！",
-      };
-      this.file.url = this.createUrl(file);
-      this.imgUrl = this.file.url;
-      this.onSuccess(res, this.file);
-
-      setTimeout(() => {
-        this.file.showProgress = false;
-      }, 300);
-    },
-    handleError(err, response) {
-      this.file.status = "fail";
-      this.res = {
-        success: false,
-        msg: `图片上传失败:${response.msg || "请求错误"}`,
-      };
-      this.onError(err, response, this.file);
-    },
-  },
-};
-</script>

src/components/common/ImageEditUpload/index.js

@@ -1,2 +0,0 @@
-import ImageEditUpload from "./ImageEditUpload.vue";
-export default ImageEditUpload;

src/components/common/ImageEditUpload/intro.md

@@ -1,55 +0,0 @@
-# ImageEditUpload api
-
-## 实例
-
-```html
-<template>
-  <div class="demo">
-    <image-edit-upload
-      :action="action"
-      :headers="headers"
-      ></image-edit-upload>
-  </div>
-</template>
-
-<script>
-import ImageEditUpload from "@/components/common/ImageEditUpload";
-
-export default {
-  name: "demo",
-  components: {
-    ImageEditUpload
-  },
-  data() {
-    return {
-      action: "/enrolling/enrolling/common/upload/planId/schoolId",
-      headers: {
-        Authorization: '123'
-      }
-    };
-  }
-};
-</script>
-```
-
-## ImageEditUpload props
-
-| 属性             | 说明                                                                                                                                        | 类型     | 默认值         |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
-| def-image        | 默认的显示的图片地址                                                                                                                        | String   | -              |
-| action           | 上传的地址，必填                                                                                                                            | String   | -              |
-| headers          | 设置上传的请求头部                                                                                                                          | Object   | {}             |
-| data             | 上传时附带的额外参数                                                                                                                        | Object   | -              |
-| name             | 上传的文件字段名                                                                                                                            | String   | file           |
-| with-credentials | 支持发送 cookie 凭证信息                                                                                                                    | Boolean  | false          |
-| show-upload-list | 是否显示已上传文件列表                                                                                                                      | Boolean  | true           |
-| accept           | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)                                           | String   | -              |
-| format           | 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 | Array    | ["jpg", "png"] |
-| max-size         | 文件大小限制，单位 kb                                                                                                                       | Number   | 2 * 1024       |
-| ratio-type       | 图片裁剪的宽高比例,rectangle:3/4，square:1/1，double:1/2                                                                                    | String   | rectangle      |
-| on-progress      | 文件上传时的钩子，返回字段为 event, file                                                                                                    | Function | -              |
-| on-success       | 文件上传成功时的钩子，返回字段为 response, file                                                                                             | Function | -              |
-| on-error         | 文件上传失败时的钩子，返回字段为 error, file                                                                                                | Function | -              |
-| on-format-error  | 文件格式验证失败时的钩子，返回字段为 file                                                                                                   | Function | -              |
-| on-exceeded-size | 文件超出指定大小限制时的钩子，返回字段为 file                                                                                               | Function | -              |
-

src/components/common/ImageListUpload/ImageListUpload.vue

@@ -1,322 +0,0 @@
-<template>
-  <div :class="['image-list-upload', prefixCls]">
-    <!-- message alert -->
-    <el-alert
-      :title="res.msg"
-      :type="res.success ? 'success' : 'error'"
-      v-if="res.msg"
-    >
-    </el-alert>
-    <!-- image-list -->
-    <div :class="[`${prefixCls}-list`]">
-      <div
-        v-for="(item, index) in fileList"
-        :class="[
-          `${prefixCls}-item`,
-          `${prefixCls}-item-${item.status}`,
-          { [`${prefixCls}-item-unvalid`]: !item.valid },
-        ]"
-        :key="index"
-      >
-        <div :class="[`${prefixCls}-box`, `${prefixCls}-info`]">
-          <img :src="item.url" :alt="item.name" />
-        </div>
-        <div :class="[`${prefixCls}-box`, `${prefixCls}-progress`]">
-          <el-progress
-            :percentage="item.percentage"
-            :stroke-width="8"
-            :show-text="false"
-          ></el-progress>
-        </div>
-        <div :class="[`${prefixCls}-box `, `${prefixCls}-action`]">
-          <i
-            :class="['el-icon-delete-solid', `${prefixCls}-del`]"
-            title="删除"
-            @click="handleRemove(index)"
-          ></i>
-        </div>
-        <div
-          :class="[
-            `${prefixCls}-tips`,
-            {
-              [`${prefixCls}-tips-success`]:
-                item.valid && item.status === 'success',
-              [`${prefixCls}-tips-error`]:
-                !item.valid || item.status === 'error',
-            },
-          ]"
-        >
-          <span>{{ item.statusTips }}</span>
-        </div>
-      </div>
-
-      <!-- upload add btn -->
-      <div
-        :class="[`${prefixCls}-item`]"
-        @click="handleClick"
-        title="点击添加图片"
-      >
-        <div :class="[`${prefixCls}-box`, `${prefixCls}-add`]">
-          <i class="el-icon-upload"></i>
-        </div>
-        <input
-          ref="fileInput"
-          type="file"
-          :class="[`${prefixCls}-input`]"
-          @change="handleChange"
-          :multiple="multiple"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import ajax from "../utils/ajax";
-
-/**
- * 图片上传状态：
- * init 初始状态
- * ready 准备上传
- * uploading 正在上传
- * sucess 上传成功
- * error 上传失败
- *
- * 图片上传流程：
- * 1 选中图片
- * 2 校验合法性：大小，类型
- * 3 自动上传合法图片
- *
- * 说明：
- * 1 继发上传
- * 2 上传中不可删除图片，上传结束之后可以删除图片
- * 3 每一个图片上传都会触发开始上传、上传成功以及上传失败事件
- * 4 所有合法图片上传完成之后，以及删除图片时，都会触发完成事件。
- */
-
-const prefixCls = "cc-list-upload";
-
-export default {
-  name: "image-list-upload",
-  props: {
-    action: {
-      type: String,
-      default: "/backend/uploadImage",
-    },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-    headers: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    withCredentials: {
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Object,
-    },
-    name: {
-      type: String,
-      default: "file",
-    },
-    maxSize: {
-      type: Number,
-      default: 10 * 1024,
-    },
-    rendFileUrl: {
-      type: Function,
-      default(fileInfo) {
-        return fileInfo.url;
-      },
-    },
-  },
-  data() {
-    return {
-      prefixCls,
-      fileList: [],
-      format: ["jpg", "jpeg", "png"],
-      limitNum: 10,
-      res: {
-        success: true,
-        msg: "",
-      },
-      isUploading: false,
-    };
-  },
-  computed: {
-    limitSize() {
-      let mn = this.maxSize / 1024;
-      return mn >= 1 ? mn + "M" : this.maxSize + "Kb";
-    },
-  },
-  methods: {
-    initData() {
-      this.fileList = [];
-      this.uploadErrorFiles = [];
-      this.res = { success: true, msg: "" };
-      this.isUploading = false;
-    },
-    handleClick() {
-      if (this.isUploading) return;
-      this.$refs.fileInput.click();
-    },
-    handleChange(e) {
-      this.initFileList(e.target.files);
-    },
-    initFileList(files) {
-      if (!files) return;
-      if (files.length + this.fileList.length > this.limitNum) {
-        this.res = {
-          success: false,
-          msg: "文件数量不能超过" + this.limitNum,
-        };
-        return;
-      }
-
-      const postFiles = Array.prototype.slice.call(files);
-
-      let fileList = [];
-      postFiles.forEach((el, i) => {
-        el.uid = Date.now() + i;
-        let { statusTips, valid } = this.checkFileValid(el);
-        fileList[i] = {
-          size: el.size,
-          name: el.name,
-          type: el.type,
-          percentage: 0,
-          uid: el.uid,
-          url: this.getFileUrl(el),
-          fileData: {},
-          files: el,
-          status: "init",
-          statusTips,
-          valid,
-        };
-      });
-      this.fileList = [...this.fileList, ...fileList];
-      this.toUpload();
-    },
-    getFileUrl(file) {
-      const URL = window.URL || window.webkitURL;
-      if (URL && URL.createObjectURL) return URL.createObjectURL(file);
-      return "";
-    },
-    getFileItem(uid) {
-      return this.fileList.find((el) => el.uid === uid);
-    },
-    clearData() {
-      this.$refs.fileInput.value = null;
-      this.fileList = [];
-    },
-    checkFileValid(fileItem) {
-      let result = {};
-      result = this.checkFileSize(fileItem);
-      if (!result.valid) return result;
-
-      result = this.checkFileFormat(fileItem);
-      if (!result.valid) return result;
-
-      return { valid: true, statusTips: "" };
-    },
-    checkFileSize(fileItem) {
-      const valid = fileItem.size / 1024 <= this.maxSize;
-      return {
-        statusTips: valid ? "" : "文件过大",
-        valid,
-      };
-    },
-    checkFileFormat(fileItem) {
-      const formats = this.format.join("|");
-      const reg = `\\.(${formats})$`;
-      const pattern = new RegExp(reg, "i");
-
-      const valid = pattern.test(fileItem.name);
-      return {
-        statusTips: valid ? "" : "格式不对",
-        valid,
-      };
-    },
-    handleRemove(index) {
-      this.fileList.splice(index, 1);
-      this.emitUploaded();
-      if (!this.fileList.length) this.clearData();
-    },
-    // action
-    async toUpload() {
-      if (this.isUploading) return;
-      this.isUploading = true;
-
-      this.fileList.map((item) => {
-        if (item.status === "init" && item.valid) item.status = "ready";
-      });
-      // 上传队列，继发上传，返回失败文件
-      const queenFunc = async () => {
-        for (let fileItem of this.fileList) {
-          await this.upload(fileItem).catch(() => {});
-        }
-      };
-      // 开启上传
-      await queenFunc().catch(() => {});
-
-      this.isUploading = false;
-      this.emitUploaded();
-    },
-    async upload(fileItem) {
-      if (fileItem.status !== "ready") return;
-      this.$emit("upload-start", fileItem);
-
-      fileItem.status = "uploading";
-      let errorData = "";
-      const resData = await this.post(fileItem).catch((error) => {
-        errorData = error;
-      });
-
-      if (resData) {
-        fileItem.status = "success";
-        fileItem.statusTips = "上传成功";
-        this.$emit("upload-success", resData, fileItem);
-      } else {
-        fileItem.status = "error";
-        fileItem.statusTips = "上传失败";
-        this.$emit("upload-error", errorData, fileItem);
-      }
-    },
-    post(fileItem) {
-      return new Promise((resolve, reject) => {
-        ajax({
-          headers: this.headers,
-          withCredentials: this.withCredentials,
-          file: fileItem.files,
-          data: this.data,
-          filename: this.name,
-          action: this.GLOBAL.domain + this.action,
-          onProgress: (e) => {
-            fileItem.percentage = e.percent || 0;
-          },
-          onSuccess: (res) => {
-            if (res.code === 0) {
-              resolve(res.data);
-            } else {
-              reject({ res, msg: res.message || "上传失败" });
-            }
-          },
-          onError: (err, res) => {
-            reject({ res, msg: "网络错误" });
-          },
-        });
-      });
-    },
-    emitUploaded() {
-      this.$emit(
-        "uploaded",
-        this.fileList.filter((el) => el.status === "success" && el.valid)
-      );
-    },
-  },
-};
-</script>

src/components/common/ImageListUpload/index.js

@@ -1,2 +0,0 @@
-import ImageListUpload from "./ImageListUpload.vue";
-export default ImageListUpload;

src/components/common/ImageListUpload/intro.md

@@ -1,47 +0,0 @@
-# ImageListUpload api
-
-## 实例
-
-```html
-<template>
-  <div class="image-list-upload-instance part-box">
-    <image-list-upload></image-list-upload>
-  </div>
-</template>
-
-<script>
-import ImageListUpload from "@/components/common/ImageListUpload";
-
-export default {
-  name: "image-list-upload-instance",
-  components: { ImageListUpload },
-  data() {
-    return {};
-  },
-  methods: {}
-};
-</script>
-```
-
-## props
-
-| 属性             | 说明                     | 类型     | 默认值              |
-| ---------------- | ------------------------ | -------- | ------------------- |
-| action           | 上传的地址，必填         | String   | -                   |
-| multiple         | 支持多文件上传           | Boolean  | true                |
-| headers          | 设置上传的请求头部       | Object   | {}                  |
-| with-credentials | 支持发送 cookie 凭证信息 | Boolean  | false               |
-| data             | 上传时附带的额外参数     | Object   | -                   |
-| name             | 上传的文件字段名         | String   | file                |
-| max-size         | 文件大小限制，单位 kb    | Number   | 10 * 1024           |
-| rendFileUrl      | 上传完后图片解析路径     | Function | return fileInfo.url |
-
-
-## events
-
-| 事件名         | 说明                           | 返回值                       |
-| -------------- | ------------------------------ | ---------------------------- |
-| upload-start   | 文件开始开始上传时的回调       | fileItem：当前上传文件的对象 |
-| upload-success | 文件开始上传成功时的回调       | res, fileItem                |
-| upload-error   | 文件开始上传失败时的回调       | error, fileItem              |
-| uploaded       | 所有合法文件上传成功之后的回调 | fileList                     |

src/components/common/ImagePreview/ImagePreview.vue

@@ -1,312 +0,0 @@
-<template>
-  <el-dialog
-    :class="prefixCls"
-    :visible.sync="modalIsShow"
-    title="图片预览"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :show-close="false"
-    fullscreen
-    append-to-body
-    @open="visibleChange"
-  >
-    <div slot="footer"></div>
-    <div slot="title"></div>
-
-    <div :class="[`${prefixCls}-close`]" @click="modalIsShow = false">
-      <i class="el-icon-circle-close"></i>
-    </div>
-    <div :class="[`${prefixCls}-header`]" v-if="!headerHide">
-      <h3>{{ curFile.name }}</h3>
-      <div :class="[`${prefixCls}-index`]">
-        {{ this.curIndex }} / {{ this.lastIndex }}
-      </div>
-    </div>
-    <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
-        @click="showPrev"
-      >
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
-        @click="showNext"
-      >
-        <i class="el-icon-arrow-right"></i>
-      </div>
-      <div
-        :class="[
-          `${prefixCls}-imgs`,
-          { [`${prefixCls}-imgs-nosition`]: nosition },
-        ]"
-        :style="styles"
-        v-move-ele.prevent="{ mouseMove }"
-      >
-        <img
-          :src="curFile.url"
-          :alt="curFile.name"
-          v-if="curFile.url"
-          ref="PreviewImgDetail"
-        />
-      </div>
-    </div>
-    <div :class="[`${prefixCls}-footer`]">
-      <ul>
-        <li title="合适大小" @click="toOrigin">
-          <i class="el-icon-full-screen"></i>
-        </li>
-        <li
-          title="放大"
-          @click="toMagnify"
-          :class="{
-            'li-disabled': transform.scale === maxScale,
-          }"
-        >
-          <i class="el-icon-zoom-in"></i>
-        </li>
-        <li
-          title="缩小"
-          @click="toShrink"
-          :class="{
-            'li-disabled': transform.scale === minScale,
-          }"
-        >
-          <i class="el-icon-zoom-out"></i>
-        </li>
-        <li title="旋转" @click="toRotate">
-          <i class="el-icon-refresh-right"></i>
-        </li>
-      </ul>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import MoveEle from "./move-ele";
-
-const prefixCls = "cc-image-preview";
-
-export default {
-  name: "image-preview",
-  props: {
-    imageList: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    initIndex: {
-      type: Number,
-      default: 0,
-    },
-    headerHide: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  directives: {
-    MoveEle,
-  },
-  data() {
-    return {
-      prefixCls,
-      modalIsShow: false,
-      curFile: { name: "", url: null },
-      curIndex: 1,
-      minScale: 0.2,
-      maxScale: 3,
-      styles: { width: "", height: "", top: "100px", left: "", transform: "" },
-      initWidth: 500,
-      transform: {
-        scale: 1,
-        rotate: 0,
-      },
-      nosition: false,
-    };
-  },
-  computed: {
-    isFirst() {
-      return this.curIndex === 1;
-    },
-    isLast() {
-      return this.lastIndex === this.curIndex;
-    },
-    lastIndex() {
-      return this.imageList.length;
-    },
-  },
-  watch: {
-    curIndex: {
-      immediate: true,
-      handler(val, oldVal) {
-        this.curFileChange(val);
-      },
-    },
-  },
-  methods: {
-    visibleChange() {
-      if (!this.imageList.length) return;
-      this.curIndex = this.initIndex + 1;
-    },
-    curFileChange(val) {
-      this.nosition = true;
-      this.curFile = this.imageList[val - 1];
-      this.$nextTick(() => {
-        this.fileLoad();
-      });
-    },
-    setCurIndex(index) {
-      this.curIndex = index;
-    },
-    fileLoad() {
-      const imgDom = this.$refs.PreviewImgDetail;
-      if (!imgDom) return;
-
-      imgDom.onload = () => {
-        const { naturalWidth, naturalHeight } = imgDom;
-        const imageSize = this.getImageSizePos({
-          win: {
-            width: this.$refs.ReviewBody.clientWidth,
-            height: this.$refs.ReviewBody.clientHeight,
-          },
-          img: {
-            width: naturalWidth,
-            height: naturalHeight,
-          },
-          rotate: 0,
-        });
-
-        this.styles = Object.assign(this.styles, {
-          width: imageSize.width + "px",
-          height: imageSize.height + "px",
-          top: imageSize.top + "px",
-          left: imageSize.left + "px",
-          transform: "",
-        });
-        this.transform = {
-          scale: 1,
-          rotate: 0,
-        };
-        setTimeout(() => {
-          this.nosition = false;
-        }, 100);
-      };
-    },
-    getImageSizePos({ win, img, rotate }) {
-      const imageSize = {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-      };
-      const isHorizontal = !!(rotate % 180);
-
-      const rateWin = isHorizontal
-        ? win.height / win.width
-        : win.width / win.height;
-      const hwin = isHorizontal
-        ? {
-            width: win.height,
-            height: win.width,
-          }
-        : win;
-
-      const rateImg = img.width / img.height;
-
-      if (rateImg <= rateWin) {
-        imageSize.height = Math.min(hwin.height, img.height);
-        imageSize.width = Math.floor(
-          (imageSize.height * img.width) / img.height
-        );
-      } else {
-        imageSize.width = Math.min(hwin.width, img.width);
-        imageSize.height = Math.floor(
-          (imageSize.width * img.height) / img.width
-        );
-      }
-      imageSize.left = (win.width - imageSize.width) / 2;
-      imageSize.top = (win.height - imageSize.height) / 2;
-      return imageSize;
-    },
-    cancel() {
-      this.modalIsShow = false;
-    },
-    open() {
-      this.modalIsShow = true;
-    },
-    showPrev() {
-      if (this.isFirst) {
-        this.curIndex = this.lastIndex;
-      } else {
-        this.curIndex -= 1;
-      }
-    },
-    showNext() {
-      if (this.isLast) {
-        this.curIndex = 1;
-      } else {
-        this.curIndex += 1;
-      }
-    },
-    // dome-move
-    mouseMove({ left, top }) {
-      this.styles.left = left + "px";
-      this.styles.top = top + "px";
-    },
-    setStyleTransform() {
-      const { scale, rotate } = this.transform;
-      this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
-    },
-    toOrigin() {
-      this.transform.scale = 1;
-      this.setStyleTransform();
-    },
-    toMagnify() {
-      const scale = (this.transform.scale * 1.2).toFixed(2);
-      this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
-      this.setStyleTransform();
-    },
-    toShrink() {
-      const scale = (this.transform.scale * 0.75).toFixed(2);
-      this.transform.scale = scale <= this.minScale ? this.minScale : scale;
-      this.setStyleTransform();
-    },
-    toRotate() {
-      this.transform.rotate = this.transform.rotate + 90;
-      this.setStyleTransform();
-      // 调整图片尺寸
-      const { naturalWidth, naturalHeight } = this.$refs.PreviewImgDetail;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight,
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight,
-        },
-        rotate: this.transform.rotate,
-      });
-
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px",
-      });
-      // 360度无缝切换到0度
-      setTimeout(() => {
-        if (this.transform.rotate >= 360) {
-          this.nosition = true;
-          this.transform.rotate = 0;
-          this.setStyleTransform();
-          setTimeout(() => {
-            this.nosition = false;
-          }, 100);
-        }
-      }, 200);
-    },
-  },
-};
-</script>

src/components/common/ImagePreview/index.js

@@ -1,2 +0,0 @@
-import ImagePreview from "./ImagePreview.vue";
-export default ImagePreview;

src/components/common/ImagePreview/move-ele.js

@@ -1,51 +0,0 @@
-export default {
-  inserted(el, { value, modifiers }, vnode) {
-    let [_x, _y] = [0, 0];
-    // 当前拖动事务开始前元素的left,top
-    let [oleft, otop] = [0, 0];
-    // 元素移动后的left,top
-    let [left, top] = [0, 0];
-
-    let moveHandle = function (e) {
-      if (modifiers.prevent) {
-        e.preventDefault();
-      }
-      left = oleft + e.pageX - _x;
-      top = otop + e.pageY - _y;
-
-      if (value && value.mouseMove) {
-        value.mouseMove({ left, top });
-      } else {
-        el.style.left = left + "px";
-        el.style.top = top + "px";
-      }
-    };
-
-    let upHandle = function (e) {
-      if (modifiers.prevent) {
-        e.preventDefault();
-      }
-      oleft = left;
-      otop = top;
-
-      if (value && value.mouseUp) value.mouseUp({ oleft, otop });
-
-      document.removeEventListener("mousemove", moveHandle);
-      document.removeEventListener("mouseup", upHandle);
-    };
-
-    el.addEventListener("mousedown", function (e) {
-      if (modifiers.prevent) {
-        e.preventDefault();
-      }
-      _x = e.pageX;
-      _y = e.pageY;
-      oleft = el.offsetLeft;
-      otop = el.offsetTop;
-      if (value && value.mouseDown) value.mouseDown({ oleft, otop });
-
-      document.addEventListener("mousemove", moveHandle);
-      document.addEventListener("mouseup", upHandle);
-    });
-  },
-};

src/components/common/LabelFilter/LabelFilter.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="label-filter">
-    <label-select
-      v-model="filter.color"
-      label="颜色"
-      :options="colorList"
-      :label-width="60"
-      @on-change="colorChange"
-    ></label-select>
-    <label-select
-      v-model="filter.size"
-      label="尺码"
-      :options="sizeList"
-      :label-width="60"
-      @on-change="colorChange"
-      multiple
-    ></label-select>
-
-    <div class="label-list">
-      {{ strFilter }}
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelSelect from "./LabelSelect";
-
-const colorList = "#"
-  .repeat(6)
-  .split("")
-  .map((item, index) => {
-    return {
-      id: index + 1,
-      name: "红色" + (index + 1),
-    };
-  });
-
-const sizeList = "#"
-  .repeat(6)
-  .split("")
-  .map((item, index) => {
-    return {
-      id: index + 1,
-      name: "大号" + (index + 1),
-    };
-  });
-
-export default {
-  name: "label-filter",
-  components: { LabelSelect },
-  data() {
-    return {
-      filter: {
-        color: "",
-        size: "",
-      },
-      colorList: colorList,
-      sizeList: sizeList,
-    };
-  },
-  computed: {
-    strFilter() {
-      return JSON.stringify(this.filter);
-    },
-  },
-  methods: {
-    colorChange(val) {
-      console.log(val);
-    },
-  },
-};
-</script>

src/components/common/LabelFilter/LabelSelect.vue

@@ -1,205 +0,0 @@
-<template>
-  <div :class="['label-select', prefixCls]">
-    <span
-      :class="[`${prefixCls}-label`]"
-      v-if="labelIsShow"
-      :style="labelStyles"
-      >{{ label }}</span
-    >
-    <ul :class="[`${prefixCls}-options`]" :style="optionsStyles">
-      <li
-        :class="{
-          [`${prefixCls}-selected`]: !selectedIds.length,
-        }"
-        @click="selectAll"
-        v-if="showAllOptionTag"
-      >
-        全部
-      </li>
-      <li
-        v-for="(item, index) in optionList"
-        :key="index"
-        :class="{
-          [`${prefixCls}-selected`]: item.selected,
-          [`${prefixCls}-disabled`]: item.disabled,
-        }"
-        @click="select(item)"
-      >
-        {{ item.name }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-const prefixCls = "cc-labels";
-
-export default {
-  name: "label-select",
-  props: {
-    value: {
-      type: [String, Number, Array],
-    },
-    label: {
-      type: String,
-    },
-    labelWidth: {
-      type: Number,
-    },
-    labelIsShow: {
-      type: Boolean,
-      default: true,
-    },
-    showAllOptionTag: {
-      type: Boolean,
-      default: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    optionKey: {
-      type: String,
-      default: "id",
-    },
-    options: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    costom: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      prefixCls,
-      selectedIds: [],
-      optionList: [],
-    };
-  },
-  computed: {
-    labelStyles() {
-      const width =
-        this.labelWidth || this.labelWidth === 0 ? this.labelWidth : 60;
-
-      return {
-        width: `${width}px`,
-      };
-    },
-    optionsStyles() {
-      const width =
-        this.labelWidth || this.labelWidth === 0 ? this.labelWidth : 60;
-
-      return {
-        marginLeft: `${width}px`,
-      };
-    },
-  },
-  watch: {
-    options: {
-      immediate: true,
-      handler(val) {
-        this.optionList = val.map((item) => {
-          return {
-            ...item,
-            selected: this.selectedIds.indexOf(item[this.optionKey]) !== -1,
-          };
-        });
-      },
-    },
-    value: {
-      immediate: true,
-      handler(val) {
-        if (this.multiple) {
-          this.selectedIds = val ? [...val] : [];
-        } else {
-          this.selectedIds = val ? [val] : [];
-        }
-        this.actOptions();
-      },
-    },
-  },
-  methods: {
-    select(option) {
-      const optkey = option[this.optionKey];
-      if (this.multiple) {
-        option.selected = !option.selected;
-        const optPoz = this.selectedIds.indexOf(optkey);
-        if (optPoz === -1) {
-          this.selectedIds.push(optkey);
-        } else {
-          this.selectedIds.splice(optPoz, 1);
-        }
-      } else {
-        this.optionList.map((item) => {
-          item.selected = optkey === item[this.optionKey];
-        });
-        this.selectedIds = [optkey];
-      }
-      this.emitSelect();
-    },
-    actOptions() {
-      this.optionList.map((item) => {
-        item.selected = this.selectedIds.indexOf(item[this.optionKey]) !== -1;
-      });
-    },
-    selectAll() {
-      this.optionList.map((item) => (item.selected = false));
-      this.selectedIds = [];
-      this.emitSelect();
-    },
-    emitSelect() {
-      const selectOptions = this.optionList.filter(
-        (item) => this.selectedIds.indexOf(item[this.optionKey]) !== -1
-      );
-      this.$emit(
-        "input",
-        this.multiple ? this.selectedIds : this.selectedIds[0]
-      );
-      this.$emit("on-change", selectOptions);
-    },
-  },
-};
-</script>
-
-<style lang="css">
-.label-select {
-  margin-bottom: 8px;
-}
-.label-label {
-  display: block;
-  float: left;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  padding-right: 20px;
-  font-weight: 600;
-}
-.label-options {
-  margin-left: 60px;
-}
-.label-options li {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 5px 5px 0;
-  height: 24px;
-  line-height: 24px;
-  padding: 0 10px;
-  border-radius: 3px;
-  cursor: pointer;
-}
-.label-options li:hover {
-  color: #409eff;
-}
-.label-options li.label-selected {
-  background: #409eff;
-  color: #fff;
-}
-.label-options li.label-disabled {
-  color: #909399;
-  cursor: not-allowed;
-}
-</style>

src/components/common/RichTextEditor/RichTextEditor.vue

@@ -1,281 +0,0 @@
-<template>
-  <div class="rich-text-editor cc-editor">
-    <quill-editor
-      :id="editorId"
-      :content="content"
-      ref="QuillEditor"
-      @change="onEditorChange"
-      :options="options"
-    ></quill-editor>
-    <input
-      style="display: none"
-      :id="uniqueInputId"
-      type="file"
-      name="fileinput"
-      @change="uploadImg"
-    />
-    <el-progress
-      :percentage="percentage"
-      :stroke-width="2"
-      :show-text="false"
-    ></el-progress>
-  </div>
-</template>
-
-<script>
-// 文档：https://github.com/surmon-china/vue-quill-editor
-import ajax from "../utils/ajax";
-import Quill from "quill";
-import Delta from "quill-delta";
-import { quillEditor } from "vue-quill-editor";
-import "quill/dist/quill.snow.css";
-import ImageResize from "quill-image-resize-module";
-Quill.register("modules/imageResize", ImageResize);
-
-export default {
-  name: "rich-text-editor",
-  props: {
-    value: String,
-    // upload
-    action: {
-      type: String,
-      required: true,
-    },
-    headers: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    withCredentials: {
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Object,
-    },
-    name: {
-      type: String,
-      default: "file",
-    },
-    maxSize: {
-      type: Number,
-      default: 2 * 1024,
-    },
-    rendFileUrl: {
-      type: Function,
-      default(fileInfo) {
-        return fileInfo;
-      },
-    },
-    onUploadSuccess: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-    onUploadError: {
-      type: Function,
-      default() {
-        return {};
-      },
-    },
-  },
-  components: {
-    quillEditor,
-  },
-  data() {
-    return {
-      content: "",
-      iframeSrc: "",
-      options: {
-        placeholder: "请输入内容",
-        modules: {
-          toolbar: [
-            ["bold", "italic", "underline", "strike"],
-            ["blockquote", "code-block"],
-            [{ list: "ordered" }, { list: "bullet" }],
-            [{ script: "sub" }, { script: "super" }],
-            [{ indent: "-1" }, { indent: "+1" }, { direction: "rtl" }],
-            [{ size: ["small", false, "large", "huge"] }],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            [{ color: [] }, { background: [] }, { align: [] }],
-            ["clean", "link", "image"],
-          ],
-          imageResize: true,
-          history: {
-            delay: 1000,
-            maxStack: 50,
-            userOnly: false,
-          },
-        },
-      },
-      percentage: 0,
-      uniqueInputId: "",
-      uploadImages: [],
-      editorId: "",
-      // math-modal
-      src: "",
-      mathModalIsShow: false,
-    };
-  },
-  computed: {
-    editor() {
-      return this.$refs.QuillEditor.quill;
-    },
-  },
-  watch: {
-    value(val) {
-      this.content = val;
-    },
-  },
-  mounted() {
-    const serno = Math.random().toString(16).slice(-8);
-    this.editorId = "rich-text-editor-" + serno;
-    this.uniqueInputId = "file-input-" + serno;
-
-    this.registImageHandle();
-    this.registPasteEvent();
-    this.content = this.value;
-  },
-  methods: {
-    registPasteEvent() {
-      const inputBox = this.$el.querySelector(".ql-editor");
-      inputBox.addEventListener("paste", (e) => {
-        e.preventDefault();
-        let items = e.clipboardData ? e.clipboardData.items : [];
-        if (!items || !items.length) return;
-
-        for (let i = 0; i < items.length; i++) {
-          let item = items[i];
-          if (
-            item &&
-            item.kind === "string" &&
-            item.type.match(/^text\/plain/i)
-          ) {
-            this.textPasteHandle(item);
-            break;
-          } else if (
-            item &&
-            item.kind === "file" &&
-            item.type.match(/^image\//i)
-          ) {
-            this.imgPasteHandle(item);
-            break;
-          }
-        }
-      });
-    },
-    textPasteHandle(item) {
-      item.getAsString((content) => {
-        this.insertText(content);
-      });
-    },
-    imgPasteHandle(item) {
-      let file = item.getAsFile();
-
-      // 展示文件
-      // const reader = new FileReader();
-      // reader.onload = e => {
-      //   this.insertImg(e.target.result);
-      // };
-      // reader.readAsDataURL(file);
-
-      this.upload(file)
-        .then((rep) => {
-          const fileUrl = this.rendFileUrl(rep);
-          this.insertImg(fileUrl);
-          this.onUploadSuccess(fileUrl);
-        })
-        .catch((error) => {
-          this.onUploadError(error);
-        });
-    },
-    registImageHandle() {
-      let that = this;
-      let imgHandler = async (state) => {
-        if (state) {
-          let fileInput = document.getElementById(that.uniqueInputId);
-          fileInput.click();
-        }
-      };
-      that.editor.getModule("toolbar").addHandler("image", imgHandler);
-    },
-    onEditorChange() {
-      this.$emit("input", this.content);
-    },
-    uploadImg() {
-      let file = document.getElementById(this.uniqueInputId).files[0];
-      this.upload(file)
-        .then((rep) => {
-          const fileUrl = this.rendFileUrl(rep);
-          this.insertImg(fileUrl);
-          this.onUploadSuccess(fileUrl);
-        })
-        .catch((error) => {
-          this.onUploadError(error);
-        });
-    },
-    getSelectionIndex() {
-      this.editor.focus();
-      const selectionRange = this.editor.getSelection();
-      if (selectionRange && selectionRange.length)
-        this.editor.deleteText(selectionRange.index, selectionRange.length);
-
-      return selectionRange ? selectionRange.index : 0;
-    },
-    insertText(content) {
-      const index = this.getSelectionIndex();
-      this.editor.insertEmbed(index, "text", content, "user");
-    },
-    insertImg(url, alt) {
-      const index = this.getSelectionIndex();
-      let delta = this.editor.insertEmbed(index, "image", url, "user");
-      this.editor.setSelection(index + 1);
-      if (alt) {
-        let retain = delta.ops[0].retain;
-        this.editor.updateContents(
-          new Delta().retain(retain).retain(1, { alt })
-        );
-      }
-    },
-    base64ToBlob(base64Str) {
-      var bytes = atob(base64Str.split(",")[1]);
-      let arr = new Uint8Array(bytes.length);
-      for (let i = 0; i < bytes.length; i++) {
-        arr[i] = bytes.charCodeAt(i);
-      }
-      return new Blob([arr], { type: "image/png" });
-    },
-    upload(file) {
-      if (file.size > this.maxSize * 1024) {
-        return Promise.reject({ msg: "图片过大，请重新编辑!" });
-      }
-      return new Promise((resolve, reject) => {
-        ajax({
-          headers: this.headers,
-          withCredentials: this.withCredentials,
-          file: file,
-          data: this.data,
-          filename: this.name,
-          action: this.action,
-          onProgress: (e) => {
-            this.percentage = e.percent || 0;
-            if (this.percentage === 100) {
-              setTimeout(() => {
-                this.percentage = 0;
-              }, 300);
-            }
-          },
-          onSuccess: (res) => {
-            resolve(res);
-          },
-          onError: (err, response) => {
-            reject({ err, response });
-          },
-        });
-      });
-    },
-  },
-};
-</script>

src/components/common/RichTextEditor/index.js

@@ -1,2 +0,0 @@
-import RichTextEditor from "./RichTextEditor.vue";
-export default RichTextEditor;

src/components/common/RichTextEditor/intro.md

@@ -1,104 +0,0 @@
-# RickEdit api
-
-- [官方git地址](https://github.com/surmon-china/vue-quill-editor)
-
-## 实例
-
-```html
-<template>
-  <div class="demo">
-    <rich-editor v-model="content" :headers="headers" :action="action" :rend-file-url="rendFileUrl" ref="RichEditor"></rich-editor>
-  </div>
-</template>
-
-<script>
-import RichEditor from "@/components/common/RichEditor";
-
-export default {
-  name: "demo",
-  components: {
-    RichEditor
-  },
-  computed: {
-    editor() {
-      // editor实例，实质时quill对象
-      return this.$refs.RichEditor.editor;
-    }
-  },
-  data() {
-    return {
-      content: "<p>这是一段默认内容</p>",
-      headers: {},
-      action: ""
-    };
-  },
-  mounted() {
-    this.headers = {
-      Authorization: "token"
-    };
-    this.action = "file upload url";
-  },
-  methods: {
-    rendFileUrl(rep) {
-      return 'file-url'
-    }
-  }
-};
-</script>
-```
-
-## RickEdit props
-
-| 属性              | 说明                                                      | 类型     | 默认值   |
-| ----------------- | --------------------------------------------------------- | -------- | -------- |
-| value             | 配合v-model实现文本数据的双向绑定                         | String   | -        |
-| action            | 上传文件的api地址                                         | String   | -        |
-| headers           | 上传文件的header信息                                      | Object   | {}       |
-| max-size          | 上传文件大小限制,单位kb                                   | Number   | 2 * 1024 |
-| rend-file-url     | 上传文件成功后，解析文件路径的方法，参数rep为response对象 | Function | {}       |
-| name              | 上传文件的字段名                                          | String   | file     |
-| on-upload-success | 上传文件成功后的回调方法                                  | Function | {}       |
-| on-upload-error   | 上传文件失败后的回调方法，参数error信息                   | Function | {}       |
-
-
-## 插件说明：
-
-### 1. 图片缩放插件
-
-- 官方推荐插件：[quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
-- **Tips:** quill-image-resize-module若按官方提供的方式引入会有问题。调整后的方式如下：
-
-**载入图片缩放插件**
-
-- `vue.config.js`文件中加入如下代码
- 
-```bash
-configureWebpack: {
-    plugins: [
-      new webpack.ProvidePlugin({
-        'window.Quill': 'quill/dist/quill.js',
-        Quill: 'quill/dist/quill.js'
-      })
-    ]
-  }
-```
-
-- 引入插件
-
-```bash
-import Quill from "quill";
-import ImageResize from "quill-image-resize-module";
-Quill.register("modules/imageResize", ImageResize);
-```
-
-- 配置插件
-
-```bash
-options: {
- modules: {
-   imageResize: true
- }
-}
-```
-
-- **Tips：** 如果不需要图片缩放插件，则可以删除相应的文件及代码。

src/components/common/StepsProgress/StepFour.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="step-four">step-four</div>
-</template>
-
-<script>
-export default {
-  name: "step-four",
-  data() {
-    return {};
-  },
-  mounted() {
-    setTimeout(() => {
-      // 提交步骤准备就绪事件
-      this.$emit("on-ready");
-    }, 500);
-  },
-  methods: {
-    checkValid() {
-      // some code
-
-      // 提交可执行下一步操作事件
-      this.$emit("on-next");
-    },
-  },
-};
-</script>

src/components/common/StepsProgress/StepOne.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="step-one">step-one</div>
-</template>
-
-<script>
-export default {
-  name: "step-one",
-  data() {
-    return {};
-  },
-  mounted() {
-    setTimeout(() => {
-      // 提交步骤准备就绪事件
-      this.$emit("on-ready");
-    }, 500);
-  },
-  methods: {
-    checkValid() {
-      // some code
-
-      // 提交可执行下一步操作事件
-      this.$emit("on-next");
-    },
-  },
-};
-</script>

src/components/common/StepsProgress/StepThree.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="step-three">step-three</div>
-</template>
-
-<script>
-export default {
-  name: "step-three",
-  data() {
-    return {};
-  },
-  mounted() {
-    setTimeout(() => {
-      // 提交步骤准备就绪事件
-      this.$emit("on-ready");
-    }, 500);
-  },
-  methods: {
-    checkValid() {
-      // some code
-
-      // 提交可执行下一步操作事件
-      this.$emit("on-next");
-    },
-  },
-};
-</script>

src/components/common/StepsProgress/StepTwo.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="step-two">step-two</div>
-</template>
-
-<script>
-export default {
-  name: "step-two",
-  data() {
-    return {};
-  },
-  mounted() {
-    setTimeout(() => {
-      // 提交步骤准备就绪事件
-      this.$emit("on-ready");
-    }, 500);
-  },
-  methods: {
-    checkValid() {
-      // some code
-
-      // 提交可执行下一步操作事件
-      this.$emit("on-next");
-    },
-  },
-};
-</script>

src/components/common/StepsProgress/StepsProgress.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="step-progress">
-    <div class="step-menu">
-      <el-steps :active="current" align-center process-status="finish">
-        <el-step
-          v-for="(step, index) in STEPS_LIST"
-          :key="index"
-          :title="step.title"
-        ></el-step>
-      </el-steps>
-    </div>
-    <div class="step-body">
-      <component
-        :is="currentComponent"
-        :ref="currentComponent"
-        @on-next="toNext"
-        @on-ready="stepReady"
-      ></component>
-    </div>
-
-    <div class="step-ctrl">
-      <el-button type="primary" @click="prevStep" :disabled="isFirstStep"
-        >上一步</el-button
-      >
-      <el-button
-        type="primary"
-        @click="nextStep"
-        :disabled="nextHolder || isLastStep"
-        >下一步</el-button
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-import StepOne from "./StepOne";
-import StepTwo from "./StepTwo";
-import StepThree from "./StepThree";
-import StepFour from "./StepFour";
-
-const STEPS_LIST = [
-  {
-    name: "step-one",
-    title: "步骤1",
-  },
-  {
-    name: "step-two",
-    title: "步骤2",
-  },
-  {
-    name: "step-three",
-    title: "步骤3",
-  },
-  {
-    name: "step-four",
-    title: "步骤4",
-  },
-];
-
-export default {
-  name: "step-progress",
-  components: {
-    StepOne,
-    StepTwo,
-    StepThree,
-    StepFour,
-  },
-  data() {
-    return {
-      STEPS_LIST,
-      current: 0,
-      nextHolder: true,
-      dataReady: true,
-    };
-  },
-  computed: {
-    currentComponent() {
-      return this.STEPS_LIST[this.current].name;
-    },
-    isFirstStep() {
-      return this.current === 0;
-    },
-    isLastStep() {
-      return this.current === this.lastStep;
-    },
-    lastStep() {
-      return this.STEPS_LIST.length - 1;
-    },
-  },
-  watch: {
-    current() {
-      // 滚动条置顶
-      // document.getElementById("home-body").scrollTop = 0;
-    },
-  },
-  methods: {
-    prevStep() {
-      if (this.isFirstStep) return;
-      this.current -= 1;
-    },
-    nextStep() {
-      if (this.isLastStep || this.nextHolder) return;
-      this.$refs[this.currentComponent].checkValid();
-    },
-    toNext() {
-      if (this.isLastStep) return;
-      this.current += 1;
-      this.nextHolder = true;
-    },
-    stepReady() {
-      this.nextHolder = false;
-    },
-  },
-};
-</script>
-
-<style lang="css">
-.step-body {
-  min-height: 600px;
-  padding: 20px;
-}
-.step-ctrl {
-  text-align: center;
-  margin-top: 50px;
-}
-</style>

src/components/common/utils/ajax.js

@@ -1,85 +0,0 @@
-// https://github.com/ElemeFE/element/blob/dev/packages/upload/src/ajax.js
-
-function getError(action, option, xhr) {
-  const msg = `fail to post ${action} ${xhr.status}'`;
-  const err = new Error(msg);
-  err.status = xhr.status;
-  err.method = "post";
-  err.url = action;
-  return err;
-}
-
-function getBody(xhr) {
-  const text = xhr.responseText || xhr.response;
-  if (!text) {
-    return text;
-  }
-
-  try {
-    return JSON.parse(text);
-  } catch (e) {
-    return text;
-  }
-}
-
-export default function upload(option) {
-  if (typeof XMLHttpRequest === "undefined") {
-    return;
-  }
-
-  const xhr = new XMLHttpRequest();
-  const action = option.action;
-
-  if (xhr.upload) {
-    xhr.upload.onprogress = function progress(e) {
-      if (e.total > 0) {
-        e.percent = (e.loaded / e.total) * 100;
-      }
-      option.onProgress(e);
-    };
-  }
-
-  const formData = new FormData();
-
-  if (option.data) {
-    Object.keys(option.data).map((key) => {
-      formData.append(key, option.data[key]);
-    });
-  }
-
-  formData.append(option.filename, option.file);
-
-  xhr.onerror = function error(e) {
-    option.onError(e);
-  };
-
-  xhr.onload = function onload() {
-    if (xhr.status < 200 || xhr.status >= 300) {
-      return option.onError(getError(action, option, xhr), getBody(xhr));
-    }
-
-    option.onSuccess(getBody(xhr));
-  };
-
-  xhr.open("post", action, true);
-
-  if (option.withCredentials && "withCredentials" in xhr) {
-    xhr.withCredentials = true;
-  }
-
-  const headers = option.headers || {};
-
-  // if (headers['X-Requested-With'] !== null) {
-  //   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-  // }
-
-  for (let item in headers) {
-    if (
-      Object.prototype.hasOwnProperty.call(headers, item) &&
-      headers[item] !== null
-    ) {
-      xhr.setRequestHeader(item, headers[item]);
-    }
-  }
-  xhr.send(formData);
-}