综合办公系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

borrowDetail.vue 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <!--
  2. * @Author: ysh
  3. * @Date: 2025-02-27 10:43:04
  4. * @LastEditors: Please set LastEditors
  5. * @LastEditTime: 2025-03-03 16:58:18
  6. -->
  7. <template>
  8. <view class="container">
  9. <!-- 列表标题 -->
  10. <view class="list-header">
  11. <text class="header-item">开支项目</text>
  12. <text class="header-item amount">申请金额</text>
  13. </view>
  14. <!-- 数据列表 -->
  15. <view class="list-box" v-for="(item, index) in detailList" :key="item.borrowDetailId">
  16. <view class="indexs">
  17. <text>{{ index + 1 }}</text>
  18. </view>
  19. <view class="list-item">
  20. <view class="item-left">
  21. <text class="item-title">{{ item.borrowItem }}</text>
  22. <text class="item-sub">
  23. ¥{{ item.price }} × {{ item.quantity }}{{ item.unit }}
  24. </text>
  25. </view>
  26. <view class="item-right">
  27. <text class="total-amount">¥{{ item.applyAmount }}</text>
  28. </view>
  29. </view>
  30. <view class="box-button" v-if="taskName == '借款申请'">
  31. <u-button size="normal" icon="edit-pen" @click="editItem(item)">修改</u-button>
  32. <u-button size="normal" icon="trash" @click="deleteItem(item)">删除</u-button>
  33. </view>
  34. </view>
  35. <u-button type="primary" @click="showAddPopup = true" v-if="taskName == '借款申请'">+ 新增借款项</u-button>
  36. <!-- 借款弹窗 -->
  37. <view v-if="showAddPopup" class="add-popup">
  38. <view class="popup-content">
  39. <text class="popup-title">新增借款项</text>
  40. <uni-forms ref="form" :modelValue="newItem" :rules="rules" label-position="top" label-width="150"
  41. class="custom-form">
  42. <uni-forms-item label="开支项目" name="borrowItem" required class="form-item">
  43. <uni-easyinput v-model="newItem.borrowItem" placeholder="请输入开支项目" />
  44. </uni-forms-item>
  45. <uni-forms-item label="单位" name="unit" required class="form-item">
  46. <uni-easyinput v-model="newItem.unit" placeholder="请输入单位" />
  47. </uni-forms-item>
  48. <uni-forms-item label="单价" name="price" required class="form-item">
  49. <uni-easyinput type="number" v-model="newItem.price" placeholder="请输入单价" />
  50. </uni-forms-item>
  51. <uni-forms-item label="数量" name="quantity" required class="form-item">
  52. <uni-easyinput type="number" v-model="newItem.quantity" placeholder="请输入数量" />
  53. </uni-forms-item>
  54. <uni-forms-item label="合计">
  55. <text>{{ getTotal() }}</text>
  56. </uni-forms-item>
  57. <view class="popup-buttons">
  58. <u-button style="margin-right: 10px;" @click="cancelAdd">取消</u-button>
  59. <u-button type="primary" class="confirm" @click="confirmAdd" v-if="!isModify">确认添加</u-button>
  60. <u-button type="primary" class="confirm" @click="confirmAdd" v-else>确认修改</u-button>
  61. </view>
  62. </uni-forms>
  63. </view>
  64. </view>
  65. </view>
  66. </template>
  67. <script>
  68. import { listBorrowDetail, addBorrowDetail, updateBorrowDetail, delBorrowDetail, delBorrowDetailByDetailId } from "@/api/oa/borrow/borrowDetail";
  69. import uButton from '../../../uni_modules/uview-ui/components/u-button/u-button.vue';
  70. export default {
  71. components: { uButton },
  72. props: {
  73. borrowId: String,
  74. taskName: String,
  75. },
  76. data() {
  77. return {
  78. detailList: [],
  79. showAddPopup: false,
  80. newItem: {
  81. borrowItem: '',
  82. unit: '',
  83. price: '',
  84. quantity: '',
  85. applyAmount: 0
  86. },
  87. rules: {
  88. borrowItem: {
  89. rules: [{
  90. required: true,
  91. errorMessage: '请填写开支项目',
  92. },]
  93. },
  94. unit: {
  95. rules: [{
  96. required: true,
  97. errorMessage: '请填写单位',
  98. },]
  99. },
  100. price: {
  101. rules: [{
  102. required: true,
  103. errorMessage: '请填写单价',
  104. },]
  105. },
  106. quantity: {
  107. rules: [{
  108. required: true,
  109. errorMessage: '请填写数量',
  110. },]
  111. },
  112. },
  113. errorMessage: '',
  114. isModify: false,
  115. }
  116. },
  117. created() {
  118. this.initList();
  119. },
  120. watch: {
  121. borrowId() {
  122. this.initList();
  123. },
  124. detailList(newval) {
  125. let sum = newval.reduce((sum, item) => sum + Number(item.applyAmount), 0);
  126. this.$emit('getApplyAmount', sum)
  127. }
  128. },
  129. methods: {
  130. initList() {
  131. console.log('borrowId', this.borrowId);
  132. listBorrowDetail({ pageSize: 999, borrowId: this.borrowId }).then(res => {
  133. if (res.rows.length != 0) {
  134. this.detailList = res.rows
  135. }
  136. });
  137. },
  138. // 确认添加
  139. confirmAdd() {
  140. const borrowId = this.borrowId
  141. this.$refs.form.validate().then(async res => {
  142. this.newItem.applyAmount = this.getTotal();
  143. if (this.isModify) {
  144. await updateBorrowDetail(this.newItem);
  145. } else {
  146. this.newItem.borrowId = borrowId;
  147. await addBorrowDetail(this.newItem);
  148. }
  149. this.clearForm()
  150. this.showAddPopup = false
  151. this.initList();
  152. this.$modal.msgSuccess('操作成功');
  153. }).catch(err => {
  154. console.log('表单错误信息:', err);
  155. })
  156. },
  157. // 清空表单
  158. clearForm() {
  159. this.newItem = {
  160. borrowItem: '',
  161. unit: '',
  162. price: '',
  163. quantity: '',
  164. applyAmount: 0
  165. }
  166. },
  167. // 取消添加
  168. cancelAdd() {
  169. this.clearForm()
  170. this.showAddPopup = false
  171. },
  172. getTotal() {
  173. return (Number(this.newItem.price) * Number(this.newItem.quantity)).toFixed(2)
  174. },
  175. deleteItem(item) {
  176. this.$modal.confirm('是否删除开支项目为' + item.borrowItem + '的项?').then(() => {
  177. delBorrowDetailByDetailId(item.borrowDetailId).then(res => {
  178. this.$modal.msgSuccess(res.msg);
  179. this.initList();
  180. })
  181. })
  182. },
  183. editItem(item) {
  184. this.newItem = item;
  185. this.isModify = true;
  186. this.showAddPopup = true;
  187. },
  188. },
  189. }
  190. </script>
  191. <style lang="scss" scoped>
  192. .container {
  193. padding: 20rpx 30rpx;
  194. background-color: #f8f8f8;
  195. }
  196. /* 列表标题样式 */
  197. .list-header {
  198. display: flex;
  199. justify-content: space-between;
  200. padding: 20rpx 0;
  201. font-weight: bold;
  202. border-bottom: 1rpx solid #eee;
  203. }
  204. .list-box {
  205. margin-bottom: 20rpx;
  206. padding: 30rpx 10rpx;
  207. border-bottom: 1rpx solid #eee;
  208. background-color: #fff;
  209. border-radius: 12rpx;
  210. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  211. .indexs {
  212. font-size: 25rpx;
  213. height: 30rpx;
  214. position: relative;
  215. text {
  216. display: block;
  217. position: absolute;
  218. right: 10rpx;
  219. width: 32rpx;
  220. height: 32rpx;
  221. text-align: center;
  222. }
  223. }
  224. .box-button {
  225. display: flex;
  226. padding: 10rpx;
  227. }
  228. }
  229. /* 列表项样式 */
  230. .list-item {
  231. display: flex;
  232. justify-content: space-between;
  233. align-items: center;
  234. }
  235. .item-left {
  236. flex: 1;
  237. }
  238. .item-title {
  239. display: block;
  240. font-size: 32rpx;
  241. font-weight: bold;
  242. color: #333;
  243. margin-bottom: 15rpx;
  244. }
  245. .item-sub {
  246. font-size: 26rpx;
  247. color: #999;
  248. }
  249. .total-amount {
  250. font-size: 30rpx;
  251. color: #f1a532;
  252. font-weight: bold;
  253. padding-right: 30rpx;
  254. }
  255. .delete {
  256. font-size: 30rpx;
  257. color: #ff6a6c;
  258. font-weight: bold;
  259. }
  260. .edit {
  261. font-size: 30rpx;
  262. color: #3c9cff;
  263. font-weight: bold;
  264. padding-right: 20rpx;
  265. }
  266. /* 金额列对齐 */
  267. .amount {
  268. min-width: 100rpx;
  269. padding-right: 20rpx;
  270. }
  271. .item-right {
  272. min-width: 200rpx;
  273. text-align: right;
  274. }
  275. .add-popup {
  276. position: fixed;
  277. top: 0;
  278. left: 0;
  279. right: 0;
  280. bottom: 0;
  281. background-color: rgba(0, 0, 0, 0.5);
  282. display: flex;
  283. justify-content: center;
  284. align-items: center;
  285. z-index: 999;
  286. }
  287. .popup-content {
  288. background-color: white;
  289. width: 600rpx;
  290. padding: 40rpx;
  291. border-radius: 20rpx;
  292. }
  293. .popup-title {
  294. font-size: 36rpx;
  295. font-weight: bold;
  296. display: block;
  297. margin-bottom: 40rpx;
  298. }
  299. .popup-buttons {
  300. display: flex;
  301. }
  302. </style>