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-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, toRaw, UnwrapRef, watch } from 'vue';
import * as cameraApi from '@/axios/cameraBase/cameraApi';
import Msg from '@/utils/message';
interface FormState {
  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({
  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));
}

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

//编辑/新增
onMounted(() => {
  console.log("收到了", props.editData);
  if (props.editData != null || props.editData != undefined){
    
  }

})

</script>

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