index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. <template>
  2. <div class="pageIndexClass">
  3. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
  4. highlight-current-row :action-list="[
  5. {
  6. text: '往来单位',
  7. action: () => addUnit(),
  8. type: ' ',
  9. },
  10. {
  11. text: '添加往来',
  12. action: () => addModal(),
  13. },
  14. ]" @get-list="getList">
  15. <template #amount="{ item }">
  16. <div>
  17. <span style="padding-right: 4px">{{ item.currency }}</span>
  18. <span>{{ moneyFormat(item.amount, 2) }}</span>
  19. </div>
  20. </template>
  21. </byTable>
  22. <el-dialog title="往来单位" v-if="openUnit" v-model="openUnit" width="700">
  23. <div style="width: 100%">
  24. <el-button @click="clickAddUnit">添 加</el-button>
  25. <el-table :data="departmentList" style="margin-top: 20px">
  26. <el-table-column label="单位名称" prop="name" width="220" />
  27. <el-table-column label="备注" prop="remark" />
  28. <el-table-column label="操作" align="center" width="120" fixed="right">
  29. <template #default="{ row }">
  30. <el-button type="primary" link @click="handleUpdate(row)">修改</el-button>
  31. <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. </div>
  36. <template #footer>
  37. <el-button @click="openUnit = false" size="default">关 闭</el-button>
  38. </template>
  39. </el-dialog>
  40. <el-dialog :title="modalType == 'add' ? '添加单位' : '编辑单位'" v-if="openAddUnit" v-model="openAddUnit" width="400">
  41. <byForm :formConfig="formUnitConfig" :formOption="formOption" v-model="formUnitData.data" :rules="rulesUnit" ref="unit"></byForm>
  42. <template #footer>
  43. <el-button @click="openAddUnit = false" size="default">关 闭</el-button>
  44. <el-button type="primary" @click="submitUnitForm()" size="default">确 定</el-button>
  45. </template>
  46. </el-dialog>
  47. <el-dialog title="添加往来" v-if="openComeAndGo" v-model="openComeAndGo" width="500">
  48. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="comeAndGo">
  49. <template #amount>
  50. <div style="width: 100%">
  51. <el-form-item prop="amount">
  52. <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100px">
  53. <el-option v-for="item in accountCurrency" :key="item.value" :label="item.value" :value="item.value" />
  54. </el-select>
  55. <el-input-number onmousewheel="return false;" v-model="formData.data.amount" placeholder="请输入金额" style="width: calc(100% - 100px)"
  56. :precision="2" :controls="false" :min="0" />
  57. </el-form-item>
  58. </div>
  59. </template>
  60. </byForm>
  61. <template #footer>
  62. <el-button @click="openComeAndGo = false" size="default">关 闭</el-button>
  63. <el-button type="primary" @click="submitForm()" size="default">确 定</el-button>
  64. </template>
  65. </el-dialog>
  66. </div>
  67. </template>
  68. <script setup>
  69. import byTable from "@/components/byTable/index";
  70. import byForm from "@/components/byForm/index";
  71. import { ElMessage, ElMessageBox } from "element-plus";
  72. const { proxy } = getCurrentInstance();
  73. const loading = ref(false);
  74. const accountCurrency = ref([]);
  75. const accountList = ref([]);
  76. const departmentList = ref([]);
  77. const isFlowingWater = ref([
  78. {
  79. label: "是",
  80. value: "1",
  81. },
  82. {
  83. label: "否",
  84. value: "0",
  85. },
  86. ]);
  87. const type = ref([
  88. {
  89. label: "收入",
  90. value: "0",
  91. },
  92. {
  93. label: "支出",
  94. value: "1",
  95. },
  96. ]);
  97. const sourceList = ref({
  98. data: [],
  99. pagination: {
  100. total: 0,
  101. pageNum: 1,
  102. pageSize: 10,
  103. keyword: "",
  104. isFlowingWater: "",
  105. departmentId: "",
  106. type: "",
  107. },
  108. });
  109. const selectConfig = computed(() => {
  110. return [
  111. {
  112. label: "是否流水",
  113. prop: "isFlowingWater",
  114. data: isFlowingWater.value,
  115. },
  116. {
  117. label: "往来单位",
  118. prop: "departmentId",
  119. data: departmentList.value,
  120. },
  121. {
  122. label: "往来类型",
  123. prop: "type",
  124. data: type.value,
  125. },
  126. ];
  127. });
  128. const config = computed(() => {
  129. return [
  130. {
  131. attrs: {
  132. label: "往来单位",
  133. prop: "departmentId",
  134. "min-width": 180,
  135. },
  136. render(val) {
  137. return proxy.dictValueLabel(val, departmentList.value);
  138. },
  139. },
  140. {
  141. attrs: {
  142. label: "往来类型",
  143. prop: "type",
  144. width: 140,
  145. },
  146. render(val) {
  147. return proxy.dictValueLabel(val, type.value);
  148. },
  149. },
  150. {
  151. attrs: {
  152. label: "往来金额",
  153. slot: "amount",
  154. width: 140,
  155. },
  156. },
  157. {
  158. attrs: {
  159. label: "是否流水",
  160. prop: "isFlowingWater",
  161. width: 140,
  162. },
  163. render(val) {
  164. return proxy.dictValueLabel(val, isFlowingWater.value);
  165. },
  166. },
  167. {
  168. attrs: {
  169. label: "往来账户",
  170. prop: "accountId",
  171. "min-width": 180,
  172. },
  173. render(val) {
  174. return proxy.dictValueLabel(val, accountList.value);
  175. },
  176. },
  177. {
  178. attrs: {
  179. label: "备注",
  180. prop: "remark",
  181. "min-width": 240,
  182. },
  183. },
  184. ];
  185. });
  186. const getDict = () => {
  187. proxy.getDictOne(["account_currency"]).then((res) => {
  188. if (res["account_currency"] && res["account_currency"].length > 0) {
  189. accountCurrency.value = res["account_currency"].map((x) => ({
  190. label: x.dictValue,
  191. value: x.dictKey,
  192. }));
  193. }
  194. });
  195. proxy
  196. .post("/accountManagement/page", { pageNum: 1, pageSize: 9999 })
  197. .then((res) => {
  198. if (res.rows && res.rows.length > 0) {
  199. accountList.value = res.rows.map((item) => {
  200. return {
  201. ...item,
  202. label: item.alias + " (" + item.accountOpening + ")",
  203. value: item.id,
  204. };
  205. });
  206. }
  207. });
  208. getDepartmentList();
  209. };
  210. const getDepartmentList = () => {
  211. proxy
  212. .get("/transactionDepartment/list", { pageNum: 1, pageSize: 999 })
  213. .then((res) => {
  214. if (res.data && res.data.length > 0) {
  215. departmentList.value = res.data.map((item) => {
  216. return {
  217. ...item,
  218. label: item.name,
  219. value: item.id,
  220. };
  221. });
  222. } else {
  223. departmentList.value = [];
  224. }
  225. });
  226. };
  227. const getList = async (req) => {
  228. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  229. loading.value = true;
  230. proxy.post("/transaction/page", sourceList.value.pagination).then((res) => {
  231. sourceList.value.data = res.rows;
  232. sourceList.value.pagination.total = res.total;
  233. setTimeout(() => {
  234. loading.value = false;
  235. }, 200);
  236. });
  237. };
  238. getDict();
  239. getList();
  240. const openComeAndGo = ref(false);
  241. const formData = reactive({
  242. data: {
  243. departmentId: "",
  244. type: "",
  245. currency: "",
  246. amount: undefined,
  247. isFlowingWater: "",
  248. accountId: "",
  249. remark: "",
  250. },
  251. });
  252. const comeAndGo = ref(null);
  253. const formConfig = computed(() => {
  254. return [
  255. {
  256. type: "select",
  257. prop: "departmentId",
  258. label: "往来单位",
  259. data: departmentList.value,
  260. },
  261. {
  262. type: "select",
  263. prop: "type",
  264. label: "往来类型",
  265. data: type.value,
  266. },
  267. {
  268. type: "select",
  269. prop: "isFlowingWater",
  270. label: "是否流水",
  271. data: isFlowingWater.value,
  272. },
  273. {
  274. type: "select",
  275. prop: "accountId",
  276. label: "往来账户",
  277. data: accountList.value,
  278. },
  279. {
  280. type: "slot",
  281. slotName: "amount",
  282. prop: "amount",
  283. label: "往来金额",
  284. },
  285. {
  286. type: "input",
  287. prop: "remark",
  288. label: "备注",
  289. itemType: "textarea",
  290. },
  291. ];
  292. });
  293. const rules = computed(() => {
  294. return {
  295. departmentId: [
  296. { required: true, message: "请选择往来单位", trigger: "change" },
  297. ],
  298. type: [{ required: true, message: "请选择往来类型", trigger: "change" }],
  299. isFlowingWater: [
  300. { required: true, message: "请选择是否流水", trigger: "change" },
  301. ],
  302. accountId: [
  303. {
  304. required: formData.data.isFlowingWater === "1" ? true : false,
  305. message: "请选择往来账户",
  306. trigger: "change",
  307. },
  308. ],
  309. amount: [{ required: true, message: "请输入往来金额", trigger: "blur" }],
  310. };
  311. });
  312. const addModal = () => {
  313. formData.data = {
  314. departmentId: "",
  315. type: "",
  316. currency: "",
  317. amount: undefined,
  318. isFlowingWater: "0",
  319. accountId: "",
  320. remark: "",
  321. };
  322. if (accountCurrency.value && accountCurrency.value.length > 0) {
  323. formData.data.currency = accountCurrency.value[0].value;
  324. }
  325. openComeAndGo.value = true;
  326. };
  327. const submitForm = () => {
  328. comeAndGo.value.handleSubmit(() => {
  329. proxy.post("/transaction/add", formData.data).then(() => {
  330. ElMessage({
  331. message: "添加成功",
  332. type: "success",
  333. });
  334. openComeAndGo.value = false;
  335. getList();
  336. });
  337. });
  338. };
  339. const openUnit = ref(false);
  340. const addUnit = () => {
  341. openUnit.value = true;
  342. };
  343. const handleDelete = (row) => {
  344. ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
  345. confirmButtonText: "确定",
  346. cancelButtonText: "取消",
  347. type: "warning",
  348. }).then(() => {
  349. proxy.post("/transactionDepartment/delete", { id: row.id }).then(() => {
  350. ElMessage({
  351. message: "删除成功",
  352. type: "success",
  353. });
  354. getDepartmentList();
  355. });
  356. });
  357. };
  358. const modalType = ref("add");
  359. const openAddUnit = ref(false);
  360. const formUnitData = reactive({
  361. data: {
  362. name: "",
  363. remark: "",
  364. },
  365. });
  366. const unit = ref(null);
  367. const formOption = reactive({
  368. inline: true,
  369. labelWidth: 100,
  370. itemWidth: 100,
  371. rules: [],
  372. });
  373. const formUnitConfig = computed(() => {
  374. return [
  375. {
  376. type: "input",
  377. prop: "name",
  378. label: "单位名称",
  379. itemType: "text",
  380. },
  381. {
  382. type: "input",
  383. prop: "remark",
  384. label: "备注",
  385. itemType: "textarea",
  386. },
  387. ];
  388. });
  389. const rulesUnit = ref({
  390. name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
  391. });
  392. const clickAddUnit = () => {
  393. modalType.value = "add";
  394. formUnitData.data = {
  395. name: "",
  396. remark: "",
  397. };
  398. openAddUnit.value = true;
  399. };
  400. const submitUnitForm = () => {
  401. unit.value.handleSubmit(() => {
  402. proxy
  403. .post("/transactionDepartment/" + modalType.value, formUnitData.data)
  404. .then(() => {
  405. ElMessage({
  406. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  407. type: "success",
  408. });
  409. openAddUnit.value = false;
  410. getDepartmentList();
  411. });
  412. });
  413. };
  414. const handleUpdate = (row) => {
  415. modalType.value = "edit";
  416. formUnitData.data = proxy.deepClone(row);
  417. openAddUnit.value = true;
  418. };
  419. </script>
  420. <style lang="scss" scoped>
  421. .tenant {
  422. padding: 20px;
  423. }
  424. ::v-deep(.el-input-number .el-input__inner) {
  425. text-align: left;
  426. }
  427. </style>