public-fuse/src/view/camera/bind.vue

<template>
  <el-form ref="form" label-width="100px" class="camera-from">
    <el-form-item label="SN码：" class="mandatory">
      <el-input
        :disabled="bindCamera.id && !operateIsPermissionByPath('edit', 'sn')"
        :modelValue="bindCamera.snCode"
        placeholder="请输入相机底部SN码，如214D5RE2G8"
        @update:modelValue="(val: string) => (bindCamera.snCode = val.trim())"
      />
    </el-form-item>
    <el-form-item label="相机类型：" class="mandatory">
      <el-select v-model="bindCamera.cameraType" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="item in cameraTypes"
          :key="item"
          :label="cameraTypeDesc[item]"
          :value="item.toString()"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="所属架构：" class="mandatory">
      <com-company
        v-model="bindCamera.deptId"
        :disabled="!!(bindCamera.id && !operateIsPermissionByPath('edit', 'dept'))"
        hide-all
      />
    </el-form-item>
    <el-form-item label="管理员：" class="mandatory">
      <el-select v-model="bindCamera.userId" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="item in users"
          :key="item.id"
          :label="item.nickName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import comCompany from "@/components/company-select/index.vue";
import { operateIsPermissionByPath } from "@/directive/permission";

import { Camera, CameraType, addCamera, editCamera } from "@/store/camera";
import { cameraTypeDesc } from "@/constant/camera";
import { UserInfo, getUsers } from "@/store/user";
import { ref, watchEffect } from "vue";
import { ElMessage } from "element-plus";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{ camera?: Camera }>();
const bindCamera = ref<Camera>(
  (props.camera ? { ...props.camera } : { cameraSn: "", snCode: "" }) as Camera
);

const cameraTypes = [CameraType.SWKJ, CameraType.SWSS2];
const users = ref<UserInfo[]>([]);
watchEffect(async () => {
  if (bindCamera.value.deptId) {
    users.value = await getUsers(bindCamera.value.deptId);
    if (
      bindCamera.value.userId &&
      !users.value.some((user) => user.id === bindCamera.value.userId)
    ) {
      bindCamera.value.userId = undefined as any;
    }

    if (users.value.length === 1 && !bindCamera.value.userId) {
      bindCamera.value.userId = users.value[0].id;
    }
  }
});

defineExpose<QuiskExpose>({
  async submit() {
    if (!bindCamera.value.snCode || !bindCamera.value.snCode.trim()) {
      ElMessage.error("SN码不能为空");
      throw "SN码不能为空";
    } else if (!bindCamera.value.cameraType) {
      ElMessage.error("请选择相机类型");
      throw "请选择相机类型";
    } else if (!bindCamera.value.userId) {
      ElMessage.error("请选择管理员");
      throw "请选择管理员";
    } else {
      if (bindCamera.value.id) {
        await editCamera(bindCamera.value);
      } else {
        await addCamera(bindCamera.value);
      }
      return bindCamera.value;
    }
  },
});
</script>