|
|
@@ -0,0 +1,120 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog append-to-body :title="title" :visible.sync="visible" @close="close">
|
|
|
+ <el-row>
|
|
|
+ <el-select v-model="searchForm.provinceId" clearable filterable placeholder="请选择省份" style="width: 250px">
|
|
|
+ <el-option v-for="item in provinceOptions" :key="item.id" :label="item.distName" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.city"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入市区"
|
|
|
+ style="width: 250px; margin-left: 10px" />
|
|
|
+ <el-button
|
|
|
+ :disabled="!searchForm.provinceId && !searchForm.city"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ type="primary"
|
|
|
+ @click="search">
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-table ref="cityTable" :data="tableData" height="450" style="margin-top: 10px">
|
|
|
+ <el-table-column :selectable="canSelect" type="selection" width="55" />
|
|
|
+ <el-table-column align="center" label="省份" prop="province" />
|
|
|
+ <el-table-column align="center" label="地区" prop="city" />
|
|
|
+ <el-table-column align="center" label="完整名称" prop="fullName" />
|
|
|
+ </el-table>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button
|
|
|
+ :disabled="!$refs.cityTable || !$refs.cityTable.selection || $refs.cityTable.selection.length == 0"
|
|
|
+ type="primary"
|
|
|
+ @click="submit">
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="visible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import customerApi from '@/api/customer'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '',
|
|
|
+ visible: false,
|
|
|
+ provinceOptions: [],
|
|
|
+ allData: [],
|
|
|
+ tableData: [],
|
|
|
+ searchForm: {
|
|
|
+ provinceId: '',
|
|
|
+ city: '',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.allData.splice(0, this.allData.length)
|
|
|
+ Promise.all([customerApi.getProvinceDetail()])
|
|
|
+ .then(([province]) => {
|
|
|
+ this.provinceOptions = province.data.list || []
|
|
|
+ for (let item of this.provinceOptions) {
|
|
|
+ for (let city of item.children) {
|
|
|
+ let temp = {
|
|
|
+ provinceId: item.id,
|
|
|
+ province: item.distName,
|
|
|
+ cityId: city.id,
|
|
|
+ city: city.distName,
|
|
|
+ fullName: item.distName + '-' + city.distName,
|
|
|
+ }
|
|
|
+ this.allData.push(temp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => console.log(err))
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openDialog() {
|
|
|
+ this.searchForm.provinceId = ''
|
|
|
+ this.searchForm.city = ''
|
|
|
+ this.tableData.splice(0, this.tableData.length)
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ // 是否可选中
|
|
|
+ canSelect(row) {
|
|
|
+ // 只允许选中一条数据
|
|
|
+ return (
|
|
|
+ this.$refs.cityTable &&
|
|
|
+ this.$refs.cityTable.selection &&
|
|
|
+ (this.$refs.cityTable.selection.length == 0 || this.$refs.cityTable.selection[0] == row)
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ search() {
|
|
|
+ this.tableData.splice(0, this.tableData.length)
|
|
|
+ for (let item of this.allData) {
|
|
|
+ // 过滤掉省份
|
|
|
+ if (this.searchForm.provinceId && this.searchForm.provinceId != item.provinceId) {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ // 过滤掉地区
|
|
|
+ if (this.searchForm.city && item.city.indexOf(this.searchForm.city) < 0) {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ this.tableData.push(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ async submit() {
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('submit', this.$refs.cityTable.selection[0])
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style></style>
|
