# CastleFortress-basic-ui

**Repository Path**: hcwdc/castle-fortress-ui

## Basic Information

- **Project Name**: CastleFortress-basic-ui
- **Description**: CastleFortress的管理运营前端项目库。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://doc.icuapi.com/
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 6
- **Created**: 2022-09-15
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fortress-basic-ui

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### 组件

#### fortress-region 使用说明（可参照 组件示例-编辑页面）

<fortress-region
ref="fortressRegion"
@ftregion="regionHandler" ></fortress-region>
初始化地区数据：  
 新增时： this.$refs.fortressRegion.init([]);  
    修改时：
    1 读取省/市/区 编码 放入一个数组 比如region
    let region=[]
    region.push(this.form.province);
    region.push(this.form.city);
    region.push(this.form.area);
    2 调用组件 this.$refs.fortressRegion.init(region);
地区数据选择后回显：
//regions 选中的节点的 id 集合，清空的话为空数组
//regionsInfo 选中的节点集合（包含 id、name),清空的话为空数组
regionHandler(regions,regionsInfo) {
console.log("regionHandler", regions);
},

取消编辑/提交保存时 需要调用地区组件的隐藏方法
this.\$refs.fortressRegion.hide();

#### fortress-map 高德地图组件 使用说明（可参照 门店管理页面）

<fortress-map @ftmap="changeLogLat"></fortress-map>

//获取选择的经纬度 和 地址
changeLogLat(position, address) {
this.innerVisible = false;
console.log(position, address);
if (position) {
this.form.longitude = position[0];
this.form.latitude = position[1];
this.form.longitude_latitude =
this.form.longitude + "," + this.form.latitude;
}
},

#### fortress-upload 上传组件 使用说明（可参照 组件示例-编辑页面）

    <fortress-upload
          :size="7"
          type="image"
          name="images"
          :formData="form"
        ></fortress-upload>

属性说明：
type：上传组件类型,字符串类型，必填。支持 "image"(图片上传)；"file"(文件上传)；"video"（视频类型上传）；"videoShow"（视频类型展示）
size：上传文字大小，单位 M，数字类型，可选。
name：该组件绑定的表单字段名，必填（可参照 组件示例-编辑页面）
formData：name 对应的字段所在的表单对象，必填（可参照 组件示例-编辑页面）
multiple：是否支持多图片，默认为 false（单图片），当类型为"image"时该属性生效。注：多图片时返回类型为数组类型
videoSrc：视频地址，当类型为"videoShow"时该属性生效（可参照 组件示例-详情页面、列表页面）

#### fortress-industry 行业选择器 使用说明（可参照 组件示例-编辑页面）

    <fortress-industry
            :checkId="id"
            @check="check"
            placeholder="请选择职位"
            title="请选择职位类别"
            width="60%"
        ></fortress-industry>

属性说明：
checkId：组件初始化要显示的职位的 id
check：返回选中职位的数据
placeholder：无选中职位时输入框显示的文字
title：弹出框的标题
width：弹出框的宽度

#### 部署时涉及子文件夹时需确认以下文件中的路径是否正确：

1 vue.config.js
2 views\form\formconfig-preview.vue
3 views\form\formconfig.vue
4 views\form\formdata-edit.vue

#### picture-upload 上传图片并进行图片裁剪组件 使用说明（可参照 组件示例-编辑页面）

```
<picture-upload :round="false"
	v-model="form.images"
	:autoCropWidth="200"
	:autoCropHeight="200"
	:fixed="true"
	:limit="1"
	:size="2"
</picture-upload>
```

> 属性说明：
> round：裁剪组件预览框的形状，默认方形，设置 true 的时候是圆形（非必填）（可参照 个人信息页面）
> v-model：该组件绑定的表单字段（必填）
> autoCropWidth：生成截图框宽度，默认 200（非必填）
> autoCropHeight：生成截图框高度，默认 200（非必填）
> fixed：是否开启截图框宽高固定比例，默认 true(固定比例)（非必填）
> limit:限制上传图片的个数，默认 1（非必填）
> size:限制上传图片的大小，默认 3,限制大小为 3MB（非必填）