cfc/cfc-web/src/views/admin/dimension-config.vue

<template>
  <div class="norm-config admin-page">
    <el-card>
      <div slot="header">
        <span>健康维度常模配置</span>
        <el-input v-model="keyword" placeholder="搜索维度/来源..." prefix-icon="el-icon-search" style="width:200px;float:right;margin-right:8px" clearable @keyup.enter.native="loadData" @clear="loadData" />
        <el-button style="float: right;margin-right:8px" type="primary" size="small" @click="handleCreate">+ 添加常模</el-button>
    </div>
    <div style="overflow:auto;max-height:calc(100vh - 300px);">
    <el-table :data="filteredNorms" stripe v-loading="loading" style="max-height:calc(100vh - 300px);">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="dimension" label="维度" width="100">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.dimension }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="80">
          <template slot-scope="scope">
            {{ genderLabel(scope.row.gender) }}
          </template>
        </el-table-column>
        <el-table-column label="年龄段" width="120">
          <template slot-scope="scope">
            {{ scope.row.ageMin }}~{{ scope.row.ageMax }}月
          </template>
        </el-table-column>
        <el-table-column label="P5/P50/P95" width="150">
          <template slot-scope="scope">
            {{ scope.row.percentile5 }} / {{ scope.row.percentile50 }} / {{ scope.row.percentile95 }}
          </template>
        </el-table-column>
        <el-table-column label="百分位详情" min-width="280">
          <template slot-scope="scope">
            <span style="font-size:12px; color:#888;">
              P5={{ scope.row.percentile5 }} P15={{ scope.row.percentile15 }} P25={{ scope.row.percentile25 }} |
              P50={{ scope.row.percentile50 }} |
              P75={{ scope.row.percentile75 }} P85={{ scope.row.percentile85 }} P95={{ scope.row.percentile95 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="数据来源" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
        </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑常模' : '添加常模'" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="维度" required>
          <el-select v-model="form.dimension" placeholder="选择维度" style="width:100%">
            <el-option label="growth 生长发育" value="growth"></el-option>
            <el-option label="sleep 睡眠质量" value="sleep"></el-option>
            <el-option label="vision 视力健康" value="vision"></el-option>
            <el-option label="immunity 免疫力" value="immunity"></el-option>
            <el-option label="nutrition 营养均衡" value="nutrition"></el-option>
            <el-option label="gut 肠胃健康" value="gut"></el-option>
            <el-option label="exercise 运动活力" value="exercise"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="选择性别" style="width:100%">
            <el-option label="全部" value="all"></el-option>
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄范围">
          <el-input-number v-model="form.ageMin" :min="0" :max="240" style="width:120px" /> 月 ~
          <el-input-number v-model="form.ageMax" :min="0" :max="240" style="width:120px" /> 月
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="P5"><el-input-number v-model="form.percentile5" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="P15"><el-input-number v-model="form.percentile15" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="P25"><el-input-number v-model="form.percentile25" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="P50"><el-input-number v-model="form.percentile50" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="P75"><el-input-number v-model="form.percentile75" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="P85"><el-input-number v-model="form.percentile85" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="P95"><el-input-number v-model="form.percentile95" :min="0" :max="100" style="width:100%"/></el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="数据来源"><el-input v-model="form.source" placeholder="如: 中国九市儿童生长发育标准"/></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DimensionNormConfig',
  data() {
    return {
      loading: false,
      submitting: false,
      norms: [],
      keyword: '',
      dialogVisible: false,
      isEdit: false,
      form: this.emptyForm()
    }
  },
  computed: {
    filteredNorms() {
      if (!this.keyword) return this.norms
      var kw = this.keyword.toLowerCase()
      return this.norms.filter(function(item) {
        return (item.dimension && item.dimension.toLowerCase().includes(kw)) ||
               (item.source && item.source.toLowerCase().includes(kw))
      })
    }
  },
  mounted() {
    this.fetchNorms()
  },
  methods: {
    emptyForm() {
      return {
        id: null,
        dimension: 'growth',
        gender: 'all',
        ageMin: 0,
        ageMax: 216,
        percentile5: 0,
        percentile15: 0,
        percentile25: 0,
        percentile50: 50,
        percentile75: 0,
        percentile85: 0,
        percentile95: 0,
        source: ''
      }
    },
    loadData() {
      this.fetchNorms()
    },
    genderLabel(g) {
      const map = { all: '全部', male: '男', female: '女' }
      return map[g] || g
    },
    fetchNorms() {
      this.loading = true
      this.$axios.post('/api/admin/dimension/norm/list').then(res => {
        if (res.data.code === 200) this.norms = res.data.data || []
      }).catch(() => {}).finally(() => { this.loading = false })
    },
    handleCreate() {
      this.form = this.emptyForm()
      this.isEdit = false
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.form = { ...row }
      this.isEdit = true
      this.dialogVisible = true
    },
    handleSubmit() {
      this.submitting = true
      this.$axios.post('/api/admin/dimension/norm/save', this.form).then(res => {
        if (res.data.code === 200) {
          this.dialogVisible = false
          this.fetchNorms()
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.data.message || '保存失败')
        }
      }).catch(() => { this.$message.error('保存失败') }).finally(() => { this.submitting = false })
    },
    handleDelete(row) {
      this.$confirm('确认删除此常模?', '提示', { type: 'warning' }).then(() => {
        this.$axios.post('/api/admin/dimension/norm/delete', row.id).then(res => {
          if (res.data.code === 200) {
            this.fetchNorms()
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.data.message || '删除失败')
          }
        })
      }).catch(() => {})
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.handleDelete(row)
          break
      }
    }
  }
}
</script>