orgManager/src/views/operations/bankingRegulations/index.vue

<template>
   <div class="app-container">
      <table-search-card :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
         <template #left>
            <el-form-item prop="currencyType">
               <currency-select v-model="queryParams.currencyType" style="width: 180px;" clearable @clear="handleQuery"
                  @change="handleQuery"></currency-select>
            </el-form-item>
            <el-form-item prop="bankName">
               <el-input v-model="queryParams.bankName" :placeholder="t('请输入银行名称')" clearable @clear="handleQuery"
                  @keyup.enter="handleQuery" style="width: 220px;" />
            </el-form-item>
            <el-form-item prop="bankCode">
               <el-input v-model="queryParams.bankCode" :placeholder="t('请输入银行代码')" clearable @clear="handleQuery"
                  @keyup.enter="handleQuery" style="width: 220px;" />
            </el-form-item>
         </template>
         <template #right>
            <el-button @click="handleAdd" type="primary" plain icon="Plus" v-hasPermi="['operation:bank:add']">{{
               t('新增') }}</el-button>
         </template>
      </table-search-card>

      <!-- 查询表格 -->
      <el-table v-loading="loading" :data="bankList" class="c-table-main" stripe border>
         <el-table-column :label="t('序号')" align="center" type="index" width="80">
            <template #default="{ $index }">
               <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}</span>
            </template>
         </el-table-column>
         <el-table-column :label="t('币种')" align="center" prop="currencyType" min-width="100" />
         <el-table-column :label="t('银行名称')" align="center" prop="bankName" min-width="100" />
         <el-table-column :label="t('银行代码')" align="center" prop="bankCode" min-width="100" />
         <el-table-column :label="t('银行图标')" align="center" min-width="100">
            <template #default="{ row }">
               <el-image class="table-icon-image" :src="fileHost + row.bankIcon" fit="contain" />
            </template>
         </el-table-column>
         <el-table-column :label="t('是否开启')" align="center" min-width="160">
            <template #default="{ row }">
               <el-switch v-model="row.status" active-value="0" inactive-value="1" :before-change="switchBeforeChange"
                  @click="changeStatus(row)" />
            </template>
         </el-table-column>
         <el-table-column :label="t('备注')" align="center" min-width="100">
            <template #default="{ row }">
               {{ row.remark || '-' }}
            </template>
         </el-table-column>
         <el-table-column :label="t('操作')" align="center" width="160">
            <template #default="{ row }">
               <el-button link type="primary" @click="handleUpdate(row)" v-hasPermi="['operation:bank:edit']">{{ t('修改')
                  }}</el-button>
               <!-- <el-button link type="primary" @click="handleDelete(row)" v-hasPermi="['operation:bank:remove']">{{
                  t('删除') }}</el-button> -->
            </template>
         </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="getList" />

      <!-- 添加或修改银行管理对话框 -->
      <add-edit-dialog :id="editDataId" :addEditStatus="addEditStatus" v-if="isShowDialog"
         @closeDialog="closeDialog" v-model:show="isShowDialog"></add-edit-dialog>
   </div>
</template>

<script setup name="BankingRegulations">
import { listBank, delBank, changeBankStatus } from "@/api/payment/bank";
import AddEditDialog from "./components/AddEditDialog.vue";
import CurrencySelect from '@/components/CurrencySelect'; // 币种选择
import { getLocalStorage } from "@/utils/auth";

const { proxy } = getCurrentInstance();

const fileHost = getLocalStorage('fileUrl') || ''; // 文件host
const bankList = ref([]);
const loading = ref(true);
const total = ref(0);
const queryParams = reactive({
   pageNum: 1,
   pageSize: 20,
   currencyType: 'VND',
   bankCode: null,
   status: null
});

// 查询银行管理列表
function getList() {
   loading.value = true;

   listBank(queryParams).then(res => {
      bankList.value = res.rows;
      total.value = res.total;
      loading.value = false;
   });
}

// 新增按钮操作
const addEditStatus = ref('add'), isShowDialog = ref(false), editDataId = ref('');
const handleAdd = () => {
   isShowDialog.value = true;
   addEditStatus.value = 'add';
}

// 修改
const handleUpdate = (row) => {
   editDataId.value = row.id;
   isShowDialog.value = true;
   addEditStatus.value = 'edit';
}

// 关闭新增修改弹窗
const closeDialog = (type) => {
   switch (type) {
      case 'add-edit': // 新增-修改弹窗
         addEditStatus.value = 'add';  // 每次关闭还原为新增模式
         isShowDialog.value = false;
         // 刷新列表
         getList();
         break
         case 'close': // 新增-修改弹窗      
         addEditStatus.value = 'add';  // 每次关闭还原为新增模式
         isShowDialog.value = false;
         break
   }
}

// 表格中开启状态开关
const switchBeforeChange = () => {
   return false;
}

// 银行启用状态更改
const changeStatus = (row) => { // row.status: 0-停用 1-启用
   proxy.$modal.confirm( proxy.t('确认{}“' + row.bankName + '”？', +row.status === 1 ? '启用' : '停用')).then(() => {
      changeBankStatus({ id: row.id, status: +row.status === 1 ? 0 : 1 }).then(res => {
         proxy.$modal.msgSuccess(proxy.t(row.bankName + ' {}成功！', +row.status === 1 ? '启用' : '停用'));
         getList();
      })
   }).catch(() => { });
}

// 删除
const handleDelete = (row) => {
   proxy.$modal.confirm(proxy.t('确认删除“' + row.bankName + '”的数据？')).then(() => {
      return delBank(row.id);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess(proxy.t('删除成功！'));
   }).catch(() => { });
}

// 搜索
const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
}

// 重置
const resetQuery = () => {
   handleQuery();
}

getList();
</script>
<style lang="scss" scoped>
.app-container{
   height: 100%;
   overflow-x: auto;
}
</style>