考核管理

build/utils.js

@@ -58,7 +58,12 @@ exports.cssLoaders = function (options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
+    less: generateLoaders('less').concat({
+      loader: 'sass-resources-loader',
+      options: {
+        resources: path.resolve(__dirname, '../src/style/common.less')
+      }
+   }),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),

build/webpack.base.conf.js

@@ -41,10 +41,6 @@ module.exports = {
   module: {
     rules: [
       ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.less$/,
-        loader: "style-loader!css-loader!less-loader"
-      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
-    "less": "3.9",
+    "less": "^3.8.1",
-    "less-loader": "5.0.0",
+    "less-loader": "^4.1.0",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
@@ -69,6 +69,7 @@
     "postcss-url": "^7.2.1",
     "prettier": "^1.12.1",
     "rimraf": "^2.6.0",
+    "sass-resources-loader": "^2.1.1",
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

src/components/kpi-layout/AppMain.vue

@@ -24,10 +24,8 @@ export default {
 }
 
 </script>
-
 <style lang='less' scoped>
 .appamin{
-  background: transparent;
   flex: 1;
   box-sizing: border-box;
   padding: 60px 80px 0;

src/components/kpi-layout/index.vue

@@ -33,6 +33,7 @@ export default {
 .main{
   height: 100vh;
   display: flex;
+  background: #f4f4f4;
   flex-direction: column;
 }
 </style>

src/main.js

@@ -3,19 +3,11 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import {
-  Button,
-  MessageBox,
-  Message
-} from 'element-ui'
 
-import './style/public.css'
+import './utils/elementConfig'
+import './style/index.less'
 import '@/icons'
 
-Vue.use(Button)
-Vue.prototype.$message = Message
-Vue.prototype.$confirm = MessageBox.confirm
-Vue.prototype.$alert = MessageBox.alert
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({

src/style/common.less

@@ -0,0 +1 @@
+@borderColor: #ebebeb;

src/style/index.less

@@ -0,0 +1 @@
+@import './public.less';

src/style/public.less

@@ -34,7 +34,6 @@ h1, h2, h3, h4, h5, h6 {
 a{ text-decoration:none;}
 a:hover img{ border:none;}
 
-a:active{noOutline:expression(this.onFocus=this.blur());}
 /*清除浮动*/
 .clearfix:after {
     content: ".";
@@ -48,8 +47,3 @@ a:active{noOutline:expression(this.onFocus=this.blur());}
 * html .clearfix { height: 1%;}
 .clearfix {display: block;}
 /* End hide from IE-mac */
-
-/*png css hack for ie6*/
-*html img.png{
-    _background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");
-}

src/utils/elementConfig.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import {
+  Button,
+  MessageBox,
+  Message,
+  Table,
+  TableColumn,
+  Form,
+  FormItem,
+  Input,
+  Select,
+  Option,
+  RadioGroup,
+  DatePicker,
+  CheckboxGroup,
+  Switch,
+  TimePicker,
+  Col,
+  Checkbox,
+  Radio
+} from 'element-ui'
+
+Vue.prototype.$message = Message
+Vue.prototype.$confirm = MessageBox.confirm
+Vue.prototype.$alert = MessageBox.alert
+Vue.use(DatePicker)
+Vue.use(Select)
+Vue.use(RadioGroup)
+Vue.use(Option)
+Vue.use(Input)
+Vue.use(Form)
+Vue.use(FormItem)
+Vue.use(Button)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(CheckboxGroup)
+Vue.use(Switch)
+Vue.use(TimePicker)
+Vue.use(Col)
+Vue.use(Checkbox)
+Vue.use(Radio)

src/utils/request.js

@@ -30,7 +30,7 @@ service.interceptors.request.use(config => {
 // 响应拦截器
 service.interceptors.response.use(res => {
   // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
+  const code = res.data.code || 200
   // 获取错误信息
   const msg = errorCode[code] || res.data.msg || errorCode['default']
   if (code === 401) {
@@ -54,25 +54,24 @@ service.interceptors.response.use(res => {
     Notification.error({
       title: msg
     })
+    // eslint-disable-next-line prefer-promise-reject-errors
     return Promise.reject('error')
   } else {
-      if(res.config.responseType === 'blob'){
+    if (res.config.responseType === 'blob') {
       return res
     }
     return res.data
   }
-  },
+},
-  error => {
+error => {
   console.log('err' + error)
-    let { message } = error;
+  let { message } = error
-    if (message == "Network Error") {
+  if (message == 'Network Error') {
-      message = "后端接口连接异常";
+    message = '后端接口连接异常'
-    }
+  } else if (message.includes('timeout')) {
-    else if (message.includes("timeout")) {
+    message = '系统接口请求超时'
-      message = "系统接口请求超时";
+  } else if (message.includes('Request failed with status code')) {
-    }
+    message = '系统接口' + message.substr(message.length - 3) + '异常'
-    else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
   }
   Message({
     message: message,
@@ -80,7 +79,7 @@ service.interceptors.response.use(res => {
     duration: 5 * 1000
   })
   return Promise.reject(error)
-  }
+}
 )
 
 export default service

src/views/kpi/assessment/components/popup.vue

@@ -0,0 +1,140 @@
+<template>
+  <transition name="popupfade">
+    <div class="taskDetailRight" @click="getRight">
+      <div class="taskDetailRight-contant" @click.stop="aa">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="活动名称">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="活动区域">
+            <el-select v-model="form.region" placeholder="请选择活动区域">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="活动时间">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+            </el-col>
+            <el-col class="line" :span="2">-</el-col>
+            <el-col :span="11">
+              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="即时配送">
+            <el-switch v-model="form.delivery"></el-switch>
+          </el-form-item>
+          <el-form-item label="活动性质">
+            <el-checkbox-group v-model="form.type">
+              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+              <el-checkbox label="地推活动" name="type"></el-checkbox>
+              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="特殊资源">
+            <el-radio-group v-model="form.resource">
+              <el-radio label="线上品牌商赞助"></el-radio>
+              <el-radio label="线下场地免费"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="活动形式">
+            <el-input type="textarea" v-model="form.desc"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">立即创建</el-button>
+            <el-button>取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  beforeMount () { },
+  mounted () {
+    console.log('item: ', this.item)
+  },
+  methods: {
+    onSubmit () {
+      console.log('submit!')
+      this.$emit('update:compont', '')
+    },
+    aa () {
+      console.log(this.item)
+    },
+    getRight () {
+      this.$emit('getRight', false)
+    }
+  }
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.popupfade-enter{
+  transform: translateX(-100%);
+}
+.fade-leave {
+  transform: translateX(0);
+}
+.popupfade-leave-to{
+    transform: translateX(60%);
+  }
+
+.fade-enter-to{
+    transform: translateX(-100%);
+  }
+.popupfade-leave-active,.fade-enter-active {
+  transition:all 40s;
+}
+
+.taskDetailRight {
+  position: fixed;
+  z-index: 50;
+  height: 100vh;
+  width: 100%;
+  min-width: 200px;
+  top: 0;
+  right: 0;
+  transition: all 1s;
+  &-contant {
+    min-width: 100px;
+    height: 100%;
+    float: right;
+    background:#fff;
+    box-shadow: 0 1px 6px 0 rgba(0,0,0,.12), 0 1px 6px 0 rgba(0,0,0,.12);
+    .form {
+      padding: 20px;
+    }
+  }
+}
+</style>

src/views/kpi/assessment/index.vue

@@ -1,25 +1,151 @@
 <!--  -->
 <template>
+    <div class="assessment">
+      <div class="assessment-form">
+        <el-form ref="form" inline :model="form" >
           <div>
-      考核管理
+            <el-form-item >
+              <el-select v-model="form.value" placeholder="请选择" style="width:100px">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item >
+              <el-input v-model="form.name" placeholder="搜索考核名称"></el-input>
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item >
+              <el-button type="primary" @click="handleRight">发起考核</el-button>
+            </el-form-item>
+            <el-form-item >
+              <el-button >导入历史绩效</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      <div class="assessment-table">
+        <el-table
+        @row-click='handleSelectClick'
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          fixed
+          prop="name"
+          label="考核名称">
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          label="时间周期">
+        </el-table-column>
+        <el-table-column
+          prop="number"
+          label="参与人数">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="deleteRow(scope.$index, tableData)"
+              type="text"
+              size="small">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      </div>
+      <component :compont.sync='compont' :is="compont"></component>
+      <!-- 考核管理
       <el-button type="success" @click="handleToHome('home')">去二级页面</el-button>
-      <el-button type="success" @click="handleToHome('home1')">去二级页面带弹窗</el-button>
+      <el-button type="success" @click="handleToHome('home1')">去二级页面带弹窗</el-button> -->
     </div>
 </template>
 
 <script>
+import popupSet from './components/popup'
 export default {
+  components: {
+    popupSet
+  },
   data () {
     return {
-
+      compont: '',
+      options: [
+        {
+          value: '1',
+          label: '全部'
+        }, {
+          value: '2',
+          label: '月度'
+        }, {
+          value: '3',
+          label: '季度'
+        }, {
+          value: '4',
+          label: '半年度'
+        }, {
+          value: '5',
+          label: '年度'
+        }
+      ],
+      form: {},
+      tableData: [{
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }]
     }
   },
   computed: {},
   beforeMount () {},
-  mounted () {},
+  mounted () {
+    this.form.value = this.options[0].value
+  },
   methods: {
+    handleRight () {
+      this.compont = 'popup-set'
+    },
+    handleSelectClick (row, column, event) {
+      console.log('event: ', event)
+      console.log('column: ', column)
+      console.log('row: ', row)
+    },
     handleToHome (i) {
       this.$router.push({name: i})
+    },
+    deleteRow (index, rows) {
+      rows.splice(index, 1)
     }
   },
   watch: {}
@@ -28,6 +154,26 @@ export default {
 
 </script>
 
-<style lang='' scoped>
+<style lang='less' scoped>
+.assessment{
+  .el-form{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &-form{
+    padding: 4px 0;
+  }
 
+  &-table{
+    background: #fff;
+    padding: 20px;
+    border: 1px solid @borderColor;
+  }
+}
+</style>
+<style lang="less">
+  .el-table__row{
+    cursor:pointer;
+  }
 </style>