|
|
@@ -24,91 +24,72 @@
|
|
|
</a-empty>
|
|
|
|
|
|
<div v-else class="account-list">
|
|
|
- <article
|
|
|
- v-for="record in data"
|
|
|
- :key="record.id"
|
|
|
- class="account-card"
|
|
|
- :class="{ 'account-card--low': isLowBalance(record) }"
|
|
|
- >
|
|
|
- <div class="account-card__head">
|
|
|
- <div class="account-card__location">
|
|
|
- <icon-home class="loc-icon" />
|
|
|
- <span>{{ record.area }} · {{ record.building }} · {{ record.room }}</span>
|
|
|
- </div>
|
|
|
- <!-- <a-tag color="arcoblue" size="small">
|
|
|
+ <article v-for="record in data" :key="record.id" class="account-card"
|
|
|
+ :class="{ 'account-card--low': isLowBalance(record) }">
|
|
|
+ <div class="account-card__head">
|
|
|
+ <div class="account-card__location">
|
|
|
+ <icon-home class="loc-icon" />
|
|
|
+ <span>{{ record.area }} · {{ record.building }} · {{ record.room }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <a-tag color="arcoblue" size="small">
|
|
|
扣费时间 {{ record.koufei_date || '-' }}
|
|
|
</a-tag> -->
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="account-card__stats">
|
|
|
- <div class="stat" :class="{ 'stat--low': isLowBalance(record) }">
|
|
|
- <span class="stat__label">当前余额</span>
|
|
|
- <span class="stat__value">¥{{ record.balance }}</span>
|
|
|
+ <div class="account-card__stats">
|
|
|
+ <div class="stat" :class="{ 'stat--low': isLowBalance(record) }">
|
|
|
+ <span class="stat__label">当前余额</span>
|
|
|
+ <span class="stat__value">¥{{ record.balance }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <span class="stat__label">提醒阈值</span>
|
|
|
+ <span class="stat__value">¥{{ record.lowest }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="stat">
|
|
|
- <span class="stat__label">提醒阈值</span>
|
|
|
- <span class="stat__value">¥{{ record.lowest }}</span>
|
|
|
+
|
|
|
+ <div class="account-card__meta">
|
|
|
+ <span v-if="record.notice_type === 'wechat'"><icon-wechat /> 微信通知</span>
|
|
|
+ <span v-else-if="record.notice_type === 'none'">不通知</span>
|
|
|
+ <span v-else><icon-email /> {{ record.email || '-' }}</span>
|
|
|
+ <span><icon-clock-circle /> 更新时间:{{ formatTime(record.update_time) }}</span>
|
|
|
+ <span><icon-clock-circle /> 扣费时间:{{ record.koufei_date || '-' }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="account-card__meta">
|
|
|
- <span><icon-email /> 通知邮箱:{{ record.email }}</span>
|
|
|
- <span><icon-clock-circle /> 更新时间:{{ formatTime(record.update_time) }}</span>
|
|
|
- <span><icon-clock-circle /> 扣费时间:{{ record.koufei_date || '-' }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <p v-if="record.notes" class="account-card__notes">{{ record.notes }}</p>
|
|
|
-
|
|
|
- <div class="account-card__actions">
|
|
|
- <a-button size="small" type="outline" @click="GetChangeRecord(record.id)">
|
|
|
- <template #icon><icon-select-all /></template>
|
|
|
- 账单记录
|
|
|
- </a-button>
|
|
|
- <a-dropdown :popup-max-height="false" trigger="hover">
|
|
|
- <a-button size="small" type="text">
|
|
|
- 更多
|
|
|
- <icon-down />
|
|
|
+
|
|
|
+ <p v-if="record.notes" class="account-card__notes">{{ record.notes }}</p>
|
|
|
+
|
|
|
+ <div class="account-card__actions">
|
|
|
+ <a-button size="small" type="outline" @click="GetChangeRecord(record.id)">
|
|
|
+ <template #icon><icon-select-all /></template>
|
|
|
+ 账单记录
|
|
|
</a-button>
|
|
|
- <template #content>
|
|
|
- <a-doption @click="editAccount(record)"><icon-edit /> 编辑任务</a-doption>
|
|
|
- <a-doption @click="DeleteAccount(record)"><icon-delete /> 删除任务</a-doption>
|
|
|
- </template>
|
|
|
- </a-dropdown>
|
|
|
- </div>
|
|
|
- </article>
|
|
|
+ <a-dropdown :popup-max-height="false" trigger="hover">
|
|
|
+ <a-button size="small" type="text">
|
|
|
+ 更多
|
|
|
+ <icon-down />
|
|
|
+ </a-button>
|
|
|
+ <template #content>
|
|
|
+ <a-doption @click="editAccount(record)"><icon-edit /> 编辑任务</a-doption>
|
|
|
+ <a-doption @click="DeleteAccount(record)"><icon-delete /> 删除任务</a-doption>
|
|
|
+ </template>
|
|
|
+ </a-dropdown>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-skeleton>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <a-modal
|
|
|
- v-model:visible="visible"
|
|
|
- :title="form.id ? '编辑电费提醒任务' : '添加电费提醒任务'"
|
|
|
- class="power-modal"
|
|
|
- @cancel="handleCancel"
|
|
|
- @before-ok="handleBeforeOk"
|
|
|
- draggable
|
|
|
- :ok-loading="ok_loading"
|
|
|
- esc-to-close
|
|
|
- closable
|
|
|
- >
|
|
|
+ <a-modal v-model:visible="visible" :title="form.id ? '编辑电费提醒任务' : '添加电费提醒任务'" class="power-modal"
|
|
|
+ @cancel="handleCancel" @before-ok="handleBeforeOk" draggable :ok-loading="ok_loading" esc-to-close closable>
|
|
|
<a-form :model="form" layout="vertical" class="power-form">
|
|
|
<a-form-item field="area" label="校区" :loading="selectLoading">
|
|
|
- <a-select
|
|
|
- v-model="form.area"
|
|
|
- placeholder="请选择所在校区"
|
|
|
- :options="areas"
|
|
|
- @change="GetPowerData('dylist', form.area)"
|
|
|
- />
|
|
|
+ <a-select v-model="form.area" placeholder="请选择所在校区" :options="areas"
|
|
|
+ @change="GetPowerData('dylist', form.area)" />
|
|
|
</a-form-item>
|
|
|
<a-form-item field="building" label="楼栋" :loading="selectLoading">
|
|
|
- <a-select
|
|
|
- v-model="form.building"
|
|
|
- placeholder="请选择所在楼栋"
|
|
|
- :options="buildings"
|
|
|
- @change="GetPowerData('mphlist', form.building)"
|
|
|
- />
|
|
|
+ <a-select v-model="form.building" placeholder="请选择所在楼栋" :options="buildings"
|
|
|
+ @change="GetPowerData('mphlist', form.building)" />
|
|
|
</a-form-item>
|
|
|
<a-form-item field="room" label="宿舍号" :loading="selectLoading">
|
|
|
<a-select v-model="form.room" placeholder="请选择所在宿舍" :options="rooms" />
|
|
|
@@ -116,51 +97,42 @@
|
|
|
<a-form-item field="lowest" label="提醒阈值(元)">
|
|
|
<a-input-number v-model="form.lowest" placeholder="余额低于该值时发送邮件" :step="1" :precision="2" />
|
|
|
</a-form-item>
|
|
|
- <a-form-item field="email" label="通知邮箱">
|
|
|
+ <a-form-item field="notice_type" label="通知方式">
|
|
|
+ <a-radio-group v-model="form.notice_type">
|
|
|
+ <a-radio value="email"><icon-email /> 邮件</a-radio>
|
|
|
+ <a-radio value="wechat">
|
|
|
+ <span class="notice-radio-option">
|
|
|
+ <span class="notice-radio-option__label"><icon-wechat /> 微信</span>
|
|
|
+ <img class="vip-inline-icon" src="@/assets/img/vip.svg" alt="vip" />
|
|
|
+ </span>
|
|
|
+ </a-radio>
|
|
|
+ <a-radio value="none">不通知</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ <template #extra v-if="form.notice_type === 'wechat'">
|
|
|
+ 微信通知将发送到已绑定的小妍助理微信会话
|
|
|
+ </template>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-if="form.notice_type === 'email'" field="email" label="通知邮箱">
|
|
|
<EmailAutoComplete v-model="form.email" placeholder="用于接收电费变更通知" allow-clear />
|
|
|
</a-form-item>
|
|
|
<a-form-item field="notes" label="备注">
|
|
|
- <a-textarea
|
|
|
- v-model="form.notes"
|
|
|
- no-trim
|
|
|
- placeholder="添加对账号的备注(非必填)"
|
|
|
- :max-length="{ length: 50 }"
|
|
|
- allow-clear
|
|
|
- show-word-limit
|
|
|
- />
|
|
|
+ <a-textarea v-model="form.notes" no-trim placeholder="添加对账号的备注(非必填)" :max-length="{ length: 50 }" allow-clear
|
|
|
+ show-word-limit />
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
|
|
|
- <a-modal
|
|
|
- v-model:visible="listVisible"
|
|
|
- title="电费变更记录"
|
|
|
- class="power-modal power-modal--wide"
|
|
|
- esc-to-close
|
|
|
- closable
|
|
|
- width="auto"
|
|
|
- hide-cancel
|
|
|
- >
|
|
|
- <a-table
|
|
|
- :bordered="false"
|
|
|
- :data="changeList"
|
|
|
- :columns="listColumns"
|
|
|
- stripe
|
|
|
- hoverable
|
|
|
- :loading="listLoading"
|
|
|
- class="change-table"
|
|
|
- :scroll="{ x: 720 }"
|
|
|
- :pagination="{
|
|
|
+ <a-modal v-model:visible="listVisible" title="电费变更记录" class="power-modal power-modal--wide" esc-to-close closable
|
|
|
+ width="auto" hide-cancel>
|
|
|
+ <a-table :bordered="false" :data="changeList" :columns="listColumns" stripe hoverable :loading="listLoading"
|
|
|
+ class="change-table" :scroll="{ x: 720 }" :pagination="{
|
|
|
showPageSize: true,
|
|
|
showJumper: true,
|
|
|
showTotal: true,
|
|
|
pageSize: pagination.pagesize,
|
|
|
current: pagination.current,
|
|
|
total: pagination.total
|
|
|
- }"
|
|
|
- @page-change="handlePageChange"
|
|
|
- @page-size-change="handlePageSizeChange"
|
|
|
- >
|
|
|
+ }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
|
|
|
<template #time="{ record }">
|
|
|
{{ formatTime(record.time) }}
|
|
|
</template>
|
|
|
@@ -263,6 +235,7 @@ const form = reactive({
|
|
|
building: '',
|
|
|
room: '',
|
|
|
email: '',
|
|
|
+ notice_type: 'email',
|
|
|
notes: '',
|
|
|
lowest: 10.0
|
|
|
})
|
|
|
@@ -315,6 +288,7 @@ const editAccount = (item) => {
|
|
|
form.building = item.building
|
|
|
form.room = item.room
|
|
|
form.email = item.email
|
|
|
+ form.notice_type = item.notice_type || 'email'
|
|
|
form.notes = item.notes
|
|
|
form.lowest = Number(item.lowest) ?? 10.0
|
|
|
if (form.area) GetPowerData('dylist', form.area)
|
|
|
@@ -325,6 +299,7 @@ const editAccount = (item) => {
|
|
|
form.building = ''
|
|
|
form.room = ''
|
|
|
form.email = ''
|
|
|
+ form.notice_type = 'email'
|
|
|
form.notes = ''
|
|
|
form.lowest = 10.0
|
|
|
}
|
|
|
@@ -334,14 +309,14 @@ const editAccount = (item) => {
|
|
|
const handleBeforeOk = async (done) => {
|
|
|
try {
|
|
|
ok_loading.value = true
|
|
|
- const { area, building, room, email } = form
|
|
|
- if (!area || !building || !room || !email) {
|
|
|
+ const { area, building, room, email, notice_type } = form
|
|
|
+ if (!area || !building || !room || (notice_type === 'email' && !email)) {
|
|
|
Message.error('请填写完整的任务信息')
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
|
|
- if (!emailRegex.test(email)) {
|
|
|
+ if (notice_type === 'email' && !emailRegex.test(email)) {
|
|
|
Message.error('请检查邮箱格式是否正确')
|
|
|
return false
|
|
|
}
|
|
|
@@ -587,4 +562,27 @@ onMounted(() => {
|
|
|
color: @store-primary;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.notice-radio-option {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ line-height: 1;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.notice-radio-option__label {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.vip-inline-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: auto;
|
|
|
+ height: 18px;
|
|
|
+ vertical-align: middle;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
</style>
|