|
@@ -0,0 +1,390 @@
|
|
|
+<template>
|
|
|
+ <div class="tenant">
|
|
|
+ <div class="content">
|
|
|
+ <byTable
|
|
|
+ :source="sourceList.data"
|
|
|
+ :pagination="sourceList.pagination"
|
|
|
+ :config="config"
|
|
|
+ :loading="loading"
|
|
|
+ :selectConfig="selectConfig"
|
|
|
+ highlight-current-row
|
|
|
+ :action-list="[
|
|
|
+ {
|
|
|
+ text: '添加流水',
|
|
|
+ action: () => openModal('add'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @get-list="getList">
|
|
|
+ <template #amount="{ item }">
|
|
|
+ <div :style="'color: ' + (item.status === '10' ? '#04cb04;' : 'red;')">
|
|
|
+ <span style="padding-right: 4px">{{ item.currency }}</span>
|
|
|
+ <span v-if="item.status === '20'">-</span>
|
|
|
+ <span>{{ moneyFormat(item.amount) }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byTable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog :title="modalType == 'add' ? '添加账户' : '编辑账户'" v-if="dialogVisible" v-model="dialogVisible" width="600" v-loading="loadingDialog">
|
|
|
+ <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
|
|
|
+ <template #transactionTime>
|
|
|
+ <div>
|
|
|
+ <el-form-item prop="transactionTime">
|
|
|
+ <el-date-picker v-model="formData.data.transactionTime" type="datetime" placeholder="请选择交易时间" value-format="YYYY-MM-DD HH:mm:ss" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #amount>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item prop="status">
|
|
|
+ <el-select v-model="formData.data.status" placeholder="请选择收支类型" style="width: 100%">
|
|
|
+ <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item prop="currency">
|
|
|
+ <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100%">
|
|
|
+ <el-option v-for="item in accountCurrency" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item prop="amount">
|
|
|
+ <el-input-number v-model="formData.data.amount" placeholder="请输入金额" style="width: 100%" :precision="2" :controls="false" :min="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byForm>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false" size="large">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm()" size="large">确 定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { computed, ref } from "vue";
|
|
|
+import byTable from "@/components/byTable/index";
|
|
|
+import byForm from "@/components/byForm/index";
|
|
|
+import useUserStore from "@/store/modules/user";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const accountCurrency = ref([]);
|
|
|
+const accountList = ref([]);
|
|
|
+const status = ref([
|
|
|
+ {
|
|
|
+ label: "收入",
|
|
|
+ value: "10",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "支出",
|
|
|
+ value: "20",
|
|
|
+ },
|
|
|
+]);
|
|
|
+const sourceList = ref({
|
|
|
+ data: [],
|
|
|
+ pagination: {
|
|
|
+ total: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ keyword: "",
|
|
|
+ accountManagementId: "",
|
|
|
+ currency: "",
|
|
|
+ status: "",
|
|
|
+ },
|
|
|
+});
|
|
|
+const loading = ref(false);
|
|
|
+const selectConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: "收支类型",
|
|
|
+ prop: "status",
|
|
|
+ data: status.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "资金账户",
|
|
|
+ prop: "accountManagementId",
|
|
|
+ data: accountList.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "币种",
|
|
|
+ prop: "currency",
|
|
|
+ data: accountCurrency.value,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const config = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "资金账户",
|
|
|
+ prop: "accountManagementName",
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "交易时间",
|
|
|
+ prop: "transactionTime",
|
|
|
+ width: 160,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "交易金额",
|
|
|
+ slot: "amount",
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "对方账户",
|
|
|
+ prop: "name",
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "对方银行",
|
|
|
+ prop: "openingBank",
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "对方账号",
|
|
|
+ prop: "accountOpening",
|
|
|
+ width: 240,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "摘要",
|
|
|
+ prop: "remarks",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "操作",
|
|
|
+ width: "120",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ renderHTML(row) {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "修改",
|
|
|
+ type: "primary",
|
|
|
+ text: true,
|
|
|
+ },
|
|
|
+ el: "button",
|
|
|
+ click() {
|
|
|
+ update(row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "删除",
|
|
|
+ type: "primary",
|
|
|
+ text: true,
|
|
|
+ },
|
|
|
+ el: "button",
|
|
|
+ click() {
|
|
|
+ ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ proxy
|
|
|
+ .post("/accountRunningWater/delete", {
|
|
|
+ id: row.id,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ ElMessage({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const getDict = () => {
|
|
|
+ proxy
|
|
|
+ .post("/dictTenantData/page", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ dictCode: "account_currency",
|
|
|
+ tenantId: useUserStore().user.tenantId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.rows && res.rows.length > 0) {
|
|
|
+ accountCurrency.value = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.dictValue,
|
|
|
+ value: item.dictKey,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.rows && res.rows.length > 0) {
|
|
|
+ accountList.value = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.alias,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const getList = async (req) => {
|
|
|
+ sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
|
|
|
+ loading.value = true;
|
|
|
+ proxy.post("/accountRunningWater/page", sourceList.value.pagination).then((res) => {
|
|
|
+ sourceList.value.data = res.rows;
|
|
|
+ sourceList.value.pagination.total = res.total;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+};
|
|
|
+getDict();
|
|
|
+getList();
|
|
|
+const modalType = ref("add");
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const loadingDialog = ref(false);
|
|
|
+const submit = ref(null);
|
|
|
+const formOption = reactive({
|
|
|
+ inline: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ itemWidth: 100,
|
|
|
+ rules: [],
|
|
|
+});
|
|
|
+const formConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: "账户信息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "accountManagementId",
|
|
|
+ label: "选择账户",
|
|
|
+ data: accountList.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "交易信息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ prop: "transactionTime",
|
|
|
+ slotName: "transactionTime",
|
|
|
+ label: "交易时间",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ prop: "amount",
|
|
|
+ slotName: "amount",
|
|
|
+ label: "交易金额",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "对方信息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "name",
|
|
|
+ label: "账户名称",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "openingBank",
|
|
|
+ label: "开户银行",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "accountOpening",
|
|
|
+ label: "银行账号",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "其他信息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "remarks",
|
|
|
+ label: "摘要",
|
|
|
+ itemType: "textarea",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const rules = ref({
|
|
|
+ accountManagementId: [{ required: true, message: "请选择账户", trigger: "change" }],
|
|
|
+ transactionTime: [{ required: true, message: "请选择交易时间", trigger: "change" }],
|
|
|
+ status: [{ required: true, message: "请选择收支类型", trigger: "change" }],
|
|
|
+ currency: [{ required: true, message: "请选择币种", trigger: "change" }],
|
|
|
+ amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
|
|
|
+ name: [{ required: true, message: "请输入账户名称", trigger: "blur" }],
|
|
|
+ openingBank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
|
|
|
+ accountOpening: [{ required: true, message: "请输入银行账号", trigger: "blur" }],
|
|
|
+});
|
|
|
+const formData = reactive({
|
|
|
+ data: {},
|
|
|
+});
|
|
|
+const openModal = (val) => {
|
|
|
+ modalType.value = val;
|
|
|
+ formData.data = {};
|
|
|
+ loadingDialog.value = false;
|
|
|
+ dialogVisible.value = true;
|
|
|
+};
|
|
|
+const submitForm = () => {
|
|
|
+ submit.value.handleSubmit(() => {
|
|
|
+ loadingDialog.value = true;
|
|
|
+ proxy.post("/accountRunningWater/" + modalType.value, formData.data).then(
|
|
|
+ () => {
|
|
|
+ ElMessage({
|
|
|
+ message: modalType.value == "add" ? "添加成功" : "编辑成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ dialogVisible.value = false;
|
|
|
+ getList();
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ loadingDialog.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+};
|
|
|
+const update = (row) => {
|
|
|
+ modalType.value = "edit";
|
|
|
+ loadingDialog.value = true;
|
|
|
+ proxy.post("/accountRunningWater/detail", { id: row.id }).then((res) => {
|
|
|
+ formData.data = res;
|
|
|
+ loadingDialog.value = false;
|
|
|
+ });
|
|
|
+ dialogVisible.value = true;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tenant {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+::v-deep(.el-input-number .el-input__inner) {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|