feat: 首页日历功能新增。

2024-08-01 19:04:36 +08:00
parent f6a7b303c5
commit b4300702fd
9 changed files with 308 additions and 127 deletions
--- a/src/api/invest/accountAnalysis.js
+++ b/src/api/invest/accountAnalysis.js
@@ -53,3 +53,12 @@ export function getCreditReportInfo(query) {
    params: query
  })
 }
+
+// 首页--日历展示事件
+export function getAccountCalendarInfo(query) {
+  return request({
+    url: '/invest/analysis/getAccountCalendarInfo',
+    method: 'get',
+    params: query
+  })
+}
--- a/src/views/invest/accountCalendar/index.vue
+++ b/src/views/invest/accountCalendar/index.vue
@@ -1,57 +1,291 @@
 <template>
-  <br />
-  <FullCalendar :options="calendarOptions" />
+  <!-- 这里是自定义头部，切换视图类型和切换日期 -->
+  <div class="calendarHeader">
+    <div class="header_left">
+      <h1>{{ type === '3' ? '列表' : calendarTitle }}</h1>
+    </div>
+    <div class="header_right">
+      <!-- <span v-if="type!=='3'&&isShowBack" class="blue-color backToday" @click="getToday()">{{ type==='1'?'返回本月':'返回本周' }}</span>
+        <el-select v-model="type" placeholder="视图类型" style="width: 80px" size="small" class="header_select" @change="handleChangeType">
+          <el-option label="月" value="1" />
+          <el-option label="周" value="2" />
+          <el-option label="列" value="3" />
+        </el-select> -->
+      <!-- 选择月份的日期框 -->
+      <el-date-picker
+        v-if="type === '1'"
+        v-model="showMonth"
+        type="month"
+        size="small"
+        :clearable="false"
+        placeholder="请选择日期"
+        style="margin-left: 10px; vertical-align: middle"
+        @change="changeDate"
+      />
+      <el-button-group v-if="type === '2'" style="margin-left: 10px">
+        <el-button size="small" class="el-icon-arrow-left" @click="getPrev()">上一周</el-button>
+        <el-button size="small" @click="getNext()">下一周<i class="el-icon-arrow-right" /></el-button>
+      </el-button-group>
+    </div>
+  </div>
+  <!-- 月视图和周视图显示，列视图显示表格形式 -->
+  <div v-show="type !== '3'" ref="fullcalendar" class="card" />
 </template>

 <script>
-import FullCalendar from '@fullcalendar/vue3'
+import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import { Calendar } from '@fullcalendar/core'
 import dayGridPlugin from '@fullcalendar/daygrid'
-import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
 import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import dayjs from 'dayjs'
+import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js'
 export default {
-  name: 'ListByCalendar',
-  components: { FullCalendar },
-  data() {
-    return {
-      calendarOptions: {
-        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
-        initialView: 'dayGridMonth',
-        // themeSystem: 'bootstrap5',
-        // 语言
-        locale: 'zh-cn',
-        // 周起始日
-        firstDay: 1,
-        allDayText: '全天',
-        // 是否可以选中日历格
-        selectable: true,
-        // 周次
-        weekNumbers: true,
-        headerToolbar: {
-          left: 'today',
-          center: 'prevYear,prev title next,nextYear',
-          right: 'dayGridMonth,timeGridWeek,timeGridDay,listDay'
+  name: 'PlanManagement',
+  components: {},
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const state = reactive({
+      calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
+      dialogVisiable: false,
+      showMonth: new Date(), // 显示月份
+      loading: false,
+      isShowBack: false, // 是否显示回到当月或当周
+      planCategoryId: '', // 计划分类Id
+      type: '1',
+      dialogType: '',
+      detailInfo: {},
+      Tcalendar: null,
+      drawerVisiable: false,
+      drawerType: '',
+      colorJSON: {
+        // 我这里有类别的概念，不同的类别又有不同的颜色
+        green: { title: '#00B578', class: 'green' },
+        red: { title: '#FA5151', class: 'red' },
+        orange: { title: '#FF8F1F', class: 'orange' },
+        yellow: { title: '#FFC300', class: 'yellow' },
+        cyan: { title: '#07B9B9', class: 'cyan' },
+        blue: { title: '#3662EC', class: 'blue' },
+        purple: { title: '#8A38F5', class: 'purple' },
+        magenta: { title: '#EB2F96', class: 'magenta' }
      },
+      fullcalendar: ref(),
+      queryParams: {
+        type: null,
+        time: ''
+      },
+      nowDate: new Date(),
+      infoList: [], // 日历显示的列信息
+      categoryJSON: {} // 计划分类json
+    })
+    onMounted(() => {
+      initCalendar()
+      getCalendarList()
+    })
+    const initCalendar = () => {
+      state.Tcalendar = new Calendar(state.fullcalendar, {
+        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        aspectRatio: 2.2,
+        locale: 'zh-cn',
+        handleWindowResize: true,
+        editable: true, // 允许编辑表格
+        droppable: true,
+        // height: 'auto',
+        // 显示事件开始时间
+        displayEventTime: false,
+        // 显示事件结束时间
+        displayEventEnd: false,
+        // 关闭全天区域显示
+        allDaySlot: true,
+        // 开始时间段
+        slotMinTime: '00:00:00',
+        // 结束时间段
+        slotMaxTime: '00:00:00',
+        eventOrder: 'type,color,start',
+        eventDurationEditable: true,
+        eventResizableFromStart: true,
+        selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
+        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
+        unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
+        unselectCancel: '.el-drawer',
+        dayMaxEvents: true,
+        // eventLimit: true,
+        headerToolbar: false,
        buttonText: {
-          today: '今天',
+          today: '回到今天',
          month: '月',
          week: '周',
-          day: '日',
-          list: '列表',
-          prev: '‹',
-          next: '›',
-          prevYear: '«',
-          nextYear: '»'
+          list: '列',
+          day: '日'
+        },
+        allDayText: '全天',
+        events: state.infoList,
+        eventClassNames: function (arg) {
+          // 添加自定义class
+          return [arg.event.extendedProps.class]
+        },
+        eventContent: function (arg) {
+          const italicEl = document.createElement('div')
+          if (arg.event.extendedProps.startDateMinute && state.type === '1') {
+            const childEl = document.createElement('span')
+            childEl.innerHTML = arg.event.extendedProps.startDateMinute
+            italicEl.append(childEl)
+          }
+          italicEl.append(arg.event.title)
+          italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
+          return { domNodes: [italicEl] }
+        },
+        eventDrop: function (info) {
+          // 拖拽停止时触发
+          handleDrap(info)
+        },
+        eventClick: function (info) {
+          // 点击查看时触发
+          handleClick(info)
+        },
+        select: function (info) {},
+        eventResize: function (info) {
+          handleEventResize(info)
+        }
+      })
+      state.Tcalendar.render()
+    }
+    // 上一月、周、日
+    const getPrev = () => {
+      state.Tcalendar.prev()
+      state.calendarTitle = state.Tcalendar.view.title
+      getCalendarList()
+    }
+    // 下一月、周、日
+    const getNext = () => {
+      state.Tcalendar.next()
+      state.calendarTitle = state.Tcalendar.view.title
+      getCalendarList()
+    }
+    // 回到今天
+    const getToday = () => {
+      state.Tcalendar.today()
+      state.calendarTitle = state.Tcalendar.view.title
+      state.isShowBack = false
+      state.showMonth = new Date()
+      getCalendarList()
+    }
+
+    const handleSetting = () => {
+      state.dialogCategory = true
+    }
+    const getCalendarList = () => {
+      const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
+      const params = {
+        startTime: dayjs(state.Tcalendar.view.currentStart).format('YYYY-MM-DD'),
+        endTime: dayjs(currentEnd).format('YYYY-MM-DD'),
+        type: state.type
+      }
+      state.loading = true
+      state.Tcalendar.getEventSources().forEach((item) => {
+        item.remove()
+      })
+
+      getAccountCalendarInfo(params).then((res) => {
+        state.loading = false
+        if (res) {
+          state.infoList = res.data
+          state.Tcalendar.addEventSource(state.infoList)
+        }
+      })
+    }
+    // 点击计划查看
+    const handleClick = (info) => {}
+    // 列视图点击查看
+    const handleClickList = (row) => {}
+    const closeDrawer = (val) => {
+      state.drawerVisiable = false
+      if (val) {
+        getCalendarList()
      }
    }
+    // 切换视图类型
+    const handleChangeType = (val) => {
+      if (val === '1') {
+        state.Tcalendar.changeView('dayGridMonth')
+        state.showMonth = new Date()
+      } else if (val === '2') {
+        state.Tcalendar.changeView('timeGridWeek')
+      } else {
+        state.Tcalendar.changeView('listMonth')
+      }
+      state.isShowBack = false
+      state.calendarTitle = state.Tcalendar.view.title
+      getToday()
+    }
+    // 切换类型
+    const handleChangePlanId = () => {
+      getCalendarList()
+    }
+
+    // 拖拽计划时触发
+    const handleDrap = (info) => {}
+    // 调整大小时触发
+    const handleEventResize = (info) => {}
+    // 拖拽触发
+    const handleSelectDate = (info) => {}
+    // 切换月份和日期
+    const changeDate = (date) => {
+      state.Tcalendar.gotoDate(date)
+      // 判断不是当前月份，显示返回当前月
+      if (date.getMonth() !== new Date().getMonth() || new Date().getFullYear() !== new Date(date).getFullYear()) {
+        state.isShowBack = true
+      } else {
+        state.isShowBack = false
+      }
+      state.calendarTitle = state.Tcalendar.view.title
+      getCalendarList()
+    }
+    return {
+      ...toRefs(state),
+      changeDate,
+      getPrev,
+      handleDrap,
+      handleClickList,
+      handleEventResize,
+      handleChangePlanId,
+      getNext,
+      getToday,
+      closeDrawer,
+      getCalendarList,
+      handleSetting,
+      handleChangeType,
+      handleClick,
+      handleSelectDate
    }
  }
 }
 </script>
-
-<style scoped>
-:deep(h2) {
+<style lang="scss" scoped>
+.calendarHeader {
+  margin: 20px 30px 10px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .header_select {
+    margin: 0 0 0 10px;
    display: inline-block;
    vertical-align: middle;
+  }
 }
+h1 {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 32px;
+  margin: 0 0 0 0;
+  text-align: left;
+  vertical-align: middle;
+  display: inline-block;
+  color: #303133;
+}
+// .el-button-group {
+//   vertical-align: top;
+// }
 </style>
--- a/src/views/invest/accountDealRecord/index.vue
+++ b/src/views/invest/accountDealRecord/index.vue
@@ -372,12 +372,14 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getAccountList()
        })
      } else {
        addAccountDealRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getAccountList()
        })
      }
    }
--- a/src/views/invest/creditTransferRecord/index.vue
+++ b/src/views/invest/creditTransferRecord/index.vue
@@ -125,7 +125,6 @@ const multiple = ref(true)
 const total = ref(0)
 const creditCardList = ref([])
 const debitCardList = ref([])
-const futruesStocksList = ref([])
 const title = ref('')
 const operateList = ref([
  { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:accountsTransferRecord:query'] },
@@ -210,13 +209,6 @@ function getDebitList() {
  })
 }

-/** 查询投资账户管理列表 */
-function getFutruesStocksList() {
-  listAccounts(queryFutruesStocksParams.value).then((response) => {
-    futruesStocksList.value = response.rows
-  })
-}
-
 /** 查询信用卡还款列表 */
 function getList() {
  loading.value = true
@@ -324,12 +316,16 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getDebitList()
+          getcreditCardList()
        })
      } else {
        addAccountsTransferRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getDebitList()
+          getcreditCardList()
        })
      }
    }
@@ -361,7 +357,6 @@ function handleExport() {
    `accountsTransferRecord_${new Date().getTime()}.xlsx`
  )
 }
-getFutruesStocksList()
 getDebitList()
 getcreditCardList()
 getList()
--- a/src/views/invest/debitTransferRecord/index.vue
+++ b/src/views/invest/debitTransferRecord/index.vue
@@ -113,9 +113,7 @@ const ids = ref([])
 const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
-const creditCardList = ref([])
 const debitCardList = ref([])
-const futruesStocksList = ref([])
 const title = ref('')
 const operateList = ref([
  { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:accountsTransferRecord:query'] },
@@ -135,22 +133,6 @@ const data = reactive({
    outAccountId: null,
    dealType: null
  },
-  queryPosMachineParams: {
-    pageNum: 1,
-    pageSize: 1000
-  },
-  queryFutruesStocksParams: {
-    pageNum: 1,
-    type: '5',
-    status: '1',
-    pageSize: 1000
-  },
-  queryCreditParams: {
-    pageNum: 1,
-    type: '2',
-    status: '1',
-    pageSize: 1000
-  },
  queryDebitParams: {
    pageNum: 1,
    type: '1',
@@ -181,14 +163,7 @@ const handleOperate = (operate, row) => {
  }
 }

-const { queryParams, queryPosMachineParams, queryFutruesStocksParams, queryCreditParams, queryDebitParams, form, rules } = toRefs(data)
-
-/** 查询信用卡卡管理列表 */
-function getcreditCardList() {
-  listAccounts(queryCreditParams.value).then((response) => {
-    creditCardList.value = response.rows
-  })
-}
+const { queryParams, queryDebitParams, form, rules } = toRefs(data)

 /** 查询储蓄账户卡管理列表 */
 function getDebitList() {
@@ -197,13 +172,6 @@ function getDebitList() {
  })
 }

-/** 查询投资账户管理列表 */
-function getFutruesStocksList() {
-  listAccounts(queryFutruesStocksParams.value).then((response) => {
-    futruesStocksList.value = response.rows
-  })
-}
-
 /** 查询储蓄账户转账列表 */
 function getList() {
  loading.value = true
@@ -315,12 +283,14 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getDebitList()
        })
      } else {
        addAccountsTransferRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getDebitList()
        })
      }
    }
@@ -352,8 +322,6 @@ function handleExport() {
    `accountsTransferRecord_${new Date().getTime()}.xlsx`
  )
 }
-getFutruesStocksList()
 getDebitList()
-getcreditCardList()
 getList()
 </script>
--- a/src/views/invest/debitcard/index.vue
+++ b/src/views/invest/debitcard/index.vue
@@ -36,6 +36,11 @@
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="储蓄账户名称" align="center" width="180" prop="name" />
          <el-table-column label="储蓄账户卡号" align="center" prop="code" />
+          <el-table-column label="储蓄账户类型" width="150" align="center" prop="debitType">
+            <template #default="scope">
+              <dict-tag :options="debit_type" :value="scope.row.debitType" />
+            </template>
+          </el-table-column>
          <el-table-column label="账户状态" align="center" prop="status">
            <template #default="scope">
              <dict-tag :options="account_status" :value="scope.row.status" />
@@ -47,11 +52,6 @@
              <span>{{ parseTime(scope.row.activationDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
-          <el-table-column label="储蓄账户类型" width="150" align="center" prop="debitType">
-            <template #default="scope">
-              <dict-tag :options="debit_type" :value="scope.row.debitType" />
-            </template>
-          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
@@ -75,6 +75,11 @@
        <el-form-item label="储蓄账户卡号" prop="code">
          <el-input v-model="form.code" placeholder="请输入储蓄账户卡号" />
        </el-form-item>
+        <el-form-item label="储蓄账户类型" prop="debitType">
+          <el-select v-model="form.debitType" placeholder="请选择储蓄账户类型">
+            <el-option v-for="dict in debit_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
        <el-form-item label="账户状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择账户状态">
            <el-option v-for="dict in account_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
@@ -95,11 +100,6 @@
        <el-form-item label="有效期" prop="effectiveDate">
          <el-date-picker clearable v-model="form.effectiveDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择有效期"> </el-date-picker>
        </el-form-item>
-        <el-form-item label="储蓄账户类型" prop="debitType">
-          <el-select v-model="form.debitType" placeholder="请选择储蓄账户类型">
-            <el-option v-for="dict in debit_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
        <el-form-item label="备注" style="width: 792px" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
@@ -149,6 +149,7 @@ const data = reactive({
    name: [{ required: true, message: '储蓄账户名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: '储蓄账户卡号不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '账户状态不能为空', trigger: 'blur' }],
+    debitType: [{ required: true, message: '储蓄账户类型不能为空', trigger: 'blur' }],
    balance: [{ required: true, message: '余额不能为空', trigger: 'blur' }]
  }
 })
--- a/src/views/invest/investTransferRecord/index.vue
+++ b/src/views/invest/investTransferRecord/index.vue
@@ -98,7 +98,6 @@ import {
  addAccountsTransferRecord,
  updateAccountsTransferRecord
 } from '@/api/invest/accountsTransferRecord'
-import { listAccounts } from '@/api/invest/accounts'
 import { listFutureStocks } from '@/api/invest/futureStocks'
 import dayjs from 'dayjs'
 // eslint-disable-next-line no-unused-vars
@@ -114,8 +113,6 @@ const ids = ref([])
 const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
-const creditCardList = ref([])
-const debitCardList = ref([])
 const futruesStocksList = ref([])
 const title = ref('')
 const operateList = ref([
@@ -136,27 +133,11 @@ const data = reactive({
    outAccountId: null,
    dealType: null
  },
-  queryPosMachineParams: {
-    pageNum: 1,
-    pageSize: 1000
-  },
  queryFutruesStocksParams: {
    pageNum: 1,
    status: '1',
    pageSize: 1000
  },
-  queryCreditParams: {
-    pageNum: 1,
-    type: '2',
-    status: '1',
-    pageSize: 1000
-  },
-  queryDebitParams: {
-    pageNum: 1,
-    type: '1',
-    status: '1',
-    pageSize: 1000
-  },
  rules: {
    inAccountId: [{ required: true, message: '投资账户不能为空', trigger: 'blur' }],
    dealType: [{ required: true, message: '交易类型不能为空', trigger: 'blur' }],
@@ -181,22 +162,7 @@ const handleOperate = (operate, row) => {
  }
 }

-const { queryParams, queryPosMachineParams, queryFutruesStocksParams, queryCreditParams, queryDebitParams, form, rules } = toRefs(data)
-
-/** 查询信用卡卡管理列表 */
-function getcreditCardList() {
-  listAccounts(queryCreditParams.value).then((response) => {
-    creditCardList.value = response.rows
-  })
-}
-
-/** 查询储蓄卡卡管理列表 */
-function getDebitList() {
-  listAccounts(queryDebitParams.value).then((response) => {
-    debitCardList.value = response.rows
-  })
-}
-
+const { queryParams, queryFutruesStocksParams, form, rules } = toRefs(data)
 /** 查询投资账户管理列表 */
 function getFutruesStocksList() {
  listFutureStocks(queryFutruesStocksParams.value).then((response) => {
@@ -315,12 +281,14 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getFutruesStocksList()
        })
      } else {
        addAccountsTransferRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getFutruesStocksList()
        })
      }
    }
@@ -353,7 +321,5 @@ function handleExport() {
  )
 }
 getFutruesStocksList()
-getDebitList()
-getcreditCardList()
 getList()
 </script>
--- a/src/views/invest/lendTransferRecord/index.vue
+++ b/src/views/invest/lendTransferRecord/index.vue
@@ -337,12 +337,16 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getDebitList()
+          getLendList()
        })
      } else {
        addAccountsTransferRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getDebitList()
+          getLendList()
        })
      }
    }
--- a/src/views/invest/posTransferRecord/index.vue
+++ b/src/views/invest/posTransferRecord/index.vue
@@ -314,12 +314,14 @@ function submitForm() {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
+          getBankCardLendList()
        })
      } else {
        addAccountsTransferRecord(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
+          getBankCardLendList()
        })
      }
    }