前台流程设计页面初版完毕

src/views/components/task/rule/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-form ref="form" label-width="80px">
+      <el-form-item label="选择规则级别">
+        <el-select v-model="ruleRank" @change="selectVersionById" placeholder="请选择规则级别">
+          <el-option label="数据集" value="3"></el-option>
+          <el-option label="行" value="2"></el-option>
+          <el-option label="字段" value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择规则级别">
+        <el-select v-model="ruleId" placeholder="请选择规则级别">
+          <el-option
+            v-for="item in ruleList"
+            :key="item.id"
+            :label="item.versionName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="findByTableId">确定</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-dialog
+      title="选择字段"
+      :visible.sync="ruleOpen"
+      width="70%">
+      <el-select v-model="tableFieAsId" @change="configAdd" placeholder="请选择规则级别">
+        <el-option
+          v-for="item in fieList"
+          :key="item.tableFieId"
+          :label="item.tableFieAsId"
+          :value="item.tableFieId">
+        </el-option>
+      </el-select>
+      <el-button @click="addNodeRule">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+
+
+import { addNodeRule } from '@/api/task/task'
+import { selectEngineList } from '@/api/engine/engine'
+import { getVersionById } from '@/api/version/version'
+
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: ["nodeId"],
+  data() {
+    //这里存放数据"
+
+    return {
+      ruleOpen: false,
+      fieList: [],
+      ruleList: [],
+      ruleRank: null,
+      ruleId: null,
+      tableFieAsId: null,
+      config: null,
+      tableFieId : null,
+      taskId:this.$route.params.id,
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    configAdd(val){
+      let obj ={"key":this.tableFieAsId};
+      this.config = JSON.stringify(obj);
+    },
+    addNodeRule(){
+      addNodeRule({"nodeId":this.nodeId,"taskId":this.taskId,"ruleId":this.ruleId,"config":this.config}).then(res => {
+
+        this.$emit('ruleDestroy', false)
+      })
+    },
+    cancel() {
+      this.$emit('ruleDestroy', false)
+    },
+    findByTableId() {
+      console.log(this.taskId)
+      // findByTableFieName(this.taskId).then(res => {
+      //
+      //   let list = res.data;
+      //   console.log(list)
+      //   let newList = [];
+      //
+      //   list.forEach(item => {
+      //     let tableFieIdList = item.tableFieId.split(',');
+      //     let tableAsFieIdList = item.tableAsFieId.split(',');
+      //
+      //     tableFieIdList.forEach((tableFieId, index) => {
+      //       newList.push({
+      //         tableFieId: tableFieId,
+      //         tableAsFieId: tableAsFieIdList[index]
+      //       });
+      //     });
+      //   });
+      //
+      //   //console.log(newList);
+      //   this.fieList = newList;
+      //   this.ruleOpen = true;
+      // })
+    },
+    selectVersionById(id){
+      console.log(id)
+      getVersionById(id).then(res => {
+        //.log(res.data)
+        this.ruleList = res.data;
+        console.log(this.ruleList)
+        console.log('aa')
+      })
+    }
+
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>