addTabFunNum.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <!-- 新增表号-功能号 -->
  3. <div id="addTabFunNum">
  4. <el-form :model='form' label-width="150px" ref="ruleForm" :rules="rules" style="overflow:auto;">
  5. <el-form-item label="表号-功能号" prop="MeterFunc">
  6. <el-input v-model="form.MeterFunc" placeholder="请输入表号-功能号"></el-input>
  7. </el-form-item>
  8. <el-form-item label="设定采集间隔时间" prop="CollectInterval">
  9. <el-input v-model="form.CollectInterval" placeholder="设定时间不能小于10s"></el-input>
  10. </el-form-item>
  11. <el-form-item label="值单位" prop="Unit">
  12. <el-cascader :options='options' v-model='form.Unit'></el-cascader>
  13. </el-form-item>
  14. <el-form-item label="取值公式" prop="DataRuleContent">
  15. <el-input type="textarea" placeholder="请输入取值公式" v-model="form.DataRuleContent"></el-input>
  16. </el-form-item>
  17. <el-form-item label="" style="text-align:right;margin-bottom:0px">
  18. <el-button @click="$emit('closeDrawer')">取消</el-button>
  19. <el-button type="primary" @click="add()">新增</el-button>
  20. </el-form-item>
  21. </el-form>
  22. </div>
  23. </template>
  24. <script>
  25. import { Message } from 'element-ui';
  26. import {
  27. addTabFunNum
  28. } from '@/api/scan/request'
  29. import { batchQueryUnit } from '@/fetch/point_http'
  30. export default {
  31. data() {
  32. return {
  33. form: {
  34. MeterFunc: '',//表号-功能号
  35. CollectInterval: '',//采集间隔时间
  36. DataRuleContent: '',//取值公式
  37. Unit: '',//值单位
  38. },
  39. //下拉框选项
  40. options: [
  41. ],
  42. //验证规则
  43. rules: {
  44. MeterFunc: [
  45. { required: true, message: '请输入表号-功能号', trigger: 'blur' }
  46. ],
  47. CollectInterval: [
  48. { required: true, message: '请输入采集间隔时间', trigger: 'blur' }
  49. ],
  50. Unit: [
  51. { required: true, message: '请选择值单位', trigger: 'change' }
  52. ],
  53. DataRuleContent: [
  54. { required: true, message: '请填写取直公式', trigger: 'blur' }
  55. ]
  56. }
  57. }
  58. },
  59. methods: {
  60. //添加
  61. add() {
  62. //验证参数
  63. this.$refs.ruleForm.validate((valid) => {
  64. if (valid) {
  65. this.form.Unit = this.form.Unit.toString();
  66. addTabFunNum(this.form, res => {
  67. //成功提示
  68. Message.success('添加成功');
  69. //清楚当前表单数据,500ms后关闭
  70. let that = this;
  71. that.$emit('reloadData');
  72. setTimeout(() => {
  73. that.$emit('closeDrawer');
  74. that.form = {
  75. MeterFunc: '',
  76. CollectInterval: '',
  77. DataRuleContent: '',
  78. Unit: '',
  79. }
  80. }, 500);
  81. });
  82. } else {
  83. return false;
  84. }
  85. });
  86. },
  87. //加载下拉框
  88. initSelect() {
  89. batchQueryUnit({}, res => {
  90. let data = res.Content
  91. let arr = []
  92. data.forEach(item => {
  93. let first = {
  94. value: item.Type,
  95. label: item.Type,
  96. children: []
  97. }
  98. item.Units.forEach(ele => {
  99. let second = {}
  100. second = {
  101. value: ele.Name,
  102. label: ele.Name
  103. }
  104. first.children.push(second)
  105. })
  106. arr.push(first)
  107. })
  108. this.options = arr
  109. })
  110. }
  111. },
  112. mounted() {
  113. this.initSelect();
  114. }
  115. }
  116. </script>
  117. <style lang="less" scoped>
  118. </style>