AddVue.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <n-button type="primary" @click="showAddModal">添加数据</n-button>
  3. <n-modal
  4. v-model:show="showModal"
  5. :show-icon="false"
  6. preset="dialog"
  7. title="添加">
  8. <n-form :model="formValue" label-width="auto" show-require-mark>
  9. <n-form-item label="测点" path="T_id">
  10. <n-select
  11. v-model:value="formValue.T_id"
  12. label-field="T_id"
  13. value-field="T_id"
  14. @update:value="handleUpdateValue"
  15. :options="classList"
  16. />
  17. </n-form-item>
  18. <n-form-item label="温度" path="T_t">
  19. <n-input v-model:value="formValue.T_t">
  20. <template #suffix> ℃ </template>
  21. </n-input>
  22. </n-form-item>
  23. <n-form-item label="湿度" path="T_rh">
  24. <n-input v-model:value="formValue.T_rh">
  25. <template #suffix> % </template>
  26. </n-input>
  27. </n-form-item>
  28. <n-form-item label="时间" path="T_time">
  29. <n-date-picker
  30. v-model:formatted-value="formValue.T_time"
  31. value-format="yyyy-MM-dd HH:mm:ss"
  32. type="datetime"
  33. clearable
  34. class="w-full"
  35. />
  36. </n-form-item>
  37. <n-form-item>
  38. <n-button type="primary" style="margin-right: 20px;" @click="addTask">
  39. 立即提交
  40. </n-button>
  41. <n-button @click="showModal = false">取消</n-button>
  42. </n-form-item>
  43. </n-form>
  44. </n-modal>
  45. </template>
  46. <script setup>
  47. import { addTaskData } from '@/api';
  48. // const emit = defineEmits(["submit"]);
  49. const props = defineProps({
  50. task: {
  51. required: true,
  52. default: {},
  53. },
  54. classList: {
  55. required: true,
  56. default: [],
  57. },
  58. });
  59. const message = useMessage();
  60. // 是否展示 Modal
  61. const showModal = ref(false);
  62. // 表单数据
  63. const formValue = reactive({
  64. T_sn: null,
  65. T_id: null,
  66. T_t: null,
  67. T_rh: null,
  68. T_time: null,
  69. });
  70. // 值更新时执行的回调
  71. const handleUpdateValue = (value, option) => {
  72. console.log('handleUpdateValue',option)
  73. formValue.T_id = option.T_id;
  74. formValue.T_sn = option.T_sn;
  75. };
  76. // 显示添加
  77. const showAddModal = () => {
  78. showModal.value = true;
  79. Object.keys(formValue).forEach((key) => (formValue[key] = null));
  80. };
  81. // 获取设备列表
  82. const addTask = async () => {
  83. const sto = await inspect(formValue)
  84. console.log('999',formValue)
  85. if(sto){
  86. Object.keys(formValue).forEach((key) => (formValue[key] += ''));
  87. const { data: res } = await addTaskData({
  88. T_task_id: props.task.T_task_id,
  89. ...formValue,
  90. });
  91. if (res.Code === 200) {
  92. showModal.value = false
  93. message.success(res.Msg);
  94. }
  95. }else{
  96. message.error('所有选项都为必填哦')
  97. return
  98. }
  99. };
  100. const inspect = (value)=>{
  101. return new Promise(resolve=>{
  102. const j = Object.keys(value).every(key=>{
  103. return value[key] != null
  104. })
  105. resolve(j)
  106. })
  107. }
  108. </script>
  109. <style lang="scss" scoped></style>