webTest/src/views/book/create.vue

<template>
  <div>
    <vxe-input v-model="searchV" placeholder="模糊搜索名称" type="search" @search-click="search"></vxe-input>
    <vxe-input v-model="searchDate" placeholder="日期类型" type="date"></vxe-input>
    <vxe-input v-model="searchGte" placeholder="日期类型" type="date"></vxe-input>
    <vxe-input v-model="searchLte" placeholder="日期类型" type="date"></vxe-input>
    <vxe-button type="text" status="primary" @click="qjSera">区间搜索</vxe-button>
    <vxe-toolbar perfect>
      <template v-slot:buttons>
        <vxe-button icon="el-icon-delete" status="perfect" @click="deleteData">删除</vxe-button>
        <vxe-button icon="el-icon-position" status="perfect" @click="updateData">编辑</vxe-button>
        <vxe-button icon="el-icon-plus" status="perfect" @click="addData">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-overflow
      row-id="id"
      size="medium"
      :data="tableData"
      @radio-change="radioChangeEvent"
    >
      <vxe-table-column type="radio" width="60" />
      <vxe-table-column type="seq" field="序号" width="60" />
      <vxe-table-column field="name" title="书名" />
      <vxe-table-column field="ISBN" title="编码" />
      <vxe-table-column field="type" title="类型"></vxe-table-column>
      <vxe-table-column field="author" title="作者">
        <template v-slot="{row}">
          <el-tag v-for="author in row.author" :key="author.id">{{author.author__name}}</el-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column field="price" title="价格" />
      <vxe-table-column field="release_time" title="出版日期" />
    </vxe-table>

    <vxe-modal
      v-model="modelVisi"
      width="600"
      :title="modelTitle"
      show-footer
      @close="close"
      resize
      @confirm="submitEvent"
    >
      <vxe-form ref="xForm" title-align="right" title-width="100" :data="formData">
        <vxe-form-item title="书名" field="name" span="24">
          <template v-slot="scope">
            <vxe-input
              v-model="formData.name"
              placeholder="请输入书名"
              clearable
              @input="$refs.xForm.updateStatus(scope)"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="ISBN" field="ISBN" span="24">
          <template v-slot="scope">
            <vxe-input
              v-model="formData.ISBN"
              placeholder="请输入ISBN"
              clearable
              @input="$refs.xForm.updateStatus(scope)"
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="类型" field="type" span="24">
          <template v-slot>
            <vxe-select v-model="formData.type" clearable>
              <vxe-option v-for="t in types" :key="t.id" :value="t.id" :label="t.name"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="作者" field="type" span="24">
          <template v-slot>
            <vxe-select v-model="formData.author" multiple clearable>
              <vxe-option
                v-for="user in authors"
                :key="user.id"
                :value="user.id"
                :label="user.name"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="价格" field="type" span="24">
          <template v-slot>
            <vxe-input v-model="formData.price" placeholder="请输入价格" type="number"></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="出版日期" field="type" span="24">
          <template v-slot>
            <vxe-input v-model="formData.release_time" placeholder="日期类型" type="date" />
          </template>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>

    <!-- <vxe-pager
      border
      size="medium"
      :loading="loading2"
      :current-page="tablePage2.currentPage"
      :page-size="tablePage2.pageSize"
      :total="tablePage2.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      @page-change="handlePageChange2"
    ></vxe-pager>-->
  </div>
</template>

<script>
import {
  getBook,
  postBook,
  getAuthor,
  deleteBook,
  putBook,
  getType,
} from "@/api/book";

export default {
  name: "book-c",
  data() {
    return {
      tableData: [],
      radioId: null,
      modelVisi: false,
      modelTitle: "",
      formData: {
        ISBN: "",
        author: [],
        name: "",
        price: 0,
        release_time: "",
        type: [],
      },
      authors: [],
      types: [],
      searchV: "",
      searchDate: "",
      searchGte: "",
      searchLte: "",
    };
  },
  components: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getBookDate({});
      getAuthor().then((res) => {
        console.log("获取作者信息");
        console.log(res.data);
        if (res.data.length > 0) {
          console.log("getAuthor");
          console.log(res.data);
          this.authors = res.data;
        }
      });
      getType().then((res) => {
        this.types = res.data;
      });
    },
    getBookDate(par) {
      getBook(par).then((res) => {
        console.log(res.data);
        if (res.data.length > 0) {
          console.log("getBook");
          console.log(res.data);
          this.tableData = res.data;
        }
      });
    },
    radioChangeEvent(row) {
      console.log("单击事件");
      console.log(row.rowid);
      this.radioId = row.rowid;
    },
    addData() {
      console.log("新增按钮");
      this.modelVisi = true;
      this.modelTitle = "新增";
    },
    submitEvent() {
      console.log("模态框的按钮");
      console.log(this.formData);
      if (this.radioId == null) {
        postBook(this.formData).then((res) => {
          if (res.status === 200) {
            this.$message.success("新增图书成功");
            this.getBookDate();
          }
        });
      } else {
        putBook(this.radioId, this.formData).then((res) => {
          if (res.status === 200) {
            this.getBookDate();
          }
        });
      }
      this.close();
    },
    deleteData() {
      deleteBook(this.radioId).then((res) => {
        if (res.status === 204) {
          this.$message.success("删除图书成功");
          this.getBookDate();
        }
      });
    },
    updateData() {
      getBook(this.radioId).then((res) => {
        if (res.status === 200) {
          this.modelVisi = true;
          console.log("获取一个图书信息");
          console.log(res);
          let au = [];
          for (let v of res.data.author) {
            au.push(v.author_id);
          }
          res.data.author = au;
          this.formData = res.data;
        }
      });
    },
    close() {
      console.log("关闭");
      this.radioId = null;
      this.formData = {
        ISBN: "",
        author: [],
        name: "",
        price: 0,
        release_time: "",
        type: 1,
      };
    },
    search() {
      this.getBookDate({
        name__contains: this.searchV,
      });
    },
    qjSera() {
      this.getBookDate({
        release_time__gte: this.searchGte,
        release_time__lte: this.searchLte,
      });
    },
  },
  watch: {
    searchDate(vd) {
      let d = vd.split("-");
      this.getBookDate({
        release_time__year: d[0],
        release_time__month: d[1],
        release_time__day: d[2],
      });
    },
  },
};
</script>