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

<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item prop="deviceTypeId" label="设备型号：">
        <el-select v-model="form.deviceTypeId" placeholder="请选择设备型号" filterable>
          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item prop="type" label="设备模式：">
        <el-select v-model="form.type" placeholder="请选择设备模式">
          <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item prop="version" label="版本号：">
        <el-input v-model="form.version" placeholder="请输入版本号" />
      </el-form-item>
      <el-form-item prop="fileType" label="上传类型：">
        <el-select v-model="form.fileType" placeholder="请选择上传类型">
          <el-option v-for="item in updateOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item prop="url" label="下载路径：">
        <el-row>
          <el-col :span="18">
            <el-input v-model="form.url" placeholder="请输入 或 上传下载路径" clearable />
          </el-col>
          <el-col :span="6">
            <Upload :listType="listType" :accept="accept" @upload="getUpload" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="title" label="升级标题：">
        <el-input v-model="form.title" placeholder="请输入升级标题" />
      </el-form-item>
      <el-form-item prop="content" label="升级描述：">
        <el-input v-model="form.content" type="textarea" rows="4" placeholder="请输入升级描述" />
      </el-form-item>
      <el-form-item prop="isEnforcement" label="设备升级：">
        <el-select v-model="form.deviceIsEnforcement" placeholder="是否强制设备升级">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item prop="isEnforcement" label="APP升级：">
        <el-select v-model="form.isEnforcement" placeholder="是否强制APP升级">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item prop="isPush" label="同步推送：">
        <el-select v-model="form.isPush" placeholder="是否同步推送">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item prop="userType" label="升级对象：">
        <el-select v-model="form.userType" placeholder="请选择升级对象">
          <el-option v-for="item in pushOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item :prop="user" v-if="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>
import { getDetailInfo, updateEdit, getVersionAdd } from "@/api/device/version";
import { devMixin, devModeMixin } from '@/mixin/index'
export default {
  mixins: [devMixin, devModeMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      form: {
        id: this.$route.query.id,
        fileType: 1,
        url: "",
      },
      // 指定用户表单中间参数
      user: "",
      // 表单验证
      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"
        }],
      },
      // 设备是否
      statusOptions: [{
        value: 1,
        label: '是'
      }, {
        value: 2,
        label: '否'
      }],
      // 升级对象
      pushOptions: [{
        value: 1,
        label: '全部'
      }, {
        value: 3,
        label: '指定'
      }],
      // 上传类型
      updateOptions: [{
        value: 1,
        label: '文件'
      }, {
        value: 2,
        label: '文件夹'
      }],
      listType: 'text',
      // 文件类型
      accept: '.bin'
    };
  },
  watch: {
    'form.fileType'(val) {
      this.listType = val === 1 ? 'text' : 'zip'
      this.accept = val === 1 ? '.bin' : '.zip'
    }
  },
  mounted() {
    if (this.form.id) {
      getDetailInfo({
        id: this.form.id,
      }).then((res) => {
        if (res.code === 0) {
          this.form = res.data;
          this.user = res.data.user.join("\n");
        }
      });
    }
  },
  methods: {
    // 上传文件
    getUpload(e) {
      this.form.url = e.file;
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.userType === 3
            ? (this.form.user = this.user.split("\n"))
            : delete this.form.user;
          if (this.form.id) {
            // 编辑
            updateEdit(this.form).then((res) => {
              if (res.code === 0) {
                this.$message.success("修改成功！");
                this.$tab.closeOpenPage("/device/version");
              }
            });
          } else {
            // 新增
            delete this.form.id;
            getVersionAdd(this.form).then((res) => {
              if (res.code === 0) {
                this.$message.success("新增成功！");
                this.$tab.closeOpenPage("/device/version");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    getCancel() {
      this.$tab.closeOpenPage("/device/version");
    },
  },
};
</script>

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