指标库添加UI

src/router/kpi_route.js

@@ -60,7 +60,25 @@ export default [{
         isNav: false,
         hidden: true
       }
-    }]
+    }, {
+      path: 'target',
+      name: 'workbench-target',
+      component: () => import('@/views/kpi/set/target/index.vue'),
+      meta: {
+        title: '指标库',
+        isNav: false,
+        hidden: true
+      }
+    }, {
+      path: 'add',
+      name: 'workbench-target-add',
+      component: () => import('@/views/kpi/set/target/add/index.vue'),
+      meta: {
+        title: '新增指标',
+        pop: true,
+        isNav: false,
+        hidden: true
+      }}]
   }, {
     path: 'assessment',
     name: 'assessment',

src/utils/elementConfig.js

@@ -40,12 +40,14 @@ import {
   Progress,
   Drawer,
   Slider,
-  ButtonGroup, Notification
+  ButtonGroup,
+  Notification
 } from 'element-ui'
 Vue.prototype.$notify = Notification
 Vue.prototype.$loading = Loading
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
+Vue.prototype.$prompt = MessageBox.prompt
 Vue.prototype.$alert = MessageBox.alert
 Vue.use(ButtonGroup)
 Vue.use(Slider)

src/views/kpi/set/index.vue

@@ -8,19 +8,34 @@
       text-color="#52575b"
       active-text-color="#3ba1ff"
     >
-      <el-menu-item v-if="auth.evaluationSet" index="0">考评组设置</el-menu-item>
+      <el-menu-item
-      <el-menu-item v-if="auth.roleSet" index="1">权限设置</el-menu-item>
+        v-if="auth.evaluationSet"
+        index="0"
+      >考评组设置</el-menu-item>
+      <el-menu-item index="2">指标库</el-menu-item>
+      <el-menu-item
+        v-if="auth.roleSet"
+        index="1"
+      >权限设置</el-menu-item>
     </el-menu>
-    <ground-table class="kaoping" v-if="activeIndex==='0'"></ground-table>
+    <ground-table
+      class="kaoping"
+      v-if="activeIndex==='0'"
+    ></ground-table>
     <div v-else-if="activeIndex==='1'">
       <try-authority></try-authority>
     </div>
+    <div v-else-if="activeIndex==='2'">
+      <try-target></try-target>
+    </div>
   </div>
 </template>
 
 <script>
 import groundTable from '../workbench/assessmentGroup/groundTable'
 import tryAuthority from './authority'
+import tryTarget from './target'
+
 export default {
   data () {
     return {
@@ -29,13 +44,16 @@ export default {
   },
   components: {
     groundTable,
-    tryAuthority
+    tryAuthority,
+    tryTarget
   },
   created () {
     if (this.auth.evaluationSet) {
       this.activeIndex = '0'
     } else if (!this.auth.roleSet) {
       this.activeIndex = '1'
+    } else if (!this.auth.target) {
+      this.activeIndex = '2'
     } else {
       this.activeIndex = ''
     }

src/views/kpi/set/target/add/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="add-target commonFont">
+    <el-form
+      ref="form"
+      :model="formData"
+      size="small"
+      label-width="200px"
+      :rules="formRules"
+      label-position="left"
+      style="width: 600px;"
+    >
+      <el-form-item
+        label="指标分类："
+        prop="classeName"
+      >
+        <el-select
+          v-model="formData.classeName"
+          placeholder="请选择指标分类"
+        >
+          <el-option
+            v-for="item in calsseDateList"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        prop="targetType"
+      >
+        <div slot="label" style="margin-left:10px;">指标类型：</div>
+        <el-radio-group v-model="formData.targetType">
+          <el-radio
+            v-for="item in targetRadioList"
+            :key="item.id"
+            :label="item.id"
+          >{{item.label}}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="指标名称："
+        prop="targetName"
+      >
+        <el-input
+          v-model="formData.targetName"
+          placeholder="请输入指标名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        prop="standard"
+      >
+              <div slot="label" style="margin-left:10px;">考核标准：</div>
+        <el-input
+          type="textarea"
+          v-model="formData.standard"
+          placeholder="请输入指标名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+                      <div slot="label" style="margin-left:10px;">权重：</div>
+
+        <el-input
+          type="number"
+          v-model="formData.targetName"
+          placeholder="请输入指标名称"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label=" "><el-button type="primary" @click="handleSaveSet">保存设置</el-button></el-form-item>
+
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    handleSaveSet () {
+
+    }
+  },
+  data () {
+    return {
+      formData: { classeName: 1, targetType: 0, targetName: '', standard: '', weight: '' },
+      formRules: {
+        classeName: [{ required: true, message: '请选择指标分类', trigger: 'change' }],
+        targetName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }]
+      },
+      calsseDateList: [{ label: '坎坎坷坷', id: 1 }],
+      targetRadioList: [{ label: '量化指标', id: 0 }, { label: '行为价值观指标', id: 1 }, { label: '团队管理', id: 2 }]
+    }
+  }
+}
+</script>
+<style lang='less' scoped>
+.add-target {
+  padding: 28px;
+  background-color: #fff;
+}
+</style>

src/views/kpi/set/target/index.vue

@@ -0,0 +1,208 @@
+// 指标
+<template>
+  <div class="target commonFont">
+    <div class="target-main">
+      <div class="target-main-header">
+        <el-row>
+          <el-col :span="12">
+            <el-button
+              @click="dialogVisibleFilter = true"
+              size="small"
+            >筛选</el-button>
+            <el-input
+              prefix-icon="el-icon-search"
+              placeholder="搜索指标"
+              style="width:200px;"
+              size="small"
+              :value="headerSearchValue"
+              @change="handleHeaderSearch"
+            ></el-input>
+          </el-col>
+          <el-col
+            :span="12"
+            class="target-main-header-right"
+          >
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              size="small"
+            >新增指标</el-button>
+            <el-button
+              @click="handleMoving"
+              :disabled="!selectedRowList.length"
+              size="small"
+            >移动到</el-button>
+            <el-button
+              @click="handleRemove"
+              :disabled="!selectedRowList.length"
+              size="small"
+            >删除</el-button>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="target-main-content">
+        <div :class=" menuDataClasseHide?'target-main-content-left target-classe-menu-hide':'target-main-content-left target-classe-menu-show'">
+          <el-table
+            :data="tableMenuData"
+            height="400px"
+            :header-cell-style="{background:'#f5f4f5'}"
+          >
+            <el-table-column
+              label="指标分类"
+              prop="name"
+              :show-overflow-tooltip="true"
+            ></el-table-column>
+            <el-table-column width="40px">
+              <template slot="header">
+                <el-button
+                  type="text"
+                  icon="el-icon-plus"
+                  size="small"
+                  @click="handleAddCalsse"
+                ></el-button>
+              </template>
+              <template slot-scope="scope">
+                <el-dropdown @command="handleClasseDropdown">
+                  <el-button type="text">...</el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item
+                      :command="{obj:scope.row,type:0}"
+                      icon="el-icon-edit"
+                    >编辑</el-dropdown-item>
+                    <el-dropdown-item
+                      :command="{obj:scope.row,type:0}"
+                      icon="el-icon-delete"
+                    >删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div
+          @click="menuDataClasseHide = !menuDataClasseHide"
+          class="target-main-content-hide"
+        ><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
+        <div class="target-main-content-right">
+          <el-table
+            :data="tableData"
+            height="400px"
+            :header-cell-style="{background:'#f5f4f5'}"
+          >
+            <el-table-column type="selection"></el-table-column>
+            <el-table-column
+              label="名称"
+              sortable
+            ></el-table-column>
+            <el-table-column
+              label="指标类型"
+              sortable
+            ></el-table-column>
+            <el-table-column label="考核标准"></el-table-column>
+            <el-table-column
+              label="权重"
+              sortable
+            ></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    handleHeaderSearch () {
+
+    },
+    handleAdd () {
+      // 新增指标
+      this.$router.push({name: 'workbench-target-add'})
+      console.log('新增指标')
+    },
+    handleMoving () {
+      // 移动
+      console.log('指标移动')
+    },
+    handleRemove () {
+      console.log('删除指标')
+    },
+    handleAddCalsse () {
+      console.log('添加分类')
+    },
+    handleClasseDropdown (val) {
+      let { type, obj } = val
+      if (type === 0) {
+        // 编辑分类名称
+        this.$prompt('分类名称：', '修改分类', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
+        }).then(({ value }) => {
+          console.log('修改分类名称:' + value)
+        }).catch(() => {
+
+        })
+      } else if (type === 1) {
+        // 移除
+        console.log('移除指标')
+      }
+    }
+  },
+  data () {
+    return {
+      headerSearchValue: '',
+      dialogVisibleFilter: false,
+      tableMenuData: [{ name: '收代理费建安费啦k咳咳咳书法家阿李师傅', id: '1' }],
+      tableData: [],
+      menuDataClasseHide: false,
+      selectedRowList: []
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.target {
+  background-color: white;
+  padding: 28px;
+  background-color: #fff;
+
+  &-classe-menu-hide {
+    width: 1px;
+  }
+  &-classe-menu-show {
+    width: 200px;
+  }
+  &-main {
+    &-header-right {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 20px;
+      overflow: hidden;
+
+      &-left {
+        display: flex;
+        .el-table {
+          border: 0.5px solid @borderColor;
+        }
+      }
+      &-hide {
+        color: #fff;
+        background-color: @borderColor;
+        width: 12px;
+        height: 20px;
+        border-bottom-right-radius: 2px;
+        border-top-right-radius: 2px;
+      }
+      &-right {
+        flex: 1;
+        border: red;
+      }
+    }
+  }
+}
+</style>

src/views/kpi/workbench/home/index.vue

@@ -21,7 +21,7 @@
                   <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('1')"><svg-icon icon-class="zhibiao" 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>