cmc-oa/oa-ui-app/pages/form/borrow/borrowDetail.vue

<!--
 * @Author: ysh
 * @Date: 2025-02-27 10:43:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-03 10:41:01
-->
<template>
  <view class="container">
    <u-button type="primary" @click="showAddPopup = true">+ 新增借款项</u-button>
    <!-- 列表标题 -->
    <view class="list-header">
      <text class="header-item">开支项目</text>
      <text class="header-item amount">申请金额</text>
    </view>

    <!-- 数据列表 -->
    <view class="list-box" v-for="(item, index) in detailList" :key="item.borrowDetailId">
      <view class="indexs">
        <text>{{ index + 1 }}</text>
      </view>
      <view class="list-item">
        <view class="item-left">
          <text class="item-title">{{ item.borrowItem }}</text>
          <text class="item-sub">
            ￥{{ item.price }} × {{ item.quantity }}{{ item.unit }}
          </text>
        </view>
        <view class="item-right">
          <text class="total-amount">￥{{ item.applyAmount }}</text>
        </view>
      </view>
      <view class="box-button" v-if="taskName == '借款申请'">
        <u-button size="normal" icon="edit-pen">修改</u-button>
        <u-button size="normal" icon="trash" @click="deleteItem(item)">删除</u-button>
      </view>
    </view>
    <!-- 借款弹窗 -->
    <view v-if="showAddPopup" class="add-popup">
      <view class="popup-content">
        <text class="popup-title">新增借款项</text>
        <uni-forms ref="form" :modelValue="newItem" :rules="rules" label-position="top" label-width="150"
          class="custom-form">
          <uni-forms-item label="开支项目" name="borrowItem" required class="form-item">
            <uni-easyinput v-model="newItem.borrowItem" placeholder="请输入开支项目" />
          </uni-forms-item>
          <uni-forms-item label="单位" name="unit" required class="form-item">
            <uni-easyinput v-model="newItem.unit" placeholder="请输入单位" />
          </uni-forms-item>
          <uni-forms-item label="单价" name="price" required class="form-item">
            <uni-easyinput type="number" v-model="newItem.price" placeholder="请输入单价" />
          </uni-forms-item>
          <uni-forms-item label="数量" name="quantity" required class="form-item">
            <uni-easyinput type="number" v-model="newItem.quantity" placeholder="请输入数量" />
          </uni-forms-item>
          <uni-forms-item label="合计">
            <text>{{ getTotal() }}</text>
          </uni-forms-item>
        </uni-forms>
        <view class="popup-buttons">
          <u-button @click="cancelAdd">取消</u-button>
          <u-button type="primary" class="confirm" @click="confirmAdd">确认添加</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listBorrowDetail, addBorrowDetail, updateBorrowDetail, delBorrowDetail, delBorrowDetailByDetailId } from "@/api/oa/borrow/borrowDetail";
import uButton from '../../../uni_modules/uview-ui/components/u-button/u-button.vue';
export default {
  components: { uButton },
  props: {
    borrowId: String,
    taskName: String,
  },
  data() {
    return {
      detailList: [],
      showAddPopup: false,
      newItem: {
        borrowItem: '',
        unit: '',
        price: '',
        quantity: '',
        applyAmount: 0
      },
      rules: {
        borrowItem: {
          rules: [{
            required: true,
            errorMessage: '请填写开支项目',
          },]
        },
        unit: {
          rules: [{
            required: true,
            errorMessage: '请填写单位',
          },]
        },
        price: {
          rules: [{
            required: true,
            errorMessage: '请填写单价',
          },]
        },
        quantity: {
          rules: [{
            required: true,
            errorMessage: '请填写数量',
          },]
        },
      },
      errorMessage: '',
    }
  },
  created() {
  },
  watch: {
    borrowId() {
      this.initList();
    },
    detailList(newval) {
      let sum = newval.reduce((sum, item) => sum + Number(item.applyAmount), 0);
      this.$emit('getApplyAmount', sum)
    }
  },
  methods: {
    initList() {
      listBorrowDetail({ pageSize: 999, borrowId: this.borrowId }).then(res => {
        if (res.rows.length != 0) {
          this.detailList = res.rows
          console.log(res.rows);
        }
      });
    },
    // 确认添加
    confirmAdd() {
      this.$refs.form.validate().then(res => {
        console.log('表单数据信息：', res);
        res.borrowId = this.borrowId;
        res.applyAmount = this.getTotal();
        addBorrowDetail(res);
        this.clearForm()
        this.showAddPopup = false
        this.initList();
      }).catch(err => {
        console.log('表单错误信息：', err);
      })

    },

    // 清空表单
    clearForm() {
      this.newItem = {
        borrowItem: '',
        unit: '',
        price: '',
        quantity: '',
        applyAmount: 0
      }
    },

    // 取消添加
    cancelAdd() {
      this.clearForm()
      this.showAddPopup = false
    },
    getTotal() {
      return (Number(this.newItem.price) * Number(this.newItem.quantity)).toFixed(2)
    },
    deleteItem(item) {
      this.$modal.confirm('是否删除开支项目为' + item.borrowItem + '的项？').then(() => {
        delBorrowDetailByDetailId(item.borrowDetailId).then(res => {
          this.$modal.msgSuccess(res.msg);
          this.initList();
        })
      })

    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
}

/* 列表标题样式 */
.list-header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  font-weight: bold;
  border-bottom: 1rpx solid #eee;
}

.list-box {
  margin-bottom: 20rpx;
  padding: 30rpx 10rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .indexs {
    font-size: 25rpx;
    height: 30rpx;
    position: relative;

    text {
      display: block;
      position: absolute;
      right: 10rpx;
      width: 32rpx;
      height: 32rpx;
      text-align: center;
    }
  }

  .box-button {
    display: flex;
    padding: 10rpx;

  }
}

/* 列表项样式 */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-left {
  flex: 1;
}

.item-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.item-sub {
  font-size: 26rpx;
  color: #999;
}

.total-amount {
  font-size: 30rpx;
  color: #f1a532;
  font-weight: bold;
  padding-right: 30rpx;
}

.delete {
  font-size: 30rpx;
  color: #ff6a6c;
  font-weight: bold;
}

.edit {
  font-size: 30rpx;
  color: #3c9cff;
  font-weight: bold;
  padding-right: 20rpx;
}

/* 金额列对齐 */
.amount {
  min-width: 100rpx;
  padding-right: 20rpx;
}


.item-right {
  min-width: 200rpx;
  text-align: right;
}



.add-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background-color: white;
  width: 600rpx;
  padding: 40rpx;
  border-radius: 20rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 40rpx;
}

.popup-buttons {
  display: flex;
}
</style>