duan.vue 2.58 KB
<template>
  <el-card>
    <el-form ref="formRef" label-suffix=":" label-width="220">
      <el-form-item label="是否开启年限控制" prop="isControl" required :show-message="false">
        <el-radio-group v-model="form.isControl">
          <el-radio label="0"></el-radio>
          <el-radio label="1"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="考段年限" required>
        <el-table :data="duanList" border style="width: 300px;">
          <el-table-column label="段位" prop="name" align="center" width="100" />
          <el-table-column label="年限" prop="value" align="center" width="200">
            <template #default="scope">
              <el-input-number v-model="scope.row.value" controls-position="right" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width: 180px" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>

import { getCurrentInstance } from '@vue/runtime-core'
import { onMounted, reactive, ref } from 'vue'
import { editZtxDuanAgeConfig, getZtxDuanAgeConfig } from '@/api/system/config'
import _ from 'lodash'

const { proxy } = getCurrentInstance()

const form = reactive({
  isControl: '1',
  duan: {}
})

const duanList = ref([
  { name: '一段', value: 0, index: 0 },
  { name: '二段', value: 1, index: 1 },
  { name: '三段', value: 2, index: 2 },
  { name: '四段', value: 3, index: 3 },
  { name: '五段', value: 4, index: 4 },
  { name: '六段', value: 5, index: 5 },
  { name: '七段', value: 6, index: 6 },
  { name: '八段', value: 7, index: 7 },
  { name: '九段', value: 8, index: 8 }
])

onMounted(() => {
  getZtxDuanAgeConfig().then((res) => {
    if (res.data) {
      const data = JSON.parse(res.data)
      form.isControl = data.isControl
      _.each(data.duan, (value, index) => {
        const duan = _.find(duanList.value, (d) => {
          return d.index == index - 1
        })
        duan.value = value
      })
    }
  })
})

function submitForm() {
  if (_.some(duanList.value, (d) => {
    if (parseInt(d.value) != d.value || d.value < 0) {
      return true
    }
  })) {
    proxy.$modal.msgError('请输入正确的段位年限')
    return
  } else {
    const data = {}
    _.each(duanList.value, (d) => {
      data[d.index + 1] = d.value
    })
    form.duan = data
    editZtxDuanAgeConfig(form).then(() => {
      proxy.$modal.msgSuccess('修改成功')
    })
  }
}

</script>

<style scoped>

</style>