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

<template>
  <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'
          }"
        >
          <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,
  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: {}
    }
  },
  created () {
    const date = new Date()
    this.month = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
  },
  methods: {
    async open () {
      this.loading = true
      this.$refs.dialog.open()
      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)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fullWidth {
  width: 100%;
}
.el-radio {
  display: block;
  margin-bottom: 5px;
}
</style>