plus-ui/src/views/system/version/index.vue

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="true" class="search">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="平台类型" prop="phone">
            <el-input v-model="queryParams.platformType" placeholder="请输入平台类型" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="版本号" prop="aimId">
            <el-input v-model="queryParams.versionCode" placeholder="请输入版本号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="版本名称" prop="aimId">
            <el-input v-model="queryParams.versionName" placeholder="请输入版本名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button v-hasPermi="['system:version:add']" type="primary" plain icon="Plus" @click="showRefuteDialog = true">新增</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table :data="devices" border style="width: 100%; height: 100%; font-size: 14px">
        <el-table-column label="平台类型" align="center" prop="platformType" :show-overflow-tooltip="true" />
        <el-table-column label="版本号" align="center" prop="versionCode" :show-overflow-tooltip="true" />
        <el-table-column label="版本名称" align="center" prop="versionName" :show-overflow-tooltip="true" />
        <el-table-column label="下载地址" align="center" prop="downloadUrl" :show-overflow-tooltip="true" />
        <el-table-column label="是否强制更新" align="center" prop="isForceUpdate" width="180">
          <template #default="scope">
            <span>{{ scope.row.isForceUpdate ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="版本说明" align="center" prop="releaseNotes" :show-overflow-tooltip="true" />
        <el-table-column label="是否启用" align="center" prop="status" width="180">
          <template #default="scope">
            <el-switch
              :model-value="scope.row.status ? true : false"
              active-text="启用"
              inactive-text="停用"
              @click="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="删除" placement="top">
              <el-button link v-hasPermi="['system:version:remove']" type="primary" @click="handldDelOnline(scope.row)">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <pagination
          v-if="totalref > 0"
          :total="totalref"
          v-model:page="queryParams.current"
          v-model:limit="queryParams.size"
          @pagination="getListList"
        />
      </div>
    </el-card>
    <el-dialog v-model="showRefuteDialog" title="添加版本" width="600px" append-to-body>
      <el-form>
        <el-form-item label="平台类型">
          <el-select v-model="headDate.platformType" placeholder="请选择平台类型">
            <el-option label="Android" value="android" />
            <el-option label="iOS" value="ios" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="headDate.versionCode" type="text" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="版本名称">
          <el-input v-model="headDate.versionName" type="text" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="下载地址">
          <el-input v-model="headDate.downloadUrl" type="text" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="是否强制更新">
          <el-select v-model="headDate.isForceUpdate" placeholder="请选择是否强制更新">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本说明">
          <el-input v-model="headDate.releaseNotes" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="headDate.status" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="停用" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showRefuteDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Online" lang="ts">
import { VersionQuery, VersionList, VersionAdd } from '@/api/system/version/types';
import { getList, postAdd, getupdate, getDel } from '@/api/system/version/index';
import { propTypes } from '@/utils/propTypes';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
//查询参数
const queryParams = ref<VersionQuery>({
  current: 1,
  size: 10,
  platformType: '',
  versionCode: '',
  versionName: ''
});
//列表
const devices = ref<VersionList[]>([]);
//总条数
const totalref = ref<number>(0);
const getListList = async () => {
  const res = await getList(queryParams.value);
  if (res.code === 200) {
    devices.value = res.data.records;
    totalref.value = res.data.total;
  }
};
const handleQuery = () => {
  getListList();
};
const showRefuteDialog = ref(false);
const resetQuery = () => {
  queryParams.value = {
    current: 1,
    size: 10,
    platformType: '',
    versionCode: '',
    versionName: ''
  };
  getListList();
};
const headDate = ref<VersionAdd>({
  platformType: '',
  versionCode: '',
  versionName: '',
  downloadUrl: '',
  isForceUpdate: null,
  releaseNotes: '',
  status: null
});
const handleAdd = async () => {
  const res = await postAdd(headDate.value);
  if (res.code === 200) {
    ElMessage.success('添加成功');
    headDate.value = {
      platformType: '',
      versionCode: '',
      versionName: '',
      downloadUrl: '',
      isForceUpdate: null,
      releaseNotes: '',
      status: null
    };
    showRefuteDialog.value = false;
    getListList();
  }
};
// 修改
const handleStatusChange = async (row: any) => {
  const obj = {
    id: row.id,
    status: row.status == 1 ? 0 : 1
  };
  const res = await getupdate(obj);
  if (res.code === 200) {
    ElMessage.success('修改成功');
    getListList();
  }
};
const handldDelOnline = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const obj = {
      id: row.id
    };
    const res = await getDel({ id: row.id });
    if (res.code === 200) {
      ElMessage.success('删除成功');
      getListList();
    }
  });
};
onMounted(() => {
  getListList();
});
</script>