Newer
Older
KaiFengPC / src / views / floodSys / scada / stationInfo / index.vue
@鲁yixuan 鲁yixuan on 29 Aug 4 KB updata
  1. <template>
  2. <!-- PLC 站点管理 -->
  3. <div class="water-analysis-page">
  4. <div class="top">
  5. <el-form ref="ruleForm" inline :model="tableData" v-show="showSearch">
  6. <el-form-item v-for="i in queryClouns" :label="i.label" :prop="i.prop">
  7. <el-select
  8. style="width: 100%"
  9. clearable
  10. v-model="tableData.plcStationType"
  11. class="m-2"
  12. v-if="i.prop == 'plcStationType'"
  13. :placeholder="i.placeholder"
  14. >
  15. <el-option v-for="dict in plc_station_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  16. </el-select>
  17. <el-select
  18. style="width: 100%"
  19. clearable
  20. v-model="tableData.status"
  21. class="m-2"
  22. v-else-if="i.prop == 'status'"
  23. :placeholder="i.placeholder"
  24. >
  25. <el-option v-for="dict in status_source" :key="dict.value" :label="dict.label" :value="dict.value" />
  26. </el-select>
  27. <el-input v-else style="width: 240px" clearable v-model="tableData[i.prop]" :placeholder="i.placeholder"></el-input>
  28. </el-form-item>
  29. <el-form-item>
  30. <el-button type="primary" icon="Search" @click="searchForm"> 搜索</el-button>
  31. <el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
  32. </el-form-item>
  33. </el-form>
  34. <el-row :gutter="10" class="mb8">
  35. <el-col :span="1.5">
  36. <el-button type="primary" plain icon="Plus" @click="onCheck(4)">新增</el-button>
  37. </el-col>
  38. <right-toolbar v-model:showSearch="showSearch" @queryTable="searchForm"></right-toolbar>
  39. </el-row>
  40. </div>
  41. <todoDon ref="todoDonRef"></todoDon>
  42. <el-dialog
  43. v-model="visible"
  44. title="PLC站点信息新增"
  45. :modal-append-to-body="false"
  46. :close-on-click-modal="false"
  47. width="52%"
  48. append-to-body
  49. >
  50. <tableDalgo :key="isFlag" ref="tableDalgoRef" :typeList="typeList" @onModalClose="onModalClose" v-if="visible"></tableDalgo>
  51. <template #footer>
  52. <div class="dialog-footer">
  53. <el-button @click="open2" type="primary">确定</el-button>
  54. <el-button @click="visible = false">取消</el-button>
  55. </div>
  56. </template>
  57. </el-dialog>
  58. </div>
  59. </template>
  60. <script setup>
  61. import tableDalgo from './tableDalgo.vue';
  62. import todoDon from './todoDon.vue';
  63. const { proxy } = getCurrentInstance();
  64. import { status_source } from '@/utils/form';
  65. const { plc_station_type } = proxy.useDict('plc_station_type');
  66. const todoDonRef = ref(null);
  67. const ruleForm = ref(null);
  68. let typeList = ref({});
  69. const tableDalgoRef = ref();
  70. const showSearch = ref(true);
  71. let visible = ref(false);
  72. let isFlag = ref(1);
  73. const queryClouns = [
  74. { label: '站点名称:', prop: 'stationName', placeholder: '站请输入点名称' },
  75. { label: '站点类型:', prop: 'plcStationType', placeholder: '请选择站点类型' },
  76. { label: '状态:', prop: 'status', placeholder: '请选择状态' },
  77. ];
  78. //动态组件
  79. let dataForm = reactive({
  80. tableData: {
  81. pageNum: 1,
  82. pageSize: 10,
  83. plcStationType: null,
  84. stationName: null,
  85. status: null,
  86. },
  87. tableDateTwo: '',
  88. tableLoading: true,
  89. });
  90. let { tableData } = toRefs(dataForm);
  91. //获取列表数据
  92. //搜索
  93. const searchForm = () => {
  94. todoDonRef.value.search(tableData.value);
  95. };
  96. //重置
  97. const resectClcik = () => {
  98. ruleForm.value.resetFields();
  99. todoDonRef.value.search(tableData.value);
  100. };
  101. // 新增
  102. const onCheck = ty => {
  103. visible.value = true;
  104. typeList.value.type = ty;
  105. nextTick(() => {
  106. tableDalgoRef.value.resetFiled();
  107. });
  108. };
  109. //确定
  110. function open2() {
  111. tableDalgoRef.value.submit();
  112. }
  113. function onModalClose() {
  114. visible.value = false;
  115. todoDonRef.value.search(tableData.value);
  116. }
  117. onMounted(() => {
  118. searchForm();
  119. });
  120. </script>
  121. <style lang="scss" scoped>
  122. .water-analysis-page {
  123. padding: 20px;
  124. // overflow-y: hidden;
  125. }
  126. :deep(.el-dialog .el-dialog__body) {
  127. padding-top: 0.10417rem !important;
  128. padding-bottom: 0 !important;
  129. // overflow-y: hidden;
  130. // overflow: auto;
  131. -webkit-box-flex: 1;
  132. -webkit-flex: 1;
  133. -ms-flex: 1;
  134. flex: 1;
  135. }
  136. </style>