index.vue 6.44 KB
<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
          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"
        ></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" 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.versionName"
              maxlength="30"
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="版本号:" prop="versionNumber">
          <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="软件图标:" prop="logo">
          <el-col :span="12">
             <upLoadImg :url="url" @upSuccess="logoSuccess"/>
          </el-col>
        </el-form-item>
        <el-form-item label="上传全量文件包:" prop="appfiles">
          <el-col :span="12">
            <upLoad :url="url" @upSuccess="appfilesSuccess"/>
          </el-col>
        </el-form-item>
        <el-form-item label="上传增量文件包:" prop="addfiles">
          <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,
      diaAdd: false,
      tableData: [
        {
          schoolName: "111",
        },
      ],
      formAdd: {
        versionName: "",
        versionNumber: "",
        appImage: "",
        filePath: "",
        incrementFilePath: "",
        description: "",
      },
      ruleAdd: {
        versionName: [
          { required: true, message: "请输入版本名称", trigger: "blur" },
        ],
        versionNumber: [
          { required: true, message: "请输入版本号", trigger: "blur" },
        ],
        appImage: [
          { 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: {
    openAddDia() {
      this.formAdd.versionName = "";
      this.formAdd.versionNumber = "";
      this.formAdd.appImage = "";
      this.formAdd.filePath = "";
      this.formAdd.incrementFilePath = "";
      this.formAdd.description = "";
      this.diaAdd = true;
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    remove(obj) {},
    logoSuccess(res){
      this.formAdd.appImage = res.data;
    },
    appfilesSuccess(res){
      this.formAdd.filePath = res.data;
    },
    addfilesSuccess(res){
      this.formAdd.incrementFilePath = res.data;
    },
    save() {},
    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>