wanzb_admin/src/views/match/stock.vue

<template>
  <section class="content">
    <h4>股票仓库</h4>
    <el-divider></el-divider>
    <el-form label-width="80px" class="filter-form">
      <el-row>
        <el-col :span="4">
          <el-form-item label="名称">
            <el-input clearable @clear="getData()" v-model="queryParams.name" placeholder="请输入股票名称/代码" size="mini">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="持仓日期" prop="stock_date">
            <el-date-picker size="mini" v-model="queryParams.stock_date" type="date" style="width:100%" placeholder="选择日期"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>     
        <el-col :span="5">
          <el-form-item label-width="10" style="margin-left: 10px">
            <el-button type="primary" @click="getData" size="mini">筛选</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增股票</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button size="mini" type="success" @click="updateUserStockFlag=true">更新持仓数据</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%; margin-top: 10px" height="50vh">
      <el-table-column align="center" prop="name" label="股票名称" />
      <el-table-column align="center" prop="code" label="股票代码" />
      <el-table-column align="center" prop="user_num" label="持仓人数" />
      <el-table-column align="center" prop="stock_date" label="持仓日期" />
      <el-table-column align="center" prop="date" label="图片">
        <template slot-scope="scope">
          <img v-if="scope.row.img" :src="scope.row.img" alt="" width="100" height="80">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="desc" label="简介" />
      <el-table-column align="center" prop="date" label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.id)" size="mini" type="warning">编辑</el-button>
          <!-- <el-button @click="del(scope.row.id)" size="mini" type="danger"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <Page ref="pageButton" :current="form.page" :page_size="form.page_size" :total="total" @pageChange="gopage" />
    <!-- 新增股票 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="股票名称" prop="name">
          <el-input clearable v-model="form.name" placeholder="请输入股票名称"></el-input>
        </el-form-item>
        <el-form-item label="股票代码" prop="code">
          <el-input clearable v-model="form.code" placeholder="请输入代码"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload class="avatar-uploader" action="/api/admin/uploadfile" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <div v-if="form.img">
              <img :src="form.img" class="avatar" width="100%" />
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button v-if="form.img" type="danger" size="mini" @click="form.img=null">删除</el-button>
        </el-form-item>
        <el-form-item label="股票简介" prop="desc">
          <el-input type="textarea" clearable v-model="form.desc" placeholder="请输入股票简介" rows="10"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="更新每日持仓数据" :visible.sync="updateUserStockFlag">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="持仓日期" prop="stock_date">
          <el-date-picker v-model="form.stock_date" type="date" style="width:100%" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateStockUserNum">确 定</el-button>
        <el-button @click="updateUserStockFlag = false">取 消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  import Page from "../../components/Page";
  export default {
    components: {
      Page,
    },
    data() {
      return {
        loading: false,
        queryParams: {
          page: 1,
        },
        form: {},
        form1: {},
        list: [{}, {}],
        total: 0,
        title: "新增股票",
        open: false,
        open1: false,
        stockList: [],
        groupList: [],
        rules: {
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }, ],
        },
        rules1: {
          fund: [{
            required: true,
            message: "请输入比赛资金",
            trigger: "blur"
          }],
          match_id: [{
            required: true,
            message: "请选择比赛",
            trigger: "change"
          }, ],
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }, ],
          match_group: [{
            required: true,
            message: "请选择分组",
            trigger: "change"
          }, ],
          match_status: [{
            required: true,
            message: "请选择参数状态",
            trigger: "change"
          }, ],
        },
        updateUserStockFlag: false
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.form.img = res.data.url;
      },
      beforeAvatarUpload(file) {
        return
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      del(id) {
        this.$confirm("确定删除吗?", "提示", {
          type: "warning",
        }).then(() => {
          this.$api.delStock({
            id: id
          }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getData();
            } else {
              this.$message.error(res.data.message);
            }
          });
        });
      },
      gopage(size) {
        if (size) {
          this.queryParams.page_size = size;
        }
        this.queryParams.page = this.$refs.pageButton.page;
        this.getData();
      },
      getData() {
        this.loading = true;
        this.$api.getStockList(this.queryParams).then((res) => {
          console.log(res)
          this.list = res.data.data.list;
          this.total = res.data.data.total;
          this.loading = false;
        });
      },
      handleAdd() {
        this.open = true;
        this.title = "新增股票";
        this.form = {};
      },
      handleFastAdd() {
        this.open1 = true;
        this.title = "新增选手";
        this.form1 = {
          match_status: 1,
          match_id: this.matchList[0].id,
        };
      },
      edit(id) {
        this.title = "编辑股票信息";
        this.$api.getStockInfo({
          id: id
        }).then((res) => {
          console.log(res)
          this.form = res.data.data;
          this.open = true;
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              this.$api.updateStock(this.form).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            } else {
              this.$api.addStock(this.form).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            }
          }
        });
      },
      // 创建选手同时创建用户
      fastSavePlayer() {
        this.$refs["form1"].validate((valid) => {
          if (valid) {
            if (this.form1.id != null) {
              this.$api.fastSavePlayer(this.form1).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            } else {
              this.$api.fastSavePlayer(this.form1).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open1 = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            }
          }
        });
      },
      updateStockUserNum() {
        this.loading = true
        this.$api.updateStockUserNum(this.form).then(res => {
          this.loading = false
          this.updateUserStockFlag = false
          this.getData()
        })
      }
    },
    created() {
      this.getData();
    },
  };
</script>