vue的pythonflask方式前后台交互在新医保的实战

本文主要是介绍vue的pythonflask方式前后台交互在新医保的实战，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue

<template>
  <div>

    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-select v-model="formInline.pyaction"
                 placeholder="请选择">
        <el-option v-for="item in mypyaction"
                   :key="item.jobname"
                   :label="item.jobdesc"
                   :value="item.jobname">
        </el-option>
      </el-select>

      <el-form-item label="被合并人psnno">
        <el-input v-model="formInline.oldpsnno"
                  placeholder="被合并人psnno"></el-input>
      </el-form-item>
      <el-form-item label="合并到psnno">
        <el-input v-model="formInline.newpsnno"
                  placeholder="合并到psnno"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="pysend(formInline)">开始测试</el-button>
      </el-form-item>
    </el-form>

    <ul>
      <li v-for="g in my_value"
          :key="g">{{g}}</li>
    </ul>

  </div>
</template>

<style>
* {
  margin-bottom: 0px;
  margin-top: 0px;
}
.dataxsend {
  background-color: rgb(214, 243, 205);
  font-size: 12px;
}
.dataxget {
  height: 200pt;
  background-color: rgb(224, 217, 240);
}
.dataxbutton {
  margin-left: 100 px;
}
</style>
 

<script>
export default {
  data () {
    return {
      mypyaction: [
        { jobname: 'test', jobdesc: '连接测试' },
        { jobname: 'certno2psnno', jobdesc: '身份证查人' },
        { jobname: 'psnnoquery', jobdesc: 'psnno查人' },
        { jobname: 'hebing', jobdesc: '合并同身份证' },
        { jobname: 'hebingnocheck', jobdesc: '合并不同身份证' },
        { jobname: 'hbrollback', jobdesc: '合并回滚' }],
      formInline: {
        pyaction: '',
        oldpsnno: '',
        newpsnno: ''
      },

      my_value: []
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }, pysend (data) {
      console.log('pydo called', data.pyaction)
      if (!data.newpsnno || !data.oldpsnno) {
        console.log('无参数')
        this.$message({
          type: 'error',
          message: '无参数'
        })
        return -1
      }
      this.$confirm(
        '此操作将永久操作【' +
        data.oldpsnno +
        '】【' +
        data.newpsnno +
        '】, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          if (!data.newpsnno) {
            data.newpsnno = data.oldpsnno
          }

          this.getRequest(
            '/do/' + data.pyaction + '/' + data.oldpsnno + '/' + data.newpsnno
          ).then(resp => {
            if (resp) {
              // console.log(this)
              console.log('pydo succ', resp.data.loginfo)

              this.my_value = resp.data.loginfo
            }
          })
        })
        .catch(err => {
          console.log('pydo err', err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }

  }
}
</script>

这篇关于vue的pythonflask方式前后台交互在新医保的实战的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！