CrowdFunding/src/views/backindex.vue

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { ElMessageBox } from "element-plus";
import axios from "axios";
import moment from "moment";

const titleEdit = ref(false);
const raiseEdit = ref(false);
const addInfo = ref(false);
const deleteInfo = ref(false);

//这是查询的接口
const info = ref({});
const getInfo = async function () {
  try {
    const result = await axios.get("http://192.168.9.117:8092/page");
    info.value.title = result.data.data.title;
    info.value.targetNumber = result.data.data.targetNumber;
  } catch (error) {
    console.log("请求失败", error);
  }
};
getInfo();

//这是修改标题的接口
const titleNew = ref({});
const putTitle = async function () {
  try {
    // 创建一个FormData对象
    const formData = new FormData();
    // 将titleNew中的数据添加到FormData对象中
    for (const key in titleNew.value) {
      formData.append(key, titleNew.value[key]);
    }
    const result = await axios.put(
      "http://192.168.9.117:8092/title",
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );
    if (result.data.code == 10000) {
      ElMessage.success("修改成功");
      titleEdit.value = false;
      titleNew.value = {};
      getInfo(); //刷新页面
    }
    if (result.data.code == 10001) {
      ElMessage.error(result.data.msg);
      titleNew.value = {};
      titleEdit.value = false;
    }
  } catch (error) {
    console.log("请求失败", error);
  }
};

//这是修改众筹人数的接口
const targetNumberNew = ref({});
const putTargetNumber = async function () {
  try {
    // 创建一个FormData对象
    const formData = new FormData();
    // 将titleNew中的数据添加到FormData对象中
    for (const key in targetNumberNew.value) {
      formData.append(key, targetNumberNew.value[key]);
    }
    const result = await axios.put(
      "http://192.168.9.117:8092/target",
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );
    if (result.data.code == 10000) {
      ElMessage.success("修改成功");
      raiseEdit.value = false;
      targetNumberNew.value = {};
      getInfo(); //刷新页面
    }
    if (result.data.code == 10001) {
      ElMessage.error(result.data.msg);
      targetNumberNew.value = {};
      raiseEdit.value = false;
    }
  } catch (error) {
    console.log("请求失败", error);
  }
};

//这是查询全部数据的接口
const search = ref({
  jwcode: "",
  identity: "",
});
const tableData = ref([]);
const get = async function () {
  try {
    const result = await axios.post(
      "http://192.168.9.117:8092/users",
      search.value
    );
    tableData.value = result.data.data;
  } catch (error) {
    console.log("请求失败", error);
  }
};
get();

//这是添加的接口
const add = ref({});
const addUser = async function () {
  try {
    const result = await axios.post(
      "http://192.168.9.117:8092/addUser",
      add.value
    );
    if (result.data.code == 10000) {
      ElMessage.success("修改成功");
      addInfo.value = false;
      add.value = {};
      get(); //刷新页面
    }
    if (result.data.code == 10001) {
      ElMessage.error(result.data.msg);
      addInfo.value = false;
      add.value = {};
    }
  } catch (error) {
    console.log("请求失败", error);
  }
};

// 这是删除的接口
const idname = ref("");
function deleteRow(value) {
  deleteInfo.value = true;
  console.log(value);
  idname.value = value;
}
const tureDelete = async function () {
  try {
    const result = await axios.delete(
      "http://192.168.9.117:8092/delUser/" + idname.value
    );
    if (result.data.code == 10000) {
      ElMessage.success("修改成功");
      deleteInfo.value = false;
      idname.value = {};
      get(); //刷新页面
    }
    if (result.data.code == 10001) {
      ElMessage.error(result.data.msg);
      deleteInfo.value = false;
      idname.value = {};
    }
  } catch (error) {
    console.log("请求失败", error);
  }
};

// 这是条件查询的接口
const searchBy = ref({
  jwcode: "",
  identity: "",
});
const searchByJwcodeAndIdentity = async function () {
  try {
    const result = await axios.post(
      "http://192.168.9.117:8092/users",
      searchBy.value
    );
    if (result.data.code == 10000) {
      ElMessage.success("查询成功");
      searchBy.value = {};
    }
    if (result.data.code == 10001) {
      ElMessage.error(result.data.msg);
      searchBy.value = {};
    }
    tableData.value = result.data.data;
  } catch (error) {
    console.log("请求失败", error);
  }
};
function Nono() {
  searchBy.value = {};
  get();
}
</script>

<template>
  <el-container>
    <el-main style="width: 100%">
      <el-card style="min-width: 70%; margin: 0 auto">
        <h2 style="margin-top: 0%">众筹活动界面后台</h2>
        <h3>修改前台展示</h3>
        <el-divider style="margin-top: 0%" />
        <div style="display: flex; align-items: center">
          <h4 style="margin: 0%">当前标题:</h4>
          <span style="color: rgb(145, 145, 145); margin-left: 20px">{{
            info.title
          }}</span>
          <el-button
            class="xiugai"
            type="danger"
            style="
              display: inline-block;
              margin-left: 20px;
              color: rgb(245, 62, 62);
            "
            @click="titleEdit = true"
            >修改</el-button
          >
        </div>
        <div style="display: flex; align-items: center">
          <h4 style="margin-bottom: 0px; margin-top: 30px">众筹目标:</h4>
          <span
            style="
              margin-bottom: 0px;
              margin-top: 30px;
              margin-left: 20px;
              color: rgb(145, 145, 145);
            "
            >{{ info.targetNumber }}人</span
          >
          <el-button
            class="xiugai"
            type="danger"
            style="
              display: inline-block;
              margin-left: 20px;
              margin-top: 30px;
              color: rgb(245, 62, 62);
            "
            @click="raiseEdit = true"
            >修改</el-button
          >
        </div>
      </el-card>
      <el-card style="min-width: 70%; margin: 0 auto; margin-top: 20px">
        <h3>众筹用户列表</h3>
        <el-button type="danger" @click="addInfo = true">添加</el-button>
        <el-input
          v-model="searchBy.jwcode"
          style="width: 150px; margin-left: 200px"
          placeholder="精网号"
        ></el-input>
        <el-select
          v-model="searchBy.identity"
          style="width: 100px; margin-left: 60px"
          placeholder="身份"
        >
          <el-option label="真实" value="1"></el-option>
          <el-option label="虚拟" value="0"></el-option>
        </el-select>

        <el-button type="" @click="Nono()" style="margin-left: 40px"
          >重置</el-button
        >
        <el-button type="danger" @click="searchByJwcodeAndIdentity()"
          >查询</el-button
        >
        <el-table :data="tableData">
          <el-table-column
            prop="id"
            label="序号"
            width="300px"
          ></el-table-column>
          <el-table-column
            prop="jwcode"
            label="编号"
            width="300px"
          ></el-table-column>
          <el-table-column prop="identity" label="身份" width="300px">
            <!-- 模板内容 -->
            <template #default="scope">
              <span v-if="scope.row.identity == 1">
                <span>真实</span>
              </span>
              <span v-if="scope.row.identity == 0">
                <span>虚拟</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="creatTime" label="参与时间" width="700px">
            <template #default="scope">
              {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="px">
            <template #default="scope">
              <el-button
                @click="deleteRow(scope.row.jwcode)"
                type="text"
                style="color: rgb(245, 62, 62)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>

  <!-- 这是添加的弹窗 -->
  <el-dialog v-model="addInfo" width="500">
    <div>
      <h3 style="display: inline-block; margin-right: 20px">精网号</h3>
      <el-input
        v-model="add.jwcode"
        placeholder="请输入精网号"
        style="width: 300px; display: inline-block"
      />
    </div>
    <div>
      <h3 style="display: inline-block; margin-right: 20px">身份</h3>
      <el-radio-group v-model="add.identity">
        <el-radio value="1" size="large">真实</el-radio>
        <el-radio value="0" size="large">虚拟</el-radio>
      </el-radio-group>
    </div>
    <el-button type="danger" @click="addUser()" style="margin-left: 400px"
      >添加</el-button
    >
  </el-dialog>

  <!-- 这是修改表题的弹窗 -->
  <el-dialog v-model="titleEdit" width="500">
    <div>
      <h3 style="display: inline-block; margin-right: 20px">输入新标题</h3>
      <el-input
        v-model="titleNew.title"
        placeholder="请输入新标题"
        style="width: 300px; display: inline-block"
      />
    </div>
    <el-button type="danger" @click="putTitle()" style="margin-left: 400px"
      >确定</el-button
    >
  </el-dialog>

  <!-- 这是修改众筹目标的弹窗 -->
  <el-dialog v-model="raiseEdit" width="500">
    <div>
      <h3 style="display: inline-block; margin-right: 20px">
        输入新众筹目标为
      </h3>
      <el-input
        v-model="targetNumberNew.targetNumber"
        placeholder="请输入阿拉伯数字"
        style="width: 300px; display: inline-block"
      />
    </div>
    <el-button
      type="danger"
      @click="putTargetNumber()"
      style="margin-left: 400px"
      >确定</el-button
    >
  </el-dialog>

  <!-- 这是删除的弹窗 -->
  <el-dialog v-model="deleteInfo" width="500">
    <div>
      <h3 style="display: inline-block; margin-right: 20px">
        确认删除该条信息
      </h3>
    </div>
    <el-button type="danger" @click="tureDelete()" style="margin-left: 400px"
      >确定</el-button
    >
  </el-dialog>
</template>

<style scoped>
/* 移除 el-button 的默认样式 */
.xiugai {
  border: none;
  background-color: transparent;
  color: #409eff; /* Element Plus 默认的主题色 */
  padding: 0;
  font-size: inherit; /* 继承父元素的字体大小 */
}
</style>