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 clientTypeOptions" :key="item.id" :label="item.label"
            :value="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 dict.type.dev_list_type" :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="url" label="下载路径：">
        <el-row>
          <el-col :span="16">
            <el-input v-model="form.url" placeholder="请输入 或 上传下载路径" clearable />
          </el-col>
          <el-col :span="8">
            <Upload @upload="getUpload" style="float:right" />
          </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.isEnforcement" placeholder="是否强制升级">
          <el-option v-for="item in dict.type.dev_yes_no" :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 dict.type.dev_yes_no" :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 dict.type.push_user_type" :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-item>
        <el-button @click="getCancel">取消</el-button>
        <el-button type="primary" @click="getSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDetailInfo, updateEdit, getVersionAdd } from "@/api/device/version";
import Upload from "@/components/Upload/index";
import { clientType } from "../mixin/index";
export default {
  dicts: ['dev_list_type', 'dev_yes_no', 'push_user_type'],
  mixins: [clientType],
  components: {
    Upload,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      form: {
        id: this.$route.query.id,
        url: "",
      },
      // 指定用户表单中间参数
      user: "",
      // 表单验证
      rules: {
        deviceTypeId: [
          {
            required: true,
            message: "请选择设备型号",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择设备类型",
            trigger: "change",
          },
        ],
        version: [
          {
            required: true,
            message: "请输入版本号",
            trigger: "blur",
          },
        ],
        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",
          },
        ],
      },
    };
  },
  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>