项目初始化

datax-ui/src/views/quality/checkrule/CheckRuleAdd.vue

@@ -125,13 +125,13 @@ export default {
           { required: true, message: '规则名称不能为空', trigger: 'blur' }
         ],
         ruleSourceId: [
-          { required: true, message: '数据源不能为空', trigger: 'blur' }
+          { required: true, message: '数据源不能为空', trigger: 'change' }
         ],
         ruleTableId: [
-          { required: true, message: '数据表不能为空', trigger: 'blur' }
+          { required: true, message: '数据表不能为空', trigger: 'change' }
         ],
         ruleColumnId: [
-          { required: true, message: '核查字段不能为空', trigger: 'blur' }
+          { required: true, message: '核查字段不能为空', trigger: 'change' }
         ]
       },
       // 状态数据字典

datax-ui/src/views/standard/datacontrast/DataContrastList.vue

@@ -172,15 +172,20 @@
         />
       </el-card>
     </el-col>
+
+    <!-- 对照表对话框 -->
+    <form-contrast v-if="dialogFormContrastVisible" :visible.sync="dialogFormContrastVisible" :data="currentContrast" @handleFormContrastFinished="getTree"></form-contrast>
   </el-row>
 </template>
 
 <script>
 import { getContrastTree, delContrast } from '@/api/standard/contrast'
 import { pageContrastDict, delContrastDict } from '@/api/standard/contrastdict'
+import FormContrast from './components/FormContrast'
 
 export default {
   name: 'DataContrastList',
+  components: { FormContrast },
   data() {
     return {
       tableHeight: document.body.offsetHeight - 310 + 'px',
@@ -233,7 +238,10 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'label'
-      }
+      },
+      // 对照表
+      dialogFormContrastVisible: false,
+      currentContrast: {}
     }
   },
   created() {
@@ -276,8 +284,12 @@ export default {
       this.$set(data, 'show', false)
     },
     handleAddContrast() {
+      this.dialogFormContrastVisible = true
+      this.currentContrast = {}
     },
     handleEditContrast(data) {
+      this.dialogFormContrastVisible = true
+      this.currentContrast = Object.assign({}, data)
     },
     handleDelContrast(data) {
       this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {

datax-ui/src/views/standard/datacontrast/components/FormContrast.vue

+<template>
+  <el-dialog title="对照表" width="50%" :visible.sync="dialogVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="数据源" prop="sourceId">
+        <el-select v-model="form.sourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
+          <el-option
+            v-for="source in sourceOptions"
+            :key="source.id"
+            :label="source.sourceName"
+            :value="source.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数据表" prop="tableId">
+        <el-select v-model="form.tableId" placeholder="请选择数据表" @change="tableSelectChanged">
+          <el-option
+            v-for="table in tableOptions"
+            :key="table.id"
+            :label="table.tableName"
+            :value="table.id">
+            <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="对照字段" prop="columnId">
+        <el-select v-model="form.columnId" placeholder="请选择对照字段" @change="columnSelectChanged">
+          <el-option
+            v-for="column in columnOptions"
+            :key="column.id"
+            :label="column.columnName"
+            :value="column.id">
+            <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标准类别" prop="gbTypeId">
+        <el-select v-model="form.gbTypeId" placeholder="请选择标准类别" @change="gbTypeSelectChanged">
+          <el-option
+            v-for="type in gbTypeOptions"
+            :key="type.id"
+            :label="type.gbTypeName"
+            :value="type.id">
+            <span style="float: left">{{ type.gbTypeName + '(' + type.gbTypeCode + ')' }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addContrast, updateContrast } from '@/api/standard/contrast'
+import { listDataSource } from '@/api/metadata/datasource'
+import { listDataTable } from '@/api/metadata/datatable'
+import { listDataColumn } from '@/api/metadata/datacolumn'
+import { listDataDictType } from '@/api/standard/datadict'
+
+export default {
+  name: 'FormContrast',
+  props: {
+    visible: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        sourceId: undefined,
+        sourceName: undefined,
+        tableId: undefined,
+        tableName: undefined,
+        columnId: undefined,
+        columnName: undefined,
+        gbTypeId: undefined,
+        gbTypeCode: undefined,
+        gbTypeName: undefined
+      },
+      rules: {
+        sourceId: [
+          { required: true, message: '数据源不能为空', trigger: 'change' }
+        ],
+        tableId: [
+          { required: true, message: '数据表不能为空', trigger: 'change' }
+        ],
+        columnId: [
+          { required: true, message: '对照字段不能为空', trigger: 'change' }
+        ],
+        gbTypeId: [
+          { required: true, message: '标准类别不能为空', trigger: 'change' }
+        ]
+      },
+      sourceOptions: [],
+      tableOptions: [],
+      columnOptions: [],
+      gbTypeOptions: []
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    console.log(this.data)
+    this.form = Object.assign({}, this.data)
+    this.getDataSourceList()
+    this.getDictTypeList()
+  },
+  methods: {
+    getDictTypeList() {
+      listDataDictType().then(response => {
+        if (response.success) {
+          this.gbTypeOptions = response.data
+        }
+      })
+    },
+    getDataSourceList() {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    sourceSelectChanged(val) {
+      listDataTable({ sourceId: val }).then(response => {
+        if (response.success) {
+          this.tableOptions = response.data
+          this.columnOptions = []
+          const source = this.sourceOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.sourceName = source.sourceName
+          this.form.tableId = ''
+          this.form.tableName = ''
+          this.form.columnId = ''
+          this.form.columnName = ''
+        }
+      })
+    },
+    tableSelectChanged(val) {
+      listDataColumn({ sourceId: this.form.sourceId, tableId: val }).then(response => {
+        if (response.success) {
+          this.columnOptions = response.data
+          const table = this.tableOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.tableName = table.tableName
+          this.form.columnId = ''
+          this.form.columnName = ''
+        }
+      })
+    },
+    columnSelectChanged(val) {
+      const column = this.columnOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.columnName = column.columnName
+    },
+    gbTypeSelectChanged(val) {
+      const gbType = this.gbTypeOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.gbTypeCode = gbType.gbTypeCode
+      this.form.gbTypeName = gbType.gbTypeName
+    },
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id) {
+            updateContrast(this.form).then(response => {
+              if (response.success) {
+                this.$message.success('保存成功')
+                this.dialogVisible = false
+                this.$emit('handleFormContrastFinished')
+              }
+            }).catch(error => {
+              this.$message.error(error.msg || '保存失败')
+            })
+          } else {
+            addContrast(this.form).then(response => {
+              if (response.success) {
+                this.$message.success('保存成功')
+                this.dialogVisible = false
+                this.$emit('handleFormContrastFinished')
+              }
+            }).catch(error => {
+              this.$message.error(error.msg || '保存失败')
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>