UI组件库

# PlaceEditor 地点编辑器组件

<template>
  <div class="comp-container">
    <tlbs-place-editor
      ref="mapComp"
      :filter-keyword="filterKeyword"
      :filter-selects="filterSelects"
      :filter-more="filterMore"
      :list-data="listData"
      :item-buttons="itemButtons"
      :loading="loading"
      :total="total"
      :page-size="pageSize"
      :form-title="formTitle"
      :form-data="formData"
      :form-configs="formConfigs"
      :form-buttons="formButtons"
      :form-rules="formRules"
      @change-filters="onChangeFilters"
    >
    </tlbs-place-editor>
  </div>
</template>
<script>
const validateTel = (rule, value, callback) => {
  // 匹配所有号码（手机卡 + 数据卡 + 上网卡）
  const reg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/;
  if (!reg.test(value)) {
    callback(new Error('输入正确格式手机号码'));
  } else {
    callback();
  }
};
export default {
  name: 'PlaceEditor',
  data() {
    const _this = this;
    return {
      filterOptions: {
        region: '全国'
      },
      filterKeyword: {
        name: 'keyword',
        placeholder: '搜索关键词'
      },
      filterSelects: [
        {
          name: 'region',
          placeholder: '省市',
          defaultValue: ['全国'],
          type: 'city'
        }
      ],
      filterMore: [
        {
          name: 'address',
          label: '地址',
          type: 'text',
          placeholder: '输入地址',
          defaultValue: ''
        },
        {
          name: 'price',
          label: '价格',
          type: 'text',
          placeholder: '输入价格',
          defaultValue: ''
        }
        // {
        //   name: 'oil',
        //   label: '在售油品',
        //   type: 'checkbox',
        //   defaultValue: [1, 2],
        //   options: [{value: 1, label: '#95'}, {value: 2, label: '#92'}, {value: 3, label: '#柴油'}]
        // },
        // {
        //   name: 'cate',
        //   label: '类型',
        //   type: 'radio',
        //   defaultValue: 1,
        //   options: [{value: 1, label: '中石油'}, {value: 2, label: '中石化'}, {value: 3, label: '中海油'}]
        // },
        // {
        //   name: 'floor',
        //   label: '楼层',
        //   type: 'select',
        //   defaultValue: 1,
        //   options: [{value: 1, label: '1F'}, {value: 2, label: '2F'}, {value: 3, label: '3F'}]
        // },
        // {
        //   name: 'date',
        //   label: '日期',
        //   type: 'date',
        //   defaultValue: '2020-07-20'
        // },
        // {
        //   name: 'time',
        //   label: '时间',
        //   type: 'time',
        //   defaultValue: '12:00:11'
        // },
        // {
        //   name: 'datetime',
        //   label: '日期时间',
        //   type: 'datetime',
        //   defaultValue: '2020-07-30 12:00:11'
        // },
        // {
        //   name: 'cityName',
        //   label: '城市',
        //   type: 'city',
        //   defaultValue: ['全国']
        // }
      ],
      loading: false,
      listData: [],
      itemButtons: [
        {
          text: '编辑', // 按钮中文字
          onClick(data) {
            _this.formData = data;
            _this.$refs.mapComp.showForm();
          },
          customClass: '' // 自定义类
        }
        // {
        //   text: '删除', // 按钮中文字
        //   onClick(data) {
        //     // _this.formData = data;
        //     // _this.$refs.mapComp.showForm();
        //   },
        //   customClass: '' // 自定义类
        // }
      ],
      total: 0,
      pageSize: 10,
      formData: {},
      formTitle: '编辑地点信息',
      formButtons: [
        {
          text: '提交', // 按钮中文字
          onClick(data) {
            _this.$refs.mapComp.validateForm((valid) => {
              if (valid) {
                console.log(data);
                _this.editData(data).done(() => {
                  _this.$refs.mapComp.hideForm();
                  _this.loadData(_this.filterOptions);
                });
              }
            });
          },
          type: 'primary', // 按钮类型
          customClass: '' // 自定义类
        },
        {
          text: '重置', // 按钮中文字
          onClick(data) {
            _this.$refs.mapComp.resetForm();
          },
          type: '', // 按钮类型
          customClass: '' // 自定义类
        }
      ],
      formConfigs: [
        {
          name: 'name',
          label: '名称',
          type: 'text',
          placeholder: '输入名称'
        },
        {
          name: 'latlng',
          label: '经纬度',
          type: 'location',
          placeholder: '输入经纬度'
        },
        {
          name: 'address',
          label: '地址',
          type: 'text',
          placeholder: '输入地址'
        },
        {
          name: 'floor',
          label: '楼层',
          type: 'text'
        },
        {
          name: 'tel',
          label: '门店电话',
          type: 'text'
        },
        {
          name: 'contactTel',
          label: '联系人电话',
          type: 'text'
        }
      ],
      formRules: {
        address: [
          {required: true, message: '门店地址不能为空'}
        ],
        tel: [
          {required: true, message: '门店电话不能为空'},
          {validator: validateTel}
        ]
      }
    };
  },
  mounted() {
    this.loadData(this.filterOptions);
  },
  methods: {
    loadData(filterOptions) {
      this.loading = true;
      window.$.ajax({
        method: 'GET',
        url: '/place_cloud/search/region',
        data: {
          region: '北京市',
          table_id: '5f2012d1d1247578cd1073a9',
          key: '6XJBZ-LMJLW-GPERC-ONBHO-GEPFV-OKBK4',
          ...filterOptions
        }
      }).done((res) => {
        this.loading = false;
        if (res.status !== 0) {
          alert(res.message);
          return;
        }
        const {data, count} = res.result;
        this.listData = data.map(data => {
          data.latlng = `${data.location.lat},${data.location.lng}`;
          data.name = data.title;
          return data;
        });
        this.total = count;
      });
    },
    editData(data) {
      delete data.ud_id;
      data.title = data.name;
      return window.$.ajax({
        method: 'POST',
        url: '/place_cloud/data/update',
        contentType: 'application/json',
        data: JSON.stringify({
          data,
          filter: 'ud_id in("2")',
          table_id: '5f2012d1d1247578cd1073a9',
          key: '6XJBZ-LMJLW-GPERC-ONBHO-GEPFV-OKBK4'
        })
      }).done((res) => {
        if (res.status !== 0) {
          alert(res.message);
          return;
        }
      });
    },
    onChangeFilters(filterOptions) {
      const queryData = JSON.parse(JSON.stringify(filterOptions));
      this.filterOptions = queryData;
      this.filterOptions.region = queryData.region[queryData.region.length - 1];
      this.loadData(this.filterOptions);
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
.comp-container {
  height: 800px;
}
</style>

# Attributes

参数 说明 类型 可选值 默认值
filter-keyword 关键词搜索框 Filter object -
filter-selects 下拉选择项 Filter[]
filters-more 更多筛选条件数组 Filter[] — []
total 总数 number — —
page-size 每页条数 number — 10
list-data 列表数组 Item[]
loading 列表loading状态 boolean — false
form-title 表单标题 string — —
item-buttons 每条数据的操作按钮配置数组 ItemButton[] — []
form-configs 表单展示配置 FormItemConfig[] —
form-data 表单数据回填 object —
form-buttons 表单的操作按钮配置数组 FormButton[] — []
form-rules 表单字段校验规则 object — —

# Slot

name 说明
filter 组件搜索区域
list 组件列表区域

# 事件

事件名称 说明 回调参数
changeFilters 筛选时触发 筛选参数

# 方法

方法名称 说明 参数
showForm 显示表单 —
hideForm 隐藏表单 —
validateForm 校验表单 —
resetForm 重置表单 —

# Filter 对象结构

{
	name: 'key', //筛选项键值
	label: '', //筛选项文本
	hide: false,//是否隐藏，非必传默认是false
	defaultValue: '', //默认值
	type: '', //可选值 text | radio | checkbox | select | date | time | datetime,
	options: [{label: '', value: ''}] //当type是radio、checkbox、select时
}

# FormItemConfig 对象结构

{
	name: '', //筛选项字段名
	label: '', //筛选项文本
	defaultValue: '', //默认值
	type: '', //可选值 text | radio | checkbox | select | date | time | city | location,
	placeholder: ’占位符‘,
	options: [{label: '', value: ''}], //当type是radio、checkbox、select时
	required: true // 是否必填
	disabled: false, //禁止输入
}

# Item 对象结构

{
	name: ’‘,
	address: '',
	location: {lat: 39, lng: 116}
}

# ItemButton 对象结构

{
	text: '编辑', //按钮中文字
	onClick: function (formData) {} // 按钮回调
	type: ‘primary’, //按钮类型 
	customClass: ’‘, //自定义类
}

# FormButton 对象结构

{
	text: '编辑', //按钮中文字
	onClick: function (formData) {} // 按钮回调
	type: ‘primary’, //按钮类型 
	customClass: ’‘, //自定义类
}

# form-rules 对象结构

const validateTel = (rule, value, callback) => {
    // 匹配所有号码（手机卡 + 数据卡 + 上网卡）
    const reg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/;
    if (!reg.test(value)) {
      callback(new Error('输入正确格式手机号码'));
    } else {
      callback();
    }
 };

{
    //key是要校验的表单字段名
	key: [
		{required: true, message: '不能为空'},
		{validator: validateTel}
	]
}

← MultipleLine 图表 →