flavorOfTimeSzMall/src/views/User/UserInvoice.vue

<template>
  <div class="bg">
    <el-card style="width: 100%;">
        <div slot="header" class="clearfix">
            <span>我的发票</span>
            <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增</el-button>
        </div>

        <el-table :data="addresses" border style="width: 100%;">
            <el-table-column prop="receiver" label="发票抬头" width="120"></el-table-column>
            <el-table-column prop="region" label="纳税人识别号" width="120"></el-table-column>
            <el-table-column prop="detailAddress" label="开户银行" width="300"></el-table-column>
            <el-table-column prop="phone" label="银行账号" width="150"></el-table-column>
            <el-table-column prop="fixedPhone" label="注册电话" width="150"></el-table-column>
            <el-table-column prop="alias" label="注册地址" width="120"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

          <!-- 分页 -->
        <div style="text-align: right; margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchParam.currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="searchParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchParam.total"
          ></el-pagination>
        </div>


        
    </el-card>


    <el-dialog title="编辑发票抬头" :visible.sync="dialogVisible" width="700px">
      <el-form :model="address" label-width="120px" size="small">
        <el-form-item label="*发票抬头">
          <el-input v-model="address.receiver" placeholder="请填写发票抬头"></el-input>
        </el-form-item>
        <el-form-item label="*纳税人识别号">
          <el-input v-model="address.region" placeholder="请填写纳税人识别号"></el-input>
        </el-form-item>
        <el-form-item label="*开户银行">
          <el-input v-model="address.detailAddress" placeholder="请填写开户银行"></el-input>
        </el-form-item>
        <el-form-item label="*银行账号">
          <el-input v-model="address.phone" placeholder="请填写银行账号"></el-input>
        </el-form-item>
        <el-form-item label="注册电话">
          <el-input v-model="address.fixedPhone" placeholder="请填写注册号码"></el-input>
        </el-form-item>
        <el-form-item label="注册地址">
          <el-input v-model="address.alias" placeholder="请填写注册地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="saveAddress">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'UserInfo',
  data() {
    return {
        user: {},
        searchParam: {pageSize: 5, currentPage: 1,total: 10},
        dialogVisible: false,
        addresses: [
          {
            id: 1,
            receiver: '张三',
            region: '北京',
            detailAddress: '北京市朝阳区xx街道xx小区xx号楼xx单元',
            phone: '13800138000',
            fixedPhone: '010-12345678',
            alias: '家'
          },
          {
            id: 2,
            receiver: '李四',
            region: '上海',
            detailAddress: '上海市浦东新区xx街道xx小区xx号楼xx单元',
            phone: '13900139000',
            fixedPhone: '021-12345678',
            alias: '公司'
          },
          {
            id: 3,
            receiver: '王五',
            region: '广州',
            detailAddress: '广州市天河区xx街道xx小区xx号楼xx单元',
            phone: '13700137000',
            fixedPhone: '020-12345678',
            alias: '朋友家'
          }
        ],
        address: {
          type: 'add',
          id: '',
          receiver: '',
          region: '',
          detailAddress: '',
          phone: '',
          fixedPhone: '',
          alias: ''
        }
    }
  },
  methods:{
        // 分页大小改变
    handleSizeChange(val) {
        this.searchParam.pageSize = val;
    },
    
    // 当前页改变
    handleCurrentChange(val) {
        this.searchParam.currentPage = val;
    },
    openDialog (type, item) {
      this.address = {
        type: type,
        id: item.id || "",
        receiver: item.receiver || "",
        region: item.region || "",
        detailAddress: item.detailAddress || "",
        phone: item.phone || "",
        fixedPhone: item.fixedPhone || "",
        alias: item.alias || ""
      }
      this.dialogVisible = true;
    },

    saveAddress() {
          if (this.address.id) {
            // 编辑地址
            const index = this.addresses.findIndex(item => item.id === this.address.id);
            if (index !== -1) {
              this.addresses[index] = { ...this.address };
            }
          } else {
            // 新增地址
            this.address.id = Date.now();
            this.addresses.push({ ...this.address });
          }
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.dialogVisible = false;
        },
        handleEdit(row) {
          this.address = { ...row };
          this.dialogVisible = true;
        },
        handleDelete(row) {
          this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const index = this.addresses.findIndex(item => item.id === row.id);
            if (index !== -1) {
              this.addresses.splice(index, 1);
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
  }
  
}
</script>
<style lang="scss" scoped>

</style>