0.0.1 • Published 2 years ago
ys-admin v0.0.1
一、项目会议
1、规范 前端规范=>阿里开发规范 后端规范=>接口 2、技术栈、插件、UI框架 package.json 里面的依赖 3、开发流程
登录页=>登录拦截功能=>全局 =>表单=>验证 密码=>加密 成功=>token的存储=>自动登录 失败=>限制错误次数
首页=>可订制的大屏（可以自由拖拽、各种图表、表格、视频、轮播图 等等） 项目亮点：自由拖拽=>1.6.1版本 不能往左下角和右上角缩放的功能=>修改源码 各种图表=>echarts=>封装相应的组件（饼状图/柱状图/折线图....）以及各自的功能（缩放、下载成图片、可拖拽的轴、一键恢复、响应式...） 视频=>视频的抓流（相当于看） 轮播图=>封装成组件 项目难点：做一个自己的插件，通过自己的插件做lowcode低代码开发 动态表单、表格 CRUD 增删改查 发布插件
扩展功能： 文件上传 富文本编辑
权限管理
路由级权限
按钮级权限
拦截器
请求拦截
响应拦截订制页、计划页、记录页 增删改查
4、功能的划分和工期的分配
5、接口联调
二、低代码开发：动态表单组件，名字kdform
1、使用方法
<kdform :config="config" :model="model"></kdform>
config 动态表单的配置文件
model 表单绑定的属性2、示例
import { reactive } from "vue";
const config = reactive({
labelWidth: "120px",
labelPosition: "top",
rules: {
tenantId: [{ required: true, message: "客户id是必填项", trigger: "blur" }],
username: [{ required: true, message: "用户名是必填项", trigger: "blur" }],
password: [
{ required: true, message: "密码是必填项", trigger: "blur" },
{ min: 3, max: 8, message: "密码最少3位，最大8位", trigger: "blur" },
],
rate: [[{ required: true, message: "评分是必填项", trigger: "blur" }]],
},
formRef: "formLogin",
formItemArr: [
{
id: 1,
label: "客户端",
prop: "tenantId",
name: "kdinput",
beforeSlot: 'beforeInput',
options: {
placeholder: "请输入内容",
size: "small",
clearable: true,
modelName: 'input1',
// slotBefore: (scoped) => {
// const a = 1
// return `<div>这个是客户端的input${a+scoped}前边插入的内容</div>`
// },
inputValue: 123
},
},
{
id: 10,
label: "用户名",
name: "kdinput",
options: {
placeholder: "请输入用户名",
size: "small",
clearable: true,
modelName: 'input2'
},
},
{
id: 2,
label: "下拉列表",
prop: "select",
name: "kdselect",
options: {
modelName: 'select',
placeholder: "please select your zone",
optionArr: [
{
label: "上海",
value: "shanghai",
},
{
label: "北京",
value: "beijing",
},
{
label: "天津",
value: "tianjin",
},
],
},
},
{
id: 3,
label: "单选框",
prop: "radio",
name: "kdradio",
afterSlot: 'afterRadio',
options: {
modelName: 'radio1',
optionArr: [
{
label: "man",
text: "男",
},
{
label: "woman",
text: "女",
},
],
},
},
{
id: 11,
label: "单选框222",
prop: "radio",
name: "kdradio",
options: {
modelName: 'radio2',
optionArr: [
{
label: "man",
text: "男111",
},
{
label: "woman",
text: "女222",
},
],
},
},
{
id: 4,
label: "评分",
prop: "rate",
name: "kdrate",
options: {
modelName: 'aaaa',
allowHalf: true,
},
},
{
id: 5,
label: "开关",
prop: "switch",
name: "kdswitch",
options: {
modelName: 'switch',
activeText: "开关111",
inactiveText: "开关222",
loading: true,
},
},
{
id: 6,
label: "虚拟下拉列表",
name: "kdvselect",
options: {
modelName: 'vselect',
optionArr: [
{ value: "aaa", label: "aaa的文字" },
{ value: "bbb", label: "bbb的文字" },
{ value: "ccc", label: "ccc的文字" },
{ value: "ddd", label: "ddd的文字" },
],
style: "width: 240px; margin-right: 16px; vertical-align: middle",
},
},
{
id: 7,
label: "时间选择器",
name: "kdtimepicker",
options: {
modelName: 'timepicker'
},
},
],
});
export default config;3、参数
a、config = {}
属性 描述 默认值
labelWidth： 文字的宽度
labelPosition： 文字的位置
rules： 验证的规则
ref： 绑定表单
formItemArr： 表单的每一项 [] item = {}
id: 标识 1
label: 文字内容 '客户端',
prop: rules验证规则的属性 'tenantId',
name: 表单组件的名字 'kdinput',
options: { 传入组件的参数
// input 类型
placeholder 文字提示 ''
size 尺寸 default
clearable 是否一键清除 false
disabled 是否禁用 false
type input类型 text
maxlength 最大长度 --
minlength 最小长度 --
show-word-limit 是否显示统计字数 false
show-password 是否显示切换密码图标 false
prefix-icon 自定义前缀图标 --
suffix-icon 自定义后缀图标 --
rows 输入框行数，仅 type 为 2
'textarea' 时有效
readonly 是否只读 false
autofocus 自动获取焦点 false
autosize extarea 高度是否自适应， false或{}
仅 type 为 'textarea' 时生效。
// inputnumber 类型
step 步数 1
min 最小值 Infinity
max 最大值 Infinity
step-strictly 是否只能输入 step 的倍数 false
precision 数值精度 --
size 尺寸 default
disabled 是否禁用 false
controls 是否使用控制按钮 true
controls-position 控制按钮位置 -- right
label 输入框关联的 label 文字 --
readonly 是否只读 false
placeholder 文字提示 --
name 等价于原生 input name 属性 --
// radio-group类型
size 尺寸 default
disabled 禁用 false
text-color 文字激活时的颜色 #ffffff
fill 激活时的填充色和边框色 #409EFF
validate-event 输入时是否触发表单的校验
optionsArr={ radio标签上的配置
lable 选中项绑定值 --
disabled 是否禁用单选框 false
border 是否显示边框 false
size Radio 的尺寸 --
name 原生 name 属性 --
}0.0.1
2 years ago