test-web/src/views/fancongcong/advancepaymentaccount/advancepaymentaccount.vue

<template>
  <div class="app_container">
    <div class="menu">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="导入时间">
          <div class="block">
            <el-date-picker v-model="start_time" type="datetime" placeholder="请选择充值开始时间" />
          </div>
          <el-icon>
            <semi-select />
          </el-icon>
          <div class="block">
            <el-date-picker v-model="end_time" type="datetime" placeholder="请选择充值结束时间" />
          </div>
        </el-form-item>
        <el-form-item label="对方账号">
          <el-input v-model="formInline.Number" placeholder="对方账号" />
        </el-form-item>
        <el-form-item label="对方户名">
          <el-input v-model="formInline.coNumber" placeholder="对方户名" />
        </el-form-item>
        <el-form-item label="交易流水编号">
          <el-input v-model="formInline.serialNo" placeholder="交易流水编号" />
        </el-form-item>
        <el-form-item label="每页条数">
          <el-select v-model="pageNumber" clearable placeholder="账号状态">
            <el-option v-for="item in optiones" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="grabble">查询</el-button>
          <el-button type="info" @click="resive">重置</el-button>
          <el-button type="primary">导入Excel</el-button>
          <el-button type="primary">下载导入模板</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%" class="table_box" stripe>
      <el-table-column prop="serialNo" label="交易流水号" width="200px" />
      <el-table-column prop="createTime" label="交易时间" width="200px" />
      <el-table-column prop="outFee" label="支出金额" width="200px" />
      <el-table-column prop="incomeFee" label="收入金额" width="200px" />
      <el-table-column prop="reciprocalAccount" label="对方账号" width="200px" />
      <el-table-column prop="reciprocalAccountName" label="对方户名" width="200px" />
      <el-table-column prop="reciprocalBankName" label="对方行名" width="200px" />
      <el-table-column prop="reciprocalAccountName" label="对公账户账号" width="200px" />
      <el-table-column prop="useage" label="用途" width="200px" />
      <el-table-column prop="remarks" label="附言" width="200px" />
      <el-table-column prop="snippet" label="摘要" width="200px" />
      <el-table-column label="操作" class="table_btn" width="500px" align="center">
        <template v-slot="scope">
          <el-tooltip content="拒绝" placement="top" v-if="scope.row.status == null">
            <el-button type="warning" @click="опровергать(scope.row)">拒绝</el-button>
          </el-tooltip>
          <el-tooltip content="同意" placement="top" v-if="scope.row.status == null">
            <el-button type="warning" @click="agree(scope.row)">同意</el-button>
          </el-tooltip>
          <el-tooltip content="请输入对公账号" placement="top" v-if="scope.row.status == null">
            <el-button type="warning" @click="opendialo(scope.row)">请输入对公账号</el-button>
          </el-tooltip>
           <el-tooltip :content="filterType(scope.row.status)" placement="top" v-if="scope.row.status != null">
            <el-button type="primary" @click="opendialo" disabled>{{filterType(scope.row.status)}}</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="pageCount"
        v-model="pageNo"/>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="title">
      <el-form :model="form">
        <el-form-item label="输入对方对公账号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="account">确定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisibles" title="驳回申请">
      <el-form :model="form">
        <el-form-item label="驳回原因" :label-width="formLabelWidth">
          <el-input v-model="form.data_msg" autocomplete="off" placeholder="请输入驳回原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisibles = false">关闭</el-button>
          <el-button type="primary" @click="getMsg">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
//模块导入
import { Search } from '@element-plus/icons-vue'
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

//变量声明
const { proxy } = getCurrentInstance()
const formInline = ref({
  user: '',
  region: '',
  number: '',
  coNumber: '',
  user: '',
})
const onSubmit = () => {
  console.log('submit!')
}
let title = ref('对公账户信息')
const options = [
  {
    value: '',
    label: '全部'
  },
  {
    value: '1',
    label: '驳回'
  },
  {
    value: '0',
    label: '待审核'
  },
  {
    value: '1',
    label: '已启用'
  },
  {
    value: '2',
    label: '待修改初始密码'
  }
]
let start_time = ref('') //申请选择开始时间
let end_time = ref('') //申请选择结束时间
let value3 = ref('')
let value4 = ref('')
let pageNo = ref(1)
let pageNumber = ref(15)//每页条数
let dialogTableVisible = ref(false)
let dialogFormVisible = ref(false)
let dialogFormVisibles = ref(false)
let pageCount = ref(0) //总页数
let formLabelWidth = '140px'
let form = reactive({
  phone: '', //手机号
  region: '', //验证码
  delivery: false, //是否展示详细
  number: '', //对公账户资金账户编号
  data_msg: '',//驳回原因
  data_id: ''//点击表格获取的id
})
const optiones = [
  {
    value: '2',
    label: '2'
  },
  {
    value: '6',
    label: '6'
  },
  {
    value: '10',
    label: '10'
  },
  {
    value: '15',
    label: '15'
  },
  {
    value: '30',
    label: '30'
  }
]
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    }
  }
]
const tableData = ref([
  {
    accountId: 11,
    channelId: 53,
    channelName: 'LMJVTSCAA',
    createTime: '1984/01/11 16:42:41',
    fileName: 'LGCRFGITS',
    filePath: 'MHWXGWCPR',
    id: '820000199611275614',
    incomeFee: 78,
    outFee: 91,
    reason: 'JMQOEDBRD',
    reciprocalAccount: 'CUCUQBHPR',
    reciprocalAccountName: 'SGUUYJEIJ',
    reciprocalBankName: 'JIUPWBXSY',
    remarks: 'HVLJOFURE',
    serialNo: 'MBBHHKVNX',
    snippet: 'PPFAKYCKG',
    staffId: 'MQWJVIMRO',
    staffName: 'JQLOMWANP',
    status: null,
    transTime: 'MYHFJBLCP',
    updateTime: '1982/10/14 13:50:50',
    useage: 'OYQYKVWPG'
  }
])

//事件
//同意申请
const agree = (row) => {
  console.log("id",row.id)
  dialogFormVisible.value = false;
  ElMessageBox.confirm('确定通过这个申请?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      proxy.$request.post('/advancepayment/confirm', {
        id: row.id,
        // message:form.data_msg,
        value: 0
      }, {
        ///baseURL: 'http://localhost:8089',

      }).then((res) => {
        console.log(res, form.data_id, form.value);
        if (res.data.success) {
          ElMessage({
            type: 'success',
            message: '操作成功！'
          })
          grabble()
        }
      }).catch((err) => {
        console.log(err);
      })
    })
    .catch(() => {
      ElMessage({
        type: '取消',
        message: '已取消'
      })
    })
}
//驳回申请
const опровергать = (row) => {
  console.log(row,row.id)
  dialogFormVisible.value = false;
  form.data_id = row.id
  ElMessageBox.confirm('确定驳回这个申请?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      dialogFormVisibles.value = true;
    })
    .catch(() => {
      ElMessage({
        type: '取消',
        message: '已取消'
      })
    })
}
//驳回申请原因
const getMsg = () => {
  proxy.$request.post('/advancepayment/confirm', {
    id: form.data_id,
    message: form.data_msg,
    value: 1
  }, {
    //baseURL: 'http://localhost:8089',

  }).then((res) => {
    console.log(res, form.data_id, form.data_msg);
    if (res.data.success) {
      ElMessage({
        type: 'success',
        message: '操作成功！'
      })
      dialogFormVisibles.value = false;
      grabble()
    }
  }).catch((err) => {
    console.log(err);
  })
}

//搜索
const grabble = () => {
  let data:any = {
    //endTime: '2020/01/01 00:00:00',
    pageNo: pageNo.value,
    pageSize: pageNumber.value,
    //startTime: '2020/01/01 00:00:00',
    //type: 0,
  }
  formInline.value.Number != '' ? data.reciprocalAccount = formInline.value.Number : '';
  formInline.value.coNumber != '' ? data.reciprocalAccountName = formInline.value.coNumber :'';
  formInline.value.serialNo != '' ? data.serialNo = formInline.value.serialNo  :'';
 
  proxy.$request
    .post('/advancepayment/queryPage',data,{})
    .then((res) => {
      //console.log(res.data,data)
      if (res.data.code == 200) {
        tableData.value = res.data.data.result
        //console.log('res', tableData)
        pageCount.value = res.data.pageCount
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  grabble()
})

//获取当前页数据
const pagechange = (el) => {
  console.log('el', el)
  pageNo.value = el
  grabble()
}

//重置
const resive = () => {
  console.log('重置')
  start_time.value = '';
  end_time.value = '';
  formInline.value.number = '';
  formInline.value.coNumber = '';
  formInline.value.user = '';
}

//填入对方对公账号
const account = () => {
  let data = {
    id: form.data_id,
    accountId: form.phone,
    //baseURL: 'http://localhost:8089'
  }
  console.log(data)
  
  if(form.phone != ''){
    proxy.$request.post('/advancepayment/account', data,{}).then((res) => {
    console.log(res, form.data_id, form.value)
    if (res.data.success) {
      dialogFormVisible.value = false;
      grabble();
    }
  })
    .catch((err) => {
      console.log(err)
    })
  }else{
     ElMessage({
    message: '请填入对公账号！',
    type: 'warning',
  })
  }

  
}
//打开填写对公账户的弹窗
const opendialo = (row) => {
  form.data_id = row.id;
  dialogFormVisible.value = true;
}

//过滤状态
const filterType = (type: Number) => {
  if (type == 1) {
    return '审核通过'
  } else if (type == 2) {
    return '已驳回'
  } else if(type == null){
    return '未审核'
  } else{
    return '请联系管理员'
  }
}

onMounted(() => {
  grabble()
})


</script>

<style lang="scss">
.app_container {
  padding: 20px;
  display: flex;
  flex-direction: column;

  .table_box {
    margin-top: 25px;

    .table_btn {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      align-content: space-around;
      align-items: flex-start;
    }
  }

  .page_box {
    margin-top: 25px;
  }
}
</style>