ConfigAdd.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div class="add">
  3. <el-dialog
  4. v-model="dialogVisible"
  5. :title="tabName + (logType === 'add' ? '新增' : '修改')"
  6. width="500"
  7. >
  8. <el-form
  9. :label-position="labelPosition"
  10. label-width="auto"
  11. :model="formLabelAlign"
  12. style="max-width: 600px"
  13. ref="ruleFormRef"
  14. >
  15. <el-form-item
  16. label="配置地址"
  17. :label-position="itemLabelPosition"
  18. prop="configIp"
  19. >
  20. <el-input v-model="formLabelAlign.configIp" />
  21. </el-form-item>
  22. <el-form-item
  23. label="配置名称"
  24. :label-position="itemLabelPosition"
  25. prop="configName"
  26. >
  27. <el-input v-model="formLabelAlign.configName" />
  28. </el-form-item>
  29. <el-form-item
  30. label="仪器编码 "
  31. :label-position="itemLabelPosition"
  32. prop="instrumentCode"
  33. >
  34. <el-input v-model="formLabelAlign.instrumentCode" />
  35. </el-form-item>
  36. <el-form-item
  37. label="仪器类型 "
  38. :label-position="itemLabelPosition"
  39. prop="instrumentType"
  40. >
  41. <el-select
  42. v-model="formLabelAlign.instrumentType"
  43. placeholder="请选择仪器类型"
  44. size="large"
  45. >
  46. <el-option
  47. v-for="item in options"
  48. :key="item.id"
  49. :label="item.dictLabel"
  50. :value="item.dictValue"
  51. />
  52. </el-select>
  53. </el-form-item>
  54. </el-form>
  55. <template #footer>
  56. <div class="dialog-footer">
  57. <el-button @click="dialogVisible = false">取消</el-button>
  58. <el-button type="primary" @click="saveFun"> 保存 </el-button>
  59. </div>
  60. </template>
  61. </el-dialog>
  62. </div>
  63. </template>
  64. <script lang="ts" setup>
  65. import { reactive, ref, watch } from "vue";
  66. import { selectInstrumentType } from "@/api/config";
  67. const dialogVisible = ref(false);
  68. import type { FormItemProps, FormProps } from "element-plus";
  69. const labelPosition = ref<FormProps["labelPosition"]>("right");
  70. const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
  71. interface VersionItem {
  72. instrumentType: string;
  73. configName: string;
  74. configIp: string;
  75. instrumentProperty: number;
  76. instrumentCode: string;
  77. }
  78. //configIp 配置地址 true
  79. //configName 配置名称 true
  80. //engineeringId 测试工程id false
  81. //instrumentCode 仪器编码 true
  82. //instrumentProperty 仪器属性(1工程仪器 2执行仪器) true
  83. //instrumentType 仪器类型
  84. const formLabelAlign = ref<VersionItem>({
  85. instrumentType: "",
  86. configName: "",
  87. configIp: "",
  88. instrumentProperty: 1,
  89. instrumentCode: "",
  90. });
  91. const emit = defineEmits(["save"]);
  92. const saveFun = () => {
  93. emit("save", formLabelAlign.value, flag.value);
  94. };
  95. const props = defineProps(["tabName"]);
  96. const ruleFormRef = ref();
  97. const flag = ref("");
  98. //show弹框
  99. const logType = ref("");
  100. const showDialog = (type: string, data: any) => {
  101. logType.value = type;
  102. dialogVisible.value = true;
  103. ruleFormRef.value && ruleFormRef.value.resetFields();
  104. flag.value = type;
  105. formLabelAlign.value = JSON.parse(JSON.stringify(data));
  106. };
  107. const hiddenDialog = () => {
  108. dialogVisible.value = false;
  109. };
  110. defineExpose({
  111. showDialog,
  112. hiddenDialog,
  113. });
  114. const options = ref([{}]);
  115. onMounted?.(() => {
  116. //查询仪器类型,可以初始化查询,也可以在 showDialog 弹框显示的时候查询
  117. selectInstrumentType({}).then((res) => {
  118. options.value = res.data;
  119. });
  120. });
  121. </script>
  122. <style scoped lang="scss">
  123. // .add {
  124. // // position: fixed;
  125. // // width: 100%;
  126. // // height: 100%;
  127. // // z-index: 10;
  128. // // background-color: #000;
  129. // }
  130. </style>