youhua

src/main.js

@@ -9,8 +9,13 @@ import './utils/permission'
 import './style/index.less'
 import {debounce, departGetForm, personlGetForm} from '@/utils/common'
 import '@/icons'
+import {
+  format
+} from '@/utils/dateFormat'
+
 console.log('store: ', store)
 Vue.config.productionTip = false
+Vue.prototype.$format = format
 Vue.prototype.debounce = debounce
 Vue.prototype.$personlGetForm = personlGetForm
 Vue.prototype.$departGetForm = departGetForm
@@ -20,6 +25,8 @@ new Vue({
   el: '#app',
   router,
   store,
-  components: { App },
+  components: {
+    App
+  },
   template: '<App/>'
 })

src/utils/dateFormat.js

@@ -0,0 +1,27 @@
+// 日期格式化
+
+export const format = (now, fmt = 'yyyy-MM-dd') => {
+  if (typeof now === 'string') {
+    now = now.replace(/-/g, '/')
+  }
+  now = new Date(now)
+  const o = {
+    'M+': now.getMonth() + 1, // 月份
+    'd+': now.getDate(), // 日
+    'h+': now.getHours(), // 小时
+    'H+': now.getHours(), // 小时
+    'm+': now.getMinutes(), // 分
+    's+': now.getSeconds(), // 秒
+    'q+': Math.floor((now.getMonth() + 3) / 3), // 季度
+    'S': now.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (now.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, String(o[k]).padStart(RegExp.$1.length, 0))
+    }
+  }
+  return fmt
+}

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

@@ -1,36 +1,96 @@
 <template>
   <div class="initiate-assessment">
-    <el-form :v-model="formData" :rules="formRules" label-width="150px" label-position="left" label-suffix="：" size="mini">
+    <el-form
+      :v-model="formData"
+      :rules="formRules"
+      label-width="150px"
+      label-position="left"
+      label-suffix="："
+      size="mini"
+    >
       <div class="title">基本信息</div>
-      <el-form-item label="周期类型" prop="cycleTimeType" >
+      <el-form-item
+        label="周期类型"
+        prop="cycleTimeType"
+      >
         <el-radio-group v-model="formData.cycleTimeType">
           <el-radio :label="1">月度</el-radio>
           <el-radio :label="2">自定义</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="时间周期" required>
+      <el-form-item
-        <!-- month':'daterange -->
+        label="时间周期"
-          <el-date-picker v-if="formData.cycleTimeType===1" v-model="formData.rangDate" type="month" key="month"> </el-date-picker>
+        required
-          <el-date-picker v-else v-model="formData.rangDate" type="daterange" key="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+      >
+        <el-date-picker
+          @change="handleChangeRangDate"
+          v-model="formData.rangDate"
+          :type="formData.cycleTimeType === 1 ? 'month' : 'monthrange'"
+          :key="formData.cycleTimeType === 1 ? 'month' : 'monthrange'"
+          value-format="yyyy-MM"
+        >
+        </el-date-picker>
       </el-form-item>
+      <el-form-item
+        v-if="formData.rangDate"
+        label="考核合并"
+        required
+      >
+        <el-radio
+          v-model="formData.mergeType.type"
+          :label="1"
+        >新发起考核
+          <el-input
+            v-model="formData.mergeType.name"
+            :disabled="formData.cycleTimeType===1"
+            maxlength="30"
+            show-word-limit
+          ></el-input>
+        </el-radio>
+      </el-form-item>
+
       <div class="choose-group">
         <div class="title">被考核对象</div>
         <el-form-item label="参与考评组">
-          <div class="line-space"><el-button @click="handleChooseGroup">请选择</el-button></div>
+          <div>
+            <el-button @click="handleChooseGroup">请选择</el-button>
+          </div>
           <div class="line-space">
-            <el-table :data="formData.assessmentList"  :header-cell-style="{ 'background-color': '#f5f5f5'}">
+            <el-table
-              <el-table-column label="考核组名称" prop="name"></el-table-column>
+              v-if="formData.assessmentList.length>0"
-              <el-table-column label="周期类型" prop="cycleType"></el-table-column>
+              :data="formData.assessmentList"
-              <el-table-column label="参与人数" prop="personNumber"></el-table-column>
+              :header-cell-style="{ 'background-color': '#f5f5f5' }"
+            >
+              <el-table-column
+                label="考核组名称"
+                prop="name"
+              ></el-table-column>
+              <el-table-column
+                label="周期类型"
+                prop="cycleType"
+              ></el-table-column>
+              <el-table-column
+                label="参与人数"
+                prop="personNumber"
+              ></el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
-                  <el-button type="text" @click.native.prevent="handleGroupDelete(scope.$index, formData.assessmentList)" plain>删除</el-button>
+                  <el-button
+                    type="text"
+                    @click.native.prevent="
+                      handleGroupDelete(scope.$index, formData.assessmentList)
+                    "
+                    plain
+                  >删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
           <div class="line-space">
-            <el-button type="primary" @click="handleSubmit">确定</el-button>
+            <el-button
+              type="primary"
+              @click="handleSubmit"
+            >确定</el-button>
           </div>
         </el-form-item>
       </div>
@@ -51,7 +111,11 @@ export default {
             cycleType: '月度',
             personNumber: '12人'
           }
-        ] // 考核对象
+        ], // 考核对象
+        mergeType: { // 考核合并类型
+          type: 1,
+          name: '' // 合并 id  新发起无效
+        }
       },
       formRules: {
         cycleTimeType: { required: true, message: '请选择周期类型', trigger: 'blur' },
@@ -61,11 +125,20 @@ export default {
   },
   watch: {
     'formData.cycleTimeType': function (newVal, oldVal) {
-      console.log(this.formData.cycleTimeType)
+      // console.log(this.formData.cycleTimeType)
       this.formData.rangDate = ''
     }
   },
   methods: {
+    handleChangeRangDate (chgVal) {
+      let nameStr = this.$format(chgVal, 'yyyy年MM月绩效考核')
+      if (this.formData.cycleTimeType === 2) {
+        // 自定义
+        nameStr = chgVal[0] + '至' + chgVal[1] + '绩效考核'
+      }
+      this.formData.mergeType.name = nameStr
+      // console.log(this.formData.rangDate)
+    },
     handleChooseGroup () {
       this.showChooseList = !this.showChooseList
     },
@@ -88,14 +161,13 @@ export default {
     .title {
         font-size: 22;
         color: black;
-    margin-bottom: 15px;
+        margin-bottom: 25px;
     }
     .choose-group {
         margin-top: 150px;
     }
     .line-space {
-    margin-top: 10px;
+        margin-top: 20px;
     }
 }
-
 </style>