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

<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="disabled">
      <!-- <el-form-item label="应用类型：" prop="applicationType">
        <el-select v-model="form.applicationType" placeholder="请选择设备分类">
          <el-option
            v-for="item in applicationType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->

      <!-- disabled === false -->
      <el-form-item label="应用类型：" prop="applicationType">
        <input type="checkbox" v-model="isChecked1" :disabled="disabled" />
        小程序
        <input type="checkbox" style="margin-left: 30px" v-model="isChecked2" :disabled="disabled" />
        APP
      </el-form-item>

      <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 v-if="form.id" label="旧版蓝牙名称：">
        <el-input v-model="form.bluetoothName" disabled />
      </el-form-item>
      <el-form-item label="蓝牙名称：" prop="bluetoothNames">
        <el-tag v-for="(item, index) in form.bluetoothNames" :key="item" :closable="!disabled"
          :disable-transition="false" @close="handleClose(index)" style="margin-right: 10px">{{ item }}</el-tag>
        <el-input v-if="inputVisible" v-model="bluetoothName" ref="saveTagInput" @input="handleInput"
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" style="width: 100px" />
        <el-button v-else @click="showInput" size="mini">+ 新增</el-button>
      </el-form-item>
      <el-form-item label="制造商：" prop="manufacturer">
        <el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
          <el-option v-for="item in manuOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="多频多台：" prop="isChannelsPlatforms">
        <el-switch v-model="form.isChannelsPlatforms" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="扫码授权：" prop="isScanAuth">
        <el-switch v-model="form.isScanAuth" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="流量平台：">
        <el-select v-model="form.platform" placeholder="请选择流量平台">
          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备分类：" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择设备分类">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备类型：" prop="deviceType">
        <el-select v-model="form.deviceType" placeholder="请选择设备类型">
          <el-option v-for="item in devTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否热门：" prop="isHot">
        <el-select v-model="form.isHot" placeholder="请选择是否热门">
          <el-option v-for="item in yesOrNoOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="资源平台：">
        <el-button @click="clickAddPlatform" size="mini">新增+</el-button>
      </el-form-item>
      <el-form-item v-if="isShowPlatform">
        <el-table :data="contentVipPlatformList" border style="width: min-content">
          <el-table-column prop="platformId" label="资源平台" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.platformId" placeholder="请选择流量平台" clearable>
                <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="contentVip" label="设备会员收费时间" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.contentVip" placeholder="请设备会员收费时间" clearable>
                <el-option v-for="item in contentVipOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="设备会员收费时间：" prop="contentVip">
        <el-select v-model="form.contentVip" placeholder="默认关闭">
          <el-option v-for="item in contentVipOptions" :key="item.value" :label="item.label"
            :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="在线图片：" prop="img">
            <Upload listType="picture-card" :url="form.img" @upload="handleUploadImg($event, 'online')"
              :disabled="disabled" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="离线图片：" prop="offlineImg" style="float: right">
            <Upload listType="picture-card" :url="form.offlineImg" @upload="handleUploadImg($event, 'offline')"
              :disabled="disabled" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 子表单 -->
      <el-button 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(item)">
            <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="Number(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 devFucOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type == 2" label="芯片方案：" :prop="`typeList.${index}.is5g`" :rules="{
          required: true,
          message: '请选择芯片方案',
          trigger: 'change',
        }">
          <el-select v-model="item.is5g" placeholder="请选择芯片方案">
            <el-option v-for="item in planOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`" :rules="{
          required: true,
          message: '请选择连接方式',
          trigger: 'change',
        }">
          <el-select v-model="item.connectType" placeholder="请选择连接方式">
            <el-option v-for="item in connectTypeOptions" :key="item.value" :label="item.label"
              :value="Number(item.value)" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="item.type === 1 || item.type === 3
              ? '连接引导图：'
              : '开机引导图：'
              " :prop="`typeList.${index}.icon1`" :rules="{
                required: true,
                message: '请上传引导图片',
                trigger: 'change',
              }">
              <Upload listType="picture-card" :url="item.icon1" @upload="handleUploadIcon($event, index, 'icon1')"
                :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配对键引导图：" :prop="`typeList.${index}.icon2`" style="float: right" :rules="{
              required: true,
              message: '请上传配对键引导图',
              trigger: 'change',
            }">
              <Upload listType="picture-card" :url="item.icon2" @upload="handleUploadIcon($event, index, 'icon2')"
                :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="item.type === 1 || item.type === 3" label="引导页内容："
          :prop="`typeList.${index}.guidePageContent`" :rules="{
            required: true,
            message: '请输入引导页内容',
            trigger: 'blur',
          }">
          <Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
        </el-form-item>
        <!-- 删除按钮 -->
        <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
          @click="getDelete(item.type, index)" />
      </div>
    </el-form>
    <div>
      <el-button @click="getCancel">取消</el-button>
      <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { create, detail, edit } from "@/api/device/list";
import {
  devCategoryMixin,
  devFucMixin,
  devModeMixin,
  devTypeMixin,
  yesOrNoMixin,
} from "@/mixin/index";

export default {
  name: "deviceListDetail",
  mixins: [
    devModeMixin,
    devTypeMixin,
    devCategoryMixin,
    yesOrNoMixin,
    devFucMixin,
  ],
  data() {
    return {
      isChecked1: false,
      isChecked2: false,
      isShowPlatform: false,
      contentVipPlatformList: [

      ],
      platformOptions: [
        { label: "QQ音乐", value: 6 },
        { label: "喜马拉雅", value: 12 },
      ],
      platformContentVipOptions: [],
      // 表单
      form: {
        typeList: [
          {
            functionList: [],
          },
        ],
        bluetoothNames: [],
        contentVipPlatformList: [],
      },
      // 显示蓝牙输入框
      inputVisible: false,
      // 蓝牙名称
      bluetoothName: "",
      // 表单验证
      rules: {
        applicationType: [
          { required: true, message: "请选择应用类型", trigger: "blur" },
        ],
        clientType: [
          { required: true, message: "请输入设备型号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        bluetoothNames: [
          {
            type: "array",
            required: true,
            message: "请输入蓝牙名称",
            trigger: "blur",
          },
        ],
        isHot: [{ required: true, message: "是否热门", trigger: "change" }],
        categoryId: [
          { required: true, message: "请选择设备分类", trigger: "change" },
        ],
        deviceType: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        img: [{ required: true, message: "请上传在线图片", trigger: "change" }],
        offlineImg: [
          { required: true, message: "请上传离线图片", trigger: "change" },
        ],
      },
      contentVipOptions: [
        {
          value: 0,
          label: "默认关闭",
        },
        {
          value: 1,
          label: "开机激活收取",
        },
        {
          value: 2,
          label: "1年后",
        },
        {
          value: 3,
          label: "2年后",
        },
        {
          value: 4,
          label: "3年后",
        },
      ],
      // 设备连接
      connectTypeOptions: [
        {
          value: 2,
          label: "UPnP",
        },
        {
          value: 3,
          label: "MQTT",
        },
      ],
      // 制造商
      manuOptions: [
        {
          value: "ShanJing",
          label: "ShanJing",
        },
        {
          value: "JieLi",
          label: "JieLi",
        },
        {
          value: "LingXin",
          label: "LingXin",
        },
        {
          value: "QiXinWei",
          label: "QiXinWei",
        },
      ],
      // 芯片方案
      planOptions: [
        {
          value: 1,
          label: "兼容5GHZ频段芯片方案",
        },
        {
          value: 0,
          label: "不兼容5GHZ频段芯片方案",
        },
      ],
      // 流量平台
      typeOptions: [
        {
          value: -1,
          label: "默认",
        },
        {
          value: 0,
          label: "树米",
        },
        {
          value: 1,
          label: "联通",
        },
      ],
      // 只读
      disabled: Boolean(this.$route.query.boolean),
    };
  },
  mounted() {
    this.getCateGory(1);
    this.getList();
  },
  methods: {
    // 详情
    getList() {
      if (this.$route.query.id) {
        detail({
          id: this.$route.query.id,
        }).then((res) => {
          if (res.code === 0) {
            this.form = res.data;
            this.contentVipPlatformList = this.form.contentVipPlatformList;
            this.isShowPlatform = this.form.contentVipPlatformList.length > 0;
            this.form.typeList.map((i) => {
              this.devModeOptions[i.type - 1].disabled = true;
            });

            var applicationType = this.form.applicationType;
            this.isChecked1 = false;
            this.isChecked2 = false;
            if (applicationType != null && applicationType != "") {
              applicationType = applicationType.replace(/[\[\]]/g, "");
              // 使用split按逗号分割字符串
              let result = applicationType.split(",");
              if (result != null && result != "" && result.length > 0) {
                if (result.length == 2) {
                  this.isChecked1 = true;
                  this.isChecked2 = true;
                } else {
                  if (result[0] == "0") {
                    this.isChecked1 = true;
                  } else {
                    this.isChecked2 = true;
                  }
                }
              } else {
                if (applicationType == 0) {
                  this.isChecked1 = true;
                } else if (applicationType == 1) {
                  this.isChecked2 = true;
                }
              }
            }
          }
        });
      }
    },

    // 删除蓝牙名称
    handleClose(index) {
      this.form.bluetoothNames.splice(index, 1);
    },

    // 显示输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    // 禁止输入逗号
    handleInput(e) {
      this.bluetoothName = e.replace(/[,，]/g, "");
    },

    // 保存蓝牙名称
    handleInputConfirm() {
      let inputValue = this.bluetoothName;
      if (inputValue) {
        this.form.bluetoothNames.push(inputValue);
      }
      this.inputVisible = false;
      this.bluetoothName = "";
    },

    // 上传设备图片
    handleUploadImg(e, key) {
      key === "online"
        ? (this.form.img = e.file)
        : (this.form.offlineImg = e.file);
    },

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

    // 选中一个设备类型就从数组中去掉
    getTypeChange(i) {
      for (let key in this.devModeOptions) {
        this.devModeOptions[key].disabled = false;
      }
      // 选中的设备模式禁止再选
      this.form.typeList.map((item) => {
        if (item.type) {
          let index = this.devModeOptions.findIndex(
            (j) => j.value == item.type
          );
          this.devModeOptions[index].disabled = true;
        }
      });
      // 除了设备模式都为空
      Object.keys(i).map((e) => {
        if (!["type", "icon1", "icon2"].includes(e)) {
          i[e] = e === "functionList" ? [] : null;
        }
      });
    },

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

    // 删除子表单
    getDelete(type, index) {
      this.form.typeList.splice(index, 1);
      if (type) {
        this.devModeOptions.find((i) => i.value == type).disabled = false;
      }
    },

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

    // 提交
    getSubmit() {
      if (!this.isChecked1 && !this.isChecked2) {
        this.$message.success("请选择应用类型");
        return;
      }

      if (this.isChecked1 && this.isChecked2) {
        this.form.applicationType = "[0,1]";
      } else if (this.isChecked2) {
        this.form.applicationType = "[1]";
      } else {
        this.form.applicationType = "[0]";
      }
      this.form.contentVipPlatformList = []
      this.contentVipPlatformList.forEach(element => {
        if (element.platformId != null) {
          this.form.contentVipPlatformList.push({
            contentVip: element.contentVip ?? 0,
            platformId: element.platformId,
          })
        }
      });

      console.log("this.contentVipPlatformList===", JSON.stringify(this.contentVipPlatformList), JSON.stringify(this.form.contentVipPlatformList));

      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            // 编辑
            edit(this.form).then((res) => {
              console.log("gadsfqewrqewrqr====" + JSON.stringify(res));
              if (res.code === 0) {
                this.$message.success("修改成功！");
                this.getCancel();
              }
            });
          } else {
            // 新建
            create(this.form).then((res) => {
              if (res.code === 0) {
                this.$message.success("添加成功！");
                this.getCancel();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    clickAddPlatform() {
      this.isShowPlatform = true;
      if (this.platformOptions.length != 0 && this.contentVipPlatformList.length <= this.platformOptions.length) {
        this.contentVipPlatformList.push({ "contentVip": null, "platformId": null, });
      } else {
        let tips = `最多只能添加${this.platformOptions.length}个平台`;
        this.$message.warning(tips);
      }
    },
  },
};
</script>

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

.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>