laws-sinotruk-client/src/views/system/modules/DataLogModal.vue

<template>
  <div>
    <a-modal
      :width="modalWidth"
      :visible="visible"
      title="数据对比窗口"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="取消">

      <a-spin :spinning="confirmLoading">
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row class="form-row" :gutter="24">
            <a-col :md="12" :sm="8">
              <a-form-item label="数据库表名"  :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
                <a-input placeholder="请输入数据库表名" v-decorator="[ 'dataTale', {}]" @blur="handleTableBlur" disabled/>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="8">
              <a-form-item label="数据ID"  :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-input placeholder="请输入数据ID" v-decorator="[ 'dataId', {}]" @blur="handleIdBlur" disabled/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="form-row" :gutter="24">
            <a-col :md="12" :sm="8">
              <a-form-item label="版本号1"  :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
                <a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion1', {}]" @change="handleChange1">
                  <a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
                    {{ log.dataVersion }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="8">
              <a-form-item label="版本号2"  :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion2', {}]" @change="handleChange2">
                  <a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
                    {{ log.dataVersion }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
      <data-log-compare-modal ref="modal" @ok="modalFormOk" ></data-log-compare-modal>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import DataLogCompareModal from './DataLogCompareModal'
export default {
  name: 'DataLogModal',
  components: { DataLogCompareModal },
  dataId1: '',
  dataId2: '',
  dataTable1: '',
  dataID3: '',

  data () {
    return {
      modalWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      title: '操作',
      visible: false,
      model: {},
      confirmLoading: false,
      headers: {},
      form: this.$form.createForm(this),
      url: {
        queryDataVerListUrl: '/sys/dataLog/queryDataVerList'
      },
      DataVersionList: []
    }
  },
  created () {
  },
  methods: {
    addModal (records) {
      const dataTable = records[0].dataTable
      const dataId = records[0].dataId
      const dataVersion1 = records[0].dataVersion
      const dataVersion2 = records[1].dataVersion
      this.dataId1 = records[0].id
      this.dataId2 = records[1].id
      this.dataTable1 = records[0].dataTable
      this.dataID3 = records[0].dataId
      this.initDataVersionList()
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({ dataTale: dataTable, dataId: dataId, dataVersion1: dataVersion1, dataVersion2: dataVersion2 })
      })
    },
    handleOk () {
      this.close()
      this.$refs.modal.compareModal(this.dataId1, this.dataId2)
      this.$refs.modal.title = '数据比较'
    },
    handleCancel () {
      this.close()
    },
    handleSubmit () {
    },
    close () {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
    },
    modalFormOk () {
    },
    initDataVersionList () {
      const that = this
      getAction(that.url.queryDataVerListUrl, { dataTable: this.dataTable1, dataId: this.dataID3 }).then((res) => {
        if (res.success) {
          this.DataVersionList = res.result
        } else {
          this.DataVersionList = []
          this.dataId1 = ''
          this.dataId2 = ''
          console.log(res.message)
        }
      })
    },
    handleChange1 (value) {
      this.dataId1 = value
    },
    handleChange2 (value) {
      this.dataId2 = value
    },
    handleTableBlur (e) {
      this.dataTable1 = e.target.value
      this.initDataVersionList()
    },
    handleIdBlur (e) {
      this.dataID3 = e.target.value
      this.initDataVersionList()
    }
  }
}
</script>

<style scoped>

</style>