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" label="下载链接"></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}).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>