Newer
Older
KaiFengPC / src / views / floodSys / scada / deviceInfo / tableDalgo.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <el-form label-width="auto" :rules="deviceInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
  5. <el-form-item
  6. :label="i.label"
  7. :style="{ width: i.prop == 'remark' ? '93%' : '45%' }"
  8. :prop="i.prop"
  9. v-for="i in deviceInfoForm"
  10. :disabled="typeList.type == 1 || typeList.type == 2"
  11. >
  12. <el-select
  13. style="width: 100%"
  14. clearable
  15. v-model="FormList.stationName"
  16. v-if="i.prop == 'stationName'"
  17. @change="stationNameChange"
  18. :placeholder="i.placeholder"
  19. >
  20. <el-option
  21. v-for="dict in typeLista.stationName_type"
  22. :key="dict.stationCode"
  23. :label="dict.stationName"
  24. :value="dict.stationCode"
  25. />
  26. </el-select>
  27. <el-select
  28. style="width: 100%"
  29. clearable
  30. v-model="FormList.areaCode"
  31. v-else-if="i.prop == 'areaCode'"
  32. :placeholder="i.placeholder"
  33. >
  34. <el-option v-for="dict in typeLista.areaName_type" :key="dict.stationCode" :label="dict.areaName" :value="dict.areaCode" />
  35. </el-select>
  36. <el-select
  37. style="width: 100%"
  38. clearable
  39. v-model="FormList.deviceType"
  40. v-else-if="i.prop == 'deviceType'"
  41. :placeholder="i.placeholder"
  42. >
  43. <el-option v-for="item in device_type" :key="item.value" :label="item.label" :value="item.value" />
  44. </el-select>
  45. <el-radio-group v-model="FormList.status" class="ml-4" v-else-if="i.prop == 'status'">
  46. <el-radio style="margin-top: -5px" label="1" size="large">启用</el-radio>
  47. <el-radio style="margin-top: -5px" label="0" size="large">停用</el-radio>
  48. </el-radio-group>
  49. <el-input
  50. v-else
  51. v-model="FormList[i.prop]"
  52. :placeholder="i.placeholder"
  53. :disabled="i.prop == 'stationCode' || (i.prop == 'deviceCode' && typeList.type == 2)"
  54. :type="i.prop == 'remark' ? 'textarea' : ''"
  55. >
  56. <template #append v-if="i.prop == 'budget'"> 万元 </template>
  57. </el-input>
  58. </el-form-item>
  59. <el-form-item label="图片:">
  60. <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
  61. </el-form-item>
  62. </el-form>
  63. </div>
  64. </div>
  65. </template>
  66. <script setup>
  67. import { stationInfolist, areaInfolist } from '@/api/scada/areaInfo';
  68. import { projectInfoAdd, projectInfoEdit } from '@/api/scada/deviceInfo';
  69. import { getToken } from '@/utils/auth';
  70. import { deviceInfoRules } from '@/utils/rules';
  71. import { deviceInfoForm } from '@/utils/form';
  72. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  73.  
  74. const { proxy } = getCurrentInstance();
  75. const { device_type } = proxy.useDict('device_type');
  76. const uploadHeader = ref({
  77. Authorization: 'Bearer ' + getToken(),
  78. });
  79. const { typeList } = defineProps(['typeList']);
  80. const ProjectListData = ref([]);
  81. const typeLista = ref({});
  82. const emits = defineEmits();
  83. defineExpose({ submit, closed, resetFiled });
  84. let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1' });
  85. const fileList1 = ref([]);
  86. function submit() {
  87. proxy.$refs.ruleForm.validate(valid => {
  88. if (valid) {
  89. if (typeList.type == 4) {
  90. projectInfoAdd(FormList.value).then(({ code }) => {
  91. if (code == 200) {
  92. proxy.$modal.msgSuccess('新增成功');
  93. emits('onModalClose');
  94. }
  95. });
  96. } else {
  97. projectInfoEdit(FormList.value).then(({ code }) => {
  98. if (code == 200) {
  99. proxy.$modal.msgSuccess('修改成功');
  100. emits('onModalClose');
  101. }
  102. });
  103. }
  104. }
  105. });
  106. }
  107. function resetFiled() {
  108. proxy.$refs.ruleForm.resetFields();
  109. FormList.value.fileSaveRequestList = [];
  110. fileList1.value = [];
  111. }
  112. function closed() {
  113. emits('onModalClose');
  114. }
  115. function stationNameChange(v) {
  116. FormList.value.stationCode = v;
  117. FormList.value.areaCode = '';
  118. areaInfolistM({ stationCode: v });
  119. }
  120. const stationInfolistM = async () => {
  121. let { data } = await stationInfolist();
  122. typeLista.value.stationName_type = data;
  123. };
  124. const areaInfolistM = async p => {
  125. let { data } = await areaInfolist(p);
  126. typeLista.value.areaName_type = data;
  127. };
  128.  
  129. onMounted(() => {
  130. FormList.value = typeList;
  131. FormList.value.stationName = typeList.stationCode;
  132. stationInfolistM();
  133. areaInfolistM({ stationCode: typeList.stationCode });
  134. // loadProjerctListData();
  135. });
  136. </script>
  137. <style lang="scss" scoped>
  138. .water-analysis-page {
  139. padding: 10px;
  140. }
  141. </style>