sweet-hut-ui/src/components/Home/Bill/BillPay.vue

<template>
  <div class="bill-setting">
    <div class="button-container">
      <el-button type="primary" @click="addNewPayClick">新增账户</el-button>
    </div>

    <el-table
        :data="billStore.billPayList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 100%"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="name" label="名称" align="center" width="100"/>
      <el-table-column label="图标" align="center" width="80">
        <template #default="scope">
          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editPayClick(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deletePayClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="billInfo.billPayDialog.visible"
               :title="billInfo.billPayDialog.title"
               center width="80%" @open="openDialogEvent">
      <el-form ref="formRef" :model="billInfo.billPayDialog.data"
               :rules="rules" label-position="top" label-width="100px">
        <el-form-item label="账户名称" prop="name">
          <el-input v-model="billInfo.billPayDialog.data.name" autocomplete="off"
                    placeholder="请输入类型名称"
                    :maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="账户图标" prop="icon">
          <el-input v-model="billInfo.billPayDialog.data.icon" autocomplete="off"
                    placeholder="请输入类型图标"
                    :maxlength="40" show-word-limit/>
        </el-form-item>
        <el-form-item label="图标颜色" prop="color">
          <el-color-picker v-model="billInfo.billPayDialog.data.color" />
        </el-form-item>
        <el-form-item label="图标预览">
          <i :class="billInfo.billPayDialog.data.icon"
             :style="{color: billInfo.billPayDialog.data.color, fontSize: '24px'}"></i>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useBillStore } from '@/store/bill'
import { ElMessage, FormRules } from 'element-plus'
import { IBillPay } from '@/types/bill'
import { billPayRules } from '@/utils/element/elRules'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { addBillPayApi, updateBillPayApi } from '@/apis/bill'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
import type { IDialog, IHandleApi } from 'vue3-common/types'

const formRef = ref()
const rules = reactive<FormRules>(billPayRules)
const billStore = useBillStore()

const billInfo = reactive({
  setBillPayType: 'ADD' as IHandleApi,
  billPayDialog: {
    title: '',
    visible: false,
    data: {}
  } as IDialog<IBillPay>
})

onMounted(async () => {
  await billStore.queryBillPay()
})

/**
 * 点击新增账户按钮
 */
const addNewPayClick = () => {
  billInfo.setBillPayType = 'ADD'
  billInfo.billPayDialog = {
    title: '新增账户',
    visible: true,
    data: {
      name: '',
      icon: '',
      color: ''
    }
  }
}

/**
 * 点击编辑账户按钮
 * @param pay 账户
 */
const editPayClick = async (pay: IBillPay) => {
  billInfo.setBillPayType = 'UPDATE'
  billInfo.billPayDialog = {
    title: '编辑账户',
    visible: true,
    data: deepCopyObject(pay)
  }
}

/**
 * 点击删除账户按钮
 * @param pay 账户
 */
const deletePayClick = (pay: IBillPay) => {
  billInfo.setBillPayType = 'DELETE'
  ElMessage.error('暂不支持该功能')
}

const openDialogEvent = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}

const setBillBookApi = async (id?: number) => {
  switch (billInfo.setBillPayType) {
    case 'ADD':
      await addBillPayApi(billInfo.billPayDialog.data)
      ElMessage.success('新增账户成功')
      break
    case 'UPDATE':
      await updateBillPayApi(id as number, billInfo.billPayDialog.data)
      ElMessage.success('更新账户成功')
      break
    case 'DELETE':
      ElMessage.success('删除账户成功')
      break
    default:
      break
  }
  await billStore.queryBillPay()
  billInfo.billPayDialog.visible = false
}

const cancelClick = () => {
  billInfo.billPayDialog.visible = false
}

const confirmClick = async () => {
  await formRef.value.validate((valid) => {
    if (valid) {
      setBillBookApi(billInfo.billPayDialog.data.id)
    }
  })
}
</script>