VisitorSetting.vue

<template>
  <div class="visitorSetting">
    <div class="title">新增到访目的</div>
    <div class="purposeList">
      <a-input placeholder="请输入来访目的" maxlength="20" v-model="addtags" style="width: 320px;margin-right:20px"/>
      <a-button type="primary" @click="savePurpose">保存</a-button>
      <div class="purposeListContent">
        <template v-for="item in tagsData">
          <a-tag :key="item.visitPurposeId" :closable="item.orgId !== '0' " :afterClose="() => handleClose(item.visitPurposeId)">
            {{item.visitPurpose}}
          </a-tag>
        </template>
      </div>
    </div>
    <div class="title">新增到访地址<span>最多可保存十条</span></div>
    <a-form :form="form" style="padding: 20px 20px">
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="所在地区"
      >
        <a-input
          v-decorator="[
            'address',
            { rules: [{ required: true, message: '请填写省/市/街道' }, { max: 120, message: '最大长度为120字符' } ]},
          ]"
          placeholder="请填写省/市/街道"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="地址信息"
      >
        <a-textarea
          v-decorator="[
            'addressDetail',
            { rules: [{ required: true, message: '请输入详细地址信息，如道路、楼栋号、单位、门牌号等' }, { max: 120, message: '最大长度为120字符' } ]},
          ]"
          placeholder="请输入详细地址信息，如道路、楼栋号、单位、门牌号等"
        />
      </a-form-item>
      <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
        <a-checkbox :checked="checkNick" @change="handleChange">
          设置为默认到访地址
        </a-checkbox>
      </a-form-item>
      <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
        <a-button type="primary" @click="check">
          保存
        </a-button>
      </a-form-item>
    </a-form>
    <a-table :columns="columns" :dataSource="addressList" size="default" rowKey="addressId" :pagination="pagination" @change="handleTableChange">
      <span slot="address"></span>
      <span slot="addressDetail"></span>
      <span slot="action" slot-scope="text, record" class="operationTable">
        <a style="margin-right: 10px" @click="showModal(record)">修改</a>
        <a style="margin-right: 10px" @click="deleteAddress(record.addressId)">删除</a>
        <a v-if="record.isDefault == '1'" @click="setDefaultAddress(record.addressId)">设为默认地址</a>
        <a style="color: #e93f33" v-else>默认地址</a>
      </span>
    </a-table>
    <a-modal title="修改地址" v-model="visible" @ok="changeAddress()">
        <a-form :form="addressForm">
          <a-form-item label="所在地区" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
            <a-input
              v-decorator="['address',{rules: [{required: true, message: '所在地区不能为空'}]}]"
            />
          </a-form-item>
          <a-form-item label="地址信息" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
            <a-textarea v-decorator="['addressDetail', {rules: [{ required: true, message: '地址信息不能为空' }]}]"/>
          </a-form-item>
        </a-form>
      </a-modal>
  </div>
</template>

<script>
import { $http } from './../../../api/axios.js'
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 8 }
}
const formTailLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 8, offset: 3 }
}
export default {
  name: 'visitorSetting',
  data () {
    return {
      checkNick: false,
      visible: false,
      formItemLayout,
      formTailLayout,
      selectListId: '',
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      addressForm: this.$form.createForm(this),
      addtags: '',
      tagsData: [],
      columns: [{
        title: '所在地区',
        dataIndex: 'address'
      }, {
        title: '详细地址',
        dataIndex: 'addressDetail'
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      addressList: [],
      pagination: {
        current: 1,
        defaultCurrent: 10,
        defaultPageSize: 10,
        hideOnSinglePage: true,
        total: 10
      }
    }
  },
  watch: {},
  computed: {},
  created: function () {
    this.queryVisitPurposeList()
    this.queryAddressList()
  },
  methods: {
    savePurpose () {
      let tags = this.tagsData
      let that = this
      if (this.addtags && tags.indexOf(this.addtags) === -1) {
        let visitPurpose = {
          visitPurpose: this.addtags
        }
        $http.post(`/admin/visit-purpose/save`, visitPurpose).then((res) => {
          if (res.data.code === 0) {
            this.form.resetFields()
            that.queryVisitPurposeList()
            that.addtags = ''
          }
        })
      }
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.queryAccountList()
    },
    queryAddressList () {
      $http.get(`/admin/address/list`).then((res) => {
        if (res.data.code === 0) {
          this.addressList = res.data.data
        }
      })
    },
    handleClose (removedTag) {
      let deleteTags = {
        purposeId: removedTag
      }
      $http.delete(`/admin/visit-purpose/remove`, deleteTags).then((res) => {
        if (res.data.code === 0) {
          this.queryVisitPurposeList()
        }
      })
    },
    changeAddress () {
      let _that = this
      if (!this.addressForm.getFieldsValue().address) {
        this.$message.error('所在地区不能为空')
      } else if (!this.addressForm.getFieldsValue().addressDetail) {
        this.$message.error('地址信息不能为空')
      } else {
        this.visible = false
        let changeData = {
          address: this.addressForm.getFieldsValue().address,
          addressDetail: this.addressForm.getFieldsValue().addressDetail,
          addressId: this.selectListId
        }
        $http.post(`/admin/address/update`, changeData).then((res) => {
          if (res.data.code === 0) {
            this.addressForm.resetFields()
            this.queryAddressList()
          }
        })
      }
    },
    setDefaultAddress (id) {
      let changeData = {
        addressId: id,
        isDefault: '0'
      }
      $http.post(`/admin/address/update`, changeData).then((res) => {
        if (res.data.code === 0) {
          this.queryAddressList()
        }
      })
    },
    deleteAddress (id) {
      let that = this
      this.$confirm({
        title: '删除到访地址',
        content: '确认删除该删除到访地址么？',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          let removeData = {
            addressId: id
          }
          $http.delete(`/admin/address/remove`, removeData).then((res) => {
            if (res.data.code === 0) {
              that.queryAddressList()
            }
          })
        }
      })
    },
    queryVisitPurposeList () {
      $http.post(`/admin/visit-purpose/list`).then((res) => {
        if (res.data.code === 0) {
          this.tagsData = res.data.data
        }
      })
    },
    check () {
      this.form.validateFields(err => {
        if (!err) {
          let saveData = {
            address: this.form.getFieldsValue().address,
            addressDetail: this.form.getFieldsValue().addressDetail,
            isDefault: this.checkNick ? '0' : '1'
          }
          $http.post(`/admin/address/save`, saveData).then((res) => {
            if (res.data.code === 0) {
              this.checkNick = false
              this.form.resetFields()
              this.queryAddressList()
            }
          })
        }
      })
    },
    handleChange (e) {
      this.checkNick = e.target.checked
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true })
      })
    },
    showModal (record) {
      this.visible = true
      this.selectListId = record.addressId
      setTimeout(() => {
        this.addressForm.setFieldsValue({
          'address': record.address,
          'addressDetail': record.addressDetail
        })
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  height: 47px;
  width: 100%;
  background: #f7f7f7;
  line-height: 47px;
  font-size: 14px;
  padding-left: 20px;
}
.title span {
  margin-left: 20px;
}
.purposeList{
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.purposeListContent{
  padding-top: 20px;
}
.title span {
  font-size: 12px;
  color: #979797;
}
</style>