bonus-ui/src/views/address-manage/index.vue

<template>
  <!-- 地址管理 -->
  <div class="app-container">
    <el-form
      :inline="true"
      label-width="auto" size="small"
      ref="searchFormRef"
      :model="searchParams"
    >
    </el-form>

    <el-card class="content-box">
      <el-row>
        <el-col :span="24" style="text-align: right;">
          <el-button
          size="mini"
          @click="handleAddAddress"
          type="primary"
          class="primary-lease"
        >
          新建收货地址
        </el-button>
        </el-col>
      </el-row>
      <div >
    <!-- 表格 -->
    <el-table
      :data="leaseList"
      show-overflow-tooltip
      border
      stripe
      height="546"
    >
      <el-table-column align="center" label="序号" type="index" width="80" />
      <el-table-column align="center" label="收货地址">
        <template slot-scope="{ row }">
          {{ `${row.provinceName}${row.cityName}${row.areaName}${row.address}` }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" :width="220">
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            class="primary-lease"
            @click="onRepublish(row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <div class="pagination-wrapper">
      <pagination
        :total="total"
        @pagination="getLeaseListData"
        :page.sync="searchParams.pageNum"
        :limit.sync="searchParams.pageSize"
      />
    </div>
  </el-card>
    <!-- 新增修改对话框 -->
    <el-dialog
      width="40%"
      align-center
      @close="onClose"
      destroy-on-close
      :title="dialogTitle"
      :visible.sync="addOrEditDialogVisible"
    >
      <el-form
        label-width="auto"
        label-position="right"
        ref="addOrEditFormRef"
        :model="addOrEditForm"
        :rules="addOrEditFormRules"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="所在省" prop="provinceCode">
              <el-select
                clearable
                style="width: 95%"
                placeholder="请选择省"
                v-model="addOrEditForm.provinceCode"
                @change="onProvinceChange"
              >
                <el-option
                  :key="item.areaId"
                  :value="item.areaCode * 1"
                  :label="item.areaName"
                  v-for="item in areaList"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item prop="cityCode" label="所在市">
              <el-select
                clearable
                style="width: 95%"
                placeholder="请选择市"
                v-model="addOrEditForm.cityCode"
                @change="onCityChange"
              >
                <el-option
                  :key="item.areaId"
                  :value="item.areaCode * 1"
                  :label="item.areaName"
                  v-for="item in areaCityList"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="areaCode" label="所在区/县">
              <el-select
                clearable
                style="width: 95%"
                placeholder="请选择区/县"
                v-model="addOrEditForm.areaCode"
                @change="onCountyChange"
              >
                <el-option
                  :key="item.areaId"
                  :value="item.areaCode * 1"
                  :label="item.areaName"
                  v-for="item in areaCountyList"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="address" label="详细地址">
              <el-input
                style="width: 95%"
                clearable
                placeholder="请输入详细地址"
                v-model="addOrEditForm.address"
                :maxlength="99"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="primary-lease" @click="onCancel">
          取消
        </el-button>
        <el-button class="primary-lease" type="primary" @click="onSubmit(true)">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAreaApi,
  addAddressInfoApi,
  getAddressListApi,
  editAddressApi,
  deleteLeaseInfoApi,
  maLeaseAuditApi,
  getLeaseDetailsByIdApi,
} from '@/api/address-manage/index'
import { MessageBox, Message } from 'element-ui'

export default {
  data() {
    return {
      total: 0,
      endTime: [],
      isSave: false,
      releaseTime: [],
      isRepublish: true,
      areaList: [],
      leaseList: [],
      dialogTitle: '新增收货地址',
      fileListTemp: [],
      searchFormRef: null,
      addOrEditFormRef: null,
      addOrEditDialogVisible: false,
      addOrEditDemandFormList: [],
      areaCityList: [],
      areaCountyList: [],

      searchParams: {
        pageSize: 10,
        pageNum: 1,
      },
      addOrEditForm: {
        areaCode: '',
        cityCode: '',
        provinceCode: '',
        address: '',
        id: ''
      },
      addOrEditFormTemp: {}
    }
  },
  computed: {
    addOrEditFormRules() {
      return {
        areaCode: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
        cityCode: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
        provinceCode: [{ required: true, message: '请选择项目所在省', trigger: 'change' }],
        address: [{ required: true, message: '请输入项目详细地址', trigger: 'blur' }],
      }
    }
  },
  methods: {
    // 处理新增地址
    handleAddAddress() {
      this.isRepublish = true
      this.dialogTitle = '新增收货地址'
      this.addOrEditDialogVisible = true
      // 清空表单数据
      this.addOrEditForm = {
        areaCode: '',
        cityCode: '',
        provinceCode: '',
        address: '',
        id: ''
      }
    },

    // 获取列表数据
    async getLeaseListData() {
      const res = await getAddressListApi(this.searchParams)
      this.leaseList = res.rows
      this.total = res.total
    },

    // 获取地区数据
    async getAreaData() {
      const res = await getAreaApi(0)
      this.areaList = res.data
    },

    // 重置表单
    onReset() {},

    // 删除地址
    async onDelete(id) {
      const res = await deleteLeaseInfoApi({ id })
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '删除成功'
        })
        this.getLeaseListData()
      }
    },

    // 编辑地址
    async onRepublish(row) {
      this.dialogTitle = '编辑收货地址'
      const { areaCode, address, cityCode, provinceCode, id } = row

      this.addOrEditForm = {
        areaCode,
        address,
        cityCode,
        provinceCode,
        id
      }

      await Promise.all([
        this.onProvinceChange(provinceCode),
        this.onCityChange(cityCode)
      ])

      this.addOrEditDialogVisible = true
    },

    // 提交表单
    async onSubmit(type) {
      this.$refs.addOrEditFormRef.validate(async (valid) => {
        if (valid) {
          const SUBMIT_API = this.dialogTitle === '新增收货地址'
            ? addAddressInfoApi
            : editAddressApi

          const res = await SUBMIT_API(this.addOrEditForm)

          if (res.code === 200) {
            Message({
              type: 'success',
              message: '提交成功'
            })

            this.addOrEditDialogVisible = false
            this.getLeaseListData()
          }
        }
      })
    },

    // 取消按钮
    onCancel() {
      this.addOrEditDialogVisible = false
    },

    // 关闭对话框
    onClose() {
      this.addOrEditDemandFormList = []
      if (this.$refs.addOrEditFormRef) {
        this.$refs.addOrEditFormRef.resetFields()
      }
      this.addOrEditForm = JSON.parse(JSON.stringify(this.addOrEditFormTemp))
      this.fileListTemp = []
    },

    // 省份变化
    async onProvinceChange(id) {
      const res = await getAreaApi(id)
      this.areaCityList = res.data
    },

    // 城市变化
    async onCityChange(id) {
      const res = await getAreaApi(id)
      this.areaCountyList = res.data
    },

    // 区县变化
    async onCountyChange(id) {},

    // 审核处理
    onAuditing(id, leaseStatus) {
      MessageBox.confirm(`是否${leaseStatus === 1 ? '通过' : '驳回'}此次接单申请?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      })
        .then(async () => {
          const res = await maLeaseAuditApi({
            id,
            leaseStatus,
          })
          if (res.code == 200) {
            Message({
              type: 'success',
              message: '提交成功'
            })
            // 刷新列表
            this.getLeaseListData()
          }
        })
        .catch(() => {})
    }
  },
  mounted() {
    this.getLeaseListData()
    this.getAreaData()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .upload-tip .el-form-item__label {
  color: transparent;
}
.el-pagination {
  justify-content: flex-end;
  padding: 5px 0;
}
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #3cb4a6;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 6px;
  width: 95%;
}

.img-list {
  display: flex;
  align-items: center;

  .img-items {
    width: 100px;
    height: 100px;
    margin-right: 8px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .mask-img {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        font-size: 20px;
        cursor: pointer;
        z-index: 9;
        color: #fff;
      }
    }
  }
  .img-items:hover .mask-img {
    visibility: visible;
  }
}
.app-container-content {
  ::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;
    .el-dialog__body {
      flex: 1;
      overflow-y: scroll !important;
    }
    .dialog-content {
      padding: 20px;
    }
  }
}

::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }

  .content-box {
  border-radius: 8px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep  .pagination-container {
      padding: 0px 20px !important;
      /* margin-bottom: 30px; */
    }
  }

  ::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}
</style>