申报

src/views/humanResources/accumulatePoints/accumulatePointsApply/accumulatePointsApplyEdit.vue

@@ -1,71 +1,124 @@
 <template>
-  <m-dialog ref="dialog" title="积分申报">
-    <m-card shadow="never" v-loading="loading">
-      <el-descriptions
-        v-for="item in items"
-        :key="item.ruleCategory"
-        :title="item.ruleCategory"
-        :column="1"
-        :labelStyle="{
-          width: '200px',
-          'justify-content': 'flex-end',
-          'padding-top': '5px'
-        }"
-      >
-        <el-descriptions-item
-          v-for="_item in item.item"
-          :key="_item.employeeScoreRuleItemId"
-          :label="_item.title"
+  <m-dialog ref="dialog" title="积分申报" @sure="onSure">
+    <m-card shadow="never" v-loading="loading" style="min-height: 500px">
+      <template v-if="finished">
+        <el-descriptions
+          :column="1"
+          :labelStyle="{
+            width: '200px',
+            'justify-content': 'flex-end',
+            'padding-top': '5px'
+          }"
         >
-          <div style="width: 100%;">
-            <template v-if="_item.inputType === 0">
-              <el-input-number
-                size="small"
-                :min="0"
-                v-model="formValues[_item.employeeScoreRuleItemId]"
-              ></el-input-number>
-            </template>
-            <template v-if="_item.inputType === 2">
-              <div class="fullWidth">
-                <el-input type="textarea" :rows="3" placeholder="请输入类目描述" v-model="formValues[_item.employeeScoreRuleItemId]"></el-input>
-              </div>
-            </template>
-            <template v-if="_item.inputType === 3">
-              <el-radio-group v-model="formValues[_item.employeeScoreRuleItemId]" class="mt-2">
-                <el-radio
-                  v-for="radio in _item.child"
-                  :key="radio.employeeScoreRuleItemId"
-                  :label="radio.employeeScoreRuleItemId">
-                  {{ radio.title }}
-                </el-radio>
-              </el-radio-group>
-            </template>
-          </div>
-          <!-- <el-upload>
-            <m-button size="small" type="primary">附件上传</m-button>
-          </el-upload> -->
-        </el-descriptions-item>
-      </el-descriptions>
+          <el-descriptions-item label="提交月份">
+            <el-date-picker
+              v-model="month"
+              size="small"
+              type="month"
+              value-format="yyyy-MM"
+              placeholder="选择月份">
+            </el-date-picker>
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions
+          v-for="item in items"
+          :key="item.ruleCategory"
+          :title="item.ruleCategory"
+          :column="1"
+          :labelStyle="{
+            width: '200px',
+            'justify-content': 'flex-end',
+            'padding-top': '5px'
+          }"
+        >
+          <el-descriptions-item
+            v-for="_item in item.item"
+            :key="_item.employeeScoreRuleItemId"
+            :label="_item.title"
+          >
+            <!-- <div style="width: 100%;"> -->
+              <template v-if="_item.inputType === 0">
+                <el-input-number
+                  size="small"
+                  :min="0"
+                  v-model="formValues[_item.employeeScoreRuleItemId].value"
+                ></el-input-number>
+                <UploadBtn v-model="formValues[_item.employeeScoreRuleItemId].image"></UploadBtn>
+              </template>
+              <template v-if="_item.inputType === 2">
+                <m-card shadow="never" class="fullWidth">
+                  <div class="d-flex mb-3">
+                    <div style="width: 50px;">
+                      积分
+                    </div>
+                    <el-input-number
+                      size="small"
+                      :min="0"
+                      placeholder="请输入积分"
+                      v-model="formValues[_item.employeeScoreRuleItemId].value"
+                    ></el-input-number>
+                    <UploadBtn v-model="formValues[_item.employeeScoreRuleItemId].image"></UploadBtn>
+                  </div>
+                  <div class="d-flex">
+                    <div style="width: 50px;">
+                      描述
+                    </div>
+                    <el-input
+                      type="textarea"
+                      :rows="1"
+                      placeholder="请输入类目描述"
+                      v-model="formValues[_item.employeeScoreRuleItemId].desc"
+                    ></el-input>
+                  </div>
+                </m-card>
+              </template>
+              <template v-if="_item.inputType === 3">
+                <el-radio-group v-model="formValues[_item.employeeScoreRuleItemId].value" class="mt-2">
+                  <el-radio
+                    v-for="radio in _item.child"
+                    :key="radio.employeeScoreRuleItemId"
+                    :label="radio.employeeScoreRuleItemId">
+                    {{ radio.title }}
+                  </el-radio>
+                </el-radio-group>
+                <UploadBtn v-model="formValues[_item.employeeScoreRuleItemId].image"></UploadBtn>
+              </template>
+            <!-- </div> -->
+            <!-- <el-upload>
+              <m-button size="small" type="primary">附件上传</m-button>
+            </el-upload> -->
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
     </m-card>
   </m-dialog>
 </template>
 
 <script>
 import {
-  getAccumulatePointRule
+  getAccumulatePointRule,
+  saveAccumulatePoint
 } from '@/api/accumulatePoint'
+import UploadBtn from './accumulatePointsApplyEditUpload.vue'
+
 export default {
   name: 'accumulatePointsApplyEdit',
+  components: {
+    UploadBtn
+  },
   data () {
     return {
+      month: null,
       loading: false,
+      finished: false,
       items: [],
-      formValues: {
-        1: '是',
-        2: '是'
-      }
+      formValues: {}
     }
   },
+  created () {
+    const date = new Date()
+    this.month = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+  },
   methods: {
     async open () {
       this.loading = true
@@ -73,11 +126,48 @@ export default {
       try {
         const { data } = await getAccumulatePointRule()
         this.items = data
+        this.formValues = this.items.reduce((acc, cur) => {
+          cur.item.forEach(item => {
+            acc[item.employeeScoreRuleItemId] = {
+              value: item.inputType === 3 ? null : 0,
+              desc: null,
+              maxScore: item.maxScore ? Number(item.maxScore) : item.maxScore,
+              image: null
+            }
+          })
+          return acc
+        }, {})
+        this.finished = true
       } catch (error) {
         this.$message.error(error)
       } finally {
         this.loading = false
       }
+    },
+    async onSure () {
+      const values = Object.values(this.formValues)
+      if (values.some(item => item.value === null)) {
+        this.$message.error('请填写完整再提价')
+        return
+      }
+      const param = Object.keys(this.formValues).map(key => {
+        return {
+          images: this.formValues[key].image,
+          inputValue: this.formValues[key].value,
+          desc: this.formValues[key].desc,
+          employeeScoreRuleItemId: key
+        }
+      })
+      try {
+        await saveAccumulatePoint({
+          month: this.month,
+          item: param
+        })
+        this.$refs.dialog.close()
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error)
+      }
     }
   }
 }
@@ -87,4 +177,8 @@ export default {
 .fullWidth {
   width: 100%;
 }
+.el-radio {
+  display: block;
+  margin-bottom: 5px;
+}
 </style>

src/views/humanResources/accumulatePoints/accumulatePointsApply/accumulatePointsApplyEditUpload.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="d-flex align-center">
+    <el-upload
+      action="#"
+      :show-file-list="false"
+      :http-request="onImport"
+      class="ml-2"
+    >
+      <m-button size="mini" >
+        上传附件
+      </m-button>
+    </el-upload>
+    <m-button size="mini" class="ml-3" v-if="file">
+      查看附件
+    </m-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'accumulatePointsApplyEditUpload',
+  props: {
+    value: {
+      type: [String, Object],
+      default: null
+    }
+  },
+  data () {
+    return {
+      file: null
+    }
+  },
+  methods: {
+    onImport (file) {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>