diff --git a/src/element-ui/theme/cascader-new.css b/src/element-ui/theme/cascader-new.css
new file mode 100644
index 00000000..559a14f1
--- /dev/null
+++ b/src/element-ui/theme/cascader-new.css
@@ -0,0 +1,1046 @@
+.el-cascader__tags, .el-tag {
+  -webkit-box-sizing: border-box
+}
+
+.el-collapse-item__content {
+  padding-bottom: 25px;
+  font-size: 13px;
+  color: #303133;
+  line-height: 1.769230769230769
+}
+
+.el-collapse-item:last-child {
+  margin-bottom: -1px
+}
+
+.el-popper .popper__arrow, .el-popper .popper__arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid
+}
+
+.el-popper .popper__arrow {
+  border-width: 6px;
+  -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
+  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03))
+}
+
+.el-popper .popper__arrow::after {
+  content: " ";
+  border-width: 6px
+}
+
+.el-popper[x-placement^=top] {
+  margin-bottom: 12px
+}
+
+.el-popper[x-placement^=top] .popper__arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-right: 3px;
+  border-top-color: #EBEEF5;
+  border-bottom-width: 0
+}
+
+.el-popper[x-placement^=top] .popper__arrow::after {
+  bottom: 1px;
+  margin-left: -6px;
+  border-top-color: #FFF;
+  border-bottom-width: 0
+}
+
+.el-popper[x-placement^=bottom] {
+  margin-top: 12px
+}
+
+.el-popper[x-placement^=bottom] .popper__arrow {
+  top: -6px;
+  left: 50%;
+  margin-right: 3px;
+  border-top-width: 0;
+  border-bottom-color: #EBEEF5
+}
+
+.el-popper[x-placement^=bottom] .popper__arrow::after {
+  top: 1px;
+  margin-left: -6px;
+  border-top-width: 0;
+  border-bottom-color: #FFF
+}
+
+.el-popper[x-placement^=right] {
+  margin-left: 12px
+}
+
+.el-popper[x-placement^=right] .popper__arrow {
+  top: 50%;
+  left: -6px;
+  margin-bottom: 3px;
+  border-right-color: #EBEEF5;
+  border-left-width: 0
+}
+
+.el-popper[x-placement^=right] .popper__arrow::after {
+  bottom: -6px;
+  left: 1px;
+  border-right-color: #FFF;
+  border-left-width: 0
+}
+
+.el-popper[x-placement^=left] {
+  margin-right: 12px
+}
+
+.el-popper[x-placement^=left] .popper__arrow {
+  top: 50%;
+  right: -6px;
+  margin-bottom: 3px;
+  border-right-width: 0;
+  border-left-color: #EBEEF5
+}
+
+.el-popper[x-placement^=left] .popper__arrow::after {
+  right: 1px;
+  bottom: -6px;
+  margin-left: -6px;
+  border-right-width: 0;
+  border-left-color: #FFF
+}
+
+.el-tag {
+  background-color: #ecf5ff;
+  border-color: #d9ecff;
+  display: inline-block;
+  height: 32px;
+  padding: 0 10px;
+  line-height: 30px;
+  font-size: 12px;
+  color: #409EFF;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap
+}
+
+.el-tag.is-hit {
+  border-color: #409EFF
+}
+
+.el-tag .el-tag__close {
+  color: #409eff
+}
+
+.el-tag .el-tag__close:hover {
+  color: #FFF;
+  background-color: #409eff
+}
+
+.el-tag.el-tag--info {
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+  color: #909399
+}
+
+.el-tag.el-tag--info.is-hit {
+  border-color: #909399
+}
+
+.el-tag.el-tag--info .el-tag__close {
+  color: #909399
+}
+
+.el-tag.el-tag--info .el-tag__close:hover {
+  color: #FFF;
+  background-color: #909399
+}
+
+.el-tag.el-tag--success {
+  background-color: #f0f9eb;
+  border-color: #e1f3d8;
+  color: #67c23a
+}
+
+.el-tag.el-tag--success.is-hit {
+  border-color: #67C23A
+}
+
+.el-tag.el-tag--success .el-tag__close {
+  color: #67c23a
+}
+
+.el-tag.el-tag--success .el-tag__close:hover {
+  color: #FFF;
+  background-color: #67c23a
+}
+
+.el-tag.el-tag--warning {
+  background-color: #fdf6ec;
+  border-color: #faecd8;
+  color: #e6a23c
+}
+
+.el-tag.el-tag--warning.is-hit {
+  border-color: #E6A23C
+}
+
+.el-tag.el-tag--warning .el-tag__close {
+  color: #e6a23c
+}
+
+.el-tag.el-tag--warning .el-tag__close:hover {
+  color: #FFF;
+  background-color: #e6a23c
+}
+
+.el-tag.el-tag--danger {
+  background-color: #fef0f0;
+  border-color: #fde2e2;
+  color: #f56c6c
+}
+
+.el-tag.el-tag--danger.is-hit {
+  border-color: #F56C6C
+}
+
+.el-tag.el-tag--danger .el-tag__close {
+  color: #f56c6c
+}
+
+.el-tag.el-tag--danger .el-tag__close:hover {
+  color: #FFF;
+  background-color: #f56c6c
+}
+
+.el-tag .el-icon-close {
+  border-radius: 50%;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+  font-size: 12px;
+  height: 16px;
+  width: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  top: -1px;
+  right: -5px
+}
+
+.el-tag .el-icon-close::before {
+  display: block
+}
+
+.el-tag--dark {
+  background-color: #409eff;
+  border-color: #409eff;
+  color: #fff
+}
+
+.el-tag--dark.is-hit {
+  border-color: #409EFF
+}
+
+.el-tag--dark .el-tag__close {
+  color: #fff
+}
+
+.el-tag--dark .el-tag__close:hover {
+  color: #FFF;
+  background-color: #66b1ff
+}
+
+.el-tag--dark.el-tag--info {
+  background-color: #909399;
+  border-color: #909399;
+  color: #fff
+}
+
+.el-tag--dark.el-tag--info.is-hit {
+  border-color: #909399
+}
+
+.el-tag--dark.el-tag--info .el-tag__close {
+  color: #fff
+}
+
+.el-tag--dark.el-tag--info .el-tag__close:hover {
+  color: #FFF;
+  background-color: #a6a9ad
+}
+
+.el-tag--dark.el-tag--success {
+  background-color: #67c23a;
+  border-color: #67c23a;
+  color: #fff
+}
+
+.el-tag--dark.el-tag--success.is-hit {
+  border-color: #67C23A
+}
+
+.el-tag--dark.el-tag--success .el-tag__close {
+  color: #fff
+}
+
+.el-tag--dark.el-tag--success .el-tag__close:hover {
+  color: #FFF;
+  background-color: #85ce61
+}
+
+.el-tag--dark.el-tag--warning {
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+  color: #fff
+}
+
+.el-tag--dark.el-tag--warning.is-hit {
+  border-color: #E6A23C
+}
+
+.el-tag--dark.el-tag--warning .el-tag__close {
+  color: #fff
+}
+
+.el-tag--dark.el-tag--warning .el-tag__close:hover {
+  color: #FFF;
+  background-color: #ebb563
+}
+
+.el-tag--dark.el-tag--danger {
+  background-color: #f56c6c;
+  border-color: #f56c6c;
+  color: #fff
+}
+
+.el-tag--dark.el-tag--danger.is-hit {
+  border-color: #F56C6C
+}
+
+.el-tag--dark.el-tag--danger .el-tag__close {
+  color: #fff
+}
+
+.el-tag--dark.el-tag--danger .el-tag__close:hover {
+  color: #FFF;
+  background-color: #f78989
+}
+
+.el-tag--plain {
+  background-color: #fff;
+  border-color: #b3d8ff;
+  color: #409eff
+}
+
+.el-tag--plain.is-hit {
+  border-color: #409EFF
+}
+
+.el-tag--plain .el-tag__close {
+  color: #409eff
+}
+
+.el-tag--plain .el-tag__close:hover {
+  color: #FFF;
+  background-color: #409eff
+}
+
+.el-tag--plain.el-tag--info {
+  background-color: #fff;
+  border-color: #d3d4d6;
+  color: #909399
+}
+
+.el-tag--plain.el-tag--info.is-hit {
+  border-color: #909399
+}
+
+.el-tag--plain.el-tag--info .el-tag__close {
+  color: #909399
+}
+
+.el-tag--plain.el-tag--info .el-tag__close:hover {
+  color: #FFF;
+  background-color: #909399
+}
+
+.el-tag--plain.el-tag--success {
+  background-color: #fff;
+  border-color: #c2e7b0;
+  color: #67c23a
+}
+
+.el-tag--plain.el-tag--success.is-hit {
+  border-color: #67C23A
+}
+
+.el-tag--plain.el-tag--success .el-tag__close {
+  color: #67c23a
+}
+
+.el-tag--plain.el-tag--success .el-tag__close:hover {
+  color: #FFF;
+  background-color: #67c23a
+}
+
+.el-tag--plain.el-tag--warning {
+  background-color: #fff;
+  border-color: #f5dab1;
+  color: #e6a23c
+}
+
+.el-tag--plain.el-tag--warning.is-hit {
+  border-color: #E6A23C
+}
+
+.el-tag--plain.el-tag--warning .el-tag__close {
+  color: #e6a23c
+}
+
+.el-tag--plain.el-tag--warning .el-tag__close:hover {
+  color: #FFF;
+  background-color: #e6a23c
+}
+
+.el-tag--plain.el-tag--danger {
+  background-color: #fff;
+  border-color: #fbc4c4;
+  color: #f56c6c
+}
+
+.el-tag--plain.el-tag--danger.is-hit {
+  border-color: #F56C6C
+}
+
+.el-tag--plain.el-tag--danger .el-tag__close {
+  color: #f56c6c
+}
+
+.el-tag--plain.el-tag--danger .el-tag__close:hover {
+  color: #FFF;
+  background-color: #f56c6c
+}
+
+.el-tag--medium {
+  height: 28px;
+  line-height: 26px
+}
+
+.el-tag--medium .el-icon-close {
+  -webkit-transform: scale(.8);
+  transform: scale(.8)
+}
+
+.el-tag--small {
+  height: 24px;
+  padding: 0 8px;
+  line-height: 22px
+}
+
+.el-tag--small .el-icon-close {
+  -webkit-transform: scale(.8);
+  transform: scale(.8)
+}
+
+.el-tag--mini {
+  height: 20px;
+  padding: 0 5px;
+  line-height: 19px
+}
+
+.el-tag--mini .el-icon-close {
+  margin-left: -3px;
+  -webkit-transform: scale(.7);
+  transform: scale(.7)
+}
+
+.el-cascader {
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  line-height: 40px
+}
+
+.el-cascader:not(.is-disabled):hover .el-input__inner {
+  cursor: pointer;
+  border-color: #C0C4CC
+}
+
+.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
+  border-color: #409EFF
+}
+
+.el-cascader .el-input {
+  cursor: pointer
+}
+
+.el-cascader .el-input .el-input__inner {
+  text-overflow: ellipsis
+}
+
+.el-cascader .el-input .el-icon-arrow-down {
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s;
+  font-size: 14px
+}
+
+.el-cascader .el-input .el-icon-arrow-down.is-reverse {
+  -webkit-transform: rotateZ(180deg);
+  transform: rotateZ(180deg)
+}
+
+.el-cascader .el-input .el-icon-circle-close:hover {
+  color: #909399
+}
+
+.el-cascader--medium {
+  font-size: 14px;
+  line-height: 36px
+}
+
+.el-cascader--small {
+  font-size: 13px;
+  line-height: 32px
+}
+
+.el-cascader--mini {
+  font-size: 12px;
+  line-height: 28px
+}
+
+.el-cascader.is-disabled .el-cascader__label {
+  z-index: 2;
+  color: #C0C4CC
+}
+
+.el-cascader__dropdown {
+  margin: 5px 0;
+  font-size: 14px;
+  background: #FFF;
+  border: 1px solid #E4E7ED;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
+}
+
+.el-cascader__tags {
+  position: absolute;
+  left: 0;
+  right: 30px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  line-height: normal;
+  text-align: left;
+  box-sizing: border-box
+}
+
+.el-cascader__tags .el-tag {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  max-width: 100%;
+  margin: 2px 0 2px 6px;
+  text-overflow: ellipsis;
+  background: #f0f2f5
+}
+
+.el-cascader__tags .el-tag:not(.is-hit) {
+  border-color: transparent
+}
+
+.el-cascader__tags .el-tag>span {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.el-cascader__tags .el-tag .el-icon-close {
+  -webkit-box-flex: 0;
+  -ms-flex: none;
+  flex: none;
+  background-color: #C0C4CC;
+  color: #FFF
+}
+
+.el-cascader__tags .el-tag .el-icon-close:hover {
+  background-color: #909399
+}
+
+.el-cascader__suggestion-panel {
+  border-radius: 4px
+}
+
+.el-cascader__suggestion-list {
+  max-height: 204px;
+  margin: 0;
+  padding: 6px 0;
+  font-size: 14px;
+  color: #606266;
+  text-align: center
+}
+
+.el-cascader__suggestion-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 34px;
+  padding: 0 15px;
+  text-align: left;
+  outline: 0;
+  cursor: pointer
+}
+
+.el-cascader__suggestion-item:focus, .el-cascader__suggestion-item:hover {
+  background: #F5F7FA
+}
+
+.el-cascader__suggestion-item.is-checked {
+  color: #409EFF;
+  font-weight: 700
+}
+
+.el-cascader__suggestion-item>span {
+  margin-right: 10px
+}
+
+.el-cascader__empty-text {
+  margin: 10px 0;
+  color: #C0C4CC
+}
+
+.el-cascader__search-input {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 24px;
+  min-width: 60px;
+  margin: 2px 0 2px 15px;
+  padding: 0;
+  color: #606266;
+  border: none;
+  outline: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.el-cascader__search-input::-webkit-input-placeholder {
+  color: #C0C4CC
+}
+
+.el-cascader__search-input:-ms-input-placeholder {
+  color: #C0C4CC
+}
+
+.el-cascader__search-input::-ms-input-placeholder {
+  color: #C0C4CC
+}
+
+.el-cascader__search-input::placeholder {
+  color: #C0C4CC
+}
+
+.el-color-predefine {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px
+}
+
+.el-cascader-node>.el-radio, .el-radio:last-child {
+  margin-right: 0
+}
+
+.el-radio.is-bordered {
+  padding: 12px 20px 0 10px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 40px
+}
+
+.el-radio.is-bordered.is-checked {
+  border-color: #409EFF
+}
+
+.el-radio.is-bordered.is-disabled {
+  cursor: not-allowed;
+  border-color: #EBEEF5
+}
+
+.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
+  background-color: #F5F7FA;
+  border-color: #E4E7ED
+}
+
+.el-radio.is-bordered+.el-radio.is-bordered {
+  margin-left: 10px
+}
+
+.el-radio--medium.is-bordered {
+  padding: 10px 20px 0 10px;
+  border-radius: 4px;
+  height: 36px
+}
+
+.el-radio--mini.is-bordered .el-radio__label, .el-radio--small.is-bordered .el-radio__label {
+  font-size: 12px
+}
+
+.el-radio--medium.is-bordered .el-radio__inner {
+  height: 14px;
+  width: 14px
+}
+
+.el-radio--small.is-bordered {
+  padding: 8px 15px 0 10px;
+  border-radius: 3px;
+  height: 32px
+}
+
+.el-radio--small.is-bordered .el-radio__inner {
+  height: 12px;
+  width: 12px
+}
+
+.el-radio--mini.is-bordered {
+  padding: 6px 15px 0 10px;
+  border-radius: 3px;
+  height: 28px
+}
+
+.el-radio--mini.is-bordered .el-radio__inner {
+  height: 12px;
+  width: 12px
+}
+
+.el-radio__input {
+  cursor: pointer;
+  vertical-align: middle
+}
+
+.el-radio__input.is-disabled .el-radio__inner {
+  cursor: not-allowed
+}
+
+.el-radio__input.is-disabled .el-radio__inner::after {
+  cursor: not-allowed;
+  background-color: #F5F7FA
+}
+
+.el-radio__input.is-disabled .el-radio__inner+.el-radio__label {
+  cursor: not-allowed
+}
+
+.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+  background-color: #C0C4CC
+}
+
+.el-radio__input.is-disabled+span.el-radio__label {
+  color: #C0C4CC;
+  cursor: not-allowed
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #409EFF;
+  background: #409EFF
+}
+
+.el-radio__input.is-checked .el-radio__inner::after {
+  -webkit-transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1)
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: #409EFF
+}
+
+.el-radio__input.is-focus .el-radio__inner {
+  border-color: #409EFF
+}
+
+.el-radio__inner {
+  border: 1px solid #DCDFE6;
+  border-radius: 100%;
+  width: 14px;
+  height: 14px;
+  background-color: #FFF;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.el-radio__inner:hover {
+  border-color: #409EFF
+}
+
+.el-radio__inner::after {
+  width: 4px;
+  height: 4px;
+  border-radius: 100%;
+  background-color: #FFF;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform .15s ease-in;
+  transition: -webkit-transform .15s ease-in;
+  transition: transform .15s ease-in;
+  transition: transform .15s ease-in, -webkit-transform .15s ease-in
+}
+
+.el-radio__original {
+  opacity: 0;
+  outline: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0
+}
+
+.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+  -webkit-box-shadow: 0 0 2px 2px #409EFF;
+  box-shadow: 0 0 2px 2px #409EFF
+}
+
+.el-radio__label {
+  font-size: 14px;
+  padding-left: 10px
+}
+
+.el-scrollbar {
+  overflow: hidden;
+  position: relative
+}
+
+.el-scrollbar:active>.el-scrollbar__bar, .el-scrollbar:focus>.el-scrollbar__bar, .el-scrollbar:hover>.el-scrollbar__bar {
+  opacity: 1;
+  -webkit-transition: opacity 340ms ease-out;
+  transition: opacity 340ms ease-out
+}
+
+.el-scrollbar__wrap {
+  overflow: scroll;
+  height: 100%
+}
+
+.el-scrollbar__wrap--hidden-default {
+  scrollbar-width: none
+}
+
+.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+  width: 0;
+  height: 0
+}
+
+.el-scrollbar__thumb {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: rgba(144, 147, 153, .3);
+  -webkit-transition: .3s background-color;
+  transition: .3s background-color
+}
+
+.el-scrollbar__thumb:hover {
+  background-color: rgba(144, 147, 153, .5)
+}
+
+.el-scrollbar__bar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 4px;
+  opacity: 0;
+  -webkit-transition: opacity 120ms ease-out;
+  transition: opacity 120ms ease-out
+}
+
+.el-scrollbar__bar.is-vertical {
+  width: 6px;
+  top: 2px
+}
+
+.el-scrollbar__bar.is-vertical>div {
+  width: 100%
+}
+
+.el-scrollbar__bar.is-horizontal {
+  height: 6px;
+  left: 2px
+}
+
+.el-scrollbar__bar.is-horizontal>div {
+  height: 100%
+}
+
+.el-cascader-panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  border-radius: 4px;
+  font-size: 14px
+}
+
+.el-cascader-panel.is-bordered {
+  border: 1px solid #E4E7ED;
+  border-radius: 4px
+}
+
+.el-cascader-menu {
+  min-width: 180px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  border-right: solid 1px #E4E7ED
+}
+
+.el-cascader-menu:last-child {
+  border-right: none
+}
+
+.el-cascader-menu:last-child .el-cascader-node {
+  padding-right: 20px
+}
+
+.el-cascader-menu__wrap {
+  height: 204px
+}
+
+.el-cascader-menu__list {
+  position: relative;
+  min-height: 100%;
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.el-avatar, .el-drawer {
+  -webkit-box-sizing: border-box;
+  overflow: hidden
+}
+
+.el-cascader-menu__hover-zone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none
+}
+
+.el-cascader-menu__empty-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #C0C4CC
+}
+
+.el-cascader-node {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: 0
+}
+
+.el-cascader-node.is-selectable.in-active-path {
+  color: #606266
+}
+
+.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
+  color: #409EFF;
+  font-weight: 700
+}
+
+.el-cascader-node:not(.is-disabled) {
+  cursor: pointer
+}
+
+.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
+  background: #F5F7FA
+}
+
+.el-cascader-node.is-disabled {
+  color: #C0C4CC;
+  cursor: not-allowed
+}
+
+.el-cascader-node__prefix {
+  position: absolute;
+  left: 10px
+}
+
+.el-cascader-node__postfix {
+  position: absolute;
+  right: 10px
+}
+
+.el-cascader-node__label {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 0 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.el-cascader-node>.el-radio .el-radio__label {
+  padding-left: 0
+}
+
+.el-avatar {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  color: #fff;
+  background: #C0C4CC;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c11d6d6b..0e0008e8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import '@/assets/scss/aui.scss'
 import http from '@/utils/request'
 import { hasPermission } from '@/utils'
 import cloneDeep from 'lodash/cloneDeep'
+import '@/element-ui/theme/cascader-new.css'
 
 Vue.config.productionTip = false
 
diff --git a/src/views/modules/events/issue-change-list.vue b/src/views/modules/events/issue-change-list.vue
index ce408523..34ea04d8 100644
--- a/src/views/modules/events/issue-change-list.vue
+++ b/src/views/modules/events/issue-change-list.vue
@@ -156,14 +156,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/issue-close-list.vue b/src/views/modules/events/issue-close-list.vue
index 76839320..a85c315f 100644
--- a/src/views/modules/events/issue-close-list.vue
+++ b/src/views/modules/events/issue-close-list.vue
@@ -157,14 +157,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/issue-process-list.vue b/src/views/modules/events/issue-process-list.vue
index 4057b941..20b76fbc 100644
--- a/src/views/modules/events/issue-process-list.vue
+++ b/src/views/modules/events/issue-process-list.vue
@@ -167,14 +167,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/issue-reject-list.vue b/src/views/modules/events/issue-reject-list.vue
index dcac14c8..7657bd6a 100644
--- a/src/views/modules/events/issue-reject-list.vue
+++ b/src/views/modules/events/issue-reject-list.vue
@@ -136,14 +136,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/issue-review-list.vue b/src/views/modules/events/issue-review-list.vue
index 757d0c7b..8746146a 100644
--- a/src/views/modules/events/issue-review-list.vue
+++ b/src/views/modules/events/issue-review-list.vue
@@ -136,14 +136,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/item-close-list.vue b/src/views/modules/events/item-close-list.vue
index 45f29869..e3561751 100644
--- a/src/views/modules/events/item-close-list.vue
+++ b/src/views/modules/events/item-close-list.vue
@@ -157,14 +157,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/events/item-deal-list.vue b/src/views/modules/events/item-deal-list.vue
index a8d8aa93..bd8c4a97 100644
--- a/src/views/modules/events/item-deal-list.vue
+++ b/src/views/modules/events/item-deal-list.vue
@@ -158,12 +158,20 @@ export default {
   },
   watch: {
     'ids': function (val) {
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
       if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
       if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
       if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
diff --git a/src/views/modules/events/item-end-list.vue b/src/views/modules/events/item-end-list.vue
index 27f6f618..b3598958 100644
--- a/src/views/modules/events/item-end-list.vue
+++ b/src/views/modules/events/item-end-list.vue
@@ -158,14 +158,22 @@ export default {
   },
   watch: {
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/group/leaderboard.vue b/src/views/modules/group/leaderboard.vue
index a285f29b..8ae31ce5 100644
--- a/src/views/modules/group/leaderboard.vue
+++ b/src/views/modules/group/leaderboard.vue
@@ -125,14 +125,22 @@ export default {
       this.getDataList()
     },
     'ids': function (val) {
-      if (val.length === 1){
+      if (val.length === 0) {
+        this.dataForm.streetId = ''
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
+      }
+      if (val.length === 1) {
         this.dataForm.streetId = this.ids[0]
+        this.dataForm.communityId = ''
+        this.dataForm.gridId = ''
       }
-      if (val.length === 2){
+      if (val.length === 2) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
+        this.dataForm.gridId = ''
       }
-      if (val.length === 3){
+      if (val.length === 3) {
         this.dataForm.streetId = this.ids[0]
         this.dataForm.communityId = this.ids[1]
         this.dataForm.gridId = this.ids[2]
diff --git a/src/views/modules/kpi/kpimanualscore-add-or-update.vue b/src/views/modules/kpi/kpimanualscore-add-or-update.vue
new file mode 100644
index 00000000..f154c870
--- /dev/null
+++ b/src/views/modules/kpi/kpimanualscore-add-or-update.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '110px'">
+          <el-form-item label="考核名称" prop="scoreName">
+          <el-input v-model="dataForm.scoreName" placeholder="打分项名称"></el-input>
+      </el-form-item>
+          <el-form-item label="考核部门类别" prop="deptTypeKey">
+          <el-select v-model="dataForm.deptTypeKey" placeholder="考核部门类别">
+          <el-option
+            v-for="item in deptTypeKeyList"
+            :key="item.dictValue"
+            :label="item.dictName"
+            :value="item.dictValue">
+          </el-option>
+        </el-select>
+      </el-form-item>
+        <el-form-item label="考核周期" prop="scoreCycle">
+          <el-select v-model="dataForm.scoreCycle" placeholder="考核周期">
+            <el-option
+              v-for="item in scoreCycleList"
+              :key="item.dictValue"
+              :label="item.dictName"
+              :value="item.dictValue">
+            </el-option>
+        </el-select>
+      </el-form-item>
+          <el-form-item label="满分" prop="fullMarks">
+          <el-input v-model="dataForm.fullMarks" placeholder="满分"></el-input>
+      </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      scoreCycleList: [],
+      deptTypeKeyList: [],
+      dataForm: {
+        id: '',
+        scoreName: '',
+        deptTypeKey: '',
+        scoreCycle: '',
+        fullMarks: ''
+      }
+    }
+  },
+  created () {
+    this.getScoreCycleList()
+    this.getDeptTypeKeyList()
+  },
+  computed: {
+    dataRule () {
+      return {
+        scoreName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        deptTypeKey: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        scoreCycle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        fullMarks: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/kpi/kpimanualscore/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/kpi/kpimanualscore/', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 获取绩效考核周期下拉框集合
+    getScoreCycleList () {
+      this.$http
+        .get(`/sys/dict/listSimple/kpi_cycle`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.scoreCycleList = res.data
+        })
+        .catch(() => {})
+    },
+    // 获取考核部门类别下拉框
+    getDeptTypeKeyList () {
+      this.$http.get(`/sys/dict/listSimple/org_type`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.deptTypeKeyList = res.data
+      }).catch(() => { })
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/kpi/kpimanualscore.vue b/src/views/modules/kpi/kpimanualscore.vue
new file mode 100644
index 00000000..a1a46d49
--- /dev/null
+++ b/src/views/modules/kpi/kpimanualscore.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-kpi__kpimanualscore}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item label="考核名称">
+          <el-input v-model="dataForm.scoreName" placeholder="考核名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('kpi:kpimanualscore:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('kpi:kpimanualscore:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column type="index" width="50" label="序号"></el-table-column>
+        <el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column prop="scoreName" label="考核名称" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="deptTypeKey" label="考核部门类别" header-align="center" align="center" :formatter="showDeptTypeKeyFormatter"></el-table-column>
+        <el-table-column prop="scoreCycle" label="考核周期" header-align="center" align="center" :formatter="showScoreCycleFormatter"></el-table-column>
+        <el-table-column prop="fullMarks" label="满分" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column prop="delFlag" label="删除标记" header-align="center" align="center" v-if="false"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('kpi:kpimanualscore:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('kpi:kpimanualscore:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './kpimanualscore-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/kpi/kpimanualscore/page',
+        getDataListIsPage: true,
+        deleteURL: '/kpi/kpimanualscore',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        scoreName: ''
+      },
+      scoreCycleList: [],
+      deptTypeKeyList: []
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  created () {
+    this.getScoreCycleList()
+    this.getDeptTypeKeyList()
+  },
+  methods: {
+    // 获取绩效考核周期下拉框集合
+    getScoreCycleList () {
+      this.$http
+        .get(`/sys/dict/listSimple/kpi_cycle`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.scoreCycleList = res.data
+        })
+        .catch(() => {})
+    },
+    // 转换考核周期
+    showScoreCycleFormatter: function (row, column) {
+      if (row.scoreCycle) {
+        let dict = this.scoreCycleList.filter(item => item.dictValue === row.scoreCycle)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    },
+    // 获取考核部门类别下拉框
+    getDeptTypeKeyList () {
+      this.$http.get(`/sys/dict/listSimple/org_type`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.deptTypeKeyList = res.data
+      }).catch(() => { })
+    },
+    // 转换考核部门显示名称
+    showDeptTypeKeyFormatter: function (row, column) {
+      if (row.deptTypeKey) {
+        let dict = this.deptTypeKeyList.filter(item => item.dictValue === row.deptTypeKey)[0]
+        if (dict) {
+          return dict.dictName
+        }
+      }
+      return ''
+    }
+
+  }
+}
+</script>
diff --git a/src/views/modules/kpi/kpirule-add-or-update.vue b/src/views/modules/kpi/kpirule-add-or-update.vue
index 29966a08..9be01ab0 100644
--- a/src/views/modules/kpi/kpirule-add-or-update.vue
+++ b/src/views/modules/kpi/kpirule-add-or-update.vue
@@ -26,17 +26,6 @@
           clearable
         ></el-input>
       </el-form-item>
-      <el-form-item label="规则生成方式" prop="ruleMode">
-        <el-select v-model="dataForm.ruleMode" placeholder="规则生成方式" @change="handleRuleMode(dataForm.ruleMode)">
-          <el-option
-            v-for="item in ruleModeList"
-            :key="item.dictValue"
-            :label="item.dictName"
-            :value="item.dictValue"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
       <el-form-item label="考核周期" prop="kpiCycle">
         <el-select v-model="dataForm.kpiCycle" placeholder="考核周期">
           <el-option
@@ -49,7 +38,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="考核部门类别" prop="deptTypeKey">
-        <el-select v-model="dataForm.deptTypeKey" placeholder="考核周期">
+        <el-select v-model="dataForm.deptTypeKey" placeholder="考核部门类别">
           <el-option
             v-for="item in deptTypeKeyList"
             :key="item.dictValue"
@@ -59,7 +48,7 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="引用" prop="referenceId" v-if="dataForm.ruleMode === '0'">
+      <el-form-item label="引用" prop="referenceId">
         <el-select v-model="dataForm.referenceId" clearable placeholder="引用" @change="handlereference(dataForm.referenceId)">
           <el-option
             v-for="item in kpiFormulaList"
@@ -70,7 +59,7 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="入参" prop="metaDataCode" v-if="dataForm.ruleMode === '0'">
+      <el-form-item label="入参" prop="metaDataCode">
         <el-select
           v-model="dataForm.metaDataCode"
           filterable
@@ -88,7 +77,7 @@
         &nbsp; &nbsp;
         <el-button type="primary" @click="addRuleParam(dataForm.metaDataCode)">添加</el-button>
       </el-form-item>
-      <el-table :data="dataForm.ruleParamList" v-if="dataForm.ruleMode === '0' && dataForm.ruleParamList &&dataForm.ruleParamList.length>0" border>
+      <el-table :data="dataForm.ruleParamList" v-if="dataForm.ruleParamList &&dataForm.ruleParamList.length>0" border>
         <el-table-column type="index" width="50" label="序号"></el-table-column>
         <el-table-column prop="id" label="参数表主键" v-if="false"></el-table-column>
         <el-table-column prop="metaDataCode" label="参数名称" :formatter="showMetaDataCodeFormatter"> </el-table-column>
@@ -131,12 +120,12 @@ export default {
         id: '',
         ruleName: '',
         ruleCode: '',
-        ruleMode: '',
-        referenceId: '',
-        kpiCycle: '',
-        deptTypeKey: '',
-        metaDataCode: '',
-        ruleParamList: []
+        ruleMode: '0', // 规则生成方式(0-元公式，1-手工打分，2-投票)
+        referenceId: '', // 引用公式id
+        kpiCycle: '', // 考核周期
+        deptTypeKey: '', // 考核部门类别
+        metaDataCode: '', // 入参
+        ruleParamList: []// 入参列表
       },
       deptTypeKeyList: []
     }
@@ -158,16 +147,9 @@ export default {
             trigger: 'blur'
           }
         ],
-        ruleMode: [
-          {
-            required: true,
-            message: this.$t('validate.required'),
-            trigger: 'blur'
-          }
-        ],
         referenceId: [
           {
-            required: false,
+            required: true,
             message: this.$t('validate.required'),
             trigger: 'blur'
           }
@@ -197,7 +179,6 @@ export default {
     }
   },
   created () {
-    this.getRuleModeList()
     this.getKpiCycleList()
     this.getKpiFormulaList()
     this.getMetaDataCodeList()
@@ -262,18 +243,6 @@ export default {
       1000,
       { leading: true, trailing: false }
     ),
-    // 获取绩效考核规则生成方式
-    getRuleModeList () {
-      this.$http
-        .get(`/sys/dict/listSimple/rule_mode`)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          this.ruleModeList = res.data
-        })
-        .catch(() => {})
-    },
     // 获取绩效考核周期下拉框集合
     getKpiCycleList () {
       this.$http
@@ -339,15 +308,6 @@ export default {
       this.dataForm.ruleParamList.push(temp)
       this.dataForm.metaDataCode = ''
     },
-    // 规则生成方式(0-元公式，1-手工打分，2-投票)
-    handleRuleMode (ruleMode) {
-      // console.log('规则生成方式=' + ruleMode)
-      if (ruleMode === '0') {
-        this.dataForm.metaDataCode = '' // 之前选中参数清空
-        this.dataForm.ruleParamList = [] // 参数列表清空
-        this.dataForm.referenceId = ''// 引用公式id清空
-      }
-    },
     // 引用公式id
     handlereference (referenceId) {
       // console.log('当前选中的引用公式id=' + referenceId)
diff --git a/src/views/modules/kpi/kpirule.vue b/src/views/modules/kpi/kpirule.vue
index 0d0a3d66..741fcf8f 100644
--- a/src/views/modules/kpi/kpirule.vue
+++ b/src/views/modules/kpi/kpirule.vue
@@ -9,7 +9,10 @@
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('kpi:kpirule:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button v-if="$hasPermission('kpi:kpirule:save')" type="primary" @click="addOrUpdateHandle('0')">新增公式规则</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('kpi:kpirule:save')" type="primary" @click="addOrUpdateHandle('1')">新增手动打分规则</el-button>
         </el-form-item>
         <el-form-item>
           <el-button v-if="$hasPermission('kpi:kpirule:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
@@ -29,7 +32,7 @@
         <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('kpi:kpirule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('kpi:kpirule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleMode,scope.row.id)">{{ $t('update') }}</el-button>
             <el-button v-if="$hasPermission('kpi:kpirule:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
@@ -43,8 +46,10 @@
         @size-change="pageSizeChangeHandle"
         @current-change="pageCurrentChangeHandle">
       </el-pagination>
-      <!-- 弹窗, 新增 / 修改 -->
+      <!-- 弹窗, 新增 / 修改公式规则 -->
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <!-- 弹窗, 新增 / 修改手动打分规则 -->
+      <manual-score-add-or-update v-if="manualScoreAddOrUpdateVisible" ref="manualScoreAddOrUpdate" @refreshDataList="getDataList"></manual-score-add-or-update>
     </div>
   </el-card>
 </template>
@@ -52,6 +57,7 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './kpirule-add-or-update'
+import ManualScoreAddOrUpdate from './manual-score-add-or-update'
 export default {
   mixins: [mixinViewModule],
   data () {
@@ -65,13 +71,15 @@ export default {
       dataForm: {
         ruleName: ''
       },
+      manualScoreAddOrUpdateVisible: false, // 手动打分新增／更新，弹窗visible状态
       ruleModeList: [],
       kpiCycleList: [],
       deptTypeKeyList: []
     }
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
+    ManualScoreAddOrUpdate
   },
   created () {
     this.getRuleModeList()
@@ -79,6 +87,24 @@ export default {
     this.getDeptTypeKeyList()
   },
   methods: {
+    // 新增 修改
+    addOrUpdateHandle (ruleMode, id) {
+      if (ruleMode === '0') {
+        // console.log(+'ruleMode=' + ruleMode + '元公式;id=' + id)
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.dataForm.id = id
+          this.$refs.addOrUpdate.init()
+        })
+      } else if (ruleMode === '1') {
+        // console.log('ruleMode=' + ruleMode + '手动打分;id=' + id)
+        this.manualScoreAddOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.manualScoreAddOrUpdate.dataForm.id = id
+          this.$refs.manualScoreAddOrUpdate.init()
+        })
+      }
+    },
     // 获取绩效考核规则生成方式
     getRuleModeList () {
       this.$http.get(`/sys/dict/listSimple/rule_mode`).then(({ data: res }) => {
diff --git a/src/views/modules/kpi/manual-score-add-or-update.vue b/src/views/modules/kpi/manual-score-add-or-update.vue
new file mode 100644
index 00000000..99ca5706
--- /dev/null
+++ b/src/views/modules/kpi/manual-score-add-or-update.vue
@@ -0,0 +1,187 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
+    >
+      <el-form-item label="考核规则名称" prop="ruleName">
+        <el-input
+          v-model="dataForm.ruleName"
+          placeholder="考核规则名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="考核规则编码" prop="ruleCode">
+        <el-input
+          v-model="dataForm.ruleCode"
+          placeholder="考核规则编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="关联的手动打分" prop="referenceId">
+        <el-select v-model="dataForm.referenceId" clearable placeholder="关联的手动打分" @change="handlereference(dataForm.referenceId)">
+          <el-option
+            v-for="item in kpiManualScoreList"
+            :key="item.id"
+            :label="item.scoreName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      kpiFormulaList: [],
+      metaDataCodeList: [],
+      paramAmount: 100, // 公式参数数量
+      kpiManualScoreList: [], // 手动打分下拉框
+      dataForm: {
+        id: '',
+        ruleName: '',
+        ruleCode: '',
+        ruleMode: '1', // 规则生成方式(0-元公式，1-手工打分，2-投票)
+        referenceId: '', // 关联的手动打分项
+        kpiCycle: '', // 考核周期来源于选择的手动打分项
+        deptTypeKey: '' // 考核部门类别来源于选择的手动打分项
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        ruleName: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        ruleCode: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        referenceId: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created () {
+    this.getKpiManualScoreList()
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/kpi/kpirule/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
+        })
+        .catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs['dataForm'].validate(valid => {
+          if (!valid) {
+            return false
+          }
+          this.$http[!this.dataForm.id ? 'post' : 'put'](
+            '/kpi/kpirule/saveOrUpdate/',
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+            .catch(() => {})
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 查询手动打分下拉框
+    getKpiManualScoreList () {
+      this.$http
+        .get(`/kpi/kpimanualscore/getKpiManualScoreList`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.kpiManualScoreList = res.data
+        })
+        .catch(() => {})
+    },
+    // 关联的手动打分改变
+    handlereference (referenceId) {
+      console.log('当前选中的手动打分项id=' + referenceId)
+      if (referenceId) {
+        let kpiManualScoreArray = this.kpiManualScoreList
+        for (var i = 0; i < kpiManualScoreArray.length; i++) {
+          if (kpiManualScoreArray[i].id === referenceId) {
+            this.dataForm.kpiCycle = kpiManualScoreArray[i].scoreCycle
+            this.dataForm.deptTypeKey = kpiManualScoreArray[i].deptTypeKey
+          }
+        }
+      } else {
+        this.kpiCycle = ''
+        this.deptTypeKey = ''
+      }
+    }
+  }
+}
+</script>