省市区选择组件
1、数据库表结构
SQL 全选
CREATE TABLE [dbo].[data_Area](
[ID] [nvarchar](255) NOT NULL,
[isid] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](255) NULL,
[ParentId] [nvarchar](255) NULL,
[ShortName] [nvarchar](255) NULL,
[LevelType] [nvarchar](5) NULL,
[CityCode] [nvarchar](255) NULL,
[ZipCode] [nvarchar](255) NULL,
[MergerName] [nvarchar](255) NULL,
[Country] [nvarchar](255) NULL,
[Province] [nvarchar](255) NULL,
[City] [nvarchar](255) NULL,
[County] [nvarchar](255) NULL,
[Longitude] [nvarchar](255) NULL,
[Latitude] [nvarchar](255) NULL,
[Pinyin] [nvarchar](255) NULL,
[ProvinceZJM] [varchar](50) NULL,
[CityZJM] [varchar](50) NULL,
[CountyZJM] [varchar](50) NULL,
[ProvinceId] [varchar](20) NULL,
[CityId] [varchar](20) NULL,
[CountyId] [varchar](20) NULL,
[FYProvince] [nvarchar](50) NULL,
[FYCity] [nvarchar](50) NULL,
[FYCounty] [nvarchar](50) NULL,
CONSTRAINT [PK_data_Area] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
2、数据JSON文件
下载地址
下载后放入
3、数据初始化
DBMergeProvider.cs文件
C# 全选
public class DBMergeProvider : IDBMerge
{
public EnumDBType DBType => EnumDBType.Business;
public void DoDBMigrate(ConnectionStrItem connItem)
{
using (var defaultEntities = new EntitiesContext(connItem))
{
/*
不过数据库model有改动的话需要先执行下 add-migrate xxx 命令,然后每次运行程序GetPendingMigrations()就会检测有无更新,有的话自动迁移。
GetPendingMigrations方法官方文档说明 https://docs.microsoft.com/zh-cn/dotnet/api/microsoft.entityframeworkcore.relationaldatabasefacadeextensions.getpendingmigrations?view=efcore-2.1
*/
if (defaultEntities.Database.GetPendingMigrations().Any())
{
defaultEntities.Database.Migrate();
}
if (!defaultEntities.data_Area.Any())
this.InitData<data_Area>(defaultEntities);
}
}
void InitData<T>(EntitiesContext entities) where T : class
{
string typeName = typeof(T).Name;
string jsonPath = Path.Combine(Directory.GetCurrentDirectory(), "StaticFiles", typeName + ".json");
if (!File.Exists(jsonPath))
return;
string json = File.ReadAllText(jsonPath);
List<T> data = Newtonsoft.Json.JsonConvert.DeserializeObject<List<T>>(json);
//foreach (var obj in data)
//{
// entities.GZEntitiesContextCommon.EnabledBusinessCode = false;
// entities.Entry(obj).State = EntityState.Added;
// entities.SaveChanges();
//}
entities.GZEntitiesContextCommon.EnabledBusinessCode = false;
entities.BulkInsert<T>(data);
entities.SaveChanges();
}
}
4、API控制器
C# 全选
public partial class AreaController : _APIBase
{
/// <summary>
/// 地区--获取
/// </summary>
/// <returns></returns>
[ServerLibs.Attributes.APIAuthorize(APIAuthorizeAttribute.RequestType.login)]
[HttpGet]
public GZAPIResultObject GetSelectData(string maxLevelType)
{
var data = entitiesQuery.data_Area
.Where(w => String.Compare(w.LevelType, "0") > 0 && String.Compare(w.LevelType, maxLevelType) <= 0)
.Select(s => new
{
s.ID,
s.ParentId,
s.Name
}).OrderBy(o => o.ID).ThenBy(o => o.ParentId).ThenBy(o => o.Name).ToList();
return GZAPISuccessObject(data);
}
#region 生成器生成代码
#region 列表查询
/// <summary>
/// 列表返回实体类
/// </summary>
public class DataListItem
{
/// <summary>
/// ID
/// </summary>
public string ID { get; set; }
/// <summary>
/// Name
/// </summary>
public string Name { get; set; }
/// <summary>
/// ParentId
/// </summary>
public string ParentId { get; set; }
/// <summary>
/// ShortName
/// </summary>
public string ShortName { get; set; }
/// <summary>
/// LevelType
/// </summary>
public string LevelType { get; set; }
/// <summary>
/// CityCode
/// </summary>
public string CityCode { get; set; }
/// <summary>
/// ZipCode
/// </summary>
public string ZipCode { get; set; }
/// <summary>
/// MergerName
/// </summary>
public string MergerName { get; set; }
/// <summary>
/// Country
/// </summary>
public string Country { get; set; }
/// <summary>
/// Province
/// </summary>
public string Province { get; set; }
/// <summary>
/// City
/// </summary>
public string City { get; set; }
/// <summary>
/// County
/// </summary>
public string County { get; set; }
/// <summary>
/// Longitude
/// </summary>
public string Longitude { get; set; }
/// <summary>
/// Latitude
/// </summary>
public string Latitude { get; set; }
/// <summary>
/// Pinyin
/// </summary>
public string Pinyin { get; set; }
/// <summary>
/// ProvinceZJM
/// </summary>
public string ProvinceZJM { get; set; }
/// <summary>
/// CityZJM
/// </summary>
public string CityZJM { get; set; }
/// <summary>
/// CountyZJM
/// </summary>
public string CountyZJM { get; set; }
/// <summary>
/// ProvinceId
/// </summary>
public string ProvinceId { get; set; }
/// <summary>
/// CityId
/// </summary>
public string CityId { get; set; }
/// <summary>
/// CountyId
/// </summary>
public string CountyId { get; set; }
/// <summary>
/// FYProvince
/// </summary>
public string FYProvince { get; set; }
/// <summary>
/// FYCity
/// </summary>
public string FYCity { get; set; }
/// <summary>
/// FYCounty
/// </summary>
public string FYCounty { get; set; }
}
IQueryable<DataListItem> QueryList(IQueryable<data_Area> query)
{
var data = query.Select(s => new DataListItem()
{
ID = s.ID,
Name = s.Name,
ParentId = s.ParentId,
ShortName = s.ShortName,
LevelType = s.LevelType,
CityCode = s.CityCode,
ZipCode = s.ZipCode,
MergerName = s.MergerName,
Country = s.Country,
Province = s.Province,
City = s.City,
County = s.County,
Longitude = s.Longitude,
Latitude = s.Latitude,
Pinyin = s.Pinyin,
ProvinceZJM = s.ProvinceZJM,
CityZJM = s.CityZJM,
CountyZJM = s.CountyZJM,
ProvinceId = s.ProvinceId,
CityId = s.CityId,
CountyId = s.CountyId,
FYProvince = s.FYProvince,
FYCity = s.FYCity,
FYCounty = s.FYCounty,
});
return data;
}
#endregion
public class P_SearchList : ModalAgGridSearchData
{
/// <summary>
/// isid_起始
/// </summary>
public int? isid_Begin { get; set; }
/// <summary>
/// isid_截至
/// </summary>
public int? isid_End { get; set; }
/// <summary>
/// ID
/// </summary>
public string ID { get; set; }
/// <summary>
/// Name
/// </summary>
public string Name { get; set; }
/// <summary>
/// ParentId
/// </summary>
public string ParentId { get; set; }
}
bool IsNull<T>(T o)
{
return true;
}
/// <summary>
/// 查询列表
/// </summary>
/// <returns></returns>
[HttpPost]
public GZAPIResultArrayPageSearch<DataListItem> SearchList(P_SearchList searchData)
{
var queryEntity = entitiesQuery.data_Area;
if (searchData.isid_Begin != null) queryEntity = queryEntity.Where(w => w.isid >= searchData.isid_Begin);
if (searchData.isid_End != null) queryEntity = queryEntity.Where(w => w.isid <= searchData.isid_End);
if (!String.IsNullOrEmpty(searchData.ID)) queryEntity = queryEntity.Where(w => w.ID == searchData.ID);
if (!String.IsNullOrEmpty(searchData.Name)) queryEntity = queryEntity.Where(w => w.Name.Contains(searchData.Name));
if (!String.IsNullOrEmpty(searchData.ParentId)) queryEntity = queryEntity.Where(w => w.ParentId == searchData.ParentId);
var query = QueryList(queryEntity);
var filterHelper = new GZFilterHelper<DataListItem>();
query = filterHelper.UseFilter(query, searchData.filterModel);
query = filterHelper.UseOrder(query, searchData.sortModel, nameof(DataListItem.ID));
var total = query.Count();
query = query.Skip(searchData.startRow).Take(searchData.rowLength);
var data = query.ToList();
return GZAPISuccessArrayPage(total, data);
}
/// <summary>
/// 新增实体类
/// </summary>
public class P_Create
{
///<summary>
/// ID
/// </summary>
public string ID { get; set; }
///<summary>
/// Name
/// </summary>
public string Name { get; set; }
///<summary>
/// ParentId
/// </summary>
public string ParentId { get; set; }
///<summary>
/// ShortName
/// </summary>
public string ShortName { get; set; }
///<summary>
/// LevelType
/// </summary>
public string LevelType { get; set; }
///<summary>
/// CityCode
/// </summary>
public string CityCode { get; set; }
///<summary>
/// ZipCode
/// </summary>
public string ZipCode { get; set; }
///<summary>
/// MergerName
/// </summary>
public string MergerName { get; set; }
///<summary>
/// Country
/// </summary>
public string Country { get; set; }
///<summary>
/// Province
/// </summary>
public string Province { get; set; }
///<summary>
/// City
/// </summary>
public string City { get; set; }
///<summary>
/// County
/// </summary>
public string County { get; set; }
///<summary>
/// Longitude
/// </summary>
public string Longitude { get; set; }
///<summary>
/// Latitude
/// </summary>
public string Latitude { get; set; }
///<summary>
/// Pinyin
/// </summary>
public string Pinyin { get; set; }
///<summary>
/// ProvinceZJM
/// </summary>
public string ProvinceZJM { get; set; }
///<summary>
/// CityZJM
/// </summary>
public string CityZJM { get; set; }
///<summary>
/// CountyZJM
/// </summary>
public string CountyZJM { get; set; }
///<summary>
/// ProvinceId
/// </summary>
public string ProvinceId { get; set; }
///<summary>
/// CityId
/// </summary>
public string CityId { get; set; }
///<summary>
/// CountyId
/// </summary>
public string CountyId { get; set; }
///<summary>
/// FYProvince
/// </summary>
public string FYProvince { get; set; }
///<summary>
/// FYCity
/// </summary>
public string FYCity { get; set; }
///<summary>
/// FYCounty
/// </summary>
public string FYCounty { get; set; }
}
[HttpPost]
public GZAPIResultArray<DataListItem> Create(P_Create param)
{
if (param == null)
{
return GZAPIBadRequestArray<DataListItem>("参数为空!");
}
List<string> validateErrMsg = new List<string>();
if (String.IsNullOrEmpty(param.ID))
validateErrMsg.Add("ID不能为空");
if (String.IsNullOrEmpty(param.Name))
validateErrMsg.Add("Name不能为空");
if (String.IsNullOrEmpty(param.ShortName))
validateErrMsg.Add("ShortName不能为空");
if (validateErrMsg.Count > 0)
{
return GZAPIBadRequestArray<DataListItem>(String.Join(",", validateErrMsg));
}
using (var trans = entities.Database.BeginTransaction())
{
try
{
data_Area data = new data_Area()
{
ID = param.ID,
Name = param.Name,
ParentId = param.ParentId,
ShortName = param.ShortName,
LevelType = param.LevelType,
CityCode = param.CityCode,
ZipCode = param.ZipCode,
MergerName = param.MergerName,
Country = param.Country,
Province = param.Province,
City = param.City,
County = param.County,
Longitude = param.Longitude,
Latitude = param.Latitude,
Pinyin = param.Pinyin,
ProvinceZJM = param.ProvinceZJM,
CityZJM = param.CityZJM,
CountyZJM = param.CountyZJM,
ProvinceId = param.ProvinceId,
CityId = param.CityId,
CountyId = param.CountyId,
FYProvince = param.FYProvince,
FYCity = param.FYCity,
FYCounty = param.FYCounty,
};
entities.data_Area.Add(data);
entities.SaveChanges();
trans.Commit();
var queryData = this.QueryList(entities.data_Area.Where(w => w.ID == data.ID));
return GZAPISuccessArray<DataListItem>(queryData.ToList());
}
catch (Exception ex)
{
trans.Rollback();
return GZAPIBadRequestArray<DataListItem>(ex.ToString());
}
}
}
/// <summary>
/// 明细返回数据模型
/// </summary>
public class R_DetailItem
{
/// <summary>
/// ID
/// </summary>
public string ID { get; set; }
/// <summary>
/// Name
/// </summary>
public string Name { get; set; }
/// <summary>
/// ParentId
/// </summary>
public string ParentId { get; set; }
/// <summary>
/// ShortName
/// </summary>
public string ShortName { get; set; }
/// <summary>
/// LevelType
/// </summary>
public string LevelType { get; set; }
/// <summary>
/// CityCode
/// </summary>
public string CityCode { get; set; }
/// <summary>
/// ZipCode
/// </summary>
public string ZipCode { get; set; }
/// <summary>
/// MergerName
/// </summary>
public string MergerName { get; set; }
/// <summary>
/// Country
/// </summary>
public string Country { get; set; }
/// <summary>
/// Province
/// </summary>
public string Province { get; set; }
/// <summary>
/// City
/// </summary>
public string City { get; set; }
/// <summary>
/// County
/// </summary>
public string County { get; set; }
/// <summary>
/// Longitude
/// </summary>
public string Longitude { get; set; }
/// <summary>
/// Latitude
/// </summary>
public string Latitude { get; set; }
/// <summary>
/// Pinyin
/// </summary>
public string Pinyin { get; set; }
/// <summary>
/// ProvinceZJM
/// </summary>
public string ProvinceZJM { get; set; }
/// <summary>
/// CityZJM
/// </summary>
public string CityZJM { get; set; }
/// <summary>
/// CountyZJM
/// </summary>
public string CountyZJM { get; set; }
/// <summary>
/// ProvinceId
/// </summary>
public string ProvinceId { get; set; }
/// <summary>
/// CityId
/// </summary>
public string CityId { get; set; }
/// <summary>
/// CountyId
/// </summary>
public string CountyId { get; set; }
/// <summary>
/// FYProvince
/// </summary>
public string FYProvince { get; set; }
/// <summary>
/// FYCity
/// </summary>
public string FYCity { get; set; }
/// <summary>
/// FYCounty
/// </summary>
public string FYCounty { get; set; }
}
/// <summary>
/// 获得明细
/// </summary>
[HttpGet]
public GZAPIResultEntity<R_DetailItem> GetData(string ID)
{
var data = entities.data_Area.Where(w => w.ID == ID).Select(s => new R_DetailItem()
{
ID = s.ID,
Name = s.Name,
ParentId = s.ParentId,
ShortName = s.ShortName,
LevelType = s.LevelType,
CityCode = s.CityCode,
ZipCode = s.ZipCode,
MergerName = s.MergerName,
Country = s.Country,
Province = s.Province,
City = s.City,
County = s.County,
Longitude = s.Longitude,
Latitude = s.Latitude,
Pinyin = s.Pinyin,
ProvinceZJM = s.ProvinceZJM,
CityZJM = s.CityZJM,
CountyZJM = s.CountyZJM,
ProvinceId = s.ProvinceId,
CityId = s.CityId,
CountyId = s.CountyId,
FYProvince = s.FYProvince,
FYCity = s.FYCity,
FYCounty = s.FYCounty,
}).FirstOrDefault();
if (data == null)
{
return GZAPIFailRequestEntity<R_DetailItem>("数据不存在");
}
return GZAPISuccessEntity<R_DetailItem>(data);
}
/// <summary>
/// 更新实体类
/// </summary>
public class P_Update
{
public string ID { get; set; }
/// <summary>
/// Name
/// </summary>
public string Name { get; set; }
/// <summary>
/// ParentId
/// </summary>
public string ParentId { get; set; }
/// <summary>
/// ShortName
/// </summary>
public string ShortName { get; set; }
/// <summary>
/// LevelType
/// </summary>
public string LevelType { get; set; }
/// <summary>
/// CityCode
/// </summary>
public string CityCode { get; set; }
/// <summary>
/// ZipCode
/// </summary>
public string ZipCode { get; set; }
/// <summary>
/// MergerName
/// </summary>
public string MergerName { get; set; }
/// <summary>
/// Country
/// </summary>
public string Country { get; set; }
/// <summary>
/// Province
/// </summary>
public string Province { get; set; }
/// <summary>
/// City
/// </summary>
public string City { get; set; }
/// <summary>
/// County
/// </summary>
public string County { get; set; }
/// <summary>
/// Longitude
/// </summary>
public string Longitude { get; set; }
/// <summary>
/// Latitude
/// </summary>
public string Latitude { get; set; }
/// <summary>
/// Pinyin
/// </summary>
public string Pinyin { get; set; }
/// <summary>
/// ProvinceZJM
/// </summary>
public string ProvinceZJM { get; set; }
/// <summary>
/// CityZJM
/// </summary>
public string CityZJM { get; set; }
/// <summary>
/// CountyZJM
/// </summary>
public string CountyZJM { get; set; }
/// <summary>
/// ProvinceId
/// </summary>
public string ProvinceId { get; set; }
/// <summary>
/// CityId
/// </summary>
public string CityId { get; set; }
/// <summary>
/// CountyId
/// </summary>
public string CountyId { get; set; }
/// <summary>
/// FYProvince
/// </summary>
public string FYProvince { get; set; }
/// <summary>
/// FYCity
/// </summary>
public string FYCity { get; set; }
/// <summary>
/// FYCounty
/// </summary>
public string FYCounty { get; set; }
}
/// <summary>
/// 更新方法
/// </summary>
[HttpPost]
public GZAPIResultArray<DataListItem> Update(P_Update param)
{
if (param == null)
{
return GZAPIBadRequestArray<DataListItem>("参数为空!");
}
List<string> validateErrMsg = new List<string>();
if (String.IsNullOrEmpty(param.ID))
validateErrMsg.Add("ID不能为空");
if (String.IsNullOrEmpty(param.Name))
validateErrMsg.Add("Name不能为空");
if (String.IsNullOrEmpty(param.ShortName))
validateErrMsg.Add("ShortName不能为空");
if (validateErrMsg.Count > 0)
{
return GZAPIBadRequestArray<DataListItem>(String.Join(",", validateErrMsg));
}
var data = entities.data_Area.Where(w => w.ID == param.ID).FirstOrDefault();
if (data == null)
{
return GZAPIFailRequestArray<DataListItem>("数据不存在!");
}
data.Name = param.Name;
data.ParentId = param.ParentId;
data.ShortName = param.ShortName;
data.LevelType = param.LevelType;
data.CityCode = param.CityCode;
data.ZipCode = param.ZipCode;
data.MergerName = param.MergerName;
data.Country = param.Country;
data.Province = param.Province;
data.City = param.City;
data.County = param.County;
data.Longitude = param.Longitude;
data.Latitude = param.Latitude;
data.Pinyin = param.Pinyin;
data.ProvinceZJM = param.ProvinceZJM;
data.CityZJM = param.CityZJM;
data.CountyZJM = param.CountyZJM;
data.ProvinceId = param.ProvinceId;
data.CityId = param.CityId;
data.CountyId = param.CountyId;
data.FYProvince = param.FYProvince;
data.FYCity = param.FYCity;
data.FYCounty = param.FYCounty;
entities.SaveChanges();
var queryData = this.QueryList(entities.data_Area.Where(w => w.ID == data.ID));
return GZAPISuccessArray<DataListItem>(queryData.ToList());
}
/// <summary>
/// 删除
/// </summary>
[HttpGet]
public GZAPIResult Delete(string ID)
{
var data = entities.data_Area.Where(w => w.ID == ID).FirstOrDefault();
if (data == null)
{
return GZAPIFailRequest("数据不存在!");
}
else
{
entities.data_Area.Remove(data);
entities.SaveChanges();
return GZAPISuccess();
}
}
#endregion
}
5、前端组件代码
Markup 全选
<template>
<el-cascader style="width:100%;" ref="cascader" transfer :disabled="disabled" :options="data" @change="selected" v-model="currentValue"></el-cascader>
</template>
<style lang="less" scoped>
</style>
<script>
import { ajax } from 'yesweb-libs'
const request = {
getData(context, maxLevel) {
return ajax.get(context, '/xqtms/area/GetSelectData', {
maxLevelType: maxLevel,
})
},
}
export default {
name: 'SelectArea',
data() {
return {
dataSource: [],
data: [],
currentValue: [],
}
},
props: {
disabled: {
type: Boolean,
default: false,
},
dataLevel: {
type: Number,
default: 3,
},
value: Array,
options: {
type: Object,
default: function () {
return {
dataSource: null, // 对象数据
provinceIDFildName: null, // 省份绑定字段
provinceNameFildName: null, // 省份绑定字段
cityIDFildName: null, // 城市绑定字段
cityNameFildName: null, // 城市绑定字段
districtIDFildName: null, // 区、县绑定字段
districtNameFildName: null, // 区、县绑定字段
}
},
},
},
computed: {},
created() {
this.refreshData()
},
methods: {
refreshData() {
var me = this
request.getData(this, this.dataLevel).then((res) => {
me.dataSource = res.data
me.data = me.convert2Data(res.data, 100000)
})
},
convert2Data(arr, parentID) {
var me = this
var v = []
var ds = arr.filter((item) => item.parentId == parentID)
ds.forEach((item) => {
var obj = {
value: item.id,
label: item.name,
source: item,
}
var detail = me.convert2Data(arr, item.id)
if (detail.length > 0) {
obj.children = detail
}
v.push(obj)
})
return v
},
selected(values) {
var provinceID = values[0],
provinceName = '',
cityID = values[1],
cityName = '',
districtID = values[2],
districtName = ''
if (provinceID || '' != '') {
var objProvince = this.dataSource.find((item) => item.id == provinceID)
provinceName = objProvince.name
}
if (cityID || '' != '') {
var objCity = this.dataSource.find((item) => item.id == cityID)
cityName = objCity.name
}
if (districtID || '' != '') {
var objArea = this.dataSource.find((item) => item.id == districtID)
districtName = objArea.name
}
if (this.options.dataSource) {
if (this.options.provinceIDFildName)
this.options.dataSource[this.options.provinceIDFildName] = provinceID
if (this.options.provinceNameFildName)
this.options.dataSource[this.options.provinceNameFildName] =
provinceName
if (this.options.cityIDFildName)
this.options.dataSource[this.options.cityIDFildName] = cityID
if (this.options.cityNameFildName)
this.options.dataSource[this.options.cityNameFildName] = cityName
if (this.options.districtIDFildName)
this.options.dataSource[this.options.districtIDFildName] = districtID
if (this.options.districtNameFildName)
this.options.dataSource[this.options.districtNameFildName] =
districtName
}
this.$emit('input', this.currentValue)
},
},
watch: {
value(val) {
if (JSON.stringify(val) == JSON.stringify(this.currentValue)) return
this.currentValue = val
},
},
}
</script>
6、使用
HTML 全选
<SelectArea :data-level="2" v-model="searchData.toCity" :options="{
dataSource:searchData,
provinceIDFildName: 'toProvince',
provinceNameFildName: 'toProvinceName',
cityIDFildName: 'toCity',
cityNameFildName: 'toCityName',
}"></SelectArea>
版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YESWEB 张国生