数据项添加数据模型

chuanyi_client2/src/components/HeaderMain/index.vue

@@ -133,16 +133,16 @@
                 <el-select v-model="groupRateForm.readMode" placeholder="请选择读取模式" style="width: 100%;" @change="readModeChange">
                   <el-option
                       v-for="dict in readModeList"
-                      :key="dict.dictValue"
-                      :label="dict.dictKey"
-                      :value="dict.dictValue"
+                      :key="dict.value"
+                      :label="dict.key"
+                      :value="dict.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="模式值" prop="modeValue">
                 <el-input v-model="groupRateForm.modeValue" placeholder="请输入模式值"
                           oninput="value=value.replace(/[^0-9.]/g,'')">
-                  <template slot="append">秒</template>
+                  <template slot="append" v-if="groupRateForm.readMode == '2'">秒</template>
                 </el-input>
               </el-form-item>
             </el-form>
@@ -177,7 +177,7 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div style="display: flex; height: 60vh; overflow: auto;">
+      <div v-if="itemDataStep == 1" style="display: flex; height: 60vh; overflow: auto;">
         <!-- 数据项 -->
         <div class="cy-transform-data">
           <el-divider content-position="left">数据项</el-divider>
@@ -236,18 +236,67 @@
           </div>
         </div>
       </div>
+      <div v-if="itemDataStep == 2">
+        <el-table
+            :data="chooseItemDataList"
+            :key="bomCheckKey"
+            style="width: 100%">
+          <el-table-column
+              label="数据项名称"
+              prop="itemName"
+              width="300">
+          </el-table-column>
+          <el-table-column
+              label="四则运算表达式"
+              prop="rule.operationRule"
+              width="300">
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button
+                  size="mini"
+                  @click="handleChoose(scope.$index, scope.row)">选择表达式</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <span slot='footer'>
-          <el-button type="primary" @click="itemDialogSave">确定</el-button>
+          <el-button type="primary" v-if="itemDataStep == 1" @click="itemDialogSave1">下一步</el-button>
+          <el-button type="primary" v-if="itemDataStep == 2" @click="itemDialogSave2">确定</el-button>
           <el-button @click="itemDialogClose">取消</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog
+        title="选择四则运算表达式"
+        width="500px"
+        top="10vh"
+        center
+        :before-close="dialogDataModelClose"
+        :visible.sync="dialogDataModelVisible"
+        :close-on-click-modal="false"
+        :append-to-body="true">
+      <el-select v-model="chooseDataModel" filterable placeholder="请选择表达式" style="width: 100%;">
+        <el-option
+            v-for="item in this.dataModelList"
+            :key="item.id"
+            :label="item.operationRule"
+            :value="item.id">
+        </el-option>
+      </el-select>
+      <div style="width: 100%; text-align: center; margin-top: 20px;">
+        <el-button type="primary" @click="saveDataModelEvent">确定</el-button>
+        <el-button @click="dialogDataModelClose">取消</el-button>
+      </div>
+    </el-dialog>
+
   </el-tabs>
 </template>
 
 <script>
 import {
   delDataSourceById,
-  delItemGroupById, delTableTemplateById,
+  delItemGroupById, delTableTemplateById, getAllDataModel,
   getAllDataSource,
   getAllItemGroup, getAllTableTemplate,
   getDataSourceItemTree, getItemGroupById,
@@ -265,11 +314,16 @@ export default {
       groupDialogVisible: false,
       dataItemDialogTitle: '选择数据项',
       dataItemDialogVisible: false,
+      dialogDataModelVisible: false,
+      chooseDataModel: null,
+      dataModelList: [],
       labelPosition: 'top',
       // 组配置右键布局显示状态
       visibleGroupMenu: false,
       visibleReportMenu: false,
       visibleGroupChildMenu: false,
+      itemDataStep: 1,
+      bomCheckKey: 0,
       // 右键布局显示位置
       menuLeft: 0,
       // 右键布局显示位置
@@ -290,7 +344,16 @@ export default {
         isLeaf: 'leaf'
       },
       // 读取模式
-      readModeList: [],
+      readModeList: [{
+        'key': '超过设置最大值读取数据',
+        'value': '0'
+      }, {
+        'key': '数据值改变',
+        'value': '1'
+      }, {
+        'key': '频率',
+        'value': '2'
+      }],
       // 数据源
       dataSourceList: [],
       // 数据项
@@ -357,7 +420,7 @@ export default {
   computed: {
   },
   created() {
-    this.getReadMode()
+    // this.getReadMode()
   },
   methods: {
     /** 数据项搜索过滤 */
@@ -560,6 +623,7 @@ export default {
         })
         return
       }
+      this.chooseItemDataList = []
       getItemGroupById(id).then(res => {
         this.createGroupEvent()
         let item = res.data
@@ -582,6 +646,7 @@ export default {
       for (let i in item.itemList) {
         let temp = item.itemList[i]
         arr.push({
+          'dataModelId': temp.dataModelId,
           'label': temp.itemName,
           'nodeIdentifier': temp.nodeIdentifier,
           'nodeIndex': temp.nodeIndex,
@@ -678,7 +743,12 @@ export default {
         })
         return
       }
+      this.itemDataStep = 1
       this.tempItemList = JSON.parse(JSON.stringify(this.groupBasicForm.itemList))
+
+      if (this.tempItemList && this.tempItemList.length > 0) {
+        this.chooseItemDataListByTree = this.tempItemList
+      }
       const loading = showLoading(this, '加载中，请稍候···')
       getDataSourceItemTree(id).then(res => {
         loading.close()
@@ -831,8 +901,8 @@ export default {
       this.$refs.itemTree.setCheckedKeys([])
       this.$refs.chooseItemTree.setCheckedKeys([])
     },
-    /** 选择数据项弹出层保存事件 */
-    itemDialogSave() {
+    /** 选择数据项弹出层保存事件：第一步 */
+    itemDialogSave1() {
       if (this.chooseItemDataListByTree.length == 0) {
         this.$message({
           message: '请选择数据项！',
@@ -845,17 +915,85 @@ export default {
       for (let i in this.chooseItemDataListByTree) {
         let temp = this.chooseItemDataListByTree[i]
         itemList.push({
-          'itemName': temp.label,
+          'dataModelId': temp.dataModelId,
+          'itemName': temp.label ? temp.label : temp.itemName,
           'nodeIdentifier': temp.nodeIdentifier,
           'nodeIndex': temp.nodeIndex,
           'dataType': temp.dataType,
         })
       }
-      this.groupBasicForm.itemList = itemList
-      this.chooseItemDataList = this.chooseItemDataListByTree
+      // this.chooseItemDataList = this.chooseItemDataListByTree
+      this.itemDataStep = 2
+      this.getAllDataModel(itemList)
+    },
+    /** 选择数据项弹出层保存事件：第二步 */
+    itemDialogSave2() {
+      this.groupBasicForm.itemList = this.chooseItemDataList
+      this.itemDataStep = 1
       this.dataItemDialogVisible = false
       this.chooseItemDataView = true
     },
+    /** 查询所有数据模型 */
+    getAllDataModel(itemList) {
+      let loading = showLoading(this, '数据加载中，请稍候···')
+      let params = {
+        'page': 1,
+        'limit': 1000
+      }
+      getAllDataModel(params).then(res => {
+        loading.close()
+        this.itemDataStep = 2
+        if (!res.data) {
+          this.chooseItemDataList = itemList
+          return
+        }
+        let dataModelList = res.data.dataModelList
+        for (let i in itemList) {
+          for (let j in dataModelList) {
+            if (itemList[i].dataModelId == dataModelList[j].id) {
+              itemList[i].rule = dataModelList[j]
+            }
+          }
+        }
+        this.dataModelList = dataModelList
+        this.$nextTick(() => {
+          this.chooseItemDataList = JSON.parse(JSON.stringify(itemList))
+          for (let i in this.chooseItemDataList) {
+            let temp = this.chooseItemDataList[i]
+            if (!temp.rule) {
+              temp.rule = {
+                'operationRule': '默认值'
+              }
+              temp.dataModelId = null
+            }
+          }
+          this.bomCheckKey ++
+        })
+      }).catch((e) => {
+        loading.close()
+      })
+    },
+    /** 保存数据模型事件 */
+    saveDataModelEvent() {
+      let item = {}
+      for (let i in this.dataModelList) {
+        if (this.chooseDataModel == this.dataModelList[i].id) {
+          item = this.dataModelList[i]
+        }
+      }
+      this.$nextTick(() => {
+        this.chooseItemDataList[this.chooseDataItemIndex].rule = item
+        this.chooseItemDataList[this.chooseDataItemIndex].dataModelId = item.id
+        this.bomCheckKey ++
+      })
+      this.dialogDataModelVisible = false
+    },
+    /** 选择数据模型 */
+    handleChoose(index, row) {
+      this.chooseDataItemIndex = index
+      this.chooseDataModel = null
+      this.dialogDataModelVisible = true
+    },
     /** 报表模板移除 */
     removeReportItem(node, data) {
       this.$confirm('您确定要删除该报表模板吗？', '温馨提示', {
@@ -915,7 +1053,15 @@ export default {
       } else {
         this.dataItemDialogVisible = false
       }
-    }
+    },
+    /** 弹出层关闭事件 */
+    dialogDataModelClose() {
+      if (typeof(done) === 'function') {
+        done()
+      } else {
+        this.dialogDataModelVisible = false
+      }
+    },
   }
 }
 </script>