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>
      <save-form :inline="true" @submit="search" :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" native-type="submit">搜索</el-button>
        </el-form-item>
      </save-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="描述">
            <template slot-scope="scope">
              <overflow-text :text="scope.row.description"></overflow-text>
            </template>
          </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
          sync
          :total.sync="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="isNew ? '版本添加' : '版本修改'"
      width="400px"
      :visible.sync="sectionVisible"
      v-if="sectionVisible"
    >
      <el-form
        :model="sectionForm"
        ref="sectionForm"
        :rules="sectionRules"
        label-position="right"
        label-width="80px"
        v-if="sectionVisible"
      >
        <el-form-item label="客户端" prop="platform" v-if="isNew">
          <el-select
            v-model="sectionForm.platform"
            style="width: 100% !important"
            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
            style="width: 100% !important"
            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
            style="width: 100% !important"
            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";
import { decode } from "js-base64";
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.map((item) => ({
            ...item,
            downloadUrl: decode(item.downloadUrl || ""),
          }));
          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.$nextTick(() => {
        this.sectionForm = row;
      });
      this.sectionVisible = true;
    },
    resetEdition() {
      // 修改
      resetAppVersionInfo(this.sectionForm).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.sectionVisible = false;
          this.getList();
        }
      });
    },
  },
  filters: {
    statusFilter(val) {
      if (val == "newest") {
        return "最新";
      }
      if (val == "history") {
        return "历史";
      }
      return "";
    },
  },
  watch: {
    sectionVisible(val) {
      if (!val) {
        this.sectionForm = {
          platform: "",
          version: "",
          isForceUpdate: "",
          downloadUrl: "",
          status: "",
          id: "",
        };
        this.$refs["sectionForm"].resetFields();
      }
    },
  },
};
</script>
<style lang="sass">
</style>