src/views/admin/clientVersion/index.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>授课端版本管理</span>
      </template>
      <template slot="btns">
        <el-tooltip effect="dark" content="添加版本" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            plain
            circle
            @click="openAddDia"
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="table-box">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="md5"
          label="MD5编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="versionName"
          label="版本名称"
          align="center"
        ></el-table-column>
        <el-table-column
          width="80"
          prop="versionNumber"
          label="版本号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdTime"
          label="上传时间"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="fileSize"
          label="文件大小"
          align="center"
        ><template slot-scope="scoped">{{setSize(scoped.row.fileSize)}}</template></el-table-column>
        <el-table-column
          prop="description"
          label="更新描述"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scoped">
            <el-popconfirm title="确定删除吗？" @confirm="remove(scoped.row)">
              <span class="del" slot="reference">删除</span>
            </el-popconfirm>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination-box">
        <el-pagination
          layout="total,prev, pager, next"
          :hide-on-single-page="true"
          :total="total"
          @current-change="changePage"
          :current-page="page"
          :page-size="size"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="添加账号"
      :visible.sync="diaAdd"
      v-if="diaAdd"
      width="400"
    >
      <el-form
        class="form-box"
        :model="formAdd"
        :rules="ruleAdd"
        ref="formAdd"
        label-width="160px"
      >
        <el-form-item label="应用名称：" prop="versionName">
          <el-col :span="12">
            <el-input
              placeholder="请输入应用名称"
              v-model.trim="formAdd.appName"
              maxlength="30"
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="版本名称：" prop="versionName">
          <el-col :span="12">
            <el-input
              placeholder="请输入版本名称"
              v-model.trim="formAdd.versionName"
              maxlength="30"
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="版本号：">
          <el-col :span="12">
            <el-input
              placeholder="请输入版本号"
              v-model.trim="formAdd.versionNumber"
              maxlength="30"
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="软件图标：">
          <el-col :span="12">
            <upLoadImg url="/file/uploadImg" @upSuccess="logoSuccess" />
          </el-col>
        </el-form-item>
        <el-form-item label="上传全量文件包：" prop="filePath">
          <el-col :span="12">
            <upLoad :url="url" @upSuccess="appfilesSuccess" />
          </el-col>
        </el-form-item>
        <el-form-item label="上传增量文件包：" prop="incrementFilePath">
          <el-col :span="12">
            <upLoad :url="url" @upSuccess="addfilesSuccess" />
          </el-col>
        </el-form-item>
        <el-form-item label="更新描述：" prop="description">
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="3"
              v-model="formAdd.description"
              placeholder="填写描述"
            ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="save">确 定</el-button>
        <el-button @click="diaAdd = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import upLoad from "./components/upLoad.vue";
import upLoadImg from "./components/upLoadImg.vue";
export default {
  components: {
    upLoad,
    upLoadImg,
  },
  data() {
    return {
      url: "/file/uploadApp",
      loading: false,
      addLoading: false,
      diaAdd: false,
      tableData: [],
      formAdd: {
        appName: "",
        versionName: "",
        versionNumber: "",
        appImage: "",
        md5: "",
        fileSize: "",
        filePath: "",
        incrementMd5: "",
        incrementFileSize: "",
        incrementFilePath: "",
        description: "",
      },
      ruleAdd: {
        appName: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
        versionName: [
          { required: true, message: "请输入版本名称", trigger: "blur" },
        ],
        filePath: [
          { required: true, message: "请上传全量文件包", trigger: "blur" },
        ],
        // incrementFilePath: [
        //   { required: true, message: "请上传增量文件包", trigger: "blur" },
        // ],
      },
      page: 1,
      size: 20,
      total: 0,
    };
  },
  created() {
    this._QueryData();
  },
  methods: {
    setSize(size){
      let fileSize = (size/1024/1224).toFixed(2)
      return `${fileSize}MB`
    },
    openAddDia() {
      for (let key in this.formAdd) {
        this.formAdd[key] = "";
      }
      this.diaAdd = true;
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async remove(obj) {
      const { data, status, info } = await this.$request.delVersion({
        id: obj.id,
      });
      if (status === 0) {
        this.$message.success("删除成功～");
        this._QueryData();
      } else {
        this.$message.error(info);
      }
    },
    logoSuccess(res) {
      this.formAdd.appImage = res.data.resId;
    },
    appfilesSuccess(res) {
      this.formAdd.md5 = res.data.md5;
      this.formAdd.fileSize = res.data.size;
      this.formAdd.filePath = res.data.resId;
    },
    addfilesSuccess(res) {
      this.formAdd.incrementMd5 = res.data.md5;
      this.formAdd.incrementFileSize = res.data.size;
      this.formAdd.incrementFilePath = res.data.resId;
    },
    async save() {
      this.$refs.formAdd.validate(async (valid) => {
        if (valid) {
          if (this.addLoading) return;
          this.addLoading = true;
          const { data, status, info } = await this.$request.addVersion({
            ...this.formAdd,
          });
          this.addLoading = false;
          if (status === 0) {
            this.diaAdd = false;
            this.$message.success("添加成功～");
            this._QueryData();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.warning("必填项不能为空，请检查。");
        }
      });
    },
    async _QueryData() {
      this.loading = true;
      this.tableData = [];
      const { data, status, info } = await this.$request.versionPage({
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = data.list || [];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table-box {
  padding: 20px;
}
.del {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
</style>