cfc/cfc-web/src/views/admin/data-source-config.vue

<template>
  <div class="data-source-config admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">健康数据源配置</span>
        <el-input v-model="keyword" placeholder="搜索数据源..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
        <div class="admin-page-actions">
          <el-button type="primary" size="small" @click="handleCreate">+ 添加数据源</el-button>
        </div>
      </div>
      <div class="table-scroll-wrap-sm">
      <el-table :max-height="tableHeight" :data="records" stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="memberId" label="成员ID" width="80"></el-table-column>
        <el-table-column prop="sourceType" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.sourceType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dimensionCodes" label="维度" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="confidence" label="置信度" width="80">
          <template slot-scope="scope">{{ scope.row.confidence }}</template>
        </el-table-column>
        <el-table-column prop="fileUrl" label="文件URL" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <a v-if="scope.row.fileUrl" :href="scope.row.fileUrl" target="_blank" style="color:#409EFF;font-size:12px;">查看文件</a>
            <span v-else style="color:#999">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160">
          <template slot-scope="scope">{{ formatDate(scope.row.createdAt) }}</template>
        </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-pagination
        v-if="total > 0"
        class="pagination-wrap"
        style="margin-top:16px;text-align:right"
        :page.sync="page"
        :limit.sync="size"
        @current-change="fetchRecords"
        layout="total, prev, pager, next"
      />
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑数据源' : '添加数据源'" width="550px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="成员ID" required>
          <el-input-number v-model="form.memberId" :min="1" style="width:100%"/>
        </el-form-item>
        <el-form-item label="来源类型" required>
          <el-select v-model="form.sourceType" placeholder="选择类型" style="width:100%">
            <el-option label="REPORT" value="REPORT"></el-option>
            <el-option label="PHOTO" value="PHOTO"></el-option>
            <el-option label="VOICE" value="VOICE"></el-option>
            <el-option label="MANUAL" value="MANUAL"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维度编码">
          <el-input v-model="form.dimensionCodes" placeholder="如: growth,sleep,vision"/>
        </el-form-item>
        <el-form-item label="置信度">
          <el-input-number v-model="form.confidence" :min="0" :max="1" :precision="2" style="width:100%"/>
        </el-form-item>
        <el-form-item label="解析结果">
          <el-input type="textarea" v-model="form.parsedResult" :rows="3" placeholder="JSON格式"/>
        </el-form-item>
        <el-form-item label="文件URL">
          <el-input v-model="form.fileUrl" placeholder="https://..."/>
        </el-form-item>
      </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>

    <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
      <div style="text-align:center;padding:10px 0">
        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="handleContinue">继续添加</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DataSourceConfig',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      records: [],
      total: 0,
      page: 1,
      size: 20,
      dialogVisible: false,
      successDialogVisible: false,
      isEdit: false,
      form: this.emptyForm(),
      keyword: ''
    }
  },
  mounted() {
    this.fetchRecords()
  },
  methods: {
    handleSearch() {
      this.page = 1
      this.fetchRecords()
    },
    emptyForm() {
      return {
        id: null,
        memberId: null,
        sourceType: 'MANUAL',
        dimensionCodes: '',
        parsedResult: '',
        fileUrl: '',
        confidence: null
      }
    },
    formatDate(d) {
      if (!d) return '-'
      return new Date(d).toLocaleString()
    },
    fetchRecords() {
      this.loading = true
      this.$axios.post('/api/admin/dimension/data-source/list', null, { params: { page: this.page, size: this.size, keyword: this.keyword || undefined } })
        .then(res => {
          if (res.data.code === 200) {
            this.records = res.data.data.records || []
            this.total = res.data.data.total || 0
          }
        }).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/data-source/save', this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('保存成功')
          this.successDialogVisible = true
        } 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/data-source/delete', row.id).then(res => {
          if (res.data.code === 200) {
            this.fetchRecords()
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.data.message || '删除失败')
          }
        })
      }).catch(() => {})
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.handleDelete(row)
          break
      }
    },
    handleContinue() {
      this.successDialogVisible = false
      this.isEdit = false
      this.form = this.emptyForm()
      this.dialogVisible = true
    },
    handleClose() {
      this.successDialogVisible = false
      this.dialogVisible = false
      this.fetchRecords()
    }
  }
}
</script>