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

<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" size="small" :disabled="disabled">
      <el-form-item label="设备型号：" prop="clientType">
        <el-input v-model="form.clientType" placeholder="请输入设备型号" />
      </el-form-item>
      <el-form-item label="设备名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="版本号：" prop="firstVersion">
        <el-input v-model="form.firstVersion" placeholder="请输入初始版本号" />
      </el-form-item>
      <el-form-item label="升级方式：" prop="upgradeType">
        <el-select v-model="form.upgradeType" placeholder="请选择升级方式">
          <el-option v-for="item in upgradeTypeOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备过滤：" prop="filter">
        <el-input v-model="form.filter" placeholder="请输入设备过滤内容"></el-input>
      </el-form-item>
      <el-form-item label="引导页：" prop="guideUrl">
        <el-input v-model="form.guideUrl" placeholder="请输入引导页网址" />
      </el-form-item>
      <el-form-item label="制造商：" prop="manufacturer">
        <el-input v-model="form.manufacturer" placeholder="请输入设备制造商" />
      </el-form-item>
      <el-form-item label="使用分类：" prop="deviceType">
        <el-select v-model="form.deviceType">
          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备分类：" prop="categoryId">
        <el-select v-model="form.categoryId">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备图片：" prop="img">
        <imageUpload :url="form.img" @success="handleUploadImg" @delete="handleUploadImg"
          :disabled="disabled" />
      </el-form-item>
      <!-- 子表单 -->
      <div label-width="100px" style="position: relative">
        <el-button class="sub-add" v-if="disabled === false && form.typeList.length < 4" type="primary"
          icon="el-icon-plus" @click="getAdd">新增</el-button>
        <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
          <el-form-item label="设备类型：" :prop="`typeList.${index}.type`" :rules="{
              required: true,
              message: '请选择设备类型',
              trigger: 'change',
            }">
            <el-select v-model="item.type" placeholder="请选择设备类型" @change="getTypeChange($event, index)">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"
                :disabled="item.disabled" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
            :rules="{type: 'array', required: true, message: '请选择功能权限', trigger: 'change'}">
            <el-select v-model="item.functionList" placeholder="请选择功能权限" multiple>
              <el-option v-for="item in functionOptions" :key="item.id" :label="item.name"
                :value="item.type" />
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备图标：">
                <imageUpload :url="item.icon1" @success="handleUploadIcon($event, index, 'icon1')"
                  @delete="handleUploadIcon($event, index, 'icon1')" :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="auto" style="float:right">
                <imageUpload :url="item.icon2" @success="handleUploadIcon($event, index, 'icon2')"
                  @delete="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
            @click="getDelete(item.type, index)" />
        </div>
      </div>
    </el-form>
    <div class="form-btn">
      <el-button size="mini" @click="getCancel">取消</el-button>
      <el-button v-if="disabled === false" size="mini" type="primary" @click="getSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
import { categoryList } from "@/api/device/category";
import { functionList } from "@/api/device/function";
import imageUpload from "@/components/Upload/index";
import mixin from "./mixin/index";

export default {
  mixins: [mixin],
  components: {
    imageUpload,
  },
  data() {
    return {
      // 能否编辑
      disabled: false,
      // 设备类型列表
      typeOptions: [
        {
          value: 1,
          label: "蓝牙",
        },
        {
          value: 2,
          label: "WiFi",
        },
        {
          value: 3,
          label: "传统蓝牙",
        },
        {
          value: 4,
          label: "4G",
        },
      ],
      // 升级方式列表
      upgradeTypeOptions: [
        {
          value: 1,
          label: "强制",
        },
        {
          value: 2,
          label: "指定",
        },
      ],
      // 分类列表
      categoryOptions: [],
      functionOptions: [],
      // 表单
      form: {
        typeList: [
          {
            type: "",
            functionList: [],
            icon1: "",
            icon2: "",
          },
        ],
      },
      // 表单验证
      rules: {
        clientType: [
          {
            required: true,
            message: "请输入设备型号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        firstVersion: [
          {
            required: true,
            message: "请输入初始版本号",
            trigger: "blur",
          },
        ],
        upgradeType: [
          {
            required: true,
            message: "请选择升级方式",
            trigger: "change",
          },
        ],
        filter: [
          {
            required: true,
            message: "请输入设备过滤内容",
            trigger: "blur",
          },
        ],
        guideUrl: [
          {
            required: true,
            message: "请输入引导页网址",
            trigger: "blur",
          },
        ],
        manufacturer: [
          {
            required: true,
            message: "请输入设备制造商",
            trigger: "blur",
          },
        ],
        deviceType: [
          {
            required: true,
            message: "请选择使用分类",
            trigger: "change",
          },
        ],
        categoryId: [
          {
            required: true,
            message: "请选择设备分类",
            trigger: "change",
          },
        ],
        img: [
          {
            required: true,
            message: "请上传设备图片",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // 分类列表
    categoryList({
      status: 1,
    }).then((res) => {
      if (res.data.code === 0) {
        this.categoryOptions = res.data.data;
      }
    });
    // 权限列表
    functionList().then((res) => {
      if (res.data.code === 0) {
        this.functionOptions = res.data.data;
      }
    });
  },
  mounted() {
    this.disabled = this.$route.query.key === "查看" ? true : false;
    console.log(this.$route.query.id);
    this.getList();
  },
  methods: {
    // 详情
    getList() {
      if (this.$route.query.id) {
        deviceDetail({
          id: this.$route.query.id,
        }).then((res) => {
          if (res.data.code === 0) {
            this.form = res.data.data;
          }
        });
      }
    },

    // 上传设备图片
    handleUploadImg(e) {
      this.form.img = e;
    },

    // 上传设备图标
    handleUploadIcon(e, index, obj) {
      this.form.typeList[index][obj] = e;
    },

    // 选中一个设备类型就从数组中去掉
    getTypeChange(e) {
      for (let i in this.typeOptions) {
        this.typeOptions[i].disabled = false;
      }
      this.typeOptions[e - 1].disabled = true;
    },

    // 新增子表单
    getAdd() {
      this.form.typeList.push({
        type: "",
        functionList: [],
        icon1: "",
        icon2: "",
      });
    },

    // 删除子表单
    getDelete(e, index) {
      this.form.typeList.splice(index, 1);
      this.typeOptions[e - 1].disabled = false;
    },

    // 取消
    getCancel() {
      this.$tab.closeOpenPage("/device/list");
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            // 编辑
            deviceEdit(this.form).then((res) => {
              if (res.code === 0) {
                this.$message.success("修改成功！");
                this.$tab.closeOpenPage("/device/list");
              } else {
                this.$message.error("修改失败");
              }
            });
          } else {
            // 新建
            deviceAdd(this.form).then((res) => {
              if (res.code === 0) {
                this.$message.success("提交成功！");
                this.$tab.closeOpenPage("/device/list");
              } else {
                this.$message.error("提交失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

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

.sub-add {
  position: absolute;
  top: 0;
  right: -100px;
}

.sub-form {
  position: relative;
  border: 1px solid #e8e8e8;
  padding: 25px 25px 0 0;
  margin-bottom: 20px;

  .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #c0c4cc;
  }
}
</style>