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

<template>
  <div class="data-source-config admin-page">
    <el-card>
      <PageHeader slot="header" title="健康数据源配置">
        
        <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>
      
</PageHeader>
      <div class="adm-table-wrap">
      <el-table height="100%" :data="records" stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="60">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="memberId" label="成员ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('memberId', $event)">成员ID<span v-if="sortIndex('memberId') !== null" class="sort-index" :class="sortClass('memberId') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('memberId') }}</span>{{ sortIcon('memberId') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sourceType" label="类型" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('sourceType', $event)">类型<span v-if="sortIndex('sourceType') !== null" class="sort-index" :class="sortClass('sourceType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('sourceType') }}</span>{{ sortIcon('sourceType') }}</span>
          </template>
          <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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('dimensionCodes', $event)">维度<span v-if="sortIndex('dimensionCodes') !== null" class="sort-index" :class="sortClass('dimensionCodes') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('dimensionCodes') }}</span>{{ sortIcon('dimensionCodes') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="confidence" label="置信度" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('confidence', $event)">置信度<span v-if="sortIndex('confidence') !== null" class="sort-index" :class="sortClass('confidence') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('confidence') }}</span>{{ sortIcon('confidence') }}</span>
          </template>
          <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="header">
            <span class="sort-header" @click.stop="onSortClick('fileUrl', $event)">文件URL<span v-if="sortIndex('fileUrl') !== null" class="sort-index" :class="sortClass('fileUrl') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('fileUrl') }}</span>{{ sortIcon('fileUrl') }}</span>
          </template>
          <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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
          </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>
import SortMixin from '@/mixins/SortMixin'
import ListStateMixin from '@/mixins/ListStateMixin'

export default {
  name: 'DataSourceConfig',
  mixins: [SortMixin, ListStateMixin],
  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: '',
      sortableColumns: { id: 'ID', memberId: '成员ID', sourceType: '类型', dimensionCodes: '维度', confidence: '置信度', fileUrl: '文件URL', createdAt: '创建时间' }
    }
  },
  mounted() {
    this.fetchRecords()
  },
  methods: {
    loadList() {
      this.fetchRecords()
    },
    handleSearch() {
      this.page = 1
      this.fetchRecords()
    },
    emptyForm() {
      return {
        id: null,
        memberId: null,
        sourceType: 'MANUAL',
        dimensionCodes: '',
        parsedResult: '',
        fileUrl: '',
        confidence: null
      }
    },

    fetchRecords() {
      this.loading = true
      var params = { page: this.page, size: this.size, keyword: this.keyword || undefined }
      if (this.sortState.length > 0) params.sort = this.sortState
      this.$axios.post('/api/admin/dimension/data-source/list', null, { params: params })
        .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>

<style scoped>
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-tag {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
</style>