houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
3              :close-on-press-escape="false" width="60%">
4     <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
5              label-width="120px">
6       <el-row>
7         <el-col :span="12">
8           <el-form-item prop="itemNo" :label="$t('indItem.itemNo')">
9             <el-input v-model="dataForm.itemNo" :readonly="!!dataForm.id"></el-input>
10           </el-form-item>
11         </el-col>
12         <el-col :span="12">
13           <el-form-item prop="itemName" :label="$t('indItem.itemName')">
14             <el-input v-model="dataForm.itemName"></el-input>
15           </el-form-item>
16         </el-col>
17       </el-row>
18       <el-row>
19         <el-col :span="12">
20           <el-form-item prop="itemType" :label="$t('indItem.itemType')">
21             <dict-select-tag style="width: 100%;" v-model="dataForm.itemType" dictCode="item_type"
22                              :disabled="!!dataForm.id"
23                              :placeholder="$t('indItem.itemType')"></dict-select-tag>
24           </el-form-item>
25         </el-col>
26         <el-col :span="12">
27           <el-form-item prop="coefficient" :label="$t('indItem.coefficient')">
28             <el-input v-model="dataForm.coefficient"></el-input>
29           </el-form-item>
30         </el-col>
31       </el-row>
32       <el-row>
33         <el-col :span="12">
34           <el-form-item prop="precision" :label="$t('indItem.precision')">
35             <el-input-number v-model="dataForm.precision" style="width: 100%"
36                              :controls="false" :placeholder="$t('indItem.precision')"></el-input-number>
37           </el-form-item>
38         </el-col>
39         <el-col :span="12">
40           <el-form-item prop="businessType" :label="$t('indItem.businessType')">
41             <dict-select-tag style="width: 100%;" v-model="dataForm.businessType" dictCode="business_type"
42                              :placeholder="$t('indItem.businessType')"></dict-select-tag>
43           </el-form-item>
44         </el-col>
45       </el-row>
46       <el-row>
47         <el-col :span="12">
48           <el-form-item prop="timeRange" :label="$t('indItem.timeRange')">
49             <dict-select-tag style="width: 100%;" v-model="dataForm.timeRange" dictCode="time_range"
50                              :placeholder="$t('indItem.timeRange')"></dict-select-tag>
51           </el-form-item>
52         </el-col>
53         <el-col :span="12">
54           <el-form-item prop="timeGranularity" :label="$t('indItem.timeGranularity')">
55             <dict-select-tag style="width: 100%;" v-model="dataForm.timeGranularity" dictCode="time_granularity"
56                              :placeholder="$t('indItem.timeGranularity')"></dict-select-tag>
57           </el-form-item>
58         </el-col>
59       </el-row>
60       <el-row>
61         <el-col :span="24">
62           <el-form-item prop="remark" :label="$t('indItem.remark')">
63             <el-input v-model="dataForm.remark"></el-input>
64           </el-form-item>
65         </el-col>
66       </el-row>
67
68       <!--原子指标-->
69       <el-row v-if="dataForm.itemType === 'ATOM'">
70         <el-col :span="12">
71           <el-form-item prop="dataSource" :label="$t('indItem.dataSource')">
72             <el-input v-model="dataForm.dataSource"></el-input>
73           </el-form-item>
74         </el-col>
75         <el-col :span="24">
76           <el-form-item prop="querySql" :label="$t('indItem.querySql')">
77             <el-input v-model="dataForm.querySql" rows="5" type="textarea" placeholder="查询语句"
78                       spellcheck="false"></el-input>
79           </el-form-item>
80         </el-col>
81       </el-row>
82
83       <!--计算指标-->
84       <el-row v-if="dataForm.itemType === 'CAL'">
85         <el-col :span="24">
86           <el-form-item prop="expression" :label="$t('indItem.expression')">
87             <el-input v-model="dataForm.expression" placeholder="表达式"></el-input>
88           </el-form-item>
89         </el-col>
90       </el-row>
91     </el-form>
92     <template slot="footer">
93       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
94       <el-button :loading="loading" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
95     </template>
96   </el-dialog>
97 </template>
98 <script>
99   import debounce from 'lodash/debounce'
100   import DictSelectTag from "@/components/dict/dict-select-tag";
101
102   export default {
103     components: {
104       DictSelectTag
105     },
106     data() {
107       return {
108         loading: false,
109         visible: false,
110         dataForm: {
111           id: '',
112           itemNo: '',
113           itemName: '',
114           itemType: '',
115           coefficient: '',
116           precision: '',
117           businessType: '',
118           timeRange: '',
119           timeGranularity: '',
120           remark: '',
121           dataSource: '',
122           querySql: '',
123           expression: ''
124         }
125       }
126     },
127     computed: {
128       dataRule() {
129         return {
130           itemNo: [
131             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
132           ],
133           itemName: [
134             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
135           ],
136           itemType: [
137             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
138           ],
139           businessType: [
140             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
141           ],
142           timeRange: [
143             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
144           ],
145           timeGranularity: [
146             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
147           ]
148         }
149       }
150     },
151     methods: {
152       init() {
153         this.visible = true
154         this.$nextTick(() => {
155             this.$refs['dataForm'].resetFields()
156             this.dataForm.dataSource = ''
157             this.dataForm.querySql = ''
158             this.dataForm.expression = ''
159             if (this.dataForm.id) {
160               this.getInfo()
161             }
162           }
163         )
164       },
165       getInfo() {
166         this.$http.get(`/iailab-ntt-data/ind/item/${this.dataForm.id}`).then(({data: res}) => {
167           if (res.code !== 0) {
168             return this.$message.error(res.msg)
169           }
170           this.dataForm = {
171             ...this.dataForm,
172             ...res.data
173           }
174           if (this.dataForm.itemType === 'ATOM') {
175             this.dataForm.dataSource = res.data.indItemAtom.dataSource
176             this.dataForm.querySql = res.data.indItemAtom.querySql
177           } else if (this.dataForm.itemType === 'CAL') {
178             this.dataForm.expression = res.data.indItemCal.expression
179           }
180         }).catch(() => {
181         })
182       },
183       // 表单提交
184       dataFormSubmitHandle: debounce(function () {
185         this.$refs['dataForm'].validate((valid) => {
186           if (!valid) {
187             return false
188           }
189           this.loading = true
190           this.$http[!this.dataForm.id ? 'post' : 'put']('/iailab-ntt-data/ind/item', {
191             ...this.dataForm
192           }).then(({data: res}) => {
193             this.loading = false
194             if (res.code !== 0) {
195               return this.$message.error(res.msg)
196             }
197             this.$message({
198               message: this.$t('prompt.success'),
199               type: 'success',
200               duration: 500,
201               onClose: () => {
202                 this.visible = false
203                 this.$emit('refreshDataList')
204               }
205             })
206           }).catch(() => {
207           })
208         })
209       }, 1000, {'leading': true, 'trailing': false})
210     }
211   }
212 </script>
213 <style>
214
215   .el-radio + .el-radio {
216     margin-left: 10px !important;
217   }
218 </style>