feildconfig

<template>
  <div style="float:left;width: 100%">
    <el-row>
      <el-col :span=6>
        <el-input size = "small" v-model="apiId" placeholder="接口名" autocomplete="off" clearable @keyup.enter="query"></el-input>
      </el-col>
      <el-col :span=4>
        <el-button size = "small"  icon="el-icon-search" @click="query">查询</el-button>
        <el-button size = "small" type="primary" icon="el-icon-plus" :disabled = "!$root.writeFlag" @click="add">增加</el-button>
      </el-col>
    </el-row>
  </div>
  <div >
    <el-table :data="tableData.filter(data => !search || data.apiId.toLowerCase().includes(search.toLowerCase()))"
              stripe
              height="700"
              style="width: 100%">
      <el-table-column label="序号" fixed width="60">
        <template #default="scope">
          {{paginationData.pageSize * (paginationData.currentPage - 1) + scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="copybook" prop="copybook"></el-table-column>
      <el-table-column label="fieldNo" prop="fieldNo"></el-table-column>
      <el-table-column label="cobolName" prop="cobolName"></el-table-column>
      <el-table-column label="schema" prop="schema"></el-table-column>
      <el-table-column label="tableName" prop="tableName"></el-table-column>
      <el-table-column label="columnName" prop="columnName"></el-table-column>
      <el-table-column label="columnName" prop="pic"></el-table-column>
      <el-table-column label="scale" prop="scale"></el-table-column>
      <el-table-column label="signed" prop="signed"></el-table-column>
      <el-table-column label="parent" prop="parent"></el-table-column>
      <el-table-column label="redefine" prop="redefine"></el-table-column>
      <el-table-column label="offset" prop="offset"></el-table-column>
      <el-table-column label="length" prop="length"></el-table-column>
      <el-table-column label="lengthDependOn" prop="lengthDependOn"></el-table-column>
      <el-table-column label="filler" prop="filler"></el-table-column>
      <el-table-column label="key" prop="key"></el-table-column>
      <el-table-column label="displayName" prop="displayName"></el-table-column>
      <el-table-column label="memo" prop="memo"></el-table-column>
      <el-table-column label="picLength" prop="picLength"></el-table-column>
      <el-table-column label="comp" prop="comp"></el-table-column>
      <el-table-column align="right" width="100" fixed="right" >
        <template #header>
          <el-input v-model="search" size="mini" placeholder="API"></el-input>
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" :disabled="!$root.writeFlag"
                     >编辑</el-button>
<!--          <el-button size="mini" @click="handleCopy(scope.$index, scope.row)" icon="el-icon-plus" type="primary" :disabled="!$root.writeFlag"-->
<!--          >复制</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <paging ref="paging" :pagination-data="paginationData"></paging>
  </div>
  <div>
    <el-dialog title="配置信息" v-model = "show">
      <el-form :model="form">
        <el-form-item label="ABTable" :label-width="formLabelWidth">
          <el-input  v-model="form.ABTable" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="copybook" :label-width="formLabelWidth">
          <el-input  v-model="form.copybook" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="fieldNo" :label-width="formLabelWidth">
          <el-input  v-model="form.fieldNo" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="cobolName" :label-width="formLabelWidth">
          <el-input  v-model="form.cobolName" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="schema" :label-width="formLabelWidth">
          <el-input  v-model="form.schema" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="tableName" :label-width="formLabelWidth">
          <el-input  v-model="form.tableName" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="columnName" :label-width="formLabelWidth">
          <el-input  v-model="form.columnName" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="pic" :label-width="formLabelWidth">
          <el-input  v-model="form.pic" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="numeric" :label-width="formLabelWidth">
          <el-input  v-model="form.numeric" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="scale" :label-width="formLabelWidth">
          <el-input  v-model="form.scale" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="signed" :label-width="formLabelWidth">
          <el-input  v-model="form.signed" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="parent" :label-width="formLabelWidth">
          <el-input  v-model="form.parent" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="redefine" :label-width="formLabelWidth">
          <el-input  v-model="form.redefine" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="offset" :label-width="formLabelWidth">
          <el-input  v-model="form.offset" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="length" :label-width="formLabelWidth">
          <el-input  v-model="form.length" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="lengthDependOn" :label-width="formLabelWidth">
          <el-input  v-model="form.lengthDependOn" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="filler" :label-width="formLabelWidth">
          <el-input  v-model="form.filler" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="key" :label-width="formLabelWidth">
          <el-input  v-model="form.key" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="displayName" :label-width="formLabelWidth">
          <el-input  v-model="form.displayName" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="memo" :label-width="formLabelWidth">
          <el-input  v-model="form.memo" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="picLength" :label-width="formLabelWidth">
          <el-input  v-model="form.picLength" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="comp" :label-width="formLabelWidth">
          <el-input  v-model="form.comp" placeholder="" autocomplete="off" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="修改原因" :label-width="formLabelWidth">
          <el-input  v-model="reason" placeholder="请输入修改原因" autocomplete="off" clearable :disabled="insert"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Paging from '../../components/Paging'
import { post } from '../../api/request'
import Cookies from 'js-cookies/src/cookies'
import { isEmpty } from '../../utils/commonUtil'

export default {
  components: { Paging },
  data () {
    return {
      formLabelWidth: '120px',
      tableData: [
      ],
      search: '',
      apiId: '',
      insert: true,
      show: false,
      paginationData: {
        total: 0,
        currentPage: 1,
        pageSize: 30,
        handleCurrentChange: val => {
          this.paginationData.currentPage = val
          this.query()
        },
        handleSizeChange: val => {
          this.paginationData.pageSize = val
          this.query()
        }
      },
      old: {

      },
      reason: '',
      form: {
        ABTable: '',
        copybook: '',
        fieldNo: '',
        cobolName: '',
        schema: '',
        tableName: '',
        columnName: '',
        pic: '',
        numeric: '',
        scale: '',
        signed: '',
        parent: '',
        redefine: '',
        offset: '',
        length: '',
        lengthDependOn: '',
        filler: '',
        key: '',
        displayName: '',
        memo: '',
        picLength: '',
        comp: '',
        total: 0,
        currentPage: 1,
        pageSize: 30
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.query()
    })
  },
  methods: {
    preQuery () {
      this.form.currentPage = this.paginationData.currentPage
      this.form.total = this.paginationData.total
      this.form.pageSize = this.paginationData.pageSize
    },
    query () {
      this.preQuery()
      console.log(this)
      console.log(JSON.stringify(this))
      debugger
      post('/api/config/copybookFiled/query', this.form).then((reult) => {
        this.tableData = reult.list
        this.paginationData.total = reult.total
      })
    },
    add () {
      this.form = {
        apiId: '',
        url: '',
        type: '0',
        percentage: 0,
        coxTps: 1000,
        ctgTps: 50,
        status: '1',
        switchTail: ''
      }
      this.insert = true
      this.show = true
    },
    // handleCopy (index, row) {
    //   this.form = {
    //     apiId: '',
    //     url: row.url.replaceAll(row.apiId, ''),
    //     type: row.type,
    //     percentage: row.percentage,
    //     coxTps: row.coxTps,
    //     ctgTps: row.ctgTps,
    //     status: row.status,
    //     switchTail: row.switchTail
    //   }
    //   this.insert = true
    //   this.show = true
    // },
    handleEdit (index, row) {
      this.form = {
        ABTable: row.ABTable,
        copybook: row.copybook,
        fieldNo: row.fieldNo,
        cobolName: row.cobolName,
        schema: row.schema,
        tableName: row.tableName,
        columnName: row.columnName,
        pic: row.pic,
        numeric: row.numeric,
        scale: row.scale,
        signed: row.signed,
        parent: row.parent,
        redefine: row.redefine,
        offset: row.offset,
        length: row.length,
        lengthDependOn: row.lengthDependOn,
        filler: row.filler,
        key: row.key,
        displayName: row.displayName,
        memo: row.memo,
        picLength: row.picLength,
        comp: row.comp,
        total: row.total,
        currentPage: row.currentPage,
        pageSize: row.pageSize
      }
      this.old = {
        ABTable: row.ABTable,
        copybook: row.copybook,
        fieldNo: row.fieldNo,
        cobolName: row.cobolName,
        schema: row.schema,
        tableName: row.tableName,
        columnName: row.columnName,
        pic: row.pic,
        numeric: row.numeric,
        scale: row.scale,
        signed: row.signed,
        parent: row.parent,
        redefine: row.redefine,
        offset: row.offset,
        length: row.length,
        lengthDependOn: row.lengthDependOn,
        filler: row.filler,
        key: row.key,
        displayName: row.displayName,
        memo: row.memo,
        picLength: row.picLength,
        comp: row.comp,
        total: row.total,
        currentPage: row.currentPage,
        pageSize: row.pageSize
      }
      this.reason = ''
      this.insert = false
      this.show = true
    },
    save () {
      if (this.insert) {
        this.insert2Db()
      } else {
        this.update()
      }
    },
    update () {
      if (isEmpty(this.reason)) {
        this.$message({ type: 'error', message: '请填写修改原因' })
        return
      }
      this.$confirm('此操作将永久修改，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const p = [this.form, this.old]
        Cookies.setItem('reason', this.reason)
        post('/api/config/api_configs/update', p).then((result) => {
          if (result.code === '200') {
            this.$message({ type: 'info', message: '修改成功' })
            this.query()
          } else {
            this.$message({ type: 'error', message: '修改失败' })
          }
          Cookies.removeItem('reason')
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消修改' })
        Cookies.removeItem('reason')
      })
      this.show = false
    },
    insert2Db () {
      if (this.checkInput(this.form)) {
        post('/api/config/api_configs/add', this.form).then((result) => {
          if (result.code === '200') {
            this.$message({ type: 'info', message: '插入成功' })
            this.query()
          } else {
            this.$message({ type: 'error', message: '插入失败' })
          }
        })
        this.show = false
      }
    },
    checkInput (form) {
      if (isEmpty(form.apiId)) {
        this.$message({ type: 'error', message: '请输入接口名!' })
        return false
      }
      if (isEmpty(form.url)) {
        this.$message({ type: 'error', message: '请输入接口URL!' })
        return false
      }
      const url = form.url
      if (url.indexOf('custinfo') === -1 && url.indexOf('cardinfo') === -1 && url.indexOf('accountinfo') === -1) {
        this.$message({ type: 'error', message: '请输入正确的URL，如/custinfo/apiId、/cardinfo/apiId、/accountinfo/apiId!' })
        return false
      }
      return true
    }
  }
} </script>