apps.vue 12.8 KB
Newer Older
wanli's avatar
wanli committed
1 2 3
<template>
  <div class="app-container">
    <el-form :inline="true" ref="form" :model="form" size="mini">
wanli's avatar
wanli committed
4 5 6 7 8
      <el-form-item
        ><el-button type="warning" @click="onAdd"
          >添加应用</el-button
        ></el-form-item
      >
wanli's avatar
wanli committed
9 10
    </el-form>
    <el-table
wanli's avatar
wanli committed
11
      :data="list"
wanli's avatar
wanli committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
      v-loading="isLoading"
      element-loading-text="Loading"
      size="mini"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column
        prop="app_name"
        label="应用名称"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="app_version"
        label="应用版本号"
        width="150"
      ></el-table-column>
wanli's avatar
wanli committed
30 31 32 33 34
      <el-table-column
        prop="category"
        label="应用类别"
        width="120"
      ></el-table-column>
wanli's avatar
wanli committed
35 36 37 38 39
      <el-table-column
        prop="epk_size"
        label="应用大小"
        width="120"
      ></el-table-column>
wanli's avatar
wanli committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
      <el-table-column
        prop="app_desc"
        label="应用描述"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="create_at"
        label="创建时间"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="create_by.username"
        label="创建者"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="update_at"
        label="更新时间"
        width="150"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="update_by.username"
        label="更新者"
        width="150"
      ></el-table-column>
wanli's avatar
wanli committed
66 67 68
      <el-table-column
        label="操作"
        align="center"
69
        min-width="260"
wanli's avatar
wanli committed
70 71
        fixed="right"
      >
wanli's avatar
wanli committed
72
        <template slot-scope="scope">
73 74 75 76 77 78
          <el-button
            size="mini"
            type="success"
            @click="handleRebuild(scope.$index, scope.row)"
            >重新打包</el-button
          >
wanli's avatar
wanli committed
79
          <el-button
wanli's avatar
wanli committed
80 81 82
            size="mini"
            type="primary"
            @click="handleBuild(scope.$index, scope.row)"
wanli's avatar
wanli committed
83
            >下载应用</el-button
wanli's avatar
wanli committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-wrapper">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="form.pagenum"
        background
        small
        :page-size="form.pagesize"
        :pager-count="5"
        layout="pager, prev, next, total"
        :total="total"
      ></el-pagination>
    </div>
wanli's avatar
wanli committed
106
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
wanli's avatar
wanli committed
107 108 109 110 111 112 113
      <el-form
        :model="post"
        status-icon
        ref="post"
        size="medium"
        label-width="100px"
      >
wanli's avatar
wanli committed
114
        <el-form-item label="应用排序" prop="sort">
wanli's avatar
wanli committed
115 116 117 118 119
          <el-input
            type="number"
            v-model.number="post.sort"
            autocomplete="off"
          ></el-input>
wanli's avatar
wanli committed
120
        </el-form-item>
wanli's avatar
wanli committed
121
        <el-form-item label="应用名称" prop="app_name">
wanli's avatar
wanli committed
122 123 124 125 126
          <el-input
            type="text"
            v-model="post.app_name"
            autocomplete="off"
          ></el-input>
wanli's avatar
wanli committed
127 128
        </el-form-item>
        <el-form-item label="应用版本号" prop="app_version">
wanli's avatar
wanli committed
129 130 131 132 133
          <el-input
            type="text"
            v-model="post.app_version"
            autocomplete="off"
          ></el-input>
wanli's avatar
wanli committed
134 135
        </el-form-item>
        <el-form-item label="应用类别" prop="category">
wanli's avatar
wanli committed
136 137 138 139 140
          <el-input
            type="text"
            v-model="post.category"
            autocomplete="off"
          ></el-input>
wanli's avatar
wanli committed
141 142
        </el-form-item>
        <el-form-item label="应用描述" prop="app_desc">
wanli's avatar
wanli committed
143 144 145 146 147
          <el-input
            type="text"
            v-model="post.app_desc"
            autocomplete="off"
          ></el-input>
wanli's avatar
wanli committed
148
        </el-form-item>
wanli's avatar
wanli committed
149
        <el-form-item label="应用Logo" prop="app_icon">
wanli's avatar
wanli committed
150 151
          <el-upload
            class="avatar-uploader"
wanli's avatar
wanli committed
152 153 154 155 156 157 158 159 160
            ref="logo"
            name="logo"
            accept="image/*"
            action="null"
            :auto-upload="false"
            :http-request="handleUploadLogo"
            :on-remove="handleLogoRemove"
            :on-change="handleLogoChange"
            :before-upload="beforeLogoUpload"
wanli's avatar
wanli committed
161 162 163 164 165 166 167 168 169
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="应用文件" prop="app_files">
          <el-upload
            drag
            multiple
wanli's avatar
wanli committed
170 171 172 173 174 175
            ref="upload"
            name="binfiles"
            action="null"
            :auto-upload="false"
            :http-request="handleUploadFile"
            :on-remove="handleUploadRemove"
wanli's avatar
wanli committed
176 177 178 179 180 181
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处,或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
wanli's avatar
wanli committed
182 183 184
              <el-button size="small" type="text" @click="clear"
                >清空上传</el-button
              >
wanli's avatar
wanli committed
185 186 187 188 189
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
wanli's avatar
wanli committed
190 191 192 193 194 195 196 197 198 199
        <el-button
          type="primary"
          size="medium"
          plain
          @click="submitForm('post')"
          >提交</el-button
        >
        <el-button type="success" size="medium" plain @click="onReset('form')"
          >重置</el-button
        >
wanli's avatar
wanli committed
200
        <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
wanli's avatar
wanli committed
201 202 203 204 205
      </div>
    </el-dialog>
  </div>
</template>
<script>
wanli's avatar
wanli committed
206 207 208 209
import {
  getAppsList,
  deleteApp,
  addApp,
210
  rebuildApp,
wanli's avatar
wanli committed
211 212 213
  updateApp,
  getBuildApp,
} from "@/api/app-store";
wanli's avatar
wanli committed
214
import { mapTrim, download } from "@/utils/index";
wanli's avatar
wanli committed
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234

export default {
  name: "AppIndex",
  data() {
    return {
      imageUrl: "",
      total: 0,
      list: [],
      isLoading: false,
      form: {
        uuid: null,
        name: null,
        pagesize: 15,
        pagenum: 1,
      },
      currentIndex: 0,
      currentValue: null,
      dialogTitle: "",
      dialogVisible: false,
      post: {
wanli's avatar
wanli committed
235
        sort: 0,
wanli's avatar
wanli committed
236 237
        app_name: "evue_launcher",
        app_version: "1.0",
wanli's avatar
wanli committed
238
        app_icon: null,
wanli's avatar
wanli committed
239 240
        category: "tools",
        app_desc: "启动器",
wanli's avatar
wanli committed
241
        app_files: [],
wanli's avatar
wanli committed
242 243
        logo: null,
        fileList: [],
wanli's avatar
wanli committed
244 245 246 247 248 249 250
      },
    };
  },
  computed: {
    window: () => window,
  },
  methods: {
wanli's avatar
wanli committed
251
    clear() {
wanli's avatar
wanli committed
252 253
      this.imageUrl = null;
      this.post.app_icon = null;
wanli's avatar
wanli committed
254
      this.post.app_files = [];
wanli's avatar
wanli committed
255
      this.$refs.upload.clearFiles();
wanli's avatar
wanli committed
256
      this.$refs.logo.clearFiles();
wanli's avatar
wanli committed
257
    },
wanli's avatar
wanli committed
258 259 260 261 262
    fetchData(params) {
      this.isLoading = true;
      getAppsList(params)
        .then((res) => {
          this.total = res.count;
wanli's avatar
wanli committed
263 264 265
          this.list = res.data.map((item) => {
            if (item.app_build_log && item.app_build_log.app_info)
              item.epk_size =
wanli's avatar
wanli committed
266 267
                (item.app_build_log.app_info.buff_length / 1024).toFixed(2) +
                "KB";
wanli's avatar
wanli committed
268 269 270
            else item.epk_size = "";
            return item;
          });
wanli's avatar
wanli committed
271 272 273 274 275 276 277 278 279
        })
        .catch((err) => {
          console.log(err.message);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleSizeChange(e) {
wanli's avatar
wanli committed
280 281
      this.form.pagesize = e;
      this.fetchData(mapTrim(this.form));
wanli's avatar
wanli committed
282 283
    },
    handleCurrentChange(e) {
wanli's avatar
wanli committed
284 285
      this.form.pagenum = e;
      this.fetchData(mapTrim(this.form));
wanli's avatar
wanli committed
286
    },
287
    handleRebuild(index, row) {
wanli's avatar
wanli committed
288 289 290
      rebuildApp({ uuid: row.uuid })
        .then((res) => {
          this.$message.success(res.message);
wanli's avatar
wanli committed
291
        })
wanli's avatar
wanli committed
292 293 294
        .catch((err) => {
          this.$message.error(err.message);
        });
295 296
    },
    handleBuild(index, row) {
wanli's avatar
wanli committed
297 298 299 300 301 302 303
      getBuildApp(row.uuid)
        .then((res) => {
          download(`${res.data.app_name}.epk`, res.data.app_path);
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err.message);
wanli's avatar
wanli committed
304
        });
wanli's avatar
wanli committed
305 306
    },
    handleEdit(index, row) {
wanli's avatar
wanli committed
307 308 309 310 311 312
      this.post = Object.assign(row);
      this.imageUrl = null;
      this.currentIndex = index;
      this.currentValue = row;
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
wanli's avatar
wanli committed
313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
    },
    handleDelete(index, row) {
      this.$alert(
        "您确定要删除么?删除操作将不可恢复。如需取消操作,请点击右上角关闭按钮。",
        "删除提醒",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action == "confirm")
              deleteApp(row.uuid)
                .then((res) => {
                  console.log(res);
                  this.total -= 1;
                  this.$delete(this.list, index);
                  this.$message({
                    type: "success",
                    message: `成功删除第${index}行`,
                  });
                })
                .catch((err) => {
                  this.$message.error(err.message);
                });
          },
        }
      );
    },
wanli's avatar
wanli committed
339 340
    handleUploadLogo(file) {
      this.post.logo = file;
wanli's avatar
wanli committed
341
    },
wanli's avatar
wanli committed
342 343
    handleUploadFile(file) {
      this.post.fileList.push(file);
wanli's avatar
wanli committed
344
    },
wanli's avatar
wanli committed
345 346
    handleUploadRemove(file, fileList) {
      console.log(file, fileList);
wanli's avatar
wanli committed
347 348 349 350
      for (let i = 0; i < this.post.app_files.length; i++) {
        if (this.post.app_files[i].uuid == file.response.data.uuid) {
          this.post.app_files.splice(i, 1);
          break;
wanli's avatar
wanli committed
351
        }
wanli's avatar
wanli committed
352
      }
wanli's avatar
wanli committed
353
    //   this.post.app_files = fileList;
wanli's avatar
wanli committed
354
    },
wanli's avatar
wanli committed
355 356 357 358 359 360 361 362 363 364 365 366 367 368 369
    handleLogoChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeLogoUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleLogoRemove(file) {
      console.log(file);
      this.imageUrl = null;
      this.post.logo = file.file;
wanli's avatar
wanli committed
370
    },
wanli's avatar
wanli committed
371 372 373 374
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        let result = true;
        if (valid) {
wanli's avatar
wanli committed
375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394
          if (this.dialogTitle === "添加") {
            this.$refs.upload.submit(); // 调用这个upload组件该方法才会执行http-request回调
            this.$refs.logo.submit();

            let formData = new FormData();
            this.post.fileList.forEach(item => {
                formData.append("fileList", item.file)
            });
            formData.append("logo", this.post.logo.file)
            Object.keys(this.post).forEach(k => {
                if (this.post[k] && typeof this.post[k] !== "object") {
                    formData.append(k, this.post[k])
                }
            });

            addApp(formData).then((res) => {
                this.$message({
                  type: "success",
                  message: `添加成功:${res.message}`,
                });
wanli's avatar
wanli committed
395 396 397 398
                this.fetchData(mapTrim(this.form));
              })
              .catch((err) => {
                this.$message.error(err.message);
wanli's avatar
wanli committed
399 400 401
              });              
          }
          else if (this.dialogTitle === "编辑") {
wanli's avatar
wanli committed
402 403 404
            updateApp(this.currentValue.uuid, this.post)
              .then((res) => {
                // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
wanli's avatar
wanli committed
405 406 407 408
                this.$message({
                  type: "success",
                  message: `更新成功:${res.message}`,
                });
wanli's avatar
wanli committed
409 410 411 412 413
                this.fetchData(mapTrim(this.form));
              })
              .catch((err) => {
                this.$message.error(err.message);
              });
wanli's avatar
wanli committed
414
          }
wanli's avatar
wanli committed
415 416 417 418 419 420
        } else {
          result = false;
        }
        this.dialogVisible = false;
        return result;
      });
wanli's avatar
wanli committed
421
    },
wanli's avatar
wanli committed
422
    onAdd() {
wanli's avatar
wanli committed
423 424 425 426
      setTimeout(() => { this.clear(); }, 100);
      this.post.sort = this.form.pagesize * (this.form.pagenum - 1) + this.list.length + 1;
      this.dialogTitle = "添加";
      this.dialogVisible = true;
wanli's avatar
wanli committed
427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445
    },
    onSubmit() {
      this.form.pagenum = 1;
      this.form.pagesize = 15;
      this.fetchData(mapTrim(this.form));
    },
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.form.pagesize = 15;
      this.form.pagenum = 1;
      this.fetchData(mapTrim(this.form));
    },
  },
  mounted() {},
  created() {
    this.fetchData(mapTrim(this.form));
  },
};
</script>
wanli's avatar
wanli committed
446
<style lang="scss" scoped>
wanli's avatar
wanli committed
447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>