houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" append-to-body>
3     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
4       <el-row :gutter="20">
5         <el-col :span="12">
6           <el-form-item label="Tag名称" prop="tagName">
7             <el-input
8               v-model="dataForm.tagName"
9               placeholder="Tag名称"
10               :readonly="!!dataForm.id"
11             ></el-input>
12           </el-form-item>
13         </el-col>
14         <el-col :span="12">
15           <el-form-item label="数据类型" prop="dataType">
16             <dict-select-tag
17               v-model="dataForm.dataType"
18               placeholder="数据类型"
19               dictCode="oadp-data-type"
20             />
21           </el-form-item>
22         </el-col>
23       </el-row>
24       <el-row :gutter="20">
25         <el-col :span="12">
26           <el-form-item label="顺序号" prop="tagId">
27             <el-input
28               v-model="dataForm.tagId"
29               placeholder="顺序号"
30             ></el-input>
31           </el-form-item>
32         </el-col>
33         <el-col :span="12">
34           <el-form-item label="采集频率" prop="samplingRate">
35             <el-input-number
36               :min=0
37               :max="100000"
38               v-model="dataForm.samplingRate"
39               placeholder="采集频率"
40               dictCode="clock-type"
41               style="width: 100%;"
42             />
43           </el-form-item>
44         </el-col>
45       </el-row>
46       <el-row :gutter="20">
47         <el-col :span="12">
48           <el-form-item label="是否启用" prop="enabled">
49             <dict-select-tag
50               v-model="dataForm.enabled"
51               placeholder="是否启用"
52               dictCode="oadp-data-enabled"
53             ></dict-select-tag>
54           </el-form-item>
55         </el-col>
56         <el-col :span="12">
57           <el-form-item label="关联设备" prop="device">
58             <el-input
59               v-model="dataForm.device"
60               placeholder="关联设备"
61               readonly
62             ></el-input>
63           </el-form-item>
64         </el-col>
65       </el-row>
66       <el-row :gutter="20">
67         <el-col :span="20">
68           <el-form-item label="测点描述" prop="tagDesc">
69             <el-input v-model="dataForm.tagDesc" placeholder="测点描述"></el-input>
70           </el-form-item>
71         </el-col>
72       </el-row>
73     </el-form>
74     <span slot="footer" class="dialog-footer">
75       <el-button @click="visible = false">取消</el-button>
76       <el-button :loading="loading" type="primary" @click="dataFormSubmitHandle()">确定</el-button>
77     </span>
78   </el-dialog>
79 </template>
80
81 <script>
82   import debounce from "lodash/debounce";
83   import DictSelectTag from "@/components/dict/dict-select-tag";
84
85   export default {
86     components: {
87       DictSelectTag,
88     },
89     data() {
90       return {
91         loading: false,
92         visible: false,
93         dataForm: {
94           id: '',
95           tagName: '',
96           dataType: '',
97           enabled: 'true',
98           device: '',
99           tagId: '',
100           samplingRate: '0',
101           tagDesc: '',
102         },
103         dataRule: {
104           tagName: [
105             {required: true, message: "Tag名不能为空", trigger: "blur"},
106           ],
107           dataType: [
108             {required: true, message: "数据类型不能为空", trigger: "blur"},
109           ],
110           enabled: [
111             {required: true, message: "是否可以tag不能为空", trigger: "blur"},
112           ],
113           samplingRate: [
114             {required: true, message: "采集频率不能为空", trigger: "blur"},
115           ],
116         },
117       };
118     },
119     methods: {
120       init(id,device) {
121         this.dataForm.device = device
122         this.dataForm.id = id
123         this.visible = true;
124         this.$nextTick(() => {
125             this.$refs['dataForm'].resetFields()
126             if (this.dataForm.id) {
127               this.getInfo()
128             }
129           }
130         )
131       },
132       getInfo() {
133         this.$http.get(`/data/channel/kio/tag/${this.dataForm.id}`).then(({data: res}) => {
134           if (res.code !== 0) {
135             return this.$message.error(res.msg)
136           }
137           this.dataForm = {
138             ...this.dataForm,
139             ...res.data
140           }
141         }).catch(() => {
142         })
143       },
144       // 表单提交
145       dataFormSubmitHandle: debounce(function () {
146         this.$refs['dataForm'].validate((valid) => {
147           if (!valid) {
148             return false
149           }
150           this.loading = true
151           this.$http[!this.dataForm.id ? 'post' : 'put']('/data/channel/kio/tag', {
152             ...this.dataForm
153           }).then(({data: res}) => {
154             this.loading = false
155             if (res.code !== 0) {
156               return this.$message.error(res.msg)
157             }
158             this.$message({
159               message: this.$t('prompt.success'),
160               type: 'success',
161               duration: 500,
162               onClose: () => {
163                 this.visible = false
164                 this.$emit('refreshDataList')
165               }
166             })
167           }).catch(() => {
168           })
169         })
170       }, 1000, {'leading': true, 'trailing': false}),
171     },
172   };
173 </script>
174 <style>
175   .el-select {
176     width: 100%;
177   }
178
179   .el-input-group__append {
180     padding: 0 5px 0 5px;
181   }
182
183   .el-input-group__prepend {
184     padding: 0 5px 0 5px;
185   }
186 </style>