往来管理

src/views/finance/fundManage/comeAndGo/index.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="tenant">
+    <byTable
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :selectConfig="selectConfig"
+      highlight-current-row
+      :action-list="[
+        {
+          text: '往来单位',
+          action: () => addUnit(),
+          type: ' ',
+        },
+        {
+          text: '发起请款',
+          action: () => addModal(),
+        },
+      ]"
+      @get-list="getList">
+      <template #amount="{ item }">
+        <div>
+          <span style="padding-right: 4px">{{ item.currency }}</span>
+          <span>{{ moneyFormat(item.amount, 2) }}</span>
+        </div>
+      </template>
+    </byTable>
+
+    <el-dialog title="往来单位" v-if="openUnit" v-model="openUnit" width="700">
+      <div style="width: 100%">
+        <el-button @click="clickAddUnit">添 加</el-button>
+        <el-table :data="departmentList" style="margin-top: 20px">
+          <el-table-column label="单位名称" prop="name" width="220" />
+          <el-table-column label="备注" prop="remark" />
+          <el-table-column label="操作" align="center" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleUpdate(row)">修改</el-button>
+              <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button @click="openUnit = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog :title="modalType == 'add' ? '添加单位' : '编辑单位'" v-if="openAddUnit" v-model="openAddUnit" width="400">
+      <byForm :formConfig="formUnitConfig" :formOption="formOption" v-model="formUnitData.data" :rules="rulesUnit" ref="unit"></byForm>
+      <template #footer>
+        <el-button @click="openAddUnit = false" size="large">关 闭</el-button>
+        <el-button type="primary" @click="submitUnitForm()" size="large">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="添加往来" v-if="openComeAndGo" v-model="openComeAndGo" width="500">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="comeAndGo">
+        <template #amount>
+          <div style="width: 100%">
+            <el-form-item prop="amount">
+              <div style="display: flex">
+                <div style="width: 100px">
+                  <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100px">
+                    <el-option v-for="item in accountCurrency" :key="item.value" :label="item.value" :value="item.value" />
+                  </el-select>
+                </div>
+                <div style="width: calc(100% - 100px)">
+                  <el-input-number
+                    onmousewheel="return false;"
+                    v-model="formData.data.amount"
+                    placeholder="请输入金额"
+                    style="width: 100%"
+                    :precision="2"
+                    :controls="false"
+                    :min="0" />
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </template>
+      </byForm>
+      <template #footer>
+        <el-button @click="openComeAndGo = false" size="large">关 闭</el-button>
+        <el-button type="primary" @click="submitForm()" size="large">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import byTable from "@/components/byTable/index";
+import byForm from "@/components/byForm/index";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const accountCurrency = ref([]);
+const accountList = ref([]);
+const departmentList = ref([]);
+const isFlowingWater = ref([
+  {
+    label: "是",
+    value: "1",
+  },
+  {
+    label: "否",
+    value: "0",
+  },
+]);
+const type = ref([
+  {
+    label: "收入",
+    value: "0",
+  },
+  {
+    label: "支出",
+    value: "1",
+  },
+]);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    keyword: "",
+    isFlowingWater: "",
+    departmentId: "",
+    type: "",
+  },
+});
+const selectConfig = computed(() => {
+  return [
+    {
+      label: "是否流水",
+      prop: "isFlowingWater",
+      data: isFlowingWater.value,
+    },
+    {
+      label: "往来单位",
+      prop: "departmentId",
+      data: departmentList.value,
+    },
+    {
+      label: "往来类型",
+      prop: "type",
+      data: type.value,
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "往来单位",
+        prop: "departmentId",
+        "min-width": 180,
+      },
+      render(val) {
+        return proxy.dictValueLabel(val, departmentList.value);
+      },
+    },
+    {
+      attrs: {
+        label: "往来类型",
+        prop: "type",
+        width: 140,
+      },
+      render(val) {
+        return proxy.dictValueLabel(val, type.value);
+      },
+    },
+    {
+      attrs: {
+        label: "往来金额",
+        slot: "amount",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "是否流水",
+        prop: "isFlowingWater",
+        width: 140,
+      },
+      render(val) {
+        return proxy.dictValueLabel(val, isFlowingWater.value);
+      },
+    },
+    {
+      attrs: {
+        label: "往来账户",
+        prop: "accountId",
+        "min-width": 180,
+      },
+      render(val) {
+        return proxy.dictValueLabel(val, accountList.value);
+      },
+    },
+    {
+      attrs: {
+        label: "备注",
+        prop: "remark",
+        "min-width": 240,
+      },
+    },
+  ];
+});
+const getDict = () => {
+  proxy.getDictOne(["account_currency"]).then((res) => {
+    if (res["account_currency"] && res["account_currency"].length > 0) {
+      accountCurrency.value = res["account_currency"].map((x) => ({
+        label: x.dictValue,
+        value: x.dictKey,
+      }));
+    }
+  });
+  proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      accountList.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.alias + " (" + item.accountOpening + ")",
+          value: item.id,
+        };
+      });
+    }
+  });
+  getDepartmentList();
+};
+const getDepartmentList = () => {
+  proxy.get("/transactionDepartment/list", { pageNum: 1, pageSize: 999 }).then((res) => {
+    if (res.data && res.data.length > 0) {
+      departmentList.value = res.data.map((item) => {
+        return {
+          ...item,
+          label: item.name,
+          value: item.id,
+        };
+      });
+    } else {
+      departmentList.value = [];
+    }
+  });
+};
+const getList = async (req) => {
+  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  loading.value = true;
+  proxy.post("/transaction/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 openComeAndGo = ref(false);
+const formData = reactive({
+  data: {
+    departmentId: "",
+    type: "",
+    currency: "",
+    amount: undefined,
+    isFlowingWater: "",
+    accountId: "",
+    remark: "",
+  },
+});
+const comeAndGo = ref(null);
+const formConfig = computed(() => {
+  return [
+    {
+      type: "select",
+      prop: "departmentId",
+      label: "往来单位",
+      data: departmentList.value,
+    },
+    {
+      type: "select",
+      prop: "type",
+      label: "往来类型",
+      data: type.value,
+    },
+    {
+      type: "select",
+      prop: "isFlowingWater",
+      label: "是否流水",
+      data: isFlowingWater.value,
+    },
+    {
+      type: "select",
+      prop: "accountId",
+      label: "往来账户",
+      data: accountList.value,
+    },
+    {
+      type: "slot",
+      slotName: "amount",
+      prop: "amount",
+      label: "往来金额",
+    },
+    {
+      type: "input",
+      prop: "remark",
+      label: "备注",
+      itemType: "textarea",
+    },
+  ];
+});
+const rules = computed(() => {
+  return {
+    departmentId: [{ required: true, message: "请选择往来单位", trigger: "change" }],
+    type: [{ required: true, message: "请选择往来类型", trigger: "change" }],
+    isFlowingWater: [{ required: true, message: "请选择是否流水", trigger: "change" }],
+    accountId: [{ required: formData.data.isFlowingWater === "1" ? true : false, message: "请选择往来账户", trigger: "change" }],
+    amount: [{ required: true, message: "请输入往来金额", trigger: "blur" }],
+  };
+});
+const addModal = () => {
+  formData.data = {
+    departmentId: "",
+    type: "",
+    currency: "",
+    amount: undefined,
+    isFlowingWater: "",
+    accountId: "",
+    remark: "",
+  };
+  if (accountCurrency.value && accountCurrency.value.length > 0) {
+    formData.data.currency = accountCurrency.value[0].value;
+  }
+  openComeAndGo.value = true;
+};
+const submitForm = () => {
+  comeAndGo.value.handleSubmit(() => {
+    proxy.post("/transaction/add", formData.data).then(() => {
+      ElMessage({
+        message: "添加成功",
+        type: "success",
+      });
+      openComeAndGo.value = false;
+      getList();
+    });
+  });
+};
+const openUnit = ref(false);
+const addUnit = () => {
+  openUnit.value = true;
+};
+const handleDelete = (row) => {
+  ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    proxy.post("/transactionDepartment/delete", { id: row.id }).then(() => {
+      ElMessage({
+        message: "删除成功",
+        type: "success",
+      });
+      getDepartmentList();
+    });
+  });
+};
+const modalType = ref("add");
+const openAddUnit = ref(false);
+const formUnitData = reactive({
+  data: {
+    name: "",
+    remark: "",
+  },
+});
+const unit = ref(null);
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const formUnitConfig = computed(() => {
+  return [
+    {
+      type: "input",
+      prop: "name",
+      label: "单位名称",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      prop: "remark",
+      label: "备注",
+      itemType: "textarea",
+    },
+  ];
+});
+const rulesUnit = ref({
+  name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
+});
+const clickAddUnit = () => {
+  modalType.value = "add";
+  formUnitData.data = {
+    name: "",
+    remark: "",
+  };
+  openAddUnit.value = true;
+};
+const submitUnitForm = () => {
+  unit.value.handleSubmit(() => {
+    proxy.post("/transactionDepartment/" + modalType.value, formUnitData.data).then(() => {
+      ElMessage({
+        message: modalType.value == "add" ? "添加成功" : "编辑成功",
+        type: "success",
+      });
+      openAddUnit.value = false;
+      getDepartmentList();
+    });
+  });
+};
+const handleUpdate = (row) => {
+  modalType.value = "edit";
+  formUnitData.data = proxy.deepClone(row);
+  openAddUnit.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.tenant {
+  padding: 20px;
+}
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>