123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433 |
- <template>
- <div class="pageIndexClass">
- <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="default">关 闭</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="default">关 闭</el-button>
- <el-button type="primary" @click="submitUnitForm()" size="default">确 定</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">
- <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>
- <el-input-number onmousewheel="return false;" v-model="formData.data.amount" placeholder="请输入金额" style="width: calc(100% - 100px)"
- :precision="2" :controls="false" :min="0" />
- </el-form-item>
- </div>
- </template>
- </byForm>
- <template #footer>
- <el-button @click="openComeAndGo = false" size="default">关 闭</el-button>
- <el-button type="primary" @click="submitForm()" size="default">确 定</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: "0",
- 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>
|