feat:移植工程

src/views/admin/bill/pay.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="admin-module">
+    <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: 50%"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column label="图标" align="center" min-width="10%">
+        <template #default="scope">
+          <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button type="primary" @click="editPayClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @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="500" @open="openDialogEvent">
+      <el-form ref="formRef" :model="billInfo.billPayDialog.data"
+               :rules="rules" 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>