ar-web/src/views/page/aside/rightMenuItem/userEditModal.vue

<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="相机名称">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="相机IP">
      <a-input v-model:value="formState.ip" />
    </a-form-item>
    <a-form-item label="相机参数 Id">
      <!-- <a-input v-model:value="formState.CbCameraParamsId" /> -->
      <a-select
          v-model:value="formState.CbCameraParamsId"
          show-search
          placeholder="请选中一个相机"
          style="width: 420px;"
          :dropdownMenuStyle="{ color: '#000' }"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" 
          allowClear
          :options="parmasList"
          @change="handleChange"
        >
      </a-select>
    </a-form-item>
    <a-form-item label="登录名">
      <a-input v-model:value="formState.userName" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <!-- <a-form-item label="用户类型">
      <a-select v-model:value="formState.userType" placeholder="请选择用户类型">
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="是否启用">
      <a-switch v-model:checked="formState.state" />
    </a-form-item>
    <a-form-item label="备注">
      <a-input v-model:value="formState.remark" type="textarea" />
    </a-form-item> -->
    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Create</a-button>
      <a-button style="margin-left: 10px">Cancel</a-button>
    </a-form-item> -->
  </a-form>



</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, toRaw, UnwrapRef, watch } from 'vue';
import * as cameraApi from '@/axios/cameraBase/cameraApi';
import Msg from '@/utils/message';
interface FormState {
  id: string
  name: string;
  ip: string;
  CbCameraParamsId: string;
  userName: string;
  password: string;
  userType: string | undefined;
  state: boolean;
  remark: string;
}
const props = defineProps({
  editData: Object
});

let labelCol = { span: 6 }
let wrapperCol = { span: 14 }
const formState: UnwrapRef<FormState> = reactive({
  // id: '',
  name: '',
  ip: '',
  CbCameraParamsId: '',
  userName: '',
  password: '',
  userType: undefined,
  state: false,
  remark: '',
});

//新增
function add() {
  console.log('新增!', toRaw(formState));
  return cameraApi.Add(toRaw(formState)).then(res => {
    console.log(res);
    if (res.data.code == 200) {
      Msg.success('添加成功')
      return true
    }
    else {
      Msg.error('添加失败,' + res.data.message)
      return false
    }
  }).catch((err: any) => {
    Msg.error('添加失败,' + err)
    return false
  })
}

//编辑
function edit() {
  console.log('编辑!', toRaw(formState));
  return cameraApi.Update(toRaw(formState)).then(res => {
    console.log(res);
    if (res.data.data == true) {
      Msg.success('编辑成功')
      return true
    }
    else {
      Msg.error('编辑失败,' + res.data.message)
      return false
    }
  }).catch((err: any) => {
    Msg.error('编辑失败,' + err)
    return false
  })
}

function handleChange(){
  // console.log("111",formState.CbCameraParamsId);
  
}

//获取 CbCameraParamsId
const parmasList = ref([])
function getCbCameraParamsIdList(){
  cameraApi.GetParamsList().then( res =>{
    // console.log("CbCameraParamsId",res);
    if (res.data.data.length != 0) {
        parmasList.value = res.data.data.map((item: any, i: number) => ({ label: item.name, value: item.id }))
        }
        // console.log("parmasList",parmasList);
  })

}

//暴露方法
defineExpose({
  add,
  edit
})

//编辑/新增
onMounted(() => {

  // console.log("收到了", props.editData);
  if (props.editData != null || props.editData != undefined){
    formState.id = props.editData.id;
    formState.name = props.editData.name;
    formState.ip = props.editData.ip;
    formState.CbCameraParamsId = props.editData.cbCameraParamsId;
    formState.userName = props.editData.userName;
    formState.password = props.editData.password;
  }

  //获取 CbCameraParamsId
  getCbCameraParamsIdList() 

})

</script>

<style lang="less" scoped>
:deep(.ant-input) {
  color: #000;
}
</style>