tenant-Platform/src/views/basics/account.vue

<template>
  <PageMain class="vh100">
    <el-form v-model="accountForm" label-width="100">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属企业">
            <el-input v-model="accountForm.accountName" placeholder="请输入企业名称查找" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账户简称">
            <el-input v-model="accountForm.cardName" placeholder="请输入账户简称查找" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账户简类型">
            <el-select v-model="accountForm.accountQuality" placeholder="请选择账户类型查找" clearable>
              <el-option value="0" label="公户"></el-option>
              <el-option value="1" label="私户"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行卡号">
            <el-input v-model="accountForm.bankCardNum" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16" style="display: flex; align-items: center; justify-content: flex-end">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button plain @click="handleReset">重置</el-button>
        </el-col>
        <el-col :span="8">
          <el-button icon="plus" type="primary" @click="add">添加新账户</el-button>
          <el-button type="primary" @click="exp">导出支出明细</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="accountData" height="calc(100% - 194px)" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="accountName" label="所属企业" width="150"></el-table-column>
      <el-table-column prop="cardName" label="账户简称" width="100"></el-table-column>
      <el-table-column prop="accountQuality" label="账户类型" width="150">
        <template #default="scope">
          {{ scope.row.accountQuality ? '私户' : '公户' }}
        </template>
      </el-table-column>
      <el-table-column prop="bankCardNum" label="银行卡号" width="120"></el-table-column>
      <el-table-column prop="bank" label="银行" width="120"></el-table-column>
      <el-table-column prop="bankName" label="开户行" width="150"></el-table-column>
      <el-table-column prop="startCertExpirationDate" label="证件有效期始" width="180"></el-table-column>
      <el-table-column prop="endCertExpirationDate" label="证件有效期止" width="180"></el-table-column>
      <el-table-column label="额度">
        <el-table-column prop="balance" label="余额" width="100"></el-table-column>
        <el-table-column prop="spend" label="支出" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="每日">
        <el-table-column prop="dayStrokeNum" label="转账笔数限制" width="100"></el-table-column>
        <el-table-column prop="dayStrokeNumExcess" label="转账笔数剩余" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="对私限额">
        <el-table-column prop="priDayLines" label="单日限额" width="100"></el-table-column>
        <el-table-column prop="priDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
        <el-table-column prop="priSingleLines" label="单笔限额" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="对私额度">
        <el-table-column prop="priYearLines" label="年额度" width="100"></el-table-column>
        <el-table-column prop="priYearExcess" label="年额度剩余" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="对公限额">
        <el-table-column prop="pubDayLines" label="单日限额" width="100"></el-table-column>
        <el-table-column prop="pubDayLinesExcess" label="单日限额剩余" width="100"></el-table-column>
        <el-table-column prop="pubSingleLines" label="单笔限额" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="对公额度">
        <el-table-column prop="pubYearLines" label="年额度" width="100"></el-table-column>
        <el-table-column prop="pubYearExcess" label="年额度剩余" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <div style="display: flex; align-items: center;">
            <el-button link type="primary" size="small" @click="income(scope.row)">收入</el-button>
            <el-button link type="primary" size="small" @click="expenditure(scope.row)">支出</el-button>
            <el-dropdown placement="bottom" trigger="click" @command="accountDataCommand(scope, $event)"
              style="margin-left: 12px">
              <el-button link type="primary" size="small">更多</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="编辑">编辑</el-dropdown-item>
                  <el-dropdown-item command="删除">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog v-model="addShow" width="800" :title="title">
      <el-form ref="AddRef" :model="dataForm" :rules="dataRules" label-width="120">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="accountId" label="所属企业">
              <el-select v-model="dataForm.accountId" placeholder="请选择">
                <el-option v-for="(item, index) in accountList" :value="item.id" :label="item.accountName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cardName" label="账户简称">
              <el-input v-model="dataForm.cardName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bankCardNum" label="银行卡号">
              <el-input v-model="dataForm.bankCardNum" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="accountQuality" label="账户类型">
              <el-select v-model="dataForm.accountQuality" placeholder="请选择">
                <el-option value="0" label="公户"></el-option>
                <el-option value="1" label="私户"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bank" label="银行">
              <el-select v-model="dataForm.bank" placeholder="请选择">
                <el-option v-for="item in bankOption" :key="item.id" :value="item.label"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bankName" label="开户行">
              <el-input v-model="dataForm.bankName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bankNum" label="开户行号">
              <el-input v-model="dataForm.bankNum" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="startCertExpirationDate" label="证书有效期始">
              <el-date-picker style="width: 100%" type="date" v-model="dataForm.startCertExpirationDate"
                placeholder="请输入" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="endCertExpirationDate" label="证书有效期止">
              <el-date-picker style="width: 100%" type="date" v-model="dataForm.endCertExpirationDate" placeholder="请输入"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dayStrokeNum" label="每日转账限额">
              <el-input v-model="dataForm.dayStrokeNum" placeholder="请输入">
                <template #append>笔</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="priDayLines" label="对私单日限额">
              <el-input v-model="dataForm.priDayLines" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="priSingleLines" label="对私单笔限额">
              <el-input v-model="dataForm.priSingleLines" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="priYearLines" label="对私年额度">
              <el-input v-model="dataForm.priYearLines" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pubDayLines" label="对公单日限额">
              <el-input v-model="dataForm.pubDayLines" placeholder="请输入">
                <template #append>笔</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pubSingleLines" label="对公单笔限额">
              <el-input v-model="dataForm.pubSingleLines" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pubYearLines" label="对公年额度">
              <el-input v-model="dataForm.pubYearLines" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="balance" label="余额">
              <el-input v-model="dataForm.balance" placeholder="请输入">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="addShow = false">取消</el-button>
        <el-button type="primary" @click="handleAdd(AddRef)">确定</el-button>
      </template>
    </el-dialog>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage, ElMessageBox } from "element-plus";

let AddRef = ref()

let accountForm = ref({})
const handleSearch = () => {
  pages.value = 1
  size.value = 10
  initData()
}
const handleReset = () => {
  pages.value = 1
  size.value = 10
  accountForm.value = {
    accountName: '',
    cardName: '',
    accountQuality: '',
    bankCardNum: ''
  }
  initData()
}
const add = () => {
  addShow.value = true
  dataForm.value = {}
}
const exp = () => {

}

let accountData = ref([])
const income = (row) => {

}
const expenditure = (row) => {

}
const accountDataCommand = (scope, e) => {
  switch (e) {
    case '删除':
      ElMessageBox({
        title: '删除账户',
        message: '确定要删除该账户吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action === 'confirm') {
          api.financeApi.cardDelete(scope.row.id).then((res: any) => {
            if (res.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              initData()
            }
          })
        }
      }).catch((action) => {

      })
      break;
    case '编辑':
      addShow.value = true
      editId.value = scope.row.id
      dataForm.value = {}
      api.financeApi.cardGet(scope.row.id).then((res: any) => {
        dataForm.value = res.data
      })
  }
}

// 分页
let pages = ref(1)
let size = ref(10)
let total = ref(0)
const handleSizeChange = (size) => {
  size.value = size
  initData()
}
const handleCurrentChange = (page) => {
  pages.value = page
  initData()
}

const initData = () => {
  api.financeApi.cardList({
    ...accountForm.value,
    pageNo: pages.value,
    pageSize: size.value
  }).then((res: any) => {
    if (res.code == 200) {
      accountData.value = res.data.records
      total.value = res.data.total
    }
  })
}

// 开户行字典
let bankOption = ref([])
const initBankCard = () => {
  api.commonApi.personInfo('bank_info').then((res: any) => {
    if (res.code == 200) {
      bankOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 添加/编辑
let addShow = ref(false)
let title = ref('新增')
let dataForm = ref({})
const dataRules = ref({
  accountId: [{ required: true, trigger: "blur", message: "请输入" }],
  cardName: [{ required: true, trigger: "blur", message: "请输入" }],
  bankCardNum: [{ required: true, trigger: "blur", message: "请输入" }],
  accountQuality: [{ required: true, trigger: "change", message: "请选择" }],
  bank: [{ required: true, trigger: "blur", message: "请输入" }],
  bankName: [{ required: true, trigger: "change", message: "请选择" }],
  bankNum: [{ required: true, trigger: "blur", message: "请输入" }],
  startCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
  endCertExpirationDate: [{ required: true, trigger: "change", message: "请选择" }],
  dayStrokeNum: [{ required: true, trigger: "blur", message: "请输入" }],
  priDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
  priSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
  priYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
  pubDayLines: [{ required: true, trigger: "blur", message: "请输入" }],
  pubSingleLines: [{ required: true, trigger: "blur", message: "请输入" }],
  pubYearLines: [{ required: true, trigger: "blur", message: "请输入" }],
  balance: [{ required: true, trigger: "blur", message: "请输入" }],
})
const handleAdd = async (AddRef) => {
  if (!AddRef) {
    AddRef.resetFields()
    return
  }
  await AddRef.validate((valid) => {
    if (valid) {
      if (!editId.value) {
        api.financeApi.cardAdd({
          ...dataForm.value
        }).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            addShow.value = false
            initData()
          }
        })
      } else {
        api.financeApi.cardEdit({
          id: editId.value,
          ...dataForm.value
        }).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            addShow.value = false
            initData()
          }
        })
      }
    }
  })
}
let editId = ref('')

// 企业列表
let accountList = ref([])
const initList = () => {
  api.financeApi.accountList({}).then((res: any) => {
    if (res.code == 200) {
      accountList.value = res.data
    }
  })
}

onMounted(() => {
  initBankCard();
  initData();
  initList();
})
</script>

<style scoped lang="scss">
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>