ohplay_business/src/views/device/version/detail.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="data.form" :rules="data.rules" ref="form" label-width="100px">
      <el-form-item prop="deviceTypeId" label="设备型号：">
        <el-select v-model="data.form.deviceTypeId" placeholder="请选择设备型号" filterable>
          <el-option v-for="item in deviceOptions" :key="item.clientTypeId" :label="item.name"
            :value="item.clientTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item prop="type" label="设备模式：">
        <el-select v-model="data.form.type" placeholder="请选择设备模式">
          <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="version" label="版本号：">
        <el-input v-model="data.form.version" placeholder="请输入版本号" />
      </el-form-item>
      <el-form-item prop="fileType" label="上传类型：">
        <el-select v-model="data.form.fileType" placeholder="请选择上传类型">
          <el-option v-for="item in data.updateOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item prop="url" label="下载路径：">
        <div style="display: flex; width: 100%">
          <el-input v-model="data.form.url" placeholder="请输入 或 上传下载路径" clearable style="width: 100%; margin-right: 10px" />
          <CustomUpload :url="url" :accept="accept" @upload="getUpload" />
        </div>
      </el-form-item>
      <el-form-item prop="title" label="升级标题：">
        <el-input v-model="data.form.title" placeholder="请输入升级标题" />
      </el-form-item>
      <el-form-item prop="content" label="升级描述：">
        <el-input v-model="data.form.content" type="textarea" rows="4" placeholder="请输入升级描述" />
      </el-form-item>
      <el-form-item prop="isEnforcement" label="设备升级：">
        <el-select v-model="data.form.deviceIsEnforcement" placeholder="是否强制设备升级">
          <el-option v-for="item in data.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="isEnforcement" label="APP升级：">
        <el-select v-model="data.form.isEnforcement" placeholder="是否强制APP升级">
          <el-option v-for="item in data.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="isPush" label="同步推送：">
        <el-select v-model="data.form.isPush" placeholder="是否同步推送">
          <el-option v-for="item in data.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="userType" label="升级对象：">
        <el-select v-model="data.form.userType" placeholder="请选择升级对象">
          <el-option v-for="item in data.pushOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :prop="user" v-if="data.form.userType === 3" label="指定用户：">
        <el-input v-model="user" type="textarea" rows="4" placeholder="请输入指定用户手机号,一行一个" />
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="getCancel">取消</el-button>
      <el-button type="primary" @click="getSubmit">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { getDetailInfo, updateEdit, getVersionAdd } from "@/api/device/version";
import { useDeviceList } from '@/hooks/index'
import { useDeviceMode } from '../hooks/index'
const { deviceOptions } = useDeviceList()
const { devModeOptions } = useDeviceMode()
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API)

const { proxy } = getCurrentInstance()

// 遮罩层
const loading = ref(false)

const data = reactive({
  form: {
    id: proxy.$route.query.id,
    fileType: 1,
    url: "",
  },
  // 设备是否
  statusOptions: [{
    value: 1,
    label: '是'
  }, {
    value: 2,
    label: '否'
  }],
  // 升级对象
  pushOptions: [{
    value: 1,
    label: '全部'
  }, {
    value: 3,
    label: '指定'
  }],
  // 上传类型
  updateOptions: [{
    value: 1,
    label: '文件'
  }, {
    value: 2,
    label: '文件夹'
  }],
  // 表单验证
  rules: {
    deviceTypeId: [{
      required: true, message: "请选择设备型号", trigger: "change"
    }],
    type: [{
      required: true, message: "请选择设备类型", trigger: "change"
    }],
    version: [{
      required: true, message: "请输入版本号", trigger: "blur"
    }],
    fileType: [{
      required: true, message: '请选择上传类型', trigger: 'change'
    }],
    url: [{
      required: true, message: "请输入 或 上传下载路径", trigger: "change"
    }],
    title: [{
      required: true, message: "请输入升级标题", trigger: "blur"
    }],
    content: [{
      required: true, message: "请输入升级描述", trigger: "blur"
    }],
    isEnforcement: [{
      required: true, message: "是否强制升级", trigger: "change"
    }],
    isPush: [{
      required: true, message: "是否同步推送", trigger: "change"
    }],
    userType: [{
      required: true, message: "请选择推送类型", trigger: "change"
    }]
  },
})

// 指定用户表单中间参数
const user = ref("")
const url = ref('text')
// 文件类型
const accept = ref('.bin')

const getDetail = () => {
  if (data.form.id) {
    getDetailInfo({
      id: data.form.id,
    }).then((res) => {
      if (res.code === 0) {
        data.form = res.data;
        user.value = res.data.user.join("\n");
      }
    })
  }
}
getDetail()

// 上传文件
const getUpload = (e) => {
  data.form.url = e.file
}

// 提交
const getSubmit = () => {
  proxy.$refs.form.validate((valid) => {
    if (valid) {
      data.form.userType === 3
        ? (data.form.user = user.value.split("\n"))
        : delete data.form.user;
      if (data.form.id) {
        // 编辑
        updateEdit(data.form).then((res) => {
          if (res.code === 0) {
            proxy.$modal.msgSuccess("修改成功！")
            getCancel()
          }
        });
      } else {
        // 新增
        delete data.form.id;
        getVersionAdd(this.form).then((res) => {
          if (res.code === 0) {
            this.$message.success("新增成功！");
            getCancel()
          }
        });
      }
    } else {
      return false;
    }
  });
}

// 取消
const getCancel = () => {
  proxy.$tab.closeOpenPage("/device/version");
}

watch(() => data.form.fileType, (val) => {
  url.value = val === 1 ? '' : `${baseUrl.value}/system/file/file/uploadFolderZip`
  accept.value = val === 1 ? '.bin' : '.zip'
})

</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}
</style>