From 632470dca291b5ab097802ccd93cfbca6e786528 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Sun, 17 Nov 2024 22:08:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=B0=E8=B4=A6=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=A1=E7=94=A8=E5=8D=A1=E3=80=81=E5=82=A8=E8=93=84?=
 =?UTF-8?q?=E5=8D=A1=E8=B0=83=E9=A2=9D=E8=AE=B0=E5=BD=95=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/invest/limitHistory.js        |  44 +++++
 src/views/invest/creditcard/index.vue | 231 +++++++++++++++++++++++++-
 src/views/invest/debitcard/index.vue  | 213 +++++++++++++++++++++++-
 3 files changed, 484 insertions(+), 4 deletions(-)
 create mode 100644 src/api/invest/limitHistory.js

diff --git a/src/api/invest/limitHistory.js b/src/api/invest/limitHistory.js
new file mode 100644
index 0000000..7e63df5
--- /dev/null
+++ b/src/api/invest/limitHistory.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询银行卡额度调整历史记录列表
+export function listLimitHistory(query) {
+  return request({
+    url: '/invest/limitHistory/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询银行卡额度调整历史记录详细
+export function getLimitHistory(id) {
+  return request({
+    url: '/invest/limitHistory/' + id,
+    method: 'get'
+  })
+}
+
+// 新增银行卡额度调整历史记录
+export function addLimitHistory(data) {
+  return request({
+    url: '/invest/limitHistory',
+    method: 'post',
+    data
+  })
+}
+
+// 修改银行卡额度调整历史记录
+export function updateLimitHistory(data) {
+  return request({
+    url: '/invest/limitHistory',
+    method: 'put',
+    data
+  })
+}
+
+// 删除银行卡额度调整历史记录
+export function delLimitHistory(id) {
+  return request({
+    url: '/invest/limitHistory/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/views/invest/creditcard/index.vue b/src/views/invest/creditcard/index.vue
index 3985088..2244523 100644
--- a/src/views/invest/creditcard/index.vue
+++ b/src/views/invest/creditcard/index.vue
@@ -141,16 +141,107 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog :title="titleDetail" v-model="openDetail" width="500px" append-to-body>
+      <el-form ref="limitHistoryRef" :model="formDetail" :rules="rulesDetail" label-width="120px">
+        <el-form-item label="调额类型" prop="type">
+          <el-select v-model="formDetail.type" placeholder="请选择调额类型">
+            <el-option v-for="dict in limit_history_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调整类型" prop="adjustType">
+          <el-select v-model="formDetail.adjustType" placeholder="请选择调整类型">
+            <el-option v-for="dict in adjust_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调整后额度" prop="afterLimit">
+          <el-input v-model="formDetail.afterLimit" type="number" @change="handlePriceChange" placeholder="请输入调整后额度">
+            <template #suffix>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="调整时间" prop="adjustTime">
+          <el-date-picker clearable v-model="formDetail.adjustTime" type="datetime" value-format="YYYY-MM-DD  HH:mm:ss" placeholder="请选择调整时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="生效日期" prop="effectDate">
+          <el-date-picker clearable v-model="formDetail.effectDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择生效日期"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="失效日期" prop="deadlineDate">
+          <el-date-picker clearable v-model="formDetail.deadlineDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择失效日期"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formDetail.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFormDetail">确 定</el-button>
+          <el-button @click="cancelDetail">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog title="查看添加调额记录" v-model="detailOpen" width="1150px" append-to-body>
+      <div class="basic-information">
+        <div class="main-con">
+          <div class="title-con">
+            <div class="title">基本信息</div>
+            <div class="operate-btn-con">
+              <el-button @click="handleAddDetail" icon="Plus" v-hasPermi="['invest:bankcard:add']">新增</el-button>
+            </div>
+          </div>
+          <div class="content-con">
+            <el-table v-loading="loading" :data="limitHistoryList">
+              <el-table-column label="调整时间" align="center" prop="adjustTime" width="180"> </el-table-column>
+              <el-table-column label="生效日期" align="center" prop="effectDate" width="180">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.effectDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失效日期" align="center" prop="deadlineDate" width="180">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.deadlineDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="调额类型" align="center" prop="type">
+                <template #default="scope">
+                  <dict-tag :options="limit_history_type" :value="scope.row.type" />
+                </template>
+              </el-table-column>
+              <el-table-column label="调整类型" align="center" prop="adjustType">
+                <template #default="scope">
+                  <dict-tag :options="adjust_type" :value="scope.row.adjustType" />
+                </template>
+              </el-table-column>
+              <el-table-column label="调整后额度" align="center" prop="afterLimit" />
+              <el-table-column label="调整幅度" align="center" prop="adjustLimit" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template v-slot="scope">
+                  <div class="ctrl-btn d-flex">
+                    <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
+                      <el-button :icon="item.icon" :v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <template #footer> </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="BankcardLend">
 import { listBankcardLend, getBankcardLend, delBankcardLend, addBankcardLend, updateBankcardLend } from '@/api/invest/bankcardlend'
+import { listLimitHistory, getLimitHistory, delLimitHistory, addLimitHistory, updateLimitHistory } from '@/api/invest/limitHistory'
 // eslint-disable-next-line no-unused-vars
 import { require } from '@/utils/require'
 const { proxy } = getCurrentInstance()
 const { is_zero_bill, is_next_bill_date, account_status } = proxy.useDict('is_zero_bill', 'is_next_bill_date', 'account_status')
-
+const { limit_history_type, adjust_type } = proxy.useDict('limit_history_type', 'adjust_type')
 const bankcardList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -160,13 +251,27 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+
+const detailOpen = ref(false)
+const openDetail = ref(false)
+const titleDetail = ref('')
+const limitHistoryList = ref([])
+const currentcardId = ref('')
+const currentBeforeLimit = ref('0')
+
 const operateList = ref([
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:bankcard:query'] },
+  { id: 'limit', icon: 'Grid', title: '调额记录', hasPermi: ['invest:bankcard:edit'] },
+  { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
+  { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
+])
+const operateDetailList = ref([
   { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
   { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
 ])
 const data = reactive({
   form: {},
+  formDetail: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -184,11 +289,20 @@ const data = reactive({
     balance: [{ required: true, message: '余额不能为空', trigger: 'blur' }],
     status: [{ required: true, message: '账户状态不能为空', trigger: 'blur' }],
     availableLimit: [{ required: true, message: '可用额度不能为空', trigger: 'blur' }]
+  },
+  rulesDetail: {
+    afterLimit: [{ required: true, message: '调整后额度不能为空', trigger: 'blur' }],
+    adjustTime: [{ required: true, message: '调整时间不能为空', trigger: 'blur' }],
+    type: [{ required: true, message: '调额类型不能为空', trigger: 'change' }],
+    adjustType: [{ required: true, message: '调整类型不能为空', trigger: 'change' }]
   }
 })
 
 const handleOperate = (operate, row) => {
   switch (operate) {
+    case 'limit':
+      handleDetail(row)
+      break
     case 'view':
       handleView(row)
       break
@@ -203,7 +317,120 @@ const handleOperate = (operate, row) => {
   }
 }
 
-const { queryParams, form, rules } = toRefs(data)
+const { queryParams, form, formDetail, rules, rulesDetail } = toRefs(data)
+
+/** 新增按钮操作 */
+function handleAddDetail() {
+  resetDetail()
+  titleDetail.value = '添加调额记录'
+  openDetail.value = true
+}
+
+const handleDetailOperate = (operate, row) => {
+  switch (operate) {
+    case 'edit':
+      handleUpdateDetail(row)
+      break
+    case 'delete':
+      handleDeleteDetail(row)
+      break
+    default:
+      break
+  }
+}
+
+// 取消按钮
+function cancelDetail() {
+  openDetail.value = false
+  resetDetail()
+}
+
+/** 删除按钮操作 */
+function handleDeleteDetail(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal
+    .confirm('是否确认删除选中的数据项？')
+    .then(function () {
+      return delLimitHistory(_ids)
+    })
+    .then(() => {
+      listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+        limitHistoryList.value = response.rows
+      })
+      proxy.$modal.msgSuccess('删除调额记录成功')
+    })
+    .catch(() => {})
+}
+
+/** 提交按钮 */
+function submitFormDetail() {
+  formDetail.value.bankCardLendId = currentcardId.value
+  formDetail.value.beforeLimit = currentBeforeLimit
+  proxy.$refs.limitHistoryRef.validate((valid) => {
+    if (valid) {
+      if (formDetail.value.id != null) {
+        updateLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('修改调额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      } else {
+        addLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('新增调额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      }
+    }
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdateDetail(row) {
+  resetDetail()
+  getLimitHistory(row.id).then((response) => {
+    formDetail.value = response.data
+    openDetail.value = true
+    titleDetail.value = '修改调额记录'
+  })
+}
+
+// 表单重置
+function resetDetail() {
+  formDetail.value = {
+    id: null,
+    name: null,
+    type: null,
+    bankCardLendId: null,
+    afterLimit: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    remark: null,
+    adjustTime: null,
+    effectDate: null,
+    deadlineDate: null,
+    adjustType: null,
+    beforeLimit: null,
+    adjustLimit: null
+  }
+  proxy.resetForm('limitHistoryRef')
+}
+/** 新增按钮操作 */
+function handleDetail(row) {
+  detailOpen.value = true
+  currentcardId.value = row.id
+  currentBeforeLimit.value = row.creditLimit
+  listLimitHistory({ bankCardLendId: row.id, pageNum: 1, pageSize: 1000 }).then((response) => {
+    limitHistoryList.value = response.rows
+  })
+}
 
 /** 查询信用卡信息列表 */
 function getList() {
diff --git a/src/views/invest/debitcard/index.vue b/src/views/invest/debitcard/index.vue
index f3931ff..71b9721 100644
--- a/src/views/invest/debitcard/index.vue
+++ b/src/views/invest/debitcard/index.vue
@@ -111,16 +111,90 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog :title="titleDetail" v-model="openDetail" width="500px" append-to-body>
+      <el-form ref="limitHistoryRef" :model="formDetail" :rules="rulesDetail" label-width="120px">
+        <el-form-item label="调整类型" prop="adjustType">
+          <el-select v-model="formDetail.adjustType" placeholder="请选择调整类型">
+            <el-option v-for="dict in adjust_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调整后额度" prop="afterLimit">
+          <el-input v-model="formDetail.afterLimit" type="number" @change="handlePriceChange" placeholder="请输入调整后额度">
+            <template #suffix>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="调整时间" prop="adjustTime">
+          <el-date-picker clearable v-model="formDetail.adjustTime" type="datetime" value-format="YYYY-MM-DD  HH:mm:ss" placeholder="请选择调整时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="生效日期" prop="effectDate">
+          <el-date-picker clearable v-model="formDetail.effectDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择生效日期"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formDetail.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFormDetail">确 定</el-button>
+          <el-button @click="cancelDetail">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog title="查看添加非柜面限额记录" v-model="detailOpen" width="1150px" append-to-body>
+      <div class="basic-information">
+        <div class="main-con">
+          <div class="title-con">
+            <div class="title">基本信息</div>
+            <div class="operate-btn-con">
+              <el-button @click="handleAddDetail" icon="Plus" v-hasPermi="['invest:bankcard:add']">新增</el-button>
+            </div>
+          </div>
+          <div class="content-con">
+            <el-table v-loading="loading" :data="limitHistoryList">
+              <el-table-column label="调整时间" align="center" prop="adjustTime" width="180"> </el-table-column>
+              <el-table-column label="生效日期" align="center" prop="effectDate" width="120">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.effectDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="调整类型" align="center" width="120" prop="adjustType">
+                <template #default="scope">
+                  <dict-tag :options="adjust_type" :value="scope.row.adjustType" />
+                </template>
+              </el-table-column>
+              <el-table-column label="调整后额度" align="center" width="100" prop="afterLimit" />
+              <el-table-column label="调整幅度" align="center" width="100" prop="adjustLimit" />
+              <el-table-column label="备注" align="center" prop="remark" />
+              <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
+                <template v-slot="scope">
+                  <div class="ctrl-btn d-flex">
+                    <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
+                      <el-button :icon="item.icon" :v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <template #footer> </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="BankcardLend">
 import { listBankcardLend, getBankcardLend, delBankcardLend, addBankcardLend, updateBankcardLend } from '@/api/invest/bankcardlend'
+import { listLimitHistory, getLimitHistory, delLimitHistory, addLimitHistory, updateLimitHistory } from '@/api/invest/limitHistory'
 // eslint-disable-next-line no-unused-vars
 import { require } from '@/utils/require'
 const { proxy } = getCurrentInstance()
 const { bank_card_type, debit_type, account_status } = proxy.useDict('bank_card_type', 'debit_type', 'account_status')
-
+const { limit_history_type, adjust_type } = proxy.useDict('limit_history_type', 'adjust_type')
 const bankcardList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -130,13 +204,28 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+
+const detailOpen = ref(false)
+const openDetail = ref(false)
+const titleDetail = ref('')
+const limitHistoryList = ref([])
+const currentcardId = ref('')
+const currentBeforeLimit = ref('0')
+
 const operateList = ref([
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:bankcard:query'] },
+  { id: 'limit', icon: 'Grid', title: '非柜面限额记录', hasPermi: ['invest:bankcard:edit'] },
   { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
   { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
 ])
+const operateDetailList = ref([
+  { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
+  { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
+])
+
 const data = reactive({
   form: {},
+  formDetail: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -151,11 +240,19 @@ const data = reactive({
     status: [{ required: true, message: '账户状态不能为空', trigger: 'blur' }],
     debitType: [{ required: true, message: '储蓄账户类型不能为空', trigger: 'blur' }],
     balance: [{ required: true, message: '余额不能为空', trigger: 'blur' }]
+  },
+  rulesDetail: {
+    afterLimit: [{ required: true, message: '调整后额度不能为空', trigger: 'blur' }],
+    adjustTime: [{ required: true, message: '调整时间不能为空', trigger: 'blur' }],
+    adjustType: [{ required: true, message: '调整类型不能为空', trigger: 'change' }]
   }
 })
 
 const handleOperate = (operate, row) => {
   switch (operate) {
+    case 'limit':
+      handleDetail(row)
+      break
     case 'view':
       handleView(row)
       break
@@ -170,8 +267,120 @@ const handleOperate = (operate, row) => {
   }
 }
 
-const { queryParams, form, rules } = toRefs(data)
+const { queryParams, form, formDetail, rules, rulesDetail } = toRefs(data)
 
+/** 新增按钮操作 */
+function handleAddDetail() {
+  resetDetail()
+  titleDetail.value = '添加非柜面限额记录'
+  openDetail.value = true
+}
+
+const handleDetailOperate = (operate, row) => {
+  switch (operate) {
+    case 'edit':
+      handleUpdateDetail(row)
+      break
+    case 'delete':
+      handleDeleteDetail(row)
+      break
+    default:
+      break
+  }
+}
+
+// 取消按钮
+function cancelDetail() {
+  openDetail.value = false
+  resetDetail()
+}
+
+/** 删除按钮操作 */
+function handleDeleteDetail(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal
+    .confirm('是否确认删除选中的数据项？')
+    .then(function () {
+      return delLimitHistory(_ids)
+    })
+    .then(() => {
+      listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+        limitHistoryList.value = response.rows
+      })
+      proxy.$modal.msgSuccess('删除非柜面限额记录成功')
+    })
+    .catch(() => {})
+}
+
+/** 提交按钮 */
+function submitFormDetail() {
+  formDetail.value.bankCardLendId = currentcardId.value
+  formDetail.value.beforeLimit = currentBeforeLimit
+  proxy.$refs.limitHistoryRef.validate((valid) => {
+    if (valid) {
+      if (formDetail.value.id != null) {
+        updateLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('修改调非柜面限额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      } else {
+        addLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('新增调非柜面限额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      }
+    }
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdateDetail(row) {
+  resetDetail()
+  getLimitHistory(row.id).then((response) => {
+    formDetail.value = response.data
+    openDetail.value = true
+    titleDetail.value = '修改非柜面限额记录'
+  })
+}
+
+// 表单重置
+function resetDetail() {
+  formDetail.value = {
+    id: null,
+    name: null,
+    type: '3',
+    bankCardLendId: null,
+    afterLimit: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    remark: null,
+    adjustTime: null,
+    effectDate: null,
+    deadlineDate: null,
+    adjustType: null,
+    beforeLimit: null,
+    adjustLimit: null
+  }
+  proxy.resetForm('limitHistoryRef')
+}
+/** 新增按钮操作 */
+function handleDetail(row) {
+  detailOpen.value = true
+  currentcardId.value = row.id
+  currentBeforeLimit.value = row.creditLimit
+  listLimitHistory({ bankCardLendId: row.id, pageNum: 1, pageSize: 1000 }).then((response) => {
+    limitHistoryList.value = response.rows
+  })
+}
 /** 查询储蓄账户信息列表 */
 function getList() {
   loading.value = true