epmet-oper-pc/epmet-oper-web/src/views/modules/sys/upgrade-version-history.vue

<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">

      <!-- 按钮 -->
      <div class="btn-group">
        <el-button type="primary" @click="onAddBtnClick">新增</el-button>
        <el-button type="primary" @click="onEditBtnClick">修改</el-button>
      </div>

      <!-- 数据列表 -->
      <div>
        <el-table :data="histories" border style="width: 100%">
          <el-table-column
              prop="versionNo"
              label="版本">
          </el-table-column>
          <el-table-column label="操作" :width="250">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="onEditBtnClick(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <!-- 分页条-->
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="onCurrentPageChanged"
          :current-page="this.pageArgs.pageNo"
          :page-size="this.pageArgs.pageSize"
          :total="this.pageArgs.total">
      </el-pagination>

      <!--      <Tinymce
                v-model="createOrUpdateForm.richContent"
                :width="450"
                :height="500"
            />-->
    </el-card>

    <!-- 新增/修改 -->
    <el-dialog :visible.sync="this.publishVersionUpgradeShow"
               v-if="this.publishVersionUpgradeShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title="this.operation === 'create' ? '发布新版本' : '修改'">
      <el-form :model="createOrUpdateForm" ref="createOrUpdateForm">
        <el-form-item prop="versionNo" label="版本">
          <el-input v-model="createOrUpdateForm.versionNo">
          </el-input>
        </el-form-item>

        <el-form-item prop="richContent" label="内容">
          <el-input v-model="createOrUpdateForm.richContent">
          </el-input>
        </el-form-item>
        <el-button @click="onSubmitBtnClick" type="primary">提交</el-button>
        <el-button @click="onCancelBtnClick" type="primary">取消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>

import Tinymce from '@c/tinymce/index.vue'

export default {

  components: {
    Tinymce
  },

  activated() {
    this.loadVersionUpgradeHistories();
  },

  data() {
    return {
      histories: [],
      queryForm: {},
      createOrUpdateForm: {
        id: null,
        versionNo: null,
        richContent: null,
      },
      publishVersionUpgradeShow: false,
      operation: 'create', // create  edit
      pageArgs: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      }
    };
  },

  methods: {
    /**
     * 加载版本更新历史
     */
    loadVersionUpgradeHistories() {
      debugger
      this.$http.get(`/sys/sysVersionUpgrade/page?pageNo=${this.pageArgs.pageNo}&pageSize=${this.pageArgs.pageSize}`)
          .then(({data: result, status: httpStatus}) => {
            if (result.code === 0) {
              this.histories = result.data.list
              this.pageArgs.total = result.data.total
            } else {
              this.$message({
                type: 'error',
                message: result.msg
              })
            }
          })
    },

    // 新增按钮点击
    onAddBtnClick() {
      this.publishVersionUpgradeShow = true;
      this.operation = 'create';
    },

    // 编辑按钮点击
    onEditBtnClick(id) {
      this.publishVersionUpgradeShow = true;
      this.operation = 'edit';
      this.getDetail(id);
    },

    onCancelBtnClick() {
      this.$refs['createOrUpdateForm'].resetFields();
      this.publishVersionUpgradeShow = false;
      this.operation = null;
    },

    /**
     * 翻页
     */
    onCurrentPageChanged(pageNo) {
      this.pageArgs.pageNo = pageNo
      this.loadVersionUpgradeHistories()
    },

    /**
     * 提交
     */
    onSubmitBtnClick() {
      let url = this.operation === 'create' ? `/sys/sysVersionUpgrade/publish` : '/sys/sysVersionUpgrade/update';
      this.$http.post(url, this.$data.createOrUpdateForm)
          .then(({data: rst, status: httpStatus}) => {
            if (httpStatus !== 200) {
              this.$message({
                type: 'error',
                message: '请求失败'
              })
            } else if (rst.code !== 0) {
              this.$message({
                type: 'error',
                message: rst.msg
              });
            } else {
              this.$message({
                type: 'success',
                message: '提交成功'
              });

              this.$refs['createOrUpdateForm'].resetFields();
              this.publishVersionUpgradeShow = false;
              this.loadVersionUpgradeHistories();
            }
          })
    },

    /**
     * 加载详情
     * @param id
     */
    getDetail(id) {
      this.$http.get(`/sys/sysVersionUpgrade/detail/${id}`)
          .then(({status: httpStatus, data: epmetRst}) => {
            debugger
            if (httpStatus !== 200) {
              this.$message({
                type: 'error',
                message: '请求失败'
              })
            } else if (epmetRst.code != 0) {
              this.$message({
                type: 'error',
                message: epmetRst.msg
              })
            } else {
              this.createOrUpdateForm = epmetRst.data;
            }
          })
    }
  }
}
</script>

<style scoped lang="css">
.tinymce_view {
  height: 400px;
  overflow: auto;
}
</style>