management/src/views/system/version/index.vue

<template>
  <div class="app-container">
    <div class="head-container">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input
            v-model="query.version"
            size="small"
            clearable
            placeholder="请输入版本号"
            style="width: 100%"
            class="filter-item"
            @keyup.enter.native="getTableData"
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="queryHandle">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="head-container">
      <el-row>
        <el-col>
          <el-button @click="addVersionShow" type="primary" icon="el-icon-plus"
            >新增版本</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="head-container" id="table_drag">
      <el-table
        ref="table"
        :data="tableData.data"
        v-loading="tableData.loading"
        row-key="id"
      >
        <el-table-column prop="id" label="ID" width="50px"></el-table-column>
        <el-table-column prop="source" label="平台"></el-table-column>
        
        <el-table-column prop="version" label="版本号"></el-table-column>
        <el-table-column label="当前选中版本" prop="sel">
          <template v-slot="scope">
            <el-switch
            v-if="scope.row.sel"
            disabled
             @change="changeSel($event, scope.row)"
              v-model="scope.row.sel"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
            <el-switch
            v-else
             @change="changeSel(scope.row)"
              v-model="scope.row.sel"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否强制更新" prop="createdAt">
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.isUp"
              :active-value="1"
              :inactive-value="0"
              @change="changeIsup($event, scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="更新提示内容" prop="message"> </el-table-column>

        <el-table-column label="下载地址" prop="url">
          <template v-slot="scope">
            <a class="a" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
          </template>
        </el-table-column>

   
        <el-table-column label="创建时间" prop="createdAt">
          <template v-slot="scope">
            {{ dayjs(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updatedAt">
          <template v-slot="scope">
            <span v-if="scope.row.updatedAt">{{
              dayjs(scope.row.updatedAt).format("YYYY-MM-DD HH:mm:ss")
            }}</span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button type="text" @click="editClick(scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="delTableHandle([scope.row.id])"
            >
              <el-button
                type="text"
                icon="el-icon-delete"
                style="margin-left: 20px !important"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        @size-change="handleSizeChange"
        :current-page="tableData.page + 1"
        :page-size="tableData.size"
        @current-change="paginationChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <add-version ref="refAddVersion" @success="refresh"></add-version>
  </div>
</template>
  
  <script>
import dayjs from "dayjs";
import { $version,$upSel } from "@/api/version";
import addVersion from "./components/add-version";
export default {
  components: {  addVersion },
  data() {
    return {
      dayjs,
      query: {
        version: "",
      },
      categorys: [],
      tableData: {
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0,
      },
    };
  },
  async mounted() {
    await this.getTableData();
  },
  methods: {
   
    addVersionShow() {
      this.$refs.refAddVersion.show();
    },
    editClick(item){
        this.$refs.refAddVersion.show(item);
    },
    // 选择分类
    queryHandle() {
      localStorage.setItem("shopIndexQuery", JSON.stringify(this.query));
      this.getTableData();
    },
    async changeIsup(e,item){
        const res= await $version.update(item)
        this.getTableData()
    },
    async changeSel(item){
        const res= await $upSel(item)
        this.getTableData()
    },
   
    // 重置查询
    resetHandle() {
      this.query.version = "";
      this.tableData.page = 0;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    refresh(){
        this.tableData.page=0
        this.getTableData()
    },
    // 获取商品列表
    async getTableData() {
      try {
        this.tableData.loading = true;
        const res = await $version.get({
          page: this.tableData.page,
          pageSize: this.tableData.size,
          version: this.query.version,
        });
        this.tableData.loading = false;
        this.tableData.data = res.content;
        this.tableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      this.tableData.size = val;
      this.getTableData();
    },
    // 删除商品
    async delTableHandle(ids) {
      try {
        await $version.del(ids);
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.handle {
  font-size: 18px;
  color: #999;

  &:hover {
    cursor: grab;
  }
}
.a{
  color: #409eff;
  text-decoration: underline;
}
 a:focus, a:hover{
  opacity: .7;
}
.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}
</style>