指标库：

添加筛选弹窗，移动弹窗
2021-01-15 18:12:41 +08:00 · 2021-01-15 18:12:41 +08:00 · aba6f3ec29
commit aba6f3ec29
parent b99c67a63b
9 changed files with 413 additions and 82 deletions
--- a/src/components/PopupRadio/index.vue
+++ b/src/components/PopupRadio/index.vue
@ -0,0 +1,83 @@
+<template>
+  <popup-right
+    v-if="isShowPopupRadio"
+    @cancel="hundlePopupHide"
+    @submit="handleSubmitPopup"
+    :title="popupRightTitle"
+    :subumitText='subumitText'
+    class="popup commonFont"
+  >
+    <div slot="content">
+      <div
+        v-for="(item, index) in tableData"
+        :key="index"
+        class="row"
+        @click="radioSelectedId = item.id"
+      >
+        <svg-icon
+          :icon-class="radioSelectedId ===item.id?'radioselected':'radiodef'"
+          class-name='icon'
+        />{{item.name}}
+      </div>
+    </div>
+  </popup-right>
+</template>
+<script>
+import PopupRight from '@/components/PopupRight'
+export default {
+  methods: {
+    hundlePopupHide () {
+      this.$emit('update:isShowPopupRadio', false)
+    },
+    handleSubmitPopup () {
+      this.$emit('update:isShowPopupRadio', false)
+    }
+  },
+  components: {
+    PopupRight
+  },
+  props: {
+    isShowPopupRadio: {
+      type: Boolean,
+      default: false
+    },
+    popupRightTitle: {
+      default: '移动到',
+      type: String
+    },
+    subumitText: {
+      default: '确定',
+      type: String
+    },
+    dataList: {
+      type: Array,
+      default: () => {
+        return [{ id: 1, name: '全部指标' }, { id: 2, name: '全部指标' }]
+      }
+    }
+  },
+  data () {
+    return {
+      radioSelectedId: '',
+      tableData: this.dataList
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.icon {
+  width: 20px !important;
+  height: 20px !important;
+  margin-right: 10px;
+}
+.row {
+  display: flex;
+  border-bottom: 0.5px solid @borderColor;
+  align-items: center;
+  padding: 10px 10px;
+  height: 50px;
+}
+.row:hover {
+  background-color: @mainBgColor;
+}
+</style>
--- a/src/components/TargetFiltrate/index.vue
+++ b/src/components/TargetFiltrate/index.vue
@ -0,0 +1,160 @@
+<template>
+  <popup-right
+    v-if="isShowTargetFiltrate"
+    @cancel="hundlePopupHide"
+    @submit="handleSubmitPopup"
+    :title="popupRightTitle"
+    :subumitText='subumitText'
+    class="popup commonFont"
+  >
+    <div slot="content">
+      <div
+        class="area"
+        v-for="area in listData"
+        :key="area.id"
+      >
+        <div class="area-title">
+          <i></i>{{area.title}}
+        </div>
+        <div class="area-content">
+          <div
+            :class="area.selectedId === item.id? area.btnSelected:area.btnDef"
+            v-for="item in area.list"
+            :key="item.id"
+            @click="area.selectedId = item.id"
+          >
+            <span>爱福家拉法基拉法基酸辣粉司法局阿里</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </popup-right>
+</template>
+<script>
+import PopupRight from '@/components/PopupRight'
+
+export default {
+  methods: {
+    hundlePopupHide () {
+      console.log('隐藏---------')
+      this.$emit('update:isShowTargetFiltrate', false)
+    },
+    handleSubmitPopup () {
+      let idList = this.listData.map(item => {
+        let key = item.id
+        let value = item.selectedId
+        let dic = {}
+        dic[key] = value
+        return dic
+      })
+      console.log(idList)
+      this.$emit('update:isShowTargetFiltrate', false)
+    }
+  },
+  data () {
+    return {
+      subumitText: '确定',
+      itemStyle: 'area-content-item btn-def',
+      itemSelectedStyle: 'area-content-item btn-def btn-def-selected',
+      itemBlueStyle: 'area-content-item btn-blue-def',
+      itemSelectedBlueStyle: 'area-content-item btn-blue-def btn-blue-selected',
+      radioClasse: 1,
+      radioTage: 1,
+      listData: [
+        {
+          title: '类型',
+          id: 'area1',
+          selectedId: 1,
+          btnDef: 'area-content-item btn-def',
+          btnSelected: 'area-content-item btn-def btn-def-selected',
+          list: [{ id: 1, title: '全部' }, { id: 2, title: '量化指标' }, { id: 3, title: '行为价值观指标' }, { id: 4, title: '加分项' }, { id: 5, title: '扣分项' }]
+        },
+        {
+          title: '标签',
+          id: 'area2',
+          selectedId: 1,
+          btnDef: 'area-content-item btn-blue-def',
+          btnSelected: 'area-content-item btn-blue-def btn-blue-selected',
+          list: [{ id: 1, title: '全部' }, { id: 2, title: '量化指标' }, { id: 3, title: '行为价值观指标' }, { id: 4, title: '加分项' }, { id: 5, title: '扣分项' }]
+        }
+      ],
+      areaSelectedDic: {}
+
+    }
+  },
+  props: {
+    isShowTargetFiltrate: {
+      type: Boolean,
+      default: false
+    },
+    popupRightTitle: {
+      default: '筛选',
+      type: String
+    }
+  },
+  components: {
+    PopupRight
+  }
+}
+</script>
+<style lang="less" scoped>
+.popup {
+  width: 440px;
+  .area {
+    &-title {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      line-height: 40px;
+      i {
+        width: 10px;
+        height: 10px;
+        background-color: @mianBlue;
+        border-radius: 5px;
+        margin-right: 5px;
+      }
+    }
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: 0px 15px;
+      width: 438px;
+      &-item {
+        min-width: 48%;
+        max-width: 48%;
+        height: 50px;
+        border-radius: 8px;
+        line-height: 50px;
+        text-align: center;
+        margin-bottom: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0px 10px;
+      }
+      .btn-def,
+      .btn-blue-def {
+        background-color: #f2f2f2;
+        color: #8e8e8e;
+      }
+      .btn-def:hover {
+        color: #ff904b;
+        cursor: pointer;
+      }
+      .btn-def-selected {
+        background-color: #ffe7d8;
+        color: #ff904b;
+      }
+      .btn-blue-def:hover {
+        color: @mianBlue;
+        cursor: pointer;
+      }
+      .btn-blue-selected {
+        background-color: #e1f0fb;
+        color: @mianBlue;
+      }
+    }
+  }
+}
+</style>
--- a/src/icons/svg/radiodef.svg
+++ b/src/icons/svg/radiodef.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>默认</title>
+    <g id="默认" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 Z M10,3 C6.13400675,3 3,6.13400675 3,10 C3,13.8659932 6.13400675,17 10,17 C13.8659932,17 17,13.8659932 17,10 C17,6.13400675 13.8659932,3 10,3 Z" id="Rectangle-73" fill="#CCCCCC" fill-rule="nonzero"></path>
+    </g>
+</svg>
--- a/src/icons/svg/radioselected.svg
+++ b/src/icons/svg/radioselected.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>选中</title>
+    <g id="选中" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 Z M13.9037489,7.29488927 C13.7072453,7.09838576 13.3918585,7.10028032 13.1961653,7.29597351 L13.1961653,7.29597351 L9.47367679,11.0183555 L7.18967233,8.73389877 C6.99459834,8.53882477 6.67803784,8.53857477 6.48294345,8.73366916 L6.48294345,8.73366916 L5.99045948,9.22615313 C5.79395597,9.42265664 5.7954679,9.73766081 5.99068909,9.93288201 L5.99068909,9.93288201 L8.97308843,12.9152592 L8.97308843,12.9152592 L8.97594092,12.9180455 L9.12070658,13.0628995 C9.31721009,13.259403 9.63259689,13.2575084 9.82829009,13.0618152 L9.82829009,13.0618152 L14.3951486,8.49495675 C14.5972856,8.29281971 14.5913272,7.98246763 14.3962328,7.78737324 L14.3962328,7.78737324 Z" id="形状结合" fill="#3995fb"></path>
+    </g>
+</svg>
--- a/src/style/common.less
+++ b/src/style/common.less
@ -1,6 +1,8 @@
@borderColor: #ebebeb;
@fontBlue: #3ba1ff;
@headerHeight: 60px;
+@mianBlue: #3995fb;
+@mainBgColor: #f2f2f2;

 .boderAndRadius {
  border: 1px solid @borderColor;
@ -12,21 +14,29 @@
  font-size: 14px;
  color: #52575b;
 }
-.add{
+
+.add {
  cursor: pointer;
 }
-.pre{
+
+.pre {
  line-height: 20px;
-  pre{
-		overflow:hidden;
+
+  pre {
+    overflow: hidden;
    line-height: 20px;
    // white-space:pre-line;
    // word-wrap: break-word;
-    white-space: pre-line; /* css-3 */
-    white-space: -moz-pre-line; /* Mozilla, since 1999 */
-    white-space: -pre-line; /* Opera 4-6 */
-    white-space: -o-pre-line; /* Opera 7 */
-    word-wrap: break-word; /* Internet Explorer 5.5+ */
+    white-space: pre-line;
+    /* css-3 */
+    white-space: -moz-pre-line;
+    /* Mozilla, since 1999 */
+    white-space: -pre-line;
+    /* Opera 4-6 */
+    white-space: -o-pre-line;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
    word-break: break-all;
  }
 }
@ -73,25 +83,22 @@


 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-::-webkit-scrollbar
-{
-	width: 2px;
-	height: 8px;
-	background: #409EFF;
+::-webkit-scrollbar {
+  width: 2px;
+  height: 8px;
+  background: #409EFF;
 }

 /*定义滚动条轨道 内阴影+圆角*/
-::-webkit-scrollbar-track
-{
-	-webkit-box-shadow: inset 0 0 2px rgba(231, 231, 231, 0.3);
-	border-radius: 1px;
-	background-color: #F5F5F5;
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 2px rgba(231, 231, 231, 0.3);
+  border-radius: 1px;
+  background-color: #F5F5F5;
 }

 /*定义滑块 内阴影+圆角*/
-::-webkit-scrollbar-thumb
-{
-  border-radius:4px;
-	-webkit-box-shadow: inset 0 0 2px #409EFF;
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 0 2px #409EFF;
  background: #409EFF;
 }
--- a/src/utils/elementConfig.js
+++ b/src/utils/elementConfig.js
@ -41,7 +41,8 @@ import {
  Drawer,
  Slider,
  ButtonGroup,
-  Notification
+  Notification,
+  RadioButton
 } from 'element-ui'
 Vue.prototype.$notify = Notification
 Vue.prototype.$loading = Loading
@ -80,6 +81,7 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(Checkbox)
 Vue.use(Radio)
+Vue.use(RadioButton)
 Vue.use(Dropdown)
 Vue.use(DropdownMenu)
 Vue.use(DropdownItem)
--- a/src/views/kpi/set/index.vue
+++ b/src/views/kpi/set/index.vue
@ -58,9 +58,9 @@ export default {
      this.activeIndex = ''
    }
    if (this.auth.evaluationSet && this.auth.roleSet) {
-      this.activeIndex = this.$route.query.activeIndex || '0'
-    } else {
      this.activeIndex = this.$route.query.activeIndex
+    } else {
+      this.activeIndex = this.$route.query.activeIndex || '0'
    }
  },
  beforeMount () { },
--- a/src/views/kpi/set/target/index.vue
+++ b/src/views/kpi/set/target/index.vue
@ -28,7 +28,7 @@
              size="small"
            >新增指标</el-button>
            <el-button
-              @click="handleMoving"
+              @click="dialogVisibleMoving = true"
              :disabled="!selectedRowList.length"
              size="small"
            >移动到</el-button>
@ -93,6 +93,7 @@
            :data="tableData"
            height="400px"
            :header-cell-style="{background:'#f5f4f5'}"
+            @selection-change="handleSelectionChange"
          >
            <div
              slot="empty"
@ -102,23 +103,32 @@
            <el-table-column
              label="名称"
              sortable
+              prop="name"
            ></el-table-column>
            <el-table-column
              label="指标类型"
              sortable
+              prop="type"
            ></el-table-column>
            <el-table-column label="考核标准"></el-table-column>
            <el-table-column
              label="权重"
              sortable
+              prop="quanzhong"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
+
+    <target-filtrate :isShowTargetFiltrate.sync="dialogVisibleFilter" />
+    <popup-radio :isShowPopupRadio="dialogVisibleMoving" />
  </div>
 </template>
 <script>
+import TargetFiltrate from '@/components/TargetFiltrate'
+import PopupRadio from '@/components/PopupRadio'
+
 export default {
  methods: {
    handleHeaderSearch (val) {
@ -129,10 +139,6 @@ export default {
      this.$router.push({ name: 'workbench-target-add' })
      console.log('新增指标')
    },
-    handleMoving () {
-      // 移动
-      console.log('指标移动')
-    },
    handleRemove () {
      console.log('删除指标')
      this.$confirm('确认删除选中指标', '提示').then(() => {
@ -165,14 +171,22 @@ export default {
        })
        console.log('移除指标')
      }
+    },
+    handleSelectionChange (val) {
+      this.selectedRowList = val
    }
  },
+  components: {
+    TargetFiltrate,
+    PopupRadio
+  },
  data () {
    return {
      headerSearchValue: '',
      dialogVisibleFilter: false,
+      dialogVisibleMoving: false,
      tableMenuData: [{ name: '收代理费建安费啦k咳咳咳书法家阿李师傅', id: '1' }],
-      tableData: [],
+      tableData: [{ name: '收快递费可是', type: '水电费', quanzhong: '40%' }, { name: '收快递费可是', type: '水电费', quanzhong: '40%' }],
      menuDataClasseHide: false,
      selectedRowList: [],
      selectedMenuRowIndex: -1,
--- a/src/views/kpi/workbench/home/index.vue
+++ b/src/views/kpi/workbench/home/index.vue
@ -1,36 +1,88 @@
 <!--  -->
 <template>
-    <div>
-      <div class="home boderAndRadius" >
-            <div class='home-left'>
-                <div class="home-left-todo " :class="{borderBottom:selectedTableList.length===0}">
-                  <div class="home-left-todo-top">
-                    <div  class="commonFont">待办事项<span style="margin:0 4px" class="blueColor">{{pageProcessedInfo.totalCount || 0}}</span>条</div>
-                    <div  class="blueColor noSelect commonFont" style="cursor: pointer;" @click="handleGetMoreToDo('workbench-todo')">查看更多<i class="el-icon-arrow-right"></i></div>
-                  </div>
-                  <div class="home-left-todo-center">
-                    <tableItem v-if="selectedTableList.length!==0" :selectedTableList='selectedTableList' />
-                    <!-- <div style="height:300px">
+  <div>
+    <div class="home boderAndRadius">
+      <div class='home-left'>
+        <div
+          class="home-left-todo "
+          :class="{borderBottom:selectedTableList.length===0}"
+        >
+          <div class="home-left-todo-top">
+            <div class="commonFont">待办事项<span
+                style="margin:0 4px"
+                class="blueColor"
+              >{{pageProcessedInfo.totalCount || 0}}</span>条</div>
+            <div
+              class="blueColor noSelect commonFont"
+              style="cursor: pointer;"
+              @click="handleGetMoreToDo('workbench-todo')"
+            >查看更多<i class="el-icon-arrow-right"></i></div>
+          </div>
+          <div class="home-left-todo-center">
+            <tableItem
+              v-if="selectedTableList.length!==0"
+              :selectedTableList='selectedTableList'
+            />
+            <!-- <div style="height:300px">
                      sassa
                    </div> -->
-                  </div>
-                </div>
-              <div v-if="auth.assessment && auth.indexData && auth.launchEvaluation && auth.evaluationGroupManager" class="home-left-enter">
-                <div class="home-left-enter-title commonFont">快捷入口</div>
-                <div class="home-left-enter-content">
-                  <div class="boderAndRadius commonFont noSelect" v-if="auth.assessment"  @click="handleGetMoreToDo('assessment')"><svg-icon icon-class="kaohe" class-name='icon'/>考核管理</div>
-                  <div class="boderAndRadius commonFont noSelect"  v-if="auth.launchEvaluation" @click="handleGetMoreToDo('initiate')"><svg-icon icon-class="faqi" class-name='icon'/>发起考核</div>
-                  <div class="boderAndRadius commonFont noSelect" v-if="auth.evaluationGroupManager" @click="handleGetMoreToDo('workbench-group')" ><svg-icon icon-class="kaoping" class-name='icon'/>考评组</div>
-                  <div class="boderAndRadius commonFont noSelect"  v-if="auth.indexData" @click="handleGetMoreToDo('workbench-target')"><svg-icon icon-class="zhibiao" class-name='icon'/>指标库</div>
-                </div>
-              </div>
+          </div>
+        </div>
+        <div
+          v-if="auth.assessment && auth.indexData && auth.launchEvaluation && auth.evaluationGroupManager"
+          class="home-left-enter"
+        >
+          <div class="home-left-enter-title commonFont">快捷入口</div>
+          <div class="home-left-enter-content">
+            <div
+              class="boderAndRadius commonFont noSelect"
+              v-if="auth.assessment"
+              @click="handleGetMoreToDo('assessment')"
+            >
+              <svg-icon
+                icon-class="kaohe"
+                class-name='icon'
+              />考核管理
            </div>
-            <!-- <div class="home-right boderAndRadius">
+            <div
+              class="boderAndRadius commonFont noSelect"
+              v-if="auth.launchEvaluation"
+              @click="handleGetMoreToDo('initiate')"
+            >
+              <svg-icon
+                icon-class=""
+                class-name='icon'
+              />发起考核
+            </div>
+            <div
+              class="boderAndRadius commonFont noSelect"
+              v-if="auth.evaluationGroupManager"
+              @click="handleGetMoreToDo('workbench-group')"
+            >
+              <svg-icon
+                icon-class="kaoping"
+                class-name='icon'
+              />考评组
+            </div>
+            <div
+              class="boderAndRadius commonFont noSelect"
+              v-if="auth.indexData"
+              @click="handleGetMoreToDo('workbench-target')"
+            >
+              <svg-icon
+                icon-class="zhibiao"
+                class-name='icon'
+              />指标库
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="home-right boderAndRadius">
              <report />
            </div> -->
-        </div>
-        <performance :isNoRouter='true'/>
    </div>
+    <performance :isNoRouter='true' />
+  </div>
 </template>

 <script>
@ -60,7 +112,7 @@ export default {
    performance
  },
  computed: {},
-  beforeMount () {},
+  beforeMount () { },
  mounted () {
    let obj = getUrlParams()
    if (obj.id) {
@ -109,15 +161,14 @@ export default {

 </script>
 <style lang="less">
-  .icon{
+.icon {
  width: 25px !important;
  height: 25px !important;
  margin-right: 10px;
 }
 </style>
 <style lang='less' scoped>
-
-.home{
+.home {
  background: #fff;
  margin: 0 auto;
  display: flex;
@ -126,42 +177,42 @@ export default {
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
-  &-left{
+  &-left {
    flex: 1;
    overflow: auto;
-    padding: 0 30px 0  0;
-    .borderBottom{
+    padding: 0 30px 0 0;
+    .borderBottom {
      border-bottom: 1px solid @borderColor;
    }
-    &-todo{
+    &-todo {
      width: 100%;

      padding-top: 18px;
-      &-top{
+      &-top {
        display: flex;
        justify-content: space-between;
      }
-      &-center{
+      &-center {
        padding: 10px 0;
        box-sizing: content-box;
        max-height: 200px;
        overflow: auto;
      }
-      .blueColor{
+      .blueColor {
        color: @fontBlue;
      }
    }
-    &-enter{
+    &-enter {
      width: 100%;
      height: 180px;
-      &-title{
+      &-title {
        margin: 22px 0;
      }
-      &-content{
+      &-content {
        display: flex;
        align-items: center;
        // justify-content: space-between;
-        >div{
+        > div {
          margin-right: 20px;
          width: 186px;
          height: 76px;
@ -170,18 +221,18 @@ export default {
          justify-content: center;
          cursor: pointer;
        }
-        >div:hover{
+        > div:hover {
          box-shadow: 2px 2px 5px #e6e6e6;
        }
      }
    }
  }
-  &-right{
+  &-right {
    box-sizing: border-box;
    width: 520px;
    min-height: 100px;
    padding: 25px 20px;
-    &-content{
+    &-content {
      width: 100%;
      height: 364px;
    }