|
|
@@ -0,0 +1,323 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" v-loading="listLoading">
|
|
|
+ <el-button size="small" type="primary" @click="dialog = true">{{ $t('config.createAddress') }}</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%; margin-top: 25px;"
|
|
|
+ >
|
|
|
+ <el-table-column width="120px" align="center" :label="$t('config.consignee')" prop="CONSIGNEE">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.CONSIGNEE }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="130px" align="center" :label="$t('shop.phoneNumber')" prop="MOBILE">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.MOBILE }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" :label="$t('config.detailedAddress')" prop="ADDRESS">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.ADDRESS }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="130px" align="center" :label="$t('config.city')" prop="CITY_NAME">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.CITY_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="180px" align="center" :label="$t('config.localGovernmentArea')" prop="LGA_NAME">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.LGA_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="120px" align="center" :label="$t('config.state')" prop="PROVINCE_NAME">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.PROVINCE_NAME }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="130px" align="center" :label="$t('config.default')" prop="IS_DEFAULT">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-switch size="small" v-model="row.IS_DEFAULT" @change="changeDefault($event, row)"></el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="150px" align="center" :label="$t('common.action')" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-button-group>
|
|
|
+ <el-button type="primary" size="mini" @click="handleEdit(row)">{{ $t('common.edit') }}</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="handleDelete(row.ID)">{{ $t('common.delete') }}</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
|
|
+
|
|
|
+ <el-dialog :title="$t('config.createAddress')" :visible.sync="dialog" v-loading="dialogLoading" style="margin-top: -50px;">
|
|
|
+ <el-form ref="dataForm" :model="dataForm" label-position="right" label-width="180px" style="width: 500px; margin-left:50px;">
|
|
|
+ <el-form-item :label="$t('config.consignee')" prop="consignee" required>
|
|
|
+ <el-input size="small" v-model="dataForm.consignee" type="text" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required>
|
|
|
+ <el-input size="small" v-model="dataForm.mobile" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.state')" prop="province" required style="width: 100%;">
|
|
|
+ <el-select v-model="dataForm.province" class="filter-item" >
|
|
|
+ <el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.detailedAddress')" prop="address" required>
|
|
|
+ <el-input size="small" v-model="dataForm.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.city')" prop="cityName" required>
|
|
|
+ <el-input size="small" v-model="dataForm.cityName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required>
|
|
|
+ <el-input size="small" v-model="dataForm.lgaName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.default')" prop="isDefault">
|
|
|
+ <el-switch size="small" v-model="dataForm.isDefault"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer" style="margin-right: 110px; margin-top: -30px;">
|
|
|
+ <el-button type="warning" size="small" @click="dialog = false">{{ $t('table.cancel') }}</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="createAddress">{{ $t('table.confirm') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :title="$t('config.editAddress')" :visible.sync="dialogEdit" v-loading="editLoading" style="margin-top: -50px;">
|
|
|
+ <el-form ref="editForm" :model="editForm" label-position="right" label-width="180px" style="width: 500px; margin-left:50px;">
|
|
|
+ <el-input size="small" v-model="editForm.id" type="text" v-show="false" />
|
|
|
+ <el-form-item :label="$t('config.consignee')" prop="consignee" required>
|
|
|
+ <el-input size="small" v-model="editForm.consignee" type="text" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required>
|
|
|
+ <el-input size="small" v-model="editForm.mobile" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.state')" prop="province" required style="width: 100%;">
|
|
|
+ <el-select v-model="editForm.province" class="filter-item" >
|
|
|
+ <el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.detailedAddress')" prop="address" required>
|
|
|
+ <el-input size="small" v-model="editForm.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.city')" prop="cityName" required>
|
|
|
+ <el-input size="small" v-model="editForm.cityName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required>
|
|
|
+ <el-input size="small" v-model="editForm.lgaName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="$t('config.default')" prop="isDefault">
|
|
|
+ <el-switch size="small" v-model="editForm.isDefault"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer" style="margin-right: 110px; margin-top: -30px;">
|
|
|
+ <el-button type="warning" size="small" @click="dialogEdit = false">{{ $t('table.cancel') }}</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="updateAddress">{{ $t('table.confirm') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {createAddress, fetchAddressList, updateAddress, deleteAddress} from '@/api/config'
|
|
|
+import waves from '@/directive/waves'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'receiveAddressList',
|
|
|
+ components: { Pagination },
|
|
|
+ directives: { waves },
|
|
|
+ filters: {
|
|
|
+ statusFilter(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: 'info',
|
|
|
+ 0: 'success'
|
|
|
+ }
|
|
|
+ return statusMap[status]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20
|
|
|
+ },
|
|
|
+
|
|
|
+ dialog: false,
|
|
|
+ dialogLoading: false,
|
|
|
+ dataForm: {
|
|
|
+ consignee: '',
|
|
|
+ mobile: '',
|
|
|
+ province: '',
|
|
|
+ lgaName: '',
|
|
|
+ cityName: '',
|
|
|
+ address: '',
|
|
|
+ isDefault: '',
|
|
|
+ },
|
|
|
+
|
|
|
+ dialogEdit: false,
|
|
|
+ editLoading: false,
|
|
|
+ editForm: {
|
|
|
+ id: '',
|
|
|
+ consignee: '',
|
|
|
+ mobile: '',
|
|
|
+ province: '',
|
|
|
+ lgaName: '',
|
|
|
+ cityName: '',
|
|
|
+ address: '',
|
|
|
+ isDefault: '',
|
|
|
+ },
|
|
|
+ // TODO: 地区需处理
|
|
|
+ regionData: [
|
|
|
+ {
|
|
|
+ id: '10600',
|
|
|
+ address: 'test1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '10601',
|
|
|
+ address: 'test2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ fetchAddressList(this.listQuery).then(response => {
|
|
|
+ this.list = response.data.list
|
|
|
+ this.total = parseInt(response.data.totalCount)
|
|
|
+ this.list.forEach(item => { item.IS_DEFAULT = parseInt(item.IS_DEFAULT) === 1 })
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createAddress() {
|
|
|
+ this.dialogLoading = true
|
|
|
+ createAddress(this.dataForm).then(() => {
|
|
|
+ this.$message({
|
|
|
+ message: 'User receive address has been added successfully.',
|
|
|
+ type: 'success',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.dialogLoading = false
|
|
|
+ this.dialog = false
|
|
|
+ this.getList()
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ this.dialogLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeDefault(event, row) {
|
|
|
+ let data = {
|
|
|
+ id: row.ID,
|
|
|
+ consignee: row.CONSIGNEE,
|
|
|
+ mobile: row.MOBILE,
|
|
|
+ province: row.PROVINCE,
|
|
|
+ lgaName: row.LGA_NAME,
|
|
|
+ cityName: row.CITY_NAME,
|
|
|
+ address: row.ADDRESS,
|
|
|
+ isDefault: event,
|
|
|
+ }
|
|
|
+ this.listLoading = true
|
|
|
+ updateAddress(data).then(() => {
|
|
|
+ this.$message({
|
|
|
+ message: 'User receive address has been updated successfully.',
|
|
|
+ type: 'success',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ this.getList()
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(id) {
|
|
|
+ this.$confirm(`Are you sure you want to delete the selected data?`, 'Hint', {
|
|
|
+ confirmButtonText: 'Confirm',
|
|
|
+ cancelButtonText: 'Cancel',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ const data = { selected: [id]}
|
|
|
+ this.listLoading = true
|
|
|
+ deleteAddress(data).then(() => {
|
|
|
+ this.$message({
|
|
|
+ message: 'User receive address has been deleted successfully.',
|
|
|
+ type: 'success',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ this.getList()
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.editForm.id = row.ID
|
|
|
+ this.editForm.consignee = row.CONSIGNEE
|
|
|
+ this.editForm.mobile = row.MOBILE
|
|
|
+ this.editForm.province = row.PROVINCE
|
|
|
+ this.editForm.lgaName = row.LGA_NAME
|
|
|
+ this.editForm.cityName = row.CITY_NAME
|
|
|
+ this.editForm.address = row.ADDRESS
|
|
|
+ this.editForm.isDefault = parseInt(row.IS_DEFAULT) === 1
|
|
|
+
|
|
|
+ this.dialogEdit = true
|
|
|
+ },
|
|
|
+ updateAddress() {
|
|
|
+ this.editLoading = true
|
|
|
+ updateAddress(this.editForm).then(() => {
|
|
|
+ this.$message({
|
|
|
+ message: 'User receive address has been updated successfully.',
|
|
|
+ type: 'success',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.dialogEdit = false
|
|
|
+ this.editLoading = false
|
|
|
+ this.getList()
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error',
|
|
|
+ duration: 5 * 1000
|
|
|
+ })
|
|
|
+ this.editLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|