crm-app-vue3/pages/wareHouse/components/fakeRegistration.vue

<template>
  <div class="fake_registration">
    <u-navbar class="nav-bar" title="假货登记" :autoBack="true" :placeholder="true" v-hideNav>
      <template #right>
        <u-button type="primary" size="mini" icon="plus" text="新增" @click="handleAdd"></u-button>
      </template>
    </u-navbar>
    <view class="fake_list_wrap">
      <view class="list_content" v-if="tableData.length > 0">
          <view 
            class="fake_item" 
            v-for="(item, index) in tableData" 
            :key="item.id || index"
            :class="{ 'selected': selectedIndex === index }"
            >
            <!-- @click="handleItemClick(index, item)" -->
            <u-swipe-action>
              <u-swipe-action-item :options="swipeOptions" @click="(e) => handleSwipeClick(item, e, index)">
                <view class="item_header">
                  <view class="name">{{ item.name }}</view>
                  <view class="phone">{{ item.phone }}</view>
                </view>
                <view class="item_body">
                  <view class="info_item">
                    <view class="label">身份证号：</view>
                    <view class="value">{{ item.idCard }}</view>
                  </view>
                  <view class="info_item">
                    <view class="label">物品：</view>
                    <view class="value">{{ item.itemName }}</view>
                  </view>
                  <view class="info_item" v-if="item.remark">
                    <view class="label">备注：</view>
                    <view class="value">{{ item.remark }}</view>
                  </view>
                </view>
              </u-swipe-action-item>
            </u-swipe-action>
          </view>
        <u-loadmore :status="loadStatus" :loading-text="'加载中...'" :finished-text="'没有更多了'" @loadmore="handleLoadMore"></u-loadmore>
      </view>
      <u-empty v-else text="暂无假货登记信息" mode="list"></u-empty>
    </view>
    
    <!-- 编辑弹窗 -->
    <u-modal :show="showEditDialog" border-radius="40rpx" :title="isAdd ? '新增' : '编辑'" @confirm="handleSubmit" showCancelButton @cancel="showEditDialog = false" @close="showEditDialog = false">
      <view class="edit_dialog">
        <view class="dialog_content">
          <u-form :model="formData" ref="formRef" :rules="rules" label-position="left">
            <u-form-item label="姓名" required prop="name" label-width="70rpx">
              <u--input v-model="formData.name" placeholder="请输入姓名"></u--input>
            </u-form-item>
            <u-form-item label="身份证号" required prop="idCard" label-width="130rpx">
              <u--input v-model="formData.idCard" placeholder="请输入身份证号"></u--input>
            </u-form-item>
            <u-form-item label="电话" required prop="phone" label-width="70rpx">
              <u--input v-model="formData.phone" type="number" placeholder="请输入电话"></u--input>
            </u-form-item>
            <u-form-item label="物品" required prop="itemName" label-width="70rpx">
              <u--input v-model="formData.itemName" placeholder="请输入物品"></u--input>
            </u-form-item>
            <u-form-item label="备注" prop="remark" label-width="70rpx">
              <u--input v-model="formData.remark" placeholder="请输入备注" type="textarea" :rows="3"></u--input>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </u-modal>
  </div>
</template>

<script>
export default {
  name: 'FakeRegistration',
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadStatus: 'more',
      showEditDialog: false,
      isAdd: false,
      currentEditItem: null,
      selectedIndex: -1,
      formData: {
        id: '',
        name: '',
        idCard: '',
        phone: '',
        itemName: '',
        remark: ''
      },
      swipeOptions: [
        {
          text: '编辑',
          style: {
            backgroundColor: '#343a40',
            color: '#fff'
          }
        }
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'change' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'change'},
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号', trigger: 'change' }
        ],
        itemName: [{ required: true, message: '请输入物品', trigger: 'change' }],
      }
    }
  },
  mounted() {
    this.getWareHouseFakeList()
  },
  methods: {
    handleLoadMore() {
      if (this.pageNum * this.pageSize >= this.total) {
        this.loadStatus = 'noMore'
        return
      }
      this.pageNum++
      this.getWareHouseFakeList()
    },
    getWareHouseFakeList() {
      uni.$u.api.wareHouseFakeList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then(res => {
        if(this.pageNum == 1){
          this.tableData = res.rows
        }else{
          this.tableData = this.tableData.concat(res.rows)
        }
        this.total = res.total
        this.loadStatus = 'more'
      })
    },
    handleAdd() {
      this.isAdd = true
      this.currentEditItem = null
      this.formData = {
        id: '',
        name: '',
        idCard: '',
        phone: '',
        itemName: '',
        remark: ''
      }
      this.showEditDialog = true
    },
    handleItemClick(index, item) {
      this.selectedIndex = index;
    },
    handleSwipeClick(item, e, index) {
      if(e.index == 0){//编辑
        this.selectedIndex = index;
        setTimeout(() => {
          this.isAdd = false
          this.currentEditItem = item
          this.formData = {
            id: item.id,
            name: item.name,
            idCard: item.idCard,
            phone: item.phone,
            itemName: item.itemName,
            remark: item.remark || ''
          }
          this.showEditDialog = true
        }, 300);
      }
    },
    handleSubmit() {
      this.$refs.formRef.validate().then(() => {
        if (this.isAdd) {
          uni.$u.api.wareHouseFakeAdd(this.formData).then(res => {
            if (res.code == 200) {
              uni.$u.toast('新增成功')
              this.showEditDialog = false
              this.pageNum = 1
              this.getWareHouseFakeList()
            }
          })
        } else {
          uni.$u.api.wareHouseFakeEdit(this.formData).then(res => {
            if (res.code == 200) {
              uni.$u.toast('编辑成功')
              this.showEditDialog = false
              this.getWareHouseFakeList()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/fakeRegistration.scss';
</style>