RuoYi-Vue/ruoyi-ui-next/src/views/stocksystem/stocks/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="股票代码" prop="code"
        ><el-input
          v-model="queryParams.code"
          placeholder="请输入股票代码"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item label="交易日期" prop="tradeDay"
        ><el-date-picker
          v-model="queryParams.tradeDay"
          clearable
          size="small"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择交易日期"
      /></el-form-item>
      <el-form-item label="可交易日数" prop="tradeDays"
        ><el-input
          v-model="queryParams.tradeDays"
          placeholder="请输入可交易日数"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item label="10日涨跌幅" prop="differrange10"
        ><el-input
          v-model="queryParams.differrange10"
          placeholder="请输入10日区间涨跌幅"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item label="20日涨跌幅" prop="differrange20"
        ><el-input
          v-model="queryParams.differrange20"
          placeholder="请输入20日区间涨跌幅"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item label="60日涨跌幅" prop="differrange60"
        ><el-input
          v-model="queryParams.differrange60"
          placeholder="请输入60日区间涨跌幅"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item label="机构持仓" prop="agenciesHold"
        ><el-input
          v-model="queryParams.agenciesHold"
          placeholder="请输入机构持仓合计"
          clearable
          size="small"
          @keyup.enter="handleQuery"
      /></el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"
        ><el-button
          type="warning"
          plain
          size="small"
          @click="handleExport"
          v-hasPermi="['stocksystem:stocks:export']"
          >导出</el-button
        ></el-col
      >
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="stocksList" @selection-change="handleSelectionChange">
      <el-table-column label="股票代码" align="center" prop="code" />
      <el-table-column label="股票名称" align="center" prop="name" />
      <el-table-column label="交易日期" align="center" prop="tradeDay" width="180" />
      <el-table-column label="开盘价" align="center" prop="open" />
      <el-table-column label="收盘价" align="center" prop="close" />
      <el-table-column label="涨跌幅" align="center" prop="differrange" />
      <el-table-column label="可交易日数" align="center" prop="tradeDays" />
      <el-table-column label="成交量" align="center" prop="volumn" />
      <el-table-column label="成交额" align="center" prop="amount" />
      <el-table-column label="10日涨跌幅" align="center" prop="differrange10" />
      <el-table-column label="20日涨跌幅" align="center" prop="differrange20" />
      <el-table-column label="60日涨跌幅" align="center" prop="differrange60" />
      <el-table-column label="20日均量" align="center" prop="avgVolume20" />
      <el-table-column label="流通市值" align="center" prop="freefloatMarketValue" />
      <el-table-column label="总市值" align="center" prop="totalMarketValue" />
      <el-table-column label="机构持仓" align="center" prop="agenciesHold" />
    </el-table>

    <el-pagination
      v-show="total > 0"
      :total="total"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="getList"
      @size-change="getList"
      class="mt-4"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getStocksList } from '@/api/modules/stocksystem/stocks'

const queryFormRef = ref()
const stocksList = ref<any[]>([])
const loading = ref(false)
const total = ref(0)
const single = ref(true)
const multiple = ref(true)
const showSearch = ref(true)
const ids = ref<any[]>([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  code: '',
  tradeDay: '',
  tradeDays: '',
  differrange10: '',
  differrange20: '',
  differrange60: '',
  agenciesHold: '',
})

async function getList() {
  loading.value = true
  try {
    const res: any = await getStocksList(queryParams)
    stocksList.value = res.data.rows
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}
function resetQuery() {
  queryFormRef.value?.resetFields()
  handleQuery()
}
function handleSelectionChange(selection: any[]) {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}
function handleExport() {
  window.open(`${import.meta.env.VITE_APP_BASE_API}/stocksystem/stocks/export`, '_blank')
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.mt-4 {
  margin-top: 16px;
}
</style>