dy-admin-manager/src/views/editionManager/editionList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>版本控制
    </h2>
    <div class="m-core">
      <!--   -->
      <div class="newBand"
           @click="createEdi"
           v-permission="'appVersionInfo/add'">新建</div>
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item label="客户端">
          <el-select clearable
                     v-model="searchForm.search">
            <el-option v-for="(item,index) in sectionList"
                       :key='index'
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                     @click="search">搜索</el-button>
        </el-form-item>
      </el-form>

      <div class="tableWrap">
        <el-table :data="tableList"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align="center"
                           prop="id"
                           label="编号"></el-table-column>
          <el-table-column align="center"
                           prop="platform"
                           label="客户端">
            <template slot-scope="scope">
              <div>{{ scope.row.platform|editionFilter }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="version"
                           label="版本号"></el-table-column>
          <el-table-column align="center"
                           prop="isForceUpdate"
                           label="强制更新">
            <template slot-scope="scope">
              <div>{{ scope.row.isForceUpdate?'是':'否'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="status"
                           label="状态">
            <template slot-scope="scope">
              <div>{{scope.row.status | statusFilter}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="description"
                           label="描述"></el-table-column>
          <el-table-column align="center"
                           prop="downloadUrl"
                           width="120"
                           label="下载链接">
                              <template slot-scope="scope">
                                <overflow-text width="120px" :text="scope.row.downloadUrl"></overflow-text>
                              </template>
                           </el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button v-permission="'appVersionInfo/update'"
                           type="text"
                           @click="resetEdit(scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <!-- v-if="sectionVisible" -->
    <el-dialog title="版本修改"
               width="400px"
               :visible.sync="sectionVisible"
               :before-close="resetForm">
      <el-form :model="sectionForm"
               ref="sectionForm"
               :rules="sectionRules"
               label-position="right"
               label-width="80px"
               :inline="true"
               v-if="sectionVisible">
        <el-form-item label="客户端"
                      prop="platform"
                      v-if="isNew">
          <el-select v-model="sectionForm.platform"
                     clearable>
            <el-option v-for="(item,index) in sectionList"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号"
                      prop="version"
                      v-if="isNew">
          <el-input v-model.trim="sectionForm.version"
                    @mousewheel.native.prevent></el-input>
        </el-form-item>
        <el-form-item label="强制更新"
                      prop="isForceUpdate">
          <el-select clearable
                     v-model="sectionForm.isForceUpdate">
            <el-option label="是"
                       :value="true"></el-option>
            <el-option label="否"
                       :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-select clearable
                     v-model="sectionForm.status">
            <el-option label="最新"
                       value="newest"></el-option>
            <el-option label="历史"
                       value="history"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载链接"
                      prop="downloadUrl">
          <el-input v-model.trim="sectionForm.downloadUrl"
                    type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="描述"
                      prop="description">
          <el-input type="textarea"
                    v-model="sectionForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="sectionVisible = false">取 消</el-button>
        <el-button v-if="isNew"
                   type="primary"
                   @click="createEdition">确 定</el-button>
        <el-button v-if="!isNew"
                   type="primary"
                   @click="resetEdition">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { appVersionInfo, addAppVersionInfo, resetAppVersionInfo } from "@/api/systemManage";
import pagination from "@/components/Pagination/index";
export default {
  components: {
    pagination
  },
  data () {
    return {
      sectionVisible: false,
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      searchForm: {
        search: null
      },
      sectionList: [{ value: 'ios-teacher', label: '苹果-老师端' },
      { value: 'ios-student', label: '苹果-学生端' }, { value: 'ios-education', label: '苹果-教务端' }, { value: 'android-teacher', label: '安卓-老师端' },
      { value: 'android-student', label: '安卓-学生端' }, { value: 'android-education', label: '安卓-教务端' }],
      sectionForm: {
        platform: '',
        version: '',
        isForceUpdate: '',
        downloadUrl: '',
        status: '',
        id: ''
      },
      sectionRules: {
        platform: [
          { required: true, message: "请选择客户端", trigger: "blur" }
        ],
        version: [
          { required: true, message: "请输入版本号", trigger: "blur" }
        ],
        isForceUpdate: [
          { required: true, message: "请选择是否强更", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择版本状态", trigger: "blur" }
        ],
      },
      isNew: false
    };
  },
  activated () {
    this.init();
  },
  created () {
    this.init();
  },
  methods: {
    search () {
      this.rules.page = 1;
      this.getList()
    },
    init () {
      this.getList();
    },
    getList () {
      this.searchForm.search ? this.searchForm.search : this.searchForm.search = null;
      appVersionInfo({
        search: this.searchForm.search,
        page: this.rules.page,
        rows: this.rules.limit,
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    createEdi () {
      this.isNew = true;
      this.sectionVisible = true;
    },
    createEdition () {
      this.$refs.sectionForm.validate(v => {
        if (v) {
          addAppVersionInfo(this.sectionForm).then(res => {
            if (res.code == 200) {
              this.$message.success('新增成功')
              this.sectionVisible = false;

              this.getList()
            }
          })
        }
      })

    },
    resetEdit (row) {
      this.isNew = false;
      this.sectionForm = row;
      this.sectionVisible = true;
    },
    resetEdition () {
      // 修改
      resetAppVersionInfo(this.sectionForm).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.sectionVisible = false;

          this.getList()
        }
      })
    },
    resetForm () {
      this.sectionForm = {
        platform: '',
        version: '',
        isForceUpdate: '',
        downloadUrl: '',
        status: '',
        id: ''
      }
      // console.log(this.sectionForm.status)
      this.$refs.sectionForm.resetFields();
      this.sectionVisible = false;
    }
  },
  filters: {
    statusFilter (val) {
      if (val == "newest") {
        return "最新";
      }
      if (val == "history") {
        return "历史";
      }
      return "";
    }
  }
};
</script>
<style lang="sass">

</style>