npm install element-china-area-data -S

import { provinceAndCityData, regionData, rovinceAndCityDataPlus, regionDataPlus,  CodeToText, TextToCode } from 'element-china-area-data';

    <divclass="three">
      <spanclass="imp">3. 三级联动（不带“全部”选项）</span>
      <el-cascaderv-model="selectedOptions2"class="long"size="large":options="regionData"@change="handleChange"
      />
    </div>

    <divclass="bind">
      <div>绑定值：{{ selectedOptions2 }}</div>
      <div>区域码转汉字：{{ CodeToText[selectedOptions2[0]] }},{{ CodeToText[selectedOptions2[1]] }},{{ CodeToText[selectedOptions2[2]] }}</div>
      <div>汉字转区域码：{{ convertTextToCode(CodeToText[selectedOptions2[0]], CodeToText[selectedOptions2[1]], CodeToText[selectedOptions2[2]]) }}</div>
    </div>

selectedOptions2: ['120000', '120100', '120101'],

<template>
  <divid="app">
    <el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange">
    </el-cascader>
  </div>
</template>

<script>import { regionDataPlus } from'element-china-area-data'exportdefault{

    data () {return{

        options: regionDataPlus,

        selectedOptions: []

      }

    },



    methods: {

      handleChange (value) {

        console.log(value)

      }

    }

  }</script>

  <h3>常规表单下拉选择元素模式</h3>
  <p>Regular form element with select tag</p>
  <v-region:town="true"></v-region>

   <spanclass="imp">基于v-region控件省市区街道选择组件</span>
    <divclass="vregion">
      <h3>常规表单下拉选择元素模式</h3>
      <v-regionv-model="selectedRegion":town="true"@values="regionChange" />
      <br><br>

      <h3>多分组切换模式</h3>
      <v-regionv-model="modelGroup":town="true"type="group"@values="regionChange"
      />

      <br><br><br>
      <h3>多列竖排模式</h3>
      <p>Column group</p>
      <v-regiontype="column"@values="regionChange" />

      <br><br><br>
      <h3>城市选择器</h3>
      <p>City picker</p>
      <v-regiontype="city":city-picker="true"@values="regionChange" />
    </div>

selectedRegion: {

        province:'350000',

        city:'350100',

        area:'350104',

        town:'350104008'}

selectedRegion: { province: '440000', city: '440100', area: '440666666', town: '440666666010' },

    //修改编辑窗体的省市区街道
changeEditRegion(data) {

      console.log(data)if(data) {this.editForm.province = data.province ? data.province.key : '';this.editForm.city = data.city ? data.city.key : '';this.editForm.district = data.area ? data.area.key : '';this.editForm.street = data.town ? data.town.key : '';//console.log(this.editForm)
}

    },

<!--用来演示联动的案例-->
<template>
  <divclass="flex-container">
    <divclass="flex-item">
      <label>省</label>
      <el-selectv-model="provinceValue"placeholder="请选择省"@change="chooseProvince">
        <el-optionv-for="item in provinceData":key="item.id":label="item.provinceName":value="item.id"
        />
      </el-select>
    </div>
    <divclass="flex-item">
      <label>市</label>
      <el-selectv-model="cityValue"placeholder="请选择市"@change="chooseCity">
        <el-optionv-for="item in cityData":key="item.id":label="item.cityName":value="item.id"
        />
      </el-select>
    </div>
    <divclass="flex-item">
      <label>区、县</label>
      <el-selectv-model="areaValue"placeholder="请选择区、县"@change="chooseArea">
        <el-optionv-for="item in areaData":key="item.id":label="item.districtName":value="item.id"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
//导入Axios的HTTP请求处理封装类
import { Province, City, District } from'@/api/city'exportdefault{

  data() {return{

      provinceValue:'',

      cityValue:'',

      areaValue:'',



      provinceData: [],

      cityData: [],

      areaData: []

    }

  },

  created() {

    Province.GetAll().then(res=>{if(res.result) {this.provinceData=res.result.items//console.log(res.result);
}

    }).catch(e=>{this.$message.error('网络连接超时');

    })

  },

  methods: {

    chooseProvince(value) {this.cityValue= '';this.areaValue= '';this.cityData=[];this.areaData=[];vardata={ ProvinceID: value };

      City.GetAll(data).then(res=>{if(res.result) {this.cityData=res.result.items

        }

      }).catch(e=>{this.$message.error('网络连接超时');

      })

    },

    chooseCity(value) {this.areaValue= '';vardata={ CityID: value };

      District.GetAll(data).then(res=>{if(res.result) {this.areaData=res.result.items

        }

      }).catch(e=>{this.$message.error('网络连接超时');

      })

    },

    chooseArea() {



    }

  }

}</script>

<style>.flex-container{display:flex;flex-flow:row wrap;justify-content:space-around;padding:0;margin:0;list-style:none;
}.flex-item{padding:5px;height:auto;color:tomato;font-weight:bold;text-align:center;
}
</style>

Vue.prototype.getToken = function(){

  ...

}

this.getToken();

//导入一些全局函数
import prototype from './prototype'Vue.use(prototype)

export functionuppercaseFirst(string) {return string.charAt(0).toUpperCase() + string.slice(1)

}

//导入自定义全局过滤器
import * as filters from './filters'
//注册全局过滤器
Object.keys(filters).forEach(key =>{

  Vue.filter(key, filters[key])

})

//导入第三方常见过滤器，介绍参考https://github.com/freearhey/vue2-filters
import Vue2Filters from 'vue2-filters'Vue.use(Vue2Filters)

//导入常见的组件，进行注册
import common from './components/Common/plugin'Vue.use(common)

    /// <summary>
    ///上传附件信息，应用层服务接口实现/// </summary>
[AbpAuthorize]public class FileUploadAppService : MyAsyncServiceBase<FileUpload, FileUploadDto, string, FileUploadPagedDto, CreateFileUploadDto, FileUploadDto>, IFileUploadAppService

    {private AppConfig config = newAppConfig();private readonly IRepository<FileUpload, string> _repository;//业务对象仓储对象
        private readonly IRepository<User, long> _userRepository;//用户信息仓储对象
        private IHttpContextAccessor _httpContext;//上下文对象

        public FileUploadAppService(IRepository<FileUpload, string> repository, IRepository<User, long> userRepository, IHttpContextAccessor httpContext) : base(repository)

        {

            _repository=repository;

            _userRepository=userRepository;

            _httpContext=httpContext;

        }

            <el-form-itemlabel="封面图片">
              <el-uploadref="upload"action="/abp/services/app/FileUpload/PostUpload"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-success="onSuccess":on-error="onError"accept="image/jpeg,image/gif,image/png,image/bmp":headers="myHeaders":file-list="editForm.fileList"
              >
                <iclass="el-icon-plus" />
              </el-upload>
              <el-dialog:visible.sync="dialogVisible">
                <imgwidth="100%":src="dialogImageUrl"alt="">
              </el-dialog>
            </el-form-item> 

<el-row>
  <el-col:span="24">
    <el-form-itemlabel="图片"prop="picture">
      <ele-upload-imagev-model="editForm.picture":is-show-tip="false":size="100"action="/abp/services/app/FileUpload/PostUpload"title="封面图片":headers="myHeaders":data="{guid:editForm.id, folder:'用户图片'}":crop="true"
      />
    </el-form-item>
  </el-col>
  <el-col:span="24">
    <el-form-itemlabel="资料文档"prop="attachGUID">
      <ele-upload-filev-model="editForm.attachGUID_files":response-fn="handleAttachResponse"action="/abp/services/app/FileUpload/PostUpload":headers="myHeaders":data="{guid:editForm.attachGUID, folder:'用户图片'}":before-remove="beforeRemoveAttach"
      />
    </el-form-item>
  </el-col>

//获取附件文件列表
param = { guid: this.editForm.attachGUID }

fileupload.GetByAttachGUID(param).then(data=>{if(data.result) {this.editForm.attachGUID_files =[...data.result]

  }

})

  myHeaders: { Authorization: 'Bearer ' + getToken() }, //用于上传文件的身份认证

    beforeRemoveAttach(file, fileList) { //移除附件图片
      //服务端删除文件
      var param = { guid: this.editForm.attachGUID, index: fileList.indexOf(file) }

      fileupload.RemoveAttach(param).then(data=>{

        console.log(data.result)

      })

    },

    //密码验证规则
    services.Configure<IdentityOptions>(options =>{

        options.Password.RequireDigit= false;

        options.Password.RequireLowercase= false;

        options.Password.RequireNonAlphanumeric= false;

        options.Password.RequireUppercase= false;

        options.Password.RequiredLength= 6;

    });

<template>
  <el-dialog:title="$t('changepass.title')":visible="isVisible":modal-append-to-body="false"@close="close">
    <el-formref="form":model="user":rules="rules"label-width="160px">
      <el-form-item:label="$t('changepass.oldpassword')"prop="oldPassword">
        <el-inputv-model="user.oldPassword":placeholder="$t('changepass.oldpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item:label="$t('changepass.newpassword')"prop="newPassword">
        <el-inputv-model="user.newPassword":placeholder="$t('changepass.newpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item:label="$t('changepass.confirmpassword')"prop="confirmPassword">
        <el-inputv-model="user.confirmPassword":placeholder="$t('changepass.confirmpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item>
        <el-buttontype="primary"@click="submitChange">{{ $t('form.save') }}</el-button>
        <el-buttontype="danger"@click="close">{{ $t('form.close') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

submitChange() {var param ={

        userId: getUserId(),

        newPassword:this.user.newPassword,

        currentPassword:this.user.oldPassword

      }//console.log(param)

      this.$refs['form'].validate(valid =>{if(valid) {

          user.ChangePassword(param).then(data=>{if(data.result) {this.msgSuccess('修改成功')this.$emit('update:visible', false) //更新
            } else{this.msgError('密码修改失败')

            }

          })

        }

      })

    },

  <el-form-itemlabel="姓名"prop="name">
    <el-inputv-model="searchForm.name" />
  </el-form-item>

  <el-col:span="12">
    <el-form-itemlabel="身高"prop="height">
      <el-inputv-model="addForm.height"><spanslot="suffix">厘米</span></el-input>
    </el-form-item>
  </el-col>
  <el-col:span="12">
    <el-form-itemlabel="体重"prop="weight">
      <el-inputv-model="addForm.weight"><spanslot="suffix">公斤</span></el-input>
    </el-form-item>
  </el-col>

<div>
  <el-inputplaceholder="请输入内容"v-model="input1">
    <templateslot="prepend">Http://</template>
  </el-input>
</div>
<divstyle="margin-top: 15px;">
  <el-inputplaceholder="请输入内容"v-model="input2">
    <templateslot="append">.com</template>
  </el-input>
</div>
<divstyle="margin-top: 15px;">
  <el-inputplaceholder="请输入内容"v-model="input3"class="input-with-select">
    <el-selectv-model="select"slot="prepend"placeholder="请选择">
      <el-optionlabel="餐厅名"value="1"></el-option>
      <el-optionlabel="订单号"value="2"></el-option>
      <el-optionlabel="用户电话"value="3"></el-option>
    </el-select>
    <el-buttonslot="append"icon="el-icon-search"></el-button>
  </el-input>
</div>

<el-inputtype="textarea"placeholder="请输入内容"v-model="textarea"maxlength="30"show-word-limit>

<el-inputtype="text"placeholder="请输入内容"v-model="text"maxlength="10"show-word-limit>
</el-input>
<divstyle="margin: 20px 0;"></div>
<el-inputtype="textarea"placeholder="请输入内容"v-model="textarea"maxlength="30"show-word-limit>
</el-input> 

<el-form-itemlabel="出生日期"prop="birthDate">
  <el-date-pickerv-model="addForm.birthDate"align="right"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"
  />
</el-form-item>

<el-form-itemlabel="创建时间">
<el-date-pickerv-model="searchForm.creationTime"type="daterange"align="right"unlink-panels

  range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"
/>
</el-form-item>

//选择时间范围的快捷选项
export const pickerOptions ={

  shortcuts: [

    {

      text:'昨天',

      onClick(picker) {

        const end= newDate();

        const start= newDate();

        start.setTime(start.getTime()- 3600 * 1000 * 24 * 1);

        picker.$emit('pick', [start, end]);

      }

    },

    {

      text:'最近一周',

      onClick(picker) {

        const end= newDate();

        const start= newDate();

        start.setTime(start.getTime()- 3600 * 1000 * 24 * 7);

        picker.$emit('pick', [start, end]);

      }

    }, {

      text:'最近一个月',

      onClick(picker) {

        const end= newDate();

        const start= newDate();

        start.setTime(start.getTime()- 3600 * 1000 * 24 * 30);

        picker.$emit('pick', [start, end]);

      }

    }, {

      text:'最近三个月',

      onClick(picker) {

        const end= newDate();

        const start= newDate();

        start.setTime(start.getTime()- 3600 * 1000 * 24 * 90);

        picker.$emit('pick', [start, end]);

      }

    }]

}

<el-tag>标签一</el-tag>
<el-tagtype="success">标签二</el-tag>
<el-tagtype="info">标签三</el-tag>
<el-tagtype="warning">标签四</el-tag>
<el-tagtype="danger">标签五</el-tag>

<el-form-itemlabel="标签"prop="tags">
  <el-input-tagv-model="editForm.tags_array" />
</el-form-item>

      //将字符串的标签，转换为Array集合
      if (this.addForm.tags) {this.addForm.tags_array = this.addForm.tags.split(',')

      }

  watch: { //对过滤内容进行监控，实现树列表过滤
    //键路径必须加上引号
    'addForm.tags_array': function(val, oldval) {if(val) {this.addForm.tags =val.toString()

      }

    },'editForm.tags_array': function(val, oldval) {if(val) {this.editForm.tags =val.toString()

      }

    }

  },

  <el-selectv-model="value"placeholder="请选择">
    <el-optionv-for="item in options":key="item.value":label="item.label":value="item.value">
    </el-option>
  </el-select>

<script>exportdefault{

    data() {return{

        options: [{

          value:'选项1',

          label:'黄金糕'}, {

          value:'选项2',

          label:'双皮奶'}],



        value:''}

    }

  }</script>

<el-form-itemlabel="状态">
    <my-dictdatav-model="addForm.status":options="Status"/>
    <my-dictdatav-model="addForm.status"type-name="状态"/>
</el-form-item>

mounted() {var that = this;if (this.typeName && this.typeName !== '') {//使用字典类型，从服务器请求数据
      var params = { dictTypeName: this.typeName };

      dictdata.GetListItemByDictType(params).then(data=>{var list =data.result;//console.log(list);
        if(list) {

          list.forEach(item=>{//console.log(item)
that.dictItems.push({ text: item.text, value: item.value });

          })

        }

      })

    }else if (this.options && this.options.length > 0) {//使用固定字典列表
      this.options.forEach(item =>{if (item && typeof (item.value) !== 'undefined') {

          that.dictItems.push(item)

        }

      });

    }//设置默认值
    this.svalue = this.value;

  },

<el-col:span="12">
    <el-form-itemlabel="民族"prop="nationality">
      <my-dictdatav-model="editForm.nationality"type-name="民族" />
    </el-form-item>
</el-col>
<el-col:span="12">
    <el-form-itemlabel="学历"prop="education">
      <my-dictdatav-model="editForm.education"type-name="学历" />
    </el-form-item>
</el-col>
<el-col:span="12">
    <el-form-itemlabel="婚姻状况"prop="marriage">
      <my-dictdatav-model="editForm.marriage"type-name="婚姻状况" />
    </el-form-item>
</el-col>
<el-col:span="12">
    <el-form-itemlabel="星座"prop="star">
      <my-dictdatav-model="editForm.star"type-name="星座" />
    </el-form-item>
</el-col>

<template>
  <el-checkbox-groupv-model="checkList">
    <el-checkboxlabel="复选框 A"></el-checkbox>
    <el-checkboxlabel="复选框 B"></el-checkbox>
    <el-checkboxlabel="复选框 C"></el-checkbox>
    <el-checkboxlabel="禁用"disabled></el-checkbox>
    <el-checkboxlabel="选中且禁用"disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>exportdefault{

    data () {return{

        checkList: ['选中且禁用','复选框 A']

      };

    }

  };</script>

<template>
  <el-radio-groupv-model="radio">
    <el-radio:label="3">备选项</el-radio>
    <el-radio:label="6">备选项</el-radio>
    <el-radio:label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>exportdefault{

    data () {return{

        radio:3};

    }

  }</script>

  <el-col:span="24">
    <el-form-itemlabel="品牌关联"prop="bindBrands">
      <el-checkbox-groupv-model="addForm.bindBrands"style="padding:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <el-checkboxv-for="(item, i) in brandList":key="i":label="item.id">{{ item.brandName }}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-col>

<el-form-itemlabel="虚拟商品"prop="isVirtual">
  <el-radio-groupv-model="addForm.isVirtual">
    <el-radioclass="radio":label="1">是</el-radio>
    <el-radioclass="radio":label="0">否</el-radio>
  </el-radio-group>
</el-form-item>

<el-switchv-model="value1"active-text="按月付费"inactive-text="按年付费">
</el-switch>
<el-switchstyle="display: block"v-model="value2"active-color="#13ce66"inactive-color="#ff4949"active-text="按月付费"inactive-text="按年付费">
</el-switch>

<script>exportdefault{

    data() {return{

        value1:true,

        value2:true}

    }

  };</script>

      <el-form-itemlabel="虚拟商品"prop="isVirtual">
        <el-switchv-model="searchForm.isVirtual"active-color="#13ce66"inactive-color="gray" />
      </el-form-item>

    getlist() { //列表数据获取
      var param = { //构造常规的分页查询条件
        //分页条件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

        MaxResultCount:this.pageinfo.pagesize,//查询过滤条件
        Code: this.searchForm.code,

        Name:this.searchForm.name,

        IsVirtual:this.searchForm.isVirtual



      };//使用日期范围选择控件，在查询对象增加开始日期CreationTimeStart、结束日期CreationTimeEnd
      this.addDateRange(param, this.searchForm.creationTime)



      param.IsVirtual= param.IsVirtual ? 1 : 0;//修改数据类型为int
      //console.log(param)

      //获取列表，绑定到模型上，并修改分页数量
      this.listLoading = trueproductType.GetAll(param).then(data=>{this.list =data.result.itemsthis.pageinfo.total =data.result.totalCountthis.listLoading = false})

    },

  <el-form-itemlabel="虚拟商品"prop="isVirtual">
    <el-switchv-model="searchForm.isVirtual"active-value="1"inactive-value="0"active-color="#13ce66"inactive-color="gray" />
  </el-form-item>

    getlist() { //列表数据获取
      var param = { //构造常规的分页查询条件
        //分页条件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

        MaxResultCount:this.pageinfo.pagesize,//查询过滤条件
        Code: this.searchForm.code,

        Name:this.searchForm.name,

        IsVirtual:this.searchForm.isVirtual

      };//使用日期范围选择控件，在查询对象增加开始日期CreationTimeStart、结束日期CreationTimeEnd
      this.addDateRange(param, this.searchForm.creationTime)//console.log(param)

      //获取列表，绑定到模型上，并修改分页数量
      this.listLoading = trueproductType.GetAll(param).then(data=>{this.list =data.result.itemsthis.pageinfo.total =data.result.totalCountthis.listLoading = false})

    },

    //提示成功信息
    Vue.prototype.msgSuccess = function(msg) {this.$message({ showClose: true, message: msg, type: 'success'})

    }//提示警告信息
    Vue.prototype.msgWarning = function(msg) {this.$message({ showClose: true, message: msg, type: 'warning'})

    }//提示错误信息
    Vue.prototype.msgError = function(msg) {this.$message({ showClose: true, message: msg, type: 'error'})

    }//提示信息
    Vue.prototype.msgInfo = function(msg) {this.$message.info({ showClose: true, message: msg })

    }//确认信息
    Vue.prototype.msgConfirm = function(msg = '您确认删除选定的记录吗?') {return this.$confirm(msg, '操作提示',

        {

          type:'warning' //success，error，info，warning
          //confirmButtonText: '确定',
          //cancelButtonText: '取消'
})

    }

    showDelete(id) { //删除对话框处理
      this.msgConfirm().then(() =>{//删除操作处理代码
        var param ={ id: id }

        productType.Delete(param).then(data=>{//console.log(data)
          if(data.success) {//提示信息
            this.msgSuccess('删除成功!')//刷新数据
            this.getlist()

          }else{this.msgError('删除失败：' +data.error)

          }

        })

      })

    },