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></u-navbar>
    <view class="fake_table_wrap">
      <view class="btn_wrap">
        <u-button :type="(!isAdd && !isEdit) ? 'primary' : 'error'" :icon="(!isAdd && !isEdit) ? 'plus' : 'close'"
          size="mini" :text="(!isAdd && !isEdit) ? '新增' : '取消'"
          @click="(!isAdd && !isEdit) ? handleAdd() : handleCancle()"></u-button>
        <u-button v-if="isAdd || isEdit" type="primary" size="mini" icon="checkmark" text="确定"
          @click="handleSubmit"></u-button>
      </view>
      <view class="custom-table__body">
        <Table ref="customTable" :tableData="tableData" :columns="columns" stripe @loadMore="handleLoadMore">
          <template #cell-name="{ row, rowIndex }">
            <view v-double-tap="() => editCell(row, rowIndex)">
              <u--input v-if="row.edit" border="surround" v-model="row.name"></u--input>
              <view v-else>{{ row.name }}</view>
            </view>
          </template>
          <template #cell-idCard="{ row, rowIndex }">
            <view v-double-tap="() => editCell(row, rowIndex)">
              <u--input v-if="row.edit" border="surround" v-model="row.idCard"></u--input>
              <view v-else>{{ row.idCard }}</view>
            </view>
          </template>
          <template #cell-phone="{ row, rowIndex }">
            <view v-double-tap="() => editCell(row, rowIndex)"">
            <u--input v-if="row.edit" border="surround" v-model="row.phone" type="number"></u--input>
              <view v-else>{{ row.phone }}</view>
            </view>
          </template>
          <template #cell-itemName="{ row, rowIndex }">
            <view v-double-tap="() => editCell(row, rowIndex)"">
            <u--input v-if="row.edit" border="surround" v-model="row.itemName"></u--input>
              <view v-else>{{ row.itemName }}</view>
            </view>
          </template>
          <template #cell-remark="{ row, rowIndex }">
            <view v-double-tap="() => editCell(row, rowIndex)"">
            <u--input v-if="row.edit" border="surround" v-model="row.remark"></u--input>
              <view v-else>{{ row.remark }}</view>
            </view>
          </template>
        </Table>
      </view>
    </view>
  </div>
</template>

<script>
import Table from '@/components/custom-table/index.vue'
export default {
  name: 'FakeRegistration',
  components: {
    Table
  },
  data() {
    return {
      tableData: [],
      columns: [
        { label: '姓名', prop: 'name',  isRequire: true },
        { label: '身份证号', prop: 'idCard', isRequire: true},
        { label: '电话', prop: 'phone', isRequire: true },
        { label: '物品', prop: 'itemName', isRequire: true },
        { label: '备注', prop: 'remark' },
      ],
      isAdd: false,
      isEdit: false,
      editIndex: null,
      pageNum: 1,
      pageSize: 10,
      total:0
    }
  },
  mounted() {
    this.getWareHouseFakeList()
  },
  methods: {
    handleLoadMore() {
      if (this.pageNum * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        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
      })
    },
    editCell(row, rowIndex) {
      this.editIndex = rowIndex
      this.$set(this.tableData[rowIndex], 'edit', true);
      this.isEdit = true
    },
    handleSubmit() {
      if (this.isAdd) {
        if (this.checkEmpty(this.tableData[0])) {
          uni.$u.api.wareHouseFakeAdd(this.tableData[0]).then(res => {
            if (res.code == 200) {
              this.$set(this.tableData[0], 'edit', false)
              this.isAdd = false
              uni.$u.toast('新增成功')
              this.pageNum = 1
              this.getWareHouseFakeList()
            }
          })
        }
      }
      if (this.isEdit) {
        if (this.checkEmpty(this.tableData[this.editIndex])) {
          uni.$u.api.wareHouseFakeEdit(this.tableData[this.editIndex]).then(res => {
            if (res.code == 200) {
              this.$set(this.tableData[this.editIndex], 'edit', false)
              this.isEdit = false
              uni.$u.toast('编辑成功')
              this.getWareHouseFakeList()
            }
          })
        }
      }
    },
    checkEmpty(row) {
      if (row.name == '') {
        uni.$u.toast('请输入姓名')
        return false
      }
      if (row.idCard == '') {
        uni.$u.toast('请输入身份证号')
        return false
      }
      // 身份证号正则校验
      const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!idCardRegex.test(row.idCard)) {
        uni.$u.toast('请输入有效的身份证号')
        return false
      }
      if (row.phone == '') {
        uni.$u.toast('请输入电话')
        return false
      }
      // 电话号码正则校验
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(row.phone)) {
        uni.$u.toast('请输入有效的电话号码')
        return false
      }
      if (row.itemName == '') {
        uni.$u.toast('请输入物品')
        return false
      }
      return true
    },
    addNewRow() {
      this.$refs.customTable.addNewRow();
    },
    handleUpdate(data) {
      console.log('数据更新:', data);
    },
    handleAdd() {
      this.tableData.unshift({
        edit: true,
        name: '',
        idCard: '',
        phone: '',
        itemName: '',
        remark: ''
      })
      this.isAdd = true
    },
    handleCancle() {
      if (this.isAdd) {
        this.tableData.shift(1)
        this.isAdd = false
      }
      if (this.isEdit) {
        this.$set(this.tableData[this.editIndex], 'edit', false)
        this.isEdit = false
      }
    },
  }
}
</script>

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